Sky-takeout Day01
【前言】
本节内容主要重点是搭建开发环境,重点是后端环境,会有一些坑(本文只提到了我遇到的)比如 Lombok 版本兼容问题、数据库账户密码设置问题。
前面两部分软件开发流程和项目介绍,都是黑马官方笔记 copy 来的,阅读了解一下即可,主要是一些概念。
其次关于 Nginx 的概念与作用、Swagger 的使用,个人认为最好熟悉一下。
此外,我在 contents 中提到的是官方课程目录,本文不一定全都有相关内容的覆盖,可自行前往课程了解学习。
Contents
软件开发流程介绍
- 开发流程
- 角色分工
- 三种软件环境
项目整体介绍
- 项目原型
- 技术选型
前后端环境搭建流程(完善登录功能)
- 熟悉项目结构
- Git 版本控制
- 数据库环境搭建
- 前后端联调, 断点调试,熟悉代码结构
- Nginx 反向代理、负载均衡相关知识
- 完善登录功能
Swagger 接口文档介绍
1. 软件开发流程介绍
开发流程
1). 第 1 阶段: 需求分析
完成需求规格说明书、产品原型编写。
需求规格说明书, 一般来说就是使用 Word 文档来描述当前项目的各个组成部分,如:系统定义、应用环境、功能规格、性能需求等,都会在文档中描述。
产品原型,一般是通过网页(html)的形式展示当前的页面展示什么样的数据, 页面的布局是什么样子的,点击某个菜单,打开什么页面,点击某个按钮,出现什么效果,都可以通过产品原型看到。
2). 第 2 阶段: 设计
设计的内容包含 UI 设计、数据库设计、接口设计。
UI 设计:用户界面的设计,主要设计项目的页面效果,小到一个按钮,大到一个页面布局,还有人机交互逻辑的体现。
数据库设计:需要设计当前项目中涉及到哪些数据库,每一个数据库里面包含哪些表,这些表结构之间的关系是什么样的,表结构中包含哪些字段。
接口设计:通过分析原型图,首先,粗粒度地分析每个页面有多少接口,然后,再细粒度地分析每个接口的传入参数,返回值参数,同时明确接口路径及请求方式。
3). 第 3 阶段: 编码
编写项目代码、并完成单元测试。
项目代码编写:软件开发工程师对项目的模块功能分析后,进行编码实现。
单元测试:编码实现完毕后,进行单元测试,单元测试通过后再进入到下一阶段。
4). 第 4 阶段: 测试
测试人员, 对部署在测试环境的项目进行功能测试, 并出具测试报告。
5). 第 5 阶段: 上线运维
在项目上线之前, 会由运维人员准备服务器上的软件环境安装、配置, 配置完毕后, 再将我们开发好的项目,部署在服务器上运行。
角色分工
| 岗位/角色 | 对应阶段 | 职责/分工 |
|---|---|---|
| 项目经理 | 全阶段 | 对整个项目负责,任务分配、把控进度 |
| 产品经理 | 需求分析 | 进行需求调研,输出需求调研文档、产品原型等 |
| UI 设计师 | 设计 | 根据产品原型输出界面效果图 |
| 架构师 | 设计 | 项目整体架构设计、技术选型等 |
| 开发工程师 | 编码 | 功能代码实现 |
| 测试工程师 | 测试 | 编写测试用例,输出测试报告 |
| 运维工程师 | 上线运维 | 软件环境搭建、项目上线 |
软件环境
开发环境(development)、测试环境(testing)、生产环境(production)。
首先,会在开发环境中进行项目开发,往往开发环境大多数都是本地的电脑环境和局域网内的环境,当开发完毕后,然后会把项目部署到测试环境,测试环境一般是一台独立测试服务器的环境,项目测试通过后,最终把项目部署到生产环境,生产环境可以是机房或者云服务器等线上环境。
2. 项目整体介绍
架构图
技术选型

1). 用户层
本项目中在构建系统管理后台的前端页面,我们会用到 H5、Vue.js、ElementUI、apache echarts(展示图表)等技术。而在构建移动端应用时,我们会使用到微信小程序。
2). 网关层
Nginx 是一个服务器,主要用来作为 Http 服务器,部署静态资源,访问性能高。在 Nginx 中还有两个比较重要的作用: 反向代理和负载均衡, 在进行项目部署时,要实现 Tomcat 的负载均衡,就可以通过 Nginx 来实现。
3). 应用层
SpringBoot: 快速构建 Spring 项目, 采用 “约定优于配置” 的思想, 简化 Spring 项目的配置开发。
SpringMVC:SpringMVC 是 spring 框架的一个模块,springmvc 和 spring 无需通过中间整合层进行整合,可以无缝集成。
Spring Task: 由 Spring 提供的定时任务框架。
httpclient: 主要实现了对 http 请求的发送。
Spring Cache: 由 Spring 提供的数据缓存框架
JWT: 用于对应用程序上的用户进行身份验证的标记。
阿里云 OSS: 对象存储服务,在项目中主要存储文件,如图片等。
Swagger: 可以自动的帮助开发人员生成接口文档,并对接口进行测试。
POI: 封装了对 Excel 表格的常用操作。
WebSocket: 一种通信网络协议,使客户端和服务器之间的数据交换更加简单,用于项目的来单、催单功能实现。
4). 数据层
MySQL: 关系型数据库, 本项目的核心业务数据都会采用 MySQL 进行存储。
Redis: 基于 key-value 格式存储的内存数据库, 访问速度快, 经常使用它做缓存。
Mybatis: 本项目持久层将会使用 Mybatis 开发。
pagehelper: 分页插件。
spring data redis: 简化 java 代码操作 Redis 的 API。
5). 工具
git: 版本控制工具, 在团队协作中, 使用该工具对项目中的代码进行管理。
maven: 项目构建工具。
junit:单元测试工具,开发人员功能实现完毕后,需要通过 junit 对功能进行单元测试。
postman: 接口测工具,模拟用户发起的各类 HTTP 请求,获取对应的响应结果。
产品原型
1). 管理端
餐饮企业内部员工使用。 主要功能有:
| 模块 | 描述 |
|---|---|
| 登录/退出 | 内部员工必须登录后, 才可以访问系统管理后台 |
| 员工管理 | 管理员可以在系统后台对员工信息进行管理,包含查询、新增、编辑、禁用等功能 |
| 分类管理 | 主要对当前餐厅经营的 菜品分类 或 套餐分类 进行管理维护, 包含查询、新增、修改、删除等功能 |
| 菜品管理 | 主要维护各个分类下的菜品信息,包含查询、新增、修改、删除、启售、停售等功能 |
| 套餐管理 | 主要维护当前餐厅中的套餐信息,包含查询、新增、修改、删除、启售、停售等功能 |
| 订单管理 | 主要维护用户在移动端下的订单信息,包含查询、取消、派送、完成,以及订单报表下载等功能 |
| 数据统计 | 主要完成对餐厅的各类数据统计,如营业额、用户数量、订单等 |
2). 用户端
移动端应用主要提供给消费者使用。主要功能有:
| 模块 | 描述 |
|---|---|
| 登录/退出 | 用户需要通过微信授权后登录使用小程序进行点餐 |
| 点餐-菜单 | 在点餐界面需要展示出菜品分类/套餐分类, 并根据当前选择的分类加载其中的菜品信息, 供用户查询选择 |
| 点餐-购物车 | 用户选中的菜品就会加入用户的购物车, 主要包含 查询购物车、加入购物车、删除购物车、清空购物车等功能 |
| 订单支付 | 用户选完菜品/套餐后, 可以对购物车菜品进行结算支付, 这时就需要进行订单的支付 |
| 个人信息 | 在个人中心页面中会展示当前用户的基本信息, 用户可以管理收货地址, 也可以查询历史订单数据 |
3. 前端环境搭建
- 直接在 heima 的 day01 资料中把 “前端运行环境” 中的 nginx-1.20.2 目录下的 nginx.exe 双击即可(注意 文件路径不能有中文)
4. 后端环境搭建
后端搭建环境注意事项
- 注 1:lombok 版本改高一点,改成 1.18.30,如果版本低构建项目会报错,原因应该是 JDK 版本过高不兼容,比如我的是 JDK21,所以 1.18.30 才不会报错

- 注 2:数据库的账号密码要改成自己本机的 MySQL 的密码, 在 application-dev.yml 中修改, 否则会登录不上前端网站, 报数据库连接池连接不到的错误

数据库表说明
| 序号 | 表名 | 中文名 |
|---|---|---|
| 1 | employee | 员工表 |
| 2 | category | 分类表 |
| 3 | dish | 菜品表 |
| 4 | dish_flavor | 菜品口味表 |
| 5 | setmeal | 套餐表 |
| 6 | setmeal_dish | 套餐菜品关系表 |
| 7 | user | 用户表 |
| 8 | address_book | 地址表 |
| 9 | shopping_cart | 购物车表 |
| 10 | orders | 订单表 |
| 11 | order_detail | 订单明细表 |
前后端联调熟悉项目结构
- 大体流程如下

5. Nginx 反向代理介绍
反向代理好处:
提高访问速度
因为 nginx 本身可以进行缓存,如果访问的同一接口,并且做了数据缓存,nginx 就直接可把数据返回,不需要真正地访问服务端,从而提高访问速度。
进行负载均衡
所谓负载均衡, 就是把大量的请求按照我们指定的方式均衡的分配给集群中的每台服务器。
保证后端服务安全
因为一般后台服务地址不会暴露,所以使用浏览器不能直接访问,可以把 nginx 作为请求访问的入口,请求到达 nginx 后转发到具体的服务中,从而保证后端服务的安全。
Nginx 的配置:
proxy_pass: 该指令是用来设置代理服务器的地址,可以是主机名称,IP 地址加端口号等形式。
如上代码的含义是:监听 80 端口号, 然后当我们访问 http://localhost: 80/api/../..这样的接口的时候,它会通过 location /api/ {} 这样的反向代理到 http://localhost: 8080/admin/上来。
- 通常配置,在 nginx.conf 配置文件中,找到如下部分
- 在本项目中,负载均衡配置方式
6. 完善登录功能
问题:明文存储,安全性低
解决:使用 spring 框架中的 MD5 加密算法把 password 加密,在工具类 DigestUtils 中
7. Swagger 接口文档介绍
导入接口文档
将资料中的 json 文档文件导入接口平台如 Apifox 或 yapi, 选择 json 格式导入即可。
Swagger 介绍和使用
1)介绍:

Swagger 是一个规范和完整的框架,用于生成、描述、调用和可视化 RESTful 风格的 Web 服务(https://swagger.io/)。 它的主要作用是:
使得前后端分离开发更加方便,有利于团队协作
接口的文档在线自动生成,降低后端开发人员编写接口文档的负担
功能测试
Spring 已经将 Swagger 纳入自身的标准,建立了 Spring-swagger 项目,现在叫 Springfox。通过在项目中引入 Springfox ,即可非常简单快捷的使用 Swagger。
knife4j 是为 Java MVC 框架集成 Swagger 生成 Api 文档的增强解决方案, 前身是 swagger-bootstrap-ui, 取名 kni4j 是希望它能像一把匕首一样小巧, 轻量, 并且功能强悍!
目前,一般都使用 knife4j 框架。
2)使用方式
导入 maven 坐标
配置类中加入 knife4j 配置代码

设置静态资源映射

访问测试
接口文档访问路径为 http://localhost: 8080/doc.html
3)Swagger 常用注解