【云岚到家-即刻体检】-day07-2-项目介绍及准备

---

1 项目介绍

1）项目简介

即刻体检是一个健康体检预约服务平台，其主要功能包含：套餐管理、订单管理、用户预约等功能。该项目分为管理端（PC）和用户端(H5)。管理端主要用于管理人员进行预约设置、订单信息管理，用户端主要用于用户查询套餐、预约下单、查询订单。

系统结构图如下：

业务流程：

体检预约详细流程：

2）界面原型

本次实战的核心是预约下单、支付流程，下边介绍与其相关核心功能的界面原型，以便于理解项目的核心业务流程。

1. 套餐查询

用户首次进入用户端首页，如图展示以下模块：

点击“体检预约”查看热门套餐列表，如下图：

选择需要的体检套餐，点击查看套餐详情，如下图：

2. 预约设置

管理端进行预约设置，填写预约人数。

3. 用户端下单

在体检套餐界面，点击“立即预约”即可填写体检各项信息进行下单。

首先选择好套餐，填写预约信息：

点击“体检日期”需要选择可以预约的日期（即显示“充足”的日期）：

填写完成，点击“支付并预约”即可完成下单：

点击“支付并预约”，如下图：

选择任意支付渠道后，会生成支付二维码，用户需扫码支付，如下图：

注意：这里是为了方便学习使用了扫码支付，实际项目使用的是H5支付。

用户扫码支付完成后，需要点击“支付完成”，后端查询支付结果进行确认：

支付结果被确认成功后，跳转到支付成功页面：

用户进入“我的订单”查询订单

点击订单名称查看订单详情

管理端进入订单管理查询订单：

3）实战目标

1. 项目边界

作为教学实战项目仅提供与实战内容相关的前端及后端代码。

前端：

管理端：包括预约管理（支持导入方式进行预约设置、预约设置查询、预约设置）、订单管理（订单列表查询、订单详情查询、根据状态统计订单数量）。

用户端：套餐查询、预约下单、生成支付二维码、确认支付结果、我的订单列表查询、订单详情查询、订单取消。

后端：

实战前提供项目原始工程：包括套餐查询接口涉及的代码、所有接口文档。

实战完成评比后提供完整的代码。

2. 实战目标

通过实战进一步提高下单支付业务的设计及开发能力，积累开发经验。

实战内容边界：

前端工程：无需开发。

后端工程：除了已提供的代码以外，剩余代码均需要开发，参考后边的实战章节内容进行分析、开发、测试。

2 搭建实战环境

1）服务端

即刻体检项目依赖家政项目的网关（jzo2o-gateway）、支付服务（jzo2o-trade）、公共服务（jzo2o-publics），具体如下：

下单支付依赖支付服务（jzo2o-trade）。

验证码依赖公共服务（jzo2o-publics）。

如下图：

下边部署后端服务：

首先创建体检项目的数据库jzo2o-health，从课程资料下的“即刻体检项目实战”目录获取jzo2o-health-init.sql，并导入数据库，导入后数据库结构如下图：

注意：不要手动修改表中的数据，以免影响实战。

数据库创建完成，下边导入Java工程.

首先创建Git远程仓库：jzo2o-health

从课程资料下的“即刻体检项目实战”目录获取jzo2o-health-01-0.zip，解压到自己的代码目录下。

将jzo2o-health目录上传到Git仓库：

进入jzo2o-health目录执行下边的命令：

git init 
git add .
git commit -m "初始项目工程"
git remote add origin git仓库地址
git push -u origin "master"

使用IDEA打开jzo2o-health目录，熟悉代码。

下边在nacos创建配置jzo2o-health.yaml文件

进入nacos创建jzo2o-health.yaml

注意：选择namespace为“75a593f5-33e6-4c65-b2a0-18c403d20f63”的命名空间添加配置文件 。

jzo2o:jwt-key: customertoken-key:"1": customer"2": customer"3": customer"4": operationoperation-jwt-tool-key: operationcustomer-jwt-tool-key: customertrade:aliEnterpriseId: 2088241317544335wechatEnterpriseId: 1561414331job:refundOrderCount: 100overTimePayOrderCount: 100
xxl-job:port: 21600

2）管理端前端工程

下边部署管理端(前端)，部署完成通过浏览器运行。

从课程资料下的“即刻体检项目实战”目录中获取前端代码压缩包project-jktj-admin-vue3-java.zip，并解压到自己的代码目录中

首先需要配置网关地址：

修改~\``project-jktj-admin-vue3-java``\vite.config.ts 文件配置网关地址，如下图：

修改红框内的ip地址为本地局域网IP地址。

修改~\project-jktj-admin-vue3-java\src\config\proxy.ts 文件中的ip地址为本地局域网IP地址，如下图：

在根目录下使用cmd，执行部署命令：

npm run dev

如果直接运行上边的命令不行，通过下边命令操作：

1、删除node_modules目录

2、执行下边的命令

npm install
npm run dev

接下来浏览器中会自动打开管理端登录页面，如下图：

3）用户端前端工程

下边部署用户端(前端)，部署完成通过浏览器运行。

从课程资料下的“即刻体检项目实战”目录中获取前端代码压缩包project-jktj-H5-uniapp-java.zip，并解压到自己的代码目录中

首先需要配置网关地址，修改根目录下vite.config.js文件，如下图：

修改红框内的ip地址为本地局域网IP地址。

在根目录下使用cmd，执行部署命令：

cnpm run dev:h5

如果直接运行上边的命令不行，通过下边命令操作：

1、删除node_modules目录

2、执行下边的命令

npm install
cnpm run dev:h5

接下来需要浏览器中输入localhost:8000手动打开用户端首页，如下图：

注意：为了适配手机大小，需要按“F12”打开开发者调试窗口，点击右侧红框，切换为手机页面适配，并可以切换不同尺寸手机

4）测试

启动jzo2o-gateway网关

启动jzo2o-publics公共服务

启动jzo2o-health体检服务

启动管理端（前端）

启动用户端（前端）

首先测试管理端：

进入登录页面，使用默认的账号和密码登录。

预期结果：登录成功进入下边的界面

测试用户端：

进入用户端，点击登录按钮进行登录

对18888888888发送验证码，验证码为123456

成功登录后

3 熟悉项目代码

1）接口文档

本项目初始工程代码包括了登录、套餐查询接口，下边熟悉项目已有的代码及设计。

首先阅读接口文档，根据接口文档内容去阅读代码。

接口文档地址：http://localhost:21500/health/doc.html#/home

2）登录接口

找到登录接口文档

找到对应的代码

1. 管理员登录：

管理员进入前端登录界面

输入账号和密码：

账号：demo

密码：888itcast.CN764%…

在前端界面默认了demo账号和密码。

点击登录：

请求管理登录接口，执行下边的service方法。

2. 用户登录

用户进入前端登录界面

首先获取验证码，请求publics服务（ /publics/sms-code/send） 获取验证码。

请求下边的参数：

这里为了测试方便已将publics服务发送验证码改为固定发送123456。

点击“登录”请求普通用户登录接口，请求下边的service方法

执行流程是：

先校验验证码是否为空，校验验证码的正确性。

再判断手机号是否存在，如果不存在则自动注册。

最后生成令牌。

3) 套餐查询

我们查看用户端套餐查询相关接口。

找到接口文档：

找到对应的代码

获取所有套餐信息：

进入用户端首页，点击“体检预约”进入套餐查询界面

通过查阅代码，套餐信息来源setmeal表。

获取所有套餐接口将该表的所有记录全部查出。

根据id查询套餐信息：

点击“套餐名称”请求根据id查询套餐信息接口。

找到service方法

继续找到持久层方法

下边的方法通过两次一对多映射最终拿到套餐信息：

套餐下边的检查组信息

检查组下边的检查项目信息

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.jzo2o.health.mapper.SetmealMapper"><select id="findDetail" resultMap="SetmealDetailMap">SELECTs.id AS id,s.name AS name,s.sex,s.age,s.price,s.img,s.remark,g.id AS group_id,g.name AS group_name,i.id AS item_id,i.name AS item_nameFROMsetmeal AS sLEFT JOIN setmeal_checkgroup ON setmeal_checkgroup.setmeal_id = s.idLEFT JOIN checkgroup AS g ON setmeal_checkgroup.checkgroup_id = g.idLEFT JOIN checkgroup_checkitem ON checkgroup_checkitem.checkgroup_id = g.idLEFT JOIN checkitem AS i ON checkgroup_checkitem.checkitem_id = i.idWHEREs.id = #{id}</select><!--手动的映射--><resultMap id="SetmealDetailMap" type="com.jzo2o.health.model.dto.response.SetmealDetailResDTO"><!--id映射主键字段--><id column="id" property="id"></id><!--result映射普通字段--><result column="name" property="name"></result><result column="sex" property="sex"></result><result column="age" property="age"></result><result column="price" property="price"></result><result column="img" property="img"></result><result column="remark" property="remark"></result><!--column 数据库中的字段名--><!--property 实体类中对应的属性 该关键字可以省略... --><!--ofType 是javaType中的单个对象类型--><collection property="checkGroupList"  resultMap="CheckGroupDetailMap"></collection></resultMap><!--手动的映射--><resultMap id="CheckGroupDetailMap" type="com.jzo2o.health.model.dto.response.CheckGroupDetailResDTO"><!--id映射主键字段--><id column="group_id" property="id"></id><!--result映射普通字段--><result column="group_name" property="name"></result><!--column 数据库中的字段名--><!--property 实体类中对应的属性 该关键字可以省略... --><!--ofType 是javaType中的单个对象类型--><collection property="checkItemList"  ofType="com.jzo2o.health.model.dto.response.CheckItemResDTO"><id column="item_id" property="id"></id><result column="item_name" property="name"></result></collection></resultMap>
</mapper>

通过代码找到对应的表，如下：

检查项：最细粒度的检查项目，如身高、体重。

检查组：多个检查项形成一个检查组，如视力色觉检查组包含裸视力（右）、裸视力（左）等等检查项。

套餐：多个检查组形成一个套餐，如入职体检套餐包含视力色觉检查组、血常规检查组等等。

检查项与检查组之间是多对多关系。

检查组和套餐之间是多对多关系。