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

1 项目介绍
- 1）项目简介
- 2）界面原型
- 3）实战目标
2 搭建实战环境
- 1）服务端
- 2）管理端前端工程
- 3）用户端前端工程
- 4）测试
3 熟悉项目代码
- 1）接口文档
- 2）登录接口
- 3) 套餐查询

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>