用vue3写一个挂号系统
时间: 2024-05-29 18:03:44 浏览: 11
好的,下面是一个简单的挂号系统的 Vue 3 实现,包含了医生列表、病人列表、挂号表单等组件。
首先,我们需要创建一个 Vue 3 项目并安装一些必要的依赖:
```
vue create registration-system
cd registration-system
npm install --save axios
```
然后,我们可以在 `src/components` 目录下创建三个组件文件:`DoctorList.vue`、`PatientList.vue` 和 `RegistrationForm.vue`。
`DoctorList.vue` 组件用于显示医生列表,代码如下:
```html
<template>
<div>
<h2>医生列表</h2>
<ul>
<li v-for="doctor in doctors" :key="doctor.id">
{{ doctor.name }} - {{ doctor.specialty }}
</li>
</ul>
</div>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
doctors: [],
};
},
mounted() {
axios.get("https://example.com/api/doctors").then((response) => {
this.doctors = response.data;
});
},
};
</script>
```
`PatientList.vue` 组件用于显示病人列表,代码如下:
```html
<template>
<div>
<h2>病人列表</h2>
<ul>
<li v-for="patient in patients" :key="patient.id">
{{ patient.name }} - {{ patient.age }}
</li>
</ul>
</div>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
patients: [],
};
},
mounted() {
axios.get("https://example.com/api/patients").then((response) => {
this.patients = response.data;
});
},
};
</script>
```
`RegistrationForm.vue` 组件用于显示挂号表单,代码如下:
```html
<template>
<div>
<h2>挂号表单</h2>
<form @submit.prevent="submitForm">
<label for="doctor">选择医生:</label>
<select id="doctor" v-model="doctorId">
<option v-for="doctor in doctors" :key="doctor.id" :value="doctor.id">
{{ doctor.name }} - {{ doctor.specialty }}
</option>
</select>
<br />
<label for="patient">选择病人:</label>
<select id="patient" v-model="patientId">
<option v-for="patient in patients" :key="patient.id" :value="patient.id">
{{ patient.name }} - {{ patient.age }}
</option>
</select>
<br />
<button type="submit">提交</button>
</form>
</div>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
doctorId: null,
patientId: null,
doctors: [],
patients: [],
};
},
mounted() {
axios.get("https://example.com/api/doctors").then((response) => {
this.doctors = response.data;
});
axios.get("https://example.com/api/patients").then((response) => {
this.patients = response.data;
});
},
methods: {
submitForm() {
axios
.post("https://example.com/api/registrations", {
doctorId: this.doctorId,
patientId: this.patientId,
})
.then((response) => {
alert("挂号成功!");
})
.catch((error) => {
alert("挂号失败:" + error.message);
});
},
},
};
</script>
```
最后,我们需要在 `App.vue` 组件中引入这三个组件并渲染它们:
```html
<template>
<div>
<DoctorList />
<PatientList />
<RegistrationForm />
</div>
</template>
<script>
import DoctorList from "./components/DoctorList.vue";
import PatientList from "./components/PatientList.vue";
import RegistrationForm from "./components/RegistrationForm.vue";
export default {
components: {
DoctorList,
PatientList,
RegistrationForm,
},
};
</script>
```
现在我们就完成了一个简单的挂号系统,用户可以在表单中选择医生和病人,提交后会向服务器发送一个挂号请求,并显示成功或失败的提示。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)