项目地址https://gitee.com/zhang-zakcomy/cang-qiong-take-out/
一、环境搭建-Day01项目概述、环境搭建
软件开发整体介绍
软件开发流程
- 需求分析
完成需求规格说明书、产品原型编写
需求规格说明书， 一般来说就是使用 Word 文档来描述当前项目的各个组成部分，如：系统定义、应用环境、功能规格、性能需求等，都会在文档中描述。
产品原型，一般是通过网页(html)的形式展示当前的页面展示什么样的数据, 页面的布局是什么样子的，点击某个菜单，打开什么页面，点击某个按钮，出现什么效果，都可以通过产品原型看到。
- 设计
设计的内容包含 UI设计、数据库设计、接口设计。
- UI设计：用户界面的设计，主要设计项目的页面效果，小到一个按钮，大到一个页面布局，还有人机交互逻辑的体现。
- 数据库设计：需要设计当前项目中涉及到哪些数据库，每一个数据库里面包含哪些表，这些表结构之间的关系是什么样的，表结构中包含哪些字段。
- 接口设计：通过分析原型图，首先，粗粒度地分析每个页面有多少接口，然后，再细粒度地分析每个接口的传入参数，返回值参数，同时明确接口路径及请求方式。
接口，就相当于某种协议，在软件或项目设计中让不同的组件或模块之间更好地相互联系、协同工作
- 编码：这个阶段主要是根据设计文档，实现软件的各个模块和功能，编写具体的代码。在这个阶段，需要注重代码的质量和可读性，同时需要遵循编码规范和标准，确保代码的可靠性和可维护性。
- 测试：这个阶段主要是对编译好的程序进行测试，验证程序是否符合需求和设计要求，同时发现并修复可能存在的缺陷和漏洞。在这个阶段，需要制定详细的测试计划和测试用例，同时需要考虑到各种可能的场景和情况，确保程序的的质量和稳定性。
- 上线运维：这个阶段主要是将程序部署到生产环境中，进行实际的运行和维护。在这个阶段，需要制定合理的部署计划和运行维护方案，同时需要实时监控程序的的状态和运行情况，及时发现并处理可能出现的问题和故障。
角色分工
在对整个软件开发流程熟悉后， 我们还有必要了解一下在整个软件开发流程中涉及到的岗位角色，以及各个角色的职责分工。
| 岗位/角色 | 对应阶段 | 职责/分工 |
|---|---|---|
| 项目经理 | 全阶段 | 对整个项目负责，任务分配、把控进度 |
| 产品经理 | 需求分析 | 进行需求调研，输出需求调研文档、产品原型等 |
| UI设计师 | 设计 | 根据产品原型输出界面效果图 |
| 架构师 | 设计 | 项目整体架构设计、技术选型等 |
| 开发工程师 | 编码 | 功能代码实现 |
| 测试工程师 | 测试 | 编写测试用例，输出测试报告 |
| 运维工程师 | 上线运维 | 软件环境搭建、项目上线 |
在实际的项目中, 有一些项目组由于人员配置紧张, 可能并没有专门的架构师或测试人员, 这个时候可能需要有项目经理或者程序员兼任。
软件环境
作为软件开发工程师，在编码的过程中就不可避免地会接触多种软件环境，我们主要来分析在工作中经常遇到的三套环境， 分别是: 开发环境、测试环境、生产环境。 接下来，我们分别介绍一下这三套环境的作用和特点。
1). 开发环境(development)
我们作为软件开发人员，在开发阶段使用的环境，就是开发环境，一般外部用户无法访问。
比如，我们在开发中使用的MySQL数据库和其他的一些常用软件，我们可以安装在本地， 也可以安装在一台专门的服务器中， 这些应用软件仅仅在软件开发过程中使用， 项目测试、上线时，我们不会使用这套环境了，这个环境就是开发环境。
2). 测试环境(testing)
当软件开发工程师，将项目的功能模块开发完毕，并且单元测试通过后，就需要将项目部署到测试服务器上，让测试人员对项目进行测试。那这台测试服务器就是专门给测试人员使用的环境， 也就是测试环境，用于项目测试，一般外部用户无法访问。
3). 生产环境(production)
当项目开发完毕，并且由测试人员测试通过之后，就可以上线项目，将项目部署到线上环境，并正式对外提供服务，这个线上环境也称之为生产环境。
首先，会在开发环境中进行项目开发，往往开发环境大多数都是本地的电脑环境和局域网内的环境，当开发完毕后，然后会把项目部署到测试环境，测试环境一般是一台独立测试服务器的环境，项目测试通过后，最终把项目部署到生产环境，生产环境可以是机房或者云服务器等线上环境。
苍穹外卖项目介绍
项目介绍
本项目（苍穹外卖）是专门为餐饮企业（餐厅、饭店）定制的一款软件产品，包括 系统管理后台 和 小程序端应用 两部分。其中系统管理后台主要提供给餐饮企业内部员工使用，可以对餐厅的分类、菜品、套餐、订单、员工等进行管理维护，对餐厅的各类数据进行统计，同时也可进行来单语音播报功能。小程序端主要提供给消费者使用，可以在线浏览菜品、添加购物车、下单、支付、催单等。
产品原型
产品原型，用于展示项目的业务功能，一般由产品经理进行设计。
注意事项： 产品原型主要用于展示项目的功能，并不是最终的页面效果。
“资料”文件夹的产品原型文件夹下,提供了两份产品原型。
1). 管理端
餐饮企业内部员工使用。 主要功能有:
| 模块 | 描述 |
|---|---|
| 登录/退出 | 内部员工必须登录后,才可以访问系统管理后台 |
| 员工管理 | 管理员可以在系统后台对员工信息进行管理，包含查询、新增、编辑、禁用等功能 |
| 分类管理 | 主要对当前餐厅经营的 菜品分类 或 套餐分类 进行管理维护， 包含查询、新增、修改、删除等功能 |
| 菜品管理 | 主要维护各个分类下的菜品信息，包含查询、新增、修改、删除、启售、停售等功能 |
| 套餐管理 | 主要维护当前餐厅中的套餐信息，包含查询、新增、修改、删除、启售、停售等功能 |
| 订单管理 | 主要维护用户在移动端下的订单信息，包含查询、取消、派送、完成，以及订单报表下载等功能 |
| 数据统计 | 主要完成对餐厅的各类数据统计，如营业额、用户数量、订单等 |
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请求，获取对应的响应结果。
开发环境搭建
前端环境搭建
- 前端工程基于nginx
在“资料”中：
将
放在一个目录地址没有中文的文件夹下，取名为“CangqiongTakeout”
一定要将这个文件夹放在木有中文的目录下，否则启动不成功
- 启动nginx，访问测试
双击nginx.exeqidong nginx服务，访问端口号为80
http://localhost:80
如果启动成功，界面如下：
后端环境搭建
熟悉项目结构
后端工程基于maven进行项目创建，并且进行分模块开发
- 从“资料”中找到后端初始工程
- 将初始工程复制到刚才创建的“CangqiongTakeout”目录下
用IDEA打开初始工程，了解项目结构
如果项目没有生成.iml文件，则需要进行以下设置：
- 在本项目下打开idea里面的终端
- .进入到对应模块,输入mvn idea:module 命令，回车
- BUILD SUCCESS后,看到对应模块下,生成了.iml文件
设置后之后，初始项目结构如下
对工程的每个模块作用说明：
| 序号 | 名称 | 说明 |
|---|---|---|
| 1 | sky-take-out | maven父工程，统一管理依赖版本，聚合其他子模块 |
| 2 | sky-common | 子模块，存放公共类，例如：工具类、常量类、异常类等 |
| 3 | sky-pojo | 子模块，存放实体类、VO、DTO等 |
| 4 | sky-server | 子模块，后端服务，存放配置文件、Controller、Service、Mapper等 |
对项目整体结构了解后，接下来详细分析上述的每个子模块：
-
sky-common: 模块中存放的是一些公共类，可以供其他模块使用 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BAv4c5lv-1690964505677)(assets/image-20221107093606590.png#id=cHOSd&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&title=)]
| 名称 | 说明 |
| — | — |
| constant | 存放相关常量类 |
| context | 存放上下文类 |
| enumeration | 项目的枚举类存储 |
| exception | 存放自定义异常类 |
| json | 处理json转换的类 |
| properties | 存放SpringBoot相关的配置属性类 |
| result | 返回结果类的封装 |
| utils | 常用工具类 | -
sky-pojo: 模块中存放的是一些 entity、DTO、VO [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bCSk9iUm-1690964505677)(assets/image-20221107094611987.png#id=UKsvk&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&title=)]
| 名称 | 说明 |
| — | — |
| Entity | 实体，通常和数据库中的表对应 |
| DTO | 数据传输对象，通常用于程序中各层之间传递数据 |
| VO | 视图对象，为前端展示数据提供的对象 |
| POJO | 普通Java对象，只有属性和对应的getter和setter | -
sky-server: 模块中存放的是 配置文件、配置类、拦截器、controller、service、mapper、启动类等 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dV8g7ErE-1690964505677)(assets/image-20221107094852361.png#id=z1ASu&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&title=)]
| 名称 | 说明 |
| — | — |
| config | 存放配置类 |
| controller | 存放controller类 |
| interceptor | 存放拦截器类 |
| mapper | 存放mapper接口 |
| service | 存放service类 |
| SkyApplication | 启动类 |
git版本控制
使用Git进行项目代码的版本控制，具体操作：
- 创建git仓库
当IDEA中出现
时创建成功
- 创建git远程仓库
登录链接gitee.com,新建仓库
点击“创建”后如下图：
- 提交文件至本地仓库
开始提交：
点击此处
- 添加至git远程仓库
- 复制远程地址
- 点击此处
推送完成
刷新gitee页面:
数据库环境搭建
将数据库中sky.sql文件导入MySQL，间脚本代码复制到MySQL运行即可
创建出11张表
修改idea后端代码 的数据库 的配置信息
前后端联调
后端的初始工程中已经实现了登录功能，直接进行前后端联调测试即可
意思就是，在后端已经有了登录功能的代码了，前端也有了页面实现的代码了，现在需要将前后端联结起来
首先，先编译一下，能够保证项目能够正常运行
登录一下：
双击nginx.exeqidong nginx服务，访问端口号为80
http://localhost:80
要保证前面数据库idea中将相关配置信息根据实际情况配制成自己数据库的信息
点击登录：
右上角的“错误”先不用管，后面会解决
nginx反向代理和负载均衡
对登录功能测试完毕后，接下来，思考一个问题：前端发送的请求，是如何请求到后端服务的？
在使用Nginx作为反向代理的Java项目中，前端发送的请求会被Nginx接收并处理，然后转发给后端服务。以下是一些基本步骤：
- 客户端（前端）发送请求到Nginx服务器。
- Nginx服务器接收请求，并根据配置的规则进行处理。
- Nginx根据配置的规则将请求转发给后端服务。
- 后端服务接收到请求并处理，然后返回响应。
- Nginx接收后端服务的响应，并将其返回给客户端。
在这个过程中，Nginx扮演了反向代理的角色，接收客户端的请求并转发给后端服务，同时也将后端服务的响应返回给客户端。通过Nginx，可以实现对请求的负载均衡、缓存、安全过滤等处理，提高系统的性能和安全性。
当你在浏览器中输入一个网站地址并发送请求时，这个请求首先会被Nginx服务器接收。Nginx服务器会根据你发送的请求类型、请求头、参数等来进行处理，然后决定将请求转发给哪个后端服务。这个后端服务可以是应用程序服务器、数据库服务器或其他类型的服务。
一旦后端服务接收到请求并处理完成，它会将响应返回给Nginx服务器。Nginx服务器再将这些响应返回给你所在的浏览器。在这个过程中，Nginx还可以对请求和响应进行一些处理，例如提供缓存功能、防止DDoS攻击、拦截恶意请求等，从而提高系统的性能和安全性。
在实际情况中，前端请求地址和后端接口地址通常是不一致的，这是因为前端通常只需要知道如何将请求发送到后端，而不需要知道后端的具体实现细节，包括端口、上下文路径等。
在nginx服务器中，可以通过配置反向代理来实现前后端请求的映射。具体来说，可以在nginx配置文件中添加以下配置：
location /api {
proxy_pass http://localhost:8080/admin;
}
这样，当有请求发送到nginx服务器的/api路径时，nginx会将请求转发到后端服务器的/admin路径。
在SpringBoot项目中，也可以使用Spring Cloud Gateway等反向代理框架来实现前后端请求的映射。例如，可以配置Spring Cloud Gateway的路由规则，将/api/_路由到后端服务器的/admin/_路径。
总之，无论使用nginx还是Spring Cloud Gateway等反向代理框架，都可以实现前后端请求的映射，使得前端请求能够正确地请求到后端服务。
导入接口文档
接下来，就要进入到项目的业务开发了，而我们的开发方式就是基于当前企业主流的前后端分离开发方式，那么这种方式就要求我们之前需要先将接口定义好，这样前后端人员才能并行开发，所以，这个章节就需要将接口文档导入到管理平台，为我们后面业务开发做好准备。其实，在真实的企业开发中，接口设计过程其实是一个非常漫长的过程，可能需要多次开会讨论调整，甚至在开发的过程中才会发现某些接口定义还需要再调整，这种情况其实是非常常见的，但是由于项目时间原因，所以选择一次性导入所有的接口，在开发业务功能过程当中，也会带着大家一起来分析一下对应的接口是怎么确定下来的，为什么要这样定义，从而培养同学们的接口设计能力。
前后端分离开发流程
第一步：定义接口，确定接口的路径、请求方式、传入参数、返回参数。
第二步：前端开发人员和后端开发人员并行开发，同时，也可自测。
第三步：前后端人员进行连调测试。
第四步：提交给测试人员进行最终测试
操作步骤
- 找到“资料”中的接口文件
- 导入到Yapi平台
登录Yapi
两个操作步骤相同
Swagger
介绍
Swagger 是一个规范和完整的框架，用于生成、描述、调用和可视化 RESTful 风格的 Web 服务(https://swagger.io/)。 它的主要作用是：
- 使得前后端分离开发更加方便，有利于团队协作
- 接口的文档在线自动生成，降低后端开发人员编写接口文档的负担
- 功能测试
Spring已经将Swagger纳入自身的标准，建立了Spring-swagger项目，现在叫Springfox。通过在项目中引入Springfox ，即可非常简单快捷的使用Swagger。
knife4j是为Java MVC框架集成Swagger生成Api文档的增强解决方案,前身是swagger-bootstrap-ui,取名kni4j是希望它能像一把匕首一样小巧,轻量,并且功能强悍!
目前，一般都使用knife4j框架。
使用步骤
- 导入 knife4j 的maven坐标
在pom.xml中添加依赖
dependency>
groupId>com.github.xiaoymingroupId>
artifactId>knife4j-spring-boot-starterartifactId>
dependency>
- 在配置类中加入 knife4j 相关配置
WebMvcConfiguration.java
/**
* 通过knife4j生成接口文档
* @return
*/
@Bean
public Docket docket() {
ApiInfo apiInfo = new ApiInfoBuilder()
.title("苍穹外卖项目接口文档")
.version("2.0")
.description("苍穹外卖项目接口文档")
.build();
Docket docket = new Docket(DocumentationType.SWAGGER_2)
.apiInfo(apiInfo)
.select()
.apis(RequestHandlerSelectors.basePackage("com.sky.controller"))
.paths(PathSelectors.any())
.build();
return docket;
}
- 设置静态资源映射，否则接口文档页面无法访问
WebMvcConfiguration.java
/**
* 设置静态资源映射
* @param registry
*/
protected void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/doc.html").addResourceLocations("classpath:/META-INF/resources/");
registry.addResourceHandler("/webjars/**").addResourceLocations("classpath:/META-INF/resources/webjars/");
}
- 访问测试
接口文档访问路径为 http://ip:port/doc.html —> http://localhost:8080/doc.html
**思考：**通过 Swagger 就可以生成接口文档，那么我们就不需要 Yapi 了？
1、Yapi 是设计阶段使用的工具，管理和维护接口
2、Swagger 在开发阶段使用的框架，帮助后端开发人员做后端的接口测试
常用注解
通过注解可以控制生成的接口文档，使接口文档拥有更好的可读性，常用注解如下：
| 注解 | 说明 |
|---|---|
| @Api | 用在类上，例如Controller，表示对类的说明 |
| @ApiModel | 用在类上，例如entity、DTO、VO |
| @ApiModelProperty | 用在属性上，描述属性信息 |
| @ApiOperation | 用在方法上，例如Controller的方法，说明方法的用途、作用 |
接下来，使用上述注解，将原先代码修改为如下：生成可读性更好的接口文档
在sky-pojo模块中
EmployeeLoginDTO.java
package com.sky.dto;
import io.swagger.annotations.ApiModel;
import io.swagger.annotations.ApiModelProperty;
import lombok.Data;
import java.io.Serializable;
@Data
@ApiModel(description = "员工登录时传递的数据模型")
public class EmployeeLoginDTO implements Serializable {
@ApiModelProperty("用户名")
private String username;
@ApiModelProperty("密码")
private String password;
}
EmployeeLoginVo.java
package com.sky.vo;
import io.swagger.annotations.ApiModel;
import io.swagger.annotations.ApiModelProperty;
import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;
import java.io.Serializable;
@Data
@Builder
@NoArgsConstructor
@AllArgsConstructor
@ApiModel(description = "员工登录返回的数据格式")
public class EmployeeLoginVO implements Serializable {
@ApiModelProperty("主键值")
private Long id;
@ApiModelProperty("用户名")
private String userName;
@ApiModelProperty("姓名")
private String name;
@ApiModelProperty("jwt令牌")
private String token;
}
在sky-server模块
EmployeeController.java
package com.sky.controller.admin;
import com.sky.constant.JwtClaimsConstant;
import com.sky.dto.EmployeeLoginDTO;
import com.sky.entity.Employee;
import com.sky.properties.JwtProperties;
import com.sky.result.Result;
import com.sky.service.EmployeeService;
import com.sky.utils.JwtUtil;
import com.sky.vo.EmployeeLoginVO;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.HashMap;
import java.util.Map;
/**
* 员工管理
*/
@RestController
@RequestMapping("/admin/employee")
@Slf4j
@Api(tags = "员工相关接口")
public class EmployeeController {
@Autowired
private EmployeeService employeeService;
@Autowired
private JwtProperties jwtProperties;
/**
* 登录
*
* @param employeeLoginDTO
* @return
*/
@PostMapping("/login")
@ApiOperation(value = "员工登录")
public ResultEmployeeLoginVO> login(@RequestBody EmployeeLoginDTO employeeLoginDTO) {
//..............
}
/**
* 退出
*
* @return
*/
@PostMapping("/logout")
@ApiOperation("员工退出")
public ResultString> logout() {
return Result.success();
}
}
启动服务：访问http://localhost:8080/doc.html
一点两点
- 这个项目最开始是直接导入的黑马程序员的所谓的“初始项目”
- 就是实现把框架、依赖、配置等都给你实现好了
- 先跟着视频教程流程完成这个项目吧
- 有些地方可能不适合细嚼慢咽地理解，而是囫囵吞枣
- 可能等完成整个项目的时候，就自然而然地有些地方就理解了
- 可能有些地方完成这个项目之后也不明白，但是再完成这个项目后就理解了
- 完成一个项目或一个项目中的某一阶段要停下来
- 看看之囫囵吞下去的东西现在能不能嚼的动
