网站建设SEO优化,请将网站首页底部的备案号,食品网站建设项目的预算,企业erp系统【云岚到家-即刻体检】-day07-2-项目介绍及准备 1 项目介绍1#xff09;项目简介2#xff09;界面原型3#xff09;实战目标 2 搭建实战环境1#xff09;服务端2#xff09;管理端前端工程3#xff09;用户端前端工程4#xff09;测试 3 熟悉项目代码1#xff09;接口文… 【云岚到家-即刻体检】-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: customertoken-key:1: customer2: customer3: customer4: operationoperation-jwt-tool-key: operationcustomer-jwt-tool-key: customertrade:aliEnterpriseId: 2088241317544335wechatEnterpriseId: 1561414331job:refundOrderCount: 100overTimePayOrderCount: 100
xxl-job:port: 216002管理端前端工程
下边部署管理端(前端)部署完成通过浏览器运行。
从课程资料下的“即刻体检项目实战”目录中获取前端代码压缩包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 version1.0 encodingUTF-8?
!DOCTYPE mapper PUBLIC -//mybatis.org//DTD Mapper 3.0//EN http://mybatis.org/dtd/mybatis-3-mapper.dtd
mapper namespacecom.jzo2o.health.mapper.SetmealMapperselect idfindDetail resultMapSetmealDetailMapSELECTs.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 idSetmealDetailMap typecom.jzo2o.health.model.dto.response.SetmealDetailResDTO!--id映射主键字段--id columnid propertyid/id!--result映射普通字段--result columnname propertyname/resultresult columnsex propertysex/resultresult columnage propertyage/resultresult columnprice propertyprice/resultresult columnimg propertyimg/resultresult columnremark propertyremark/result!--column 数据库中的字段名--!--property 实体类中对应的属性 该关键字可以省略... --!--ofType 是javaType中的单个对象类型--collection propertycheckGroupList resultMapCheckGroupDetailMap/collection/resultMap!--手动的映射--resultMap idCheckGroupDetailMap typecom.jzo2o.health.model.dto.response.CheckGroupDetailResDTO!--id映射主键字段--id columngroup_id propertyid/id!--result映射普通字段--result columngroup_name propertyname/result!--column 数据库中的字段名--!--property 实体类中对应的属性 该关键字可以省略... --!--ofType 是javaType中的单个对象类型--collection propertycheckItemList ofTypecom.jzo2o.health.model.dto.response.CheckItemResDTOid columnitem_id propertyid/idresult columnitem_name propertyname/result/collection/resultMap
/mapper
通过代码找到对应的表如下
检查项最细粒度的检查项目如身高、体重。
检查组多个检查项形成一个检查组如视力色觉检查组包含裸视力右、裸视力左等等检查项。
套餐多个检查组形成一个套餐如入职体检套餐包含视力色觉检查组、血常规检查组等等。
检查项与检查组之间是多对多关系。
检查组和套餐之间是多对多关系。
