《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.html3.3 系统主要工作流程设计以「新增评价」为例3.4 系统主要数据流程设计3.5 数据库设计数据库名mybatis字符集 utf8mb4。核心四张表1department 科室表字段类型说明idint PK 自增科室IDnamevarchar(20)科室名称descriptionvarchar(200)科室描述create_time / update_timedatetime创建/更新时间2doctor 医生表字段类型说明idint PK 自增医生IDnamevarchar(10)姓名gendertinyint1男 2女titlevarchar(20)职称dept_idint所属科室ID外键imagevarchar(100)头像phonevarchar(11)电话descriptionvarchar(300)简介3appointment 预约表字段类型说明idint PK 自增预约IDpatient_namevarchar(10)患者姓名patient_phonevarchar(11)患者电话doctor_idint预约医生IDappointment_datedate预约日期statustinyint0待确认 1已确认 2已完成 3已取消remarkvarchar(200)备注4review 患者评价表字段类型说明idint PK 自增评价IDdoctor_idint被评价医生IDpatient_namevarchar(10)患者姓名ratingtinyint评分 1-5contentvarchar(500)评价内容create_timedatetime创建时间建表与测试数据见 dental_clinic.sql、review.sql。3.6 其他设计编码设计等状态编码预约 status0待确认/1已确认/2已完成/3已取消、性别 gender1男/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.properties4. 启动与访问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未做工程化打包图片上传与回显未完整实现权限控制管理员登录尚未加入后续可补充。
《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.html3.3 系统主要工作流程设计以「新增评价」为例3.4 系统主要数据流程设计3.5 数据库设计数据库名mybatis字符集 utf8mb4。核心四张表1department 科室表字段类型说明idint PK 自增科室IDnamevarchar(20)科室名称descriptionvarchar(200)科室描述create_time / update_timedatetime创建/更新时间2doctor 医生表字段类型说明idint PK 自增医生IDnamevarchar(10)姓名gendertinyint1男 2女titlevarchar(20)职称dept_idint所属科室ID外键imagevarchar(100)头像phonevarchar(11)电话descriptionvarchar(300)简介3appointment 预约表字段类型说明idint PK 自增预约IDpatient_namevarchar(10)患者姓名patient_phonevarchar(11)患者电话doctor_idint预约医生IDappointment_datedate预约日期statustinyint0待确认 1已确认 2已完成 3已取消remarkvarchar(200)备注4review 患者评价表字段类型说明idint PK 自增评价IDdoctor_idint被评价医生IDpatient_namevarchar(10)患者姓名ratingtinyint评分 1-5contentvarchar(500)评价内容create_timedatetime创建时间建表与测试数据见 dental_clinic.sql、review.sql。3.6 其他设计编码设计等状态编码预约 status0待确认/1已确认/2已完成/3已取消、性别 gender1男/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.properties4. 启动与访问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未做工程化打包图片上传与回显未完整实现权限控制管理员登录尚未加入后续可补充。
