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

news2024/11/24 9:20:39

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

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

1 项目介绍

1）项目简介

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

系统结构图如下：

在这里插入图片描述

业务流程：

在这里插入图片描述

体检预约详细流程：

在这里插入图片描述

2）界面原型

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

  1. 套餐查询

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

  1. 预约设置

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

在这里插入图片描述

  1. 用户端下单

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

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

3）实战目标

  1. 项目边界

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

前端：

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

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

后端：

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

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

  1. 实战目标

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

实战内容边界：

前端工程：无需开发。

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

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）登录接口

找到登录接口文档

在这里插入图片描述

找到对应的代码

在这里插入图片描述

  1. 管理员登录：

管理员进入前端登录界面

在这里插入图片描述

输入账号和密码：

账号：demo

密码：888itcast.CN764%…

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

点击登录：

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

在这里插入图片描述

  1. 用户登录

用户进入前端登录界面
在这里插入图片描述
首先获取验证码，请求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>

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

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

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

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

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

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

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2142870.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Linux操作系统面试题记录

Linux操作系统面试题记录

一、进程与线程 1.并发和并行的区别 并发&#xff1a;一个cpu处理器处理多个任务&#xff1b; 并行&#xff1a;多个cpu处理器处理多个任务&#xff1b; 2.进程和线程是什么&#xff1f;区别&#xff1f;何时用线程何时用进程&#xff1f; Linux中其实没有进程线程之分&…
阅读更多...
面试官：讲一讲Spring MVC源码解析

面试官：讲一讲Spring MVC源码解析

好看的皮囊千篇一律、有趣的灵魂万里挑一 文章持续更新&#xff0c;可以微信搜索【小奇JAVA面试】第一时间阅读&#xff0c;回复【资料】获取福利&#xff0c;回复【项目】获取项目源码&#xff0c;回复【简历模板】获取简历模板&#xff0c;回复【学习路线图】获取学习路线图。…
阅读更多...
驱动器磁盘未格式化恢复实战

驱动器磁盘未格式化恢复实战

驱动器磁盘未格式化的深度剖析 在日常的数字生活中&#xff0c;驱动器作为数据存储的重要载体&#xff0c;承载着用户无数的珍贵资料。然而&#xff0c;当遇到“驱动器中的磁盘未被格式化”的提示时&#xff0c;这份平静往往会被瞬间打破。这一状况不仅让用户感到困惑和焦虑&a…
阅读更多...
JZ2440开发板——S3C2440的UART的使用

JZ2440开发板——S3C2440的UART的使用

以下内容源于韦东山课程的学习与整理&#xff0c;如有侵权请告知删除。 一、UART硬件简介 UART&#xff0c;全称是“Universal Asynchronous Receiver Transmitter”&#xff0c;即“通用异步收发器”&#xff0c;也就是我们日常说的“串口”。 它在嵌入式中用途非常广泛&…
阅读更多...
LabVIEW提高开发效率技巧----VI服务器和动态调用

LabVIEW提高开发效率技巧----VI服务器和动态调用

VI服务器&#xff08;VI Server&#xff09;和动态调用是LabVIEW中的两个重要功能&#xff0c;可以有效提升程序的灵活性、模块化和可扩展性。通过这两者的结合&#xff0c;开发者可以在运行时动态加载和调用VI&#xff08;虚拟仪器&#xff09;&#xff0c;实现更为复杂的应用…
阅读更多...
【 html+css 绚丽Loading 】 000052 璇玑转轮

【 html+css 绚丽Loading 】 000052 璇玑转轮

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;今天给大家分享今天给大家分享一篇文章&#xff01;并提供具体代码帮助大家深入理解&#xff0c;彻底掌握&#xff01;创作不易&#xff0c;如果能帮助到大家或者给大家一些灵感和启发&#xff0c;欢迎收藏关注哦 &#x1f…
阅读更多...
实时数仓3.0DWD层

实时数仓3.0DWD层

实时数仓3.0DWD层 DWD层设计要点&#xff1a;9.1 流量域未经加工的事务事实表9.1.1 主要任务9.1.2 思路9.1.3 图解9.1.4 代码 9.2 流量域独立访客事务事实表9.2.1 主要任务9.2.2 思路分析9.2.3 图解9.2.4 代码 9.3 流量域用户跳出事务事实表9.3.1 主要任务9.3.2 思路分析9.3.3 …
阅读更多...
全面掌握 Jest：从零开始的测试指南（下篇）

全面掌握 Jest：从零开始的测试指南（下篇）

在上一篇测试指南中&#xff0c;我们介绍了Jest 的背景、如何初始化项目、常用的匹配器语法以及钩子函数的使用。这一篇篇将继续深入探讨 Jest 的高级特性&#xff0c;包括 Mock 函数、异步请求的处理、Mock 请求的模拟、类的模拟以及定时器的模拟、snapshot 的使用。通过这些技…
阅读更多...
办了房屋抵押经营贷，空壳公司不怕被查吗？续贷不上怎么办？

办了房屋抵押经营贷，空壳公司不怕被查吗？续贷不上怎么办？

很多有房的朋友&#xff0c;想必都办理过抵押经营贷款。但是&#xff0c;当办完房屋抵押经营贷款之后&#xff0c;钱到手了&#xff0c;别光顾着乐呵&#xff0c;贷后管理可是门大学问&#xff0c;稍有不慎&#xff0c;麻烦就找上门了。咱得确保资金用得对路&#xff0c;征信亮…
阅读更多...
windows 使用wsl安装docker

windows 使用wsl安装docker

前言 很多情况下代码开发需要依赖 Linux 系统&#xff0c;比如安装 Docker 容器来实现代码隔离&#xff0c;然而问题是大部分同学的电脑都是 Windows 系统&#xff0c;这时就会出现大量报错&#xff0c;经历过的同学一定是边踩坑边落泪。 如何免费拥有一台 Linux 服务器呢&…
阅读更多...
什么是即时通讯平台

什么是即时通讯平台

在当今数字化时代&#xff0c;高效的沟通和协作是企业成功的关键。为了满足企业的沟通需求&#xff0c;即时通讯平台应运而生。WorkPlus作为一款企业级即时通讯平台&#xff0c;提供了丰富的功能和安全性&#xff0c;助力企业实现高效协作、数字化办公以及推动业务发展。本文将…
阅读更多...
为什么直播要用RTMP？

为什么直播要用RTMP？

为什么要选RTMP 直播使用RTMP&#xff08;Real-Time Messaging Protocol&#xff09;协议的原因主要有以下几点&#xff1a; 1. 低延迟特性 RTMP被设计为实时消息传递协议&#xff0c;通过优化传输机制&#xff0c;可以实现较低的传输延迟。这对于直播来说至关重要&#xff…
阅读更多...
LeetCode_sql_day26（184，1549，1532，1831）

LeetCode_sql_day26（184，1549，1532，1831）

描述 184.部门工资最高的员工 表&#xff1a; Employee ----------------------- | 列名 | 类型 | ----------------------- | id | int | | name | varchar | | salary | int | | departmentId | int | -----------------…
阅读更多...
22章 开发高效算法

22章 开发高效算法

1.编写一个程序&#xff0c;提示用户输入一个字符串&#xff0c;然后显示最大连续递增的有序子字符串。分析你的程序的时间复杂度。 import java.util.Scanner;public class Test {public static void main(String[] args) {System.out.println("请输入字符串&#xff1a…
阅读更多...
这个公司可以做点什么呢？

这个公司可以做点什么呢？

我是穿拖鞋的汉子&#xff0c;魔都中坚持长期主义的汽车电子工程师。 老规矩&#xff0c;分享一段喜欢的文字&#xff0c;避免自己成为高知识低文化的工程师&#xff1a; 屏蔽力是信息过载时代一个人的特殊竞争力&#xff0c;任何消耗你的人和事&#xff0c;多看一眼都是你的不…
阅读更多...
国学盛典 致敬先贤 《老子与道德经》纪录片研讨会在北京善品堂国学馆圆满落幕

国学盛典 致敬先贤 《老子与道德经》纪录片研讨会在北京善品堂国学馆圆满落幕

9月10日&#xff0c;《老子与道德经》纪录片研讨会在北京善品堂国学馆圆满落幕。中国著名表演艺术家、曾饰演央视86版电视剧《西游记》中“孙悟空”的六小龄童先生与两百余人传统文化传播者、践行者、爱好者齐聚一堂&#xff0c;共同交流。本次会议由中国文化促进会福文化工作委…
阅读更多...
python-在PyCharm中使用PyQt5

python-在PyCharm中使用PyQt5

文章目录 1. 安装 PyQt5 和QtTools2. QtDesigner 和 PyUIC 的环境配置2.1 在 PyCharm 添加 Create Tools2.2 添加 PyUIC 工具 3. 创建ui界面4. 使用python调用ui界面参考文献 1. 安装 PyQt5 和QtTools QT 是最强大的 GUI 库之一&#xff0c;PyQt5 是 Python 绑定 QT5 应用的框…
阅读更多...
phpstudy 建站使用 php8版本打开 phpMyAdmin后台出现网页提示致命错误：（phpMyAdmin这是版本问题导致的）

phpstudy 建站使用 php8版本打开 phpMyAdmin后台出现网页提示致命错误：（phpMyAdmin这是版本问题导致的）

报错提示&#xff1a; 解决方法&#xff1a;官网下载phpmyadmin 5.2.1版本。 下载地址&#xff1a;phpMyAdmin 将网站根目录phpMyAdmin4.8.5里面的文件换成 官网下载的5.2.1版本即可。 重启网站&#xff0c;打开phpMyAdmin后台即可&#xff08;若打不开更改 mysql密码即可&am…
阅读更多...
传知代码-KAN卷积：医学图像分割新前沿

传知代码-KAN卷积：医学图像分割新前沿

代码以及视频讲解 本文所涉及所有资源均在传知代码平台可获取 概述 在本文中深入探讨KAN卷积在医学图像分割领域的创新应用&#xff0c;特别是通过引入Tokenized KAN Block&#xff08;Tok Kan&#xff09;这一突破性设计&#xff0c;将深度学习中的图像分割技术推向了新的高…
阅读更多...
代理导致的git错误

代理导致的git错误

问题&#xff1a; 今天在clone时出现如下错误&#xff1a; fatal: unable to access https://github.com/NirDiamant/RAG_Techniques.git/: Failed to connect to 127.0.0.1 port 10089 after 2065 ms: Couldnt connect to server真是让人感到奇怪&#xff01;就在前天&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023