Vue--》打造个性化医疗服务的医院预约系统（三）

**Vue——打造个性化医疗服务的医院预约系统（三）**

在前两篇文章中，我们已经介绍了如何使用 Vue.js 构建一个基本的医院预约系统。然而，为了让我们的系统更具个性化和实用性，我们需要进一步扩展其功能。

**一、添加用户管理模块**

首先，让我们添加一个用户管理模块，这样我们就可以为每位患者创建一个账号，并且能够管理他们的个人信息。

html<!-- User.vue -->
<template>
 <div>
 <h1>用户管理</h1>
 <form @submit.prevent="handleSubmit">
 <label for="username">用户名:</label>
 <input type="text" id="username" v-model="username" />
 

 <label for="password">密码:</label>
 <input type="password" id="password" v-model="password" />
 

 <button type="submit">注册</button>
 </form>
 </div>
</template>

<script>
export default {
 data() {
 return {
 username: '',
 password: ''
 }
 },
 methods: {
 handleSubmit() {
 // 发送请求到后端创建用户 axios.post('/api/users', { username, password })
 .then(response => {
 console.log(response.data)
 })
 .catch(error => {
 console.error(error)
 })
 }
 }
}
</script>

javascript// server.jsconst express = require('express')
const app = express()
const axios = require('axios')

app.post('/api/users', (req, res) => {
 const { username, password } = req.body // 创建用户逻辑 res.json({ message: '用户创建成功' })
})

app.listen(3000, () => {
 console.log('Server listening on port3000')
})

html<!-- Appointment.vue -->
<template>
 <div>
 <h1>预约管理</h1>
 <form @submit.prevent="handleSubmit">
 <label for="patientName">患者姓名:</label>
 <input type="text" id="patientName" v-model="patientName" />
 

 <label for="doctorName">医生姓名:</label>
 <input type="text" id="doctorName" v-model="doctorName" />
 

 <button type="submit">预约</button>
 </form>
 </div>
</template>

<script>
export default {
 data() {
 return {
 patientName: '',
 doctorName: ''
 }
 },
 methods: {
 handleSubmit() {
 // 发送请求到后端创建预约 axios.post('/api/appointments', { patientName, doctorName })
 .then(response => {
 console.log(response.data)
 })
 .catch(error => {
 console.error(error)
 })
 }
 }
}
</script>

javascript// server.jsconst express = require('express')
const app = express()
const axios = require('axios')

app.post('/api/appointments', (req, res) => {
 const { patientName, doctorName } = req.body // 创建预约逻辑 res.json({ message: '预约创建成功' })
})

app.listen(3000, () => {
 console.log('Server listening on port3000')
})

html<!-- PersonalizedService.vue -->
<template>
 <div>
 <h1>个性化服务</h1>
 <form @submit.prevent="handleSubmit">
 <label for="patientName">患者姓名:</label>
 <input type="text" id="patientName" v-model="patientName" />
 

 <label for="serviceType">服务类型:</label>
 <select id="serviceType" v-model="serviceType">
 <option value="健康检查">健康检查</option>
 <option value="疾病治疗">疾病治疗</option>
 <option value="康复治疗">康复治疗</option>
 </select>
 

 <button type="submit">申请服务</button>
 </form>
 </div>
</template>

<script>
export default {
 data() {
 return {
 patientName: '',
 serviceType: ''
 }
 },
 methods: {
 handleSubmit() {
 // 发送请求到后端申请个性化服务 axios.post('/api/personalized-services', { patientName, serviceType })
 .then(response => {
 console.log(response.data)
 })
 .catch(error => {
 console.error(error)
 })
 }
 }
}
</script>

javascript// server.jsconst express = require('express')
const app = express()
const axios = require('axios')

app.post('/api/personalized-services', (req, res) => {
 const { patientName, serviceType } = req.body //申请个性化服务逻辑 res.json({ message: '个性化服务申请成功' })
})

app.listen(3000, () => {
 console.log('Server listening on port3000')
})