实验报告
《Web应用技术》
课程设计报告
学 院: | 管理学院 |
专 业: | 香涛经管2301 |
学号姓名: | 刘泽阳（202305404203） |
指导教师: | |
日 期: | 2026.7.7 |
系统简介
1. 开发背景随着口腔医疗需求的增长，传统靠电话和前台排班的预约方式效率低、患者无法提前了解医生与科室信息。为此，本课程设计实现一个口腔诊所 Web 客户端，将科室介绍、医生展示、在线预约、患者评价整合到同一平台，作为《Web 应用技术》课程的综合实践。
2. 开发目的
掌握基于 SpringBoot + MyBatis 的三层架构 Web 开发方法；
实现一套完整的前后端增删改查（CRUD）功能；
理解 RESTful 接口设计、前后端分离与 IOC/DI 思想。
- 开发意义
系统既能作为诊所对外展示与预约的实用工具，也是验证课程所学（控制反转、依赖注入、MyBatis 持久层框架、Vue 前端框架）的完整载体，对理解企业级 Web 开发流程有直接帮助。
- 系统分析
2.1 现状及存在的不足
现状：多数小型诊所仍依赖电话预约，患者无法自助查询医生排班与专长；
不足：信息不透明、预约冲突靠人工协调、患者就诊后缺乏反馈渠道、管理端数据分散。
2.2功能需求
面向两类用户：
普通患者（前端展示页 index.html）：浏览科室与医生、在线提交预约、查看患者评价；
管理员（后台管理页 admin.html / reviews.html）：维护医生信息（增删改查）、处理预约（确认/完成/取消/删除）、管理患者评价（查询/新增/修改/删除）。
2.3 流程需求
患者预约流程：选科室 → 选医生 → 填信息 → 提交 → 管理员确认 → 完成/取消；
评价流程：患者提交评价 → 后台可查询、修改或删除不当内容。
2.4其他
非功能性需求：界面响应式、操作有二次确认、统一 JSON 返回格式（{code, data, msg}）。
三、系统设计
3.1 系统设计的目标
分层清晰：表现层 / 业务层 / 数据访问层解耦；
接口规范：RESTful 风格，统一返回结构；
易维护：注解方式开发 MyBatis，减少 XML 配置。
3.2 系统功能模块设计
模块 | 功能 | 对应页面 / 接口 |
科室管理 | 查询科室列表 | ClinicController /api/departments |
医生管理 | 医生增删改查 | ClinicController /api/doctors |
预约管理 | 预约增删改查、状态流转 | ClinicController /api/appointments |
评价管理 | 评价增删改查、按医生筛选 | ReviewController /api/reviews |
前端展示 | 首页/科室/医生/预约表单 | index.html |
后台管理 | 侧边栏导航 + 数据概览 | admin.html、reviews.html |
3.3 系统主要工作流程设计
以「新增评价」为例：
3.4 系统主要数据流程设计
3.5 数据库设计
数据库名：mybatis，字符集 utf8mb4。核心四张表：
（1）department 科室表
字段 | 类型 | 说明 |
id | int PK 自增 | 科室ID |
name | varchar(20) | 科室名称 |
description | varchar(200) | 科室描述 |
create_time / update_time | datetime | 创建/更新时间 |
（2）doctor 医生表
字段 | 类型 | 说明 |
id | int PK 自增 | 医生ID |
name | varchar(10) | 姓名 |
gender | tinyint | 1男 2女 |
title | varchar(20) | 职称 |
dept_id | int | 所属科室ID（外键） |
image | varchar(100) | 头像 |
phone | varchar(11) | 电话 |
description | varchar(300) | 简介 |
（3）appointment 预约表
字段 | 类型 | 说明 |
id | int PK 自增 | 预约ID |
patient_name | varchar(10) | 患者姓名 |
patient_phone | varchar(11) | 患者电话 |
doctor_id | int | 预约医生ID |
appointment_date | date | 预约日期 |
status | tinyint | 0待确认 1已确认 2已完成 3已取消 |
remark | varchar(200) | 备注 |
（4）review 患者评价表
字段 | 类型 | 说明 |
id | int PK 自增 | 评价ID |
doctor_id | int | 被评价医生ID |
patient_name | varchar(10) | 患者姓名 |
rating | tinyint | 评分 1-5 |
content | varchar(500) | 评价内容 |
create_time | datetime | 创建时间 |
建表与测试数据见 dental_clinic.sql、review.sql。
3.6 其他设计（编码设计等）
状态编码：预约 status（0待确认/1已确认/2已完成/3已取消）、性别 gender（1男/2女）；
接口规范：查询 GET、新增 POST、修改 PUT、删除 DELETE，资源路径统一 /api/xxx；
返回结构：统一 {code:200, data:..., msg:...}；
主键策略：所有表 id 均 AUTO_INCREMENT；
时间字段：create_time/update_time 由数据库 NOW() 或后端写入。
- 系统实现
- 系统部署说明
1. 环境配置
JD 1.8、MySQL 8.0、Maven（项目已含 Wrapper，无需单独安装）；
VSCod 安装插件：Extension Pack for Java、Spring Boot Extension Pack。
2. 数据库初始化
3. 数据源配置（application.properties）
4. 启动与访问
VSCode 打开 mybatis-demo 文件夹，等待 Maven 依赖下载；
运行 MybatisDemoApplication.java 的 main 方法；
浏览器访问：
前端展示：http://localhost:8080/index.html
后台管理：http://localhost:8080/admin.html
评价管理：http://localhost:8080/reviews.html
- 用户使用说明
患者端（index.html）
首页查看科室介绍与医生团队；
点击「在线预约」，选科室→选医生→填姓名电话→选日期→提交；
在评价区查看其他患者评价。
管理员端（admin.html/reviews.html）
侧切换「数据概览 / 医生管理 / 预约管理」；
医生管理：点「新增医生」填表保存，行内「编辑/删除」维护数据；
预约管理：按状态筛选，点「确认/完成/取消」流转，危险操作有二次确认；
评价管理：按医生筛选评价，可新增、编辑星级评分或删除不当评价。
- 课程设计小结
本系统的评价 系统完成了口腔诊所场景下科室、医生、预约、评价四类核心数据的完整 CRUD，采用标准三层架构与 RESTful 接口，前端基于 Element UI 实现友好交互。功能闭环、代码分层清晰，达到了课程设计预期目标。
课程设计的收获与不足
收获：真正理解了 IOC/DI 如何解耦对象创建、MyBatis 注解开发如何简化持久层、前后端分离与 RESTful 的设计思想；能独立从建表到页面跑通一个 Web 应用。
不足：前端仅用 CDN 引入 Vue/Element UI，未做工程化打包；图片上传与回显未完整实现；权限控制（管理员登录）尚未加入，后续可补充。