【云岚到家-即刻体检】-day07-2-项目介绍及准备
1 项目介绍
1）项目简介
即刻体检是一个健康体检预约服务平台，其主要功能包含：套餐管理、订单管理、用户预约等功能。该项目分为管理端（PC）和用户端(H5)。管理端主要用于管理人员进行预约设置、订单信息管理，用户端主要用于用户查询套餐、预约下单、查询订单。
系统结构图如下：
业务流程：
体检预约详细流程：
2）界面原型
本次实战的核心是预约下单、支付流程，下边介绍与其相关核心功能的界面原型，以便于理解项目的核心业务流程。
- 套餐查询
用户首次进入用户端首页，如图展示以下模块：
点击“体检预约”查看热门套餐列表，如下图：
选择需要的体检套餐，点击查看套餐详情，如下图：
- 预约设置
管理端进行预约设置，填写预约人数。
- 用户端下单
在体检套餐界面，点击“立即预约”即可填写体检各项信息进行下单。
首先选择好套餐，填写预约信息：
点击“体检日期”需要选择可以预约的日期（即显示“充足”的日期）：
填写完成，点击“支付并预约”即可完成下单：
点击“支付并预约”，如下图：
选择任意支付渠道后，会生成支付二维码，用户需扫码支付，如下图：
注意：这里是为了方便学习使用了扫码支付，实际项目使用的是H5支付。
用户扫码支付完成后，需要点击“支付完成”，后端查询支付结果进行确认：
支付结果被确认成功后，跳转到支付成功页面：
用户进入“我的订单”查询订单
点击订单名称查看订单详情
管理端进入订单管理查询订单：
3）实战目标
- 项目边界
作为教学实战项目仅提供与实战内容相关的前端及后端代码。
前端：
管理端：包括预约管理（支持导入方式进行预约设置、预约设置查询、预约设置）、订单管理（订单列表查询、订单详情查询、根据状态统计订单数量）。
用户端：套餐查询、预约下单、生成支付二维码、确认支付结果、我的订单列表查询、订单详情查询、订单取消。
后端：
实战前提供项目原始工程：包括套餐查询接口涉及的代码、所有接口文档。
实战完成评比后提供完整的代码。
- 实战目标
通过实战进一步提高下单支付业务的设计及开发能力，积累开发经验。
实战内容边界：
前端工程：无需开发。
后端工程：除了已提供的代码以外，剩余代码均需要开发，参考后边的实战章节内容进行分析、开发、测试。
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: customer
token-key:
"1": customer
"2": customer
"3": customer
"4": operation
operation-jwt-tool-key: operation
customer-jwt-tool-key: customer
trade:
aliEnterpriseId: 2088241317544335
wechatEnterpriseId: 1561414331
job:
refundOrderCount: 100
overTimePayOrderCount: 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）登录接口
找到登录接口文档
找到对应的代码
- 管理员登录：
管理员进入前端登录界面
输入账号和密码：
账号：demo
密码：888itcast.CN764%…
在前端界面默认了demo账号和密码。
点击登录：
请求管理登录接口，执行下边的service方法。
- 用户登录
用户进入前端登录界面
首先获取验证码，请求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">
SELECT
s.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_name
FROM
setmeal AS s
LEFT JOIN setmeal_checkgroup ON setmeal_checkgroup.setmeal_id = s.id
LEFT JOIN checkgroup AS g ON setmeal_checkgroup.checkgroup_id = g.id
LEFT JOIN checkgroup_checkitem ON checkgroup_checkitem.checkgroup_id = g.id
LEFT JOIN checkitem AS i ON checkgroup_checkitem.checkitem_id = i.id
WHERE
s.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>
通过代码找到对应的表，如下：
检查项：最细粒度的检查项目，如身高、体重。
检查组：多个检查项形成一个检查组，如视力色觉检查组包含裸视力（右）、裸视力（左）等等检查项。
套餐：多个检查组形成一个套餐，如入职体检套餐包含视力色觉检查组、血常规检查组等等。
检查项与检查组之间是多对多关系。
检查组和套餐之间是多对多关系。
