国外平面设计师网站目前搜索引擎排名
📘博客主页：程序员葵安
🫶感谢大家点赞👍🏻收藏⭐评论✍🏻
文章目录
一、苍穹外卖项目介绍
1.1 项目介绍
1.2 产品原型
1.3 技术选型
二、开发环境搭建
2.1 前端环境搭建
2.2 后端环境搭建
2.2.1 熟悉项目结构
2.2.2 Git版本控制
2.2.3 数据库环境搭建
2.2.4 前后端联调
2.2.5 nginx反向代理&负载均衡
2.3 完善登录功能
三、导入接口文档
3.1 操作步骤
四、Swagger
4.1 使用步骤
4.2 常用注解
一、苍穹外卖项目介绍
1.1 项目介绍
定位：专门为餐饮企业（餐厅、饭店）定制的一款软件产品
功能架构：体现新项目中的业务功能模块
1.2 产品原型
用于展示项目的业务功能，一般由产品敬礼进行设计。
注意事项： 产品原型主要用于展示项目的功能，并不是最终的页面效果。
管理端原型图：
| 模块 | 描述 |
|---|---|
| 登录/退出 | 内部员工必须登录后,才可以访问系统管理后台 |
| 员工管理 | 管理员可以在系统后台对员工信息进行管理，包含查询、新增、编辑、禁用等功能 |
| 分类管理 | 主要对当前餐厅经营的 菜品分类 或 套餐分类 进行管理维护， 包含查询、新增、修改、删除等功能 |
| 菜品管理 | 主要维护各个分类下的菜品信息，包含查询、新增、修改、删除、启售、停售等功能 |
| 套餐管理 | 主要维护当前餐厅中的套餐信息，包含查询、新增、修改、删除、启售、停售等功能 |
| 订单管理 | 主要维护用户在移动端下的订单信息，包含查询、取消、派送、完成，以及订单报表下载等功能 |
| 数据统计 | 主要完成对餐厅的各类数据统计，如营业额、用户数量、订单等 |
用户端原型图：
| 模块 | 描述 |
|---|---|
| 登录/退出 | 用户需要通过微信授权后登录使用小程序进行点餐 |
| 点餐-菜单 | 在点餐界面需要展示出菜品分类/套餐分类, 并根据当前选择的分类加载其中的菜品信息, 供用户查询选择 |
| 点餐-购物车 | 用户选中的菜品就会加入用户的购物车, 主要包含 查询购物车、加入购物车、删除购物车、清空购物车等功能 |
| 订单支付 | 用户选完菜品/套餐后, 可以对购物车菜品进行结算支付, 这时就需要进行订单的支付 |
| 个人信息 | 在个人中心页面中会展示当前用户的基本信息, 用户可以管理收货地址, 也可以查询历史订单数据 |
1.3 技术选型
展示项目中使用到的技术框架和中间件等
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请求，获取对应的响应结果。
二、开发环境搭建
2.1 前端环境搭建
前端工程基于 nginx，双击 nginx.exe 即可启动 nginx 服务，访问端口号为 80
2.2 后端环境搭建
2.2.1 熟悉项目结构
后端工程基于 maven 进行项目构建，并且进行分模块开发。
| 序号 | 名称 | 说明 |
|---|---|---|
| 1 | sky-take-out | maven父工程，统一管理依赖版本，聚合其他子模块 |
| 2 | sky-common | 子模块，存放公共类，例如：工具类、常量类、异常类等 |
| 3 | sky-pojo | 子模块，存放实体类、VO、DTO等 |
| 4 | sky-server | 子模块，后端服务，存放配置文件、Controller、Service、Mapper等 |
| 名称 | 说明 |
|---|---|
| constant | 存放相关常量类 |
| context | 存放上下文类 |
| enumeration | 项目的枚举类存储 |
| exception | 存放自定义异常类 |
| json | 处理json转换的类 |
| properties | 存放SpringBoot相关的配置属性类 |
| result | 返回结果类的封装 |
| utils | 常用工具类 |
| 名称 | 说明 |
|---|---|
| Entity | 实体，通常和数据库中的表对应 |
| DTO | 数据传输对象，通常用于程序中各层之间传递数据 |
| VO | 视图对象，为前端展示数据提供的对象 |
| POJO | 普通Java对象，只有属性和对应的getter和setter |
| 名称 | 说明 |
|---|---|
| config | 存放配置类 |
| controller | 存放controller类 |
| interceptor | 存放拦截器类 |
| mapper | 存放mapper接口 |
| service | 存放service类 |
| SkyApplication | 启动类 |
2.2.2 Git版本控制
1）创建Git本地仓库
2）创建Git远程仓库（Gitee - 基于 Git 的代码托管和研发协作平台 ）
3）将本地文件推送到Git远程仓库（提交文件至本地仓库，添加Git远程仓库地址，推送）
2.2.3 数据库环境搭建
执行sky.sql文件
| 序号 | 表名 | 中文名 |
|---|---|---|
| 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 | 订单明细表 |
2.2.4 前后端联调
后端的初始工程中已经实现了登录功能，直接进行前后端联调测试即可
(报错需修改Lombok版本)
(前端无法登录需将配置文件里的数据库密码改为自己数据库的密码)
2.2.5 nginx反向代理&负载均衡
nginx 反向代理的好处：
-
提高访问速度
-
进行负载均衡
-
保证后端服务安全
反向代理配置方式：
server{listen 80;server_name localhost;location /api/{proxy_pass http://localhost:8080/admin/; #反向代理}
}# 反向代理,处理管理端发送的请求
location /api/ {proxy_pass http://localhost:8080/admin/;#proxy_pass http://webservers/admin/;
}负载均衡配置方式：
upstream webservers{server 192.168.100.128:8080;server 192.168.100.129:8080;
}
server{listen 80;server_name localhost;location /api/{proxy_pass http://webservers/admin;#负载均衡}
}2.3 完善登录功能
1）修改数据库中明文密码，改为MD5加密后的密文
打开employee表，修改密码
2）修改Java代码，前端提交的密码进行MD5加密后再跟数据库中密码比对
打开EmployeeServiceImpl.java，修改比对密码
/*** 员工登录** @param employeeLoginDTO* @return*/public Employee login(EmployeeLoginDTO employeeLoginDTO) {//1、根据用户名查询数据库中的数据//2、处理各种异常情况（用户名不存在、密码不对、账号被锁定）//.......//密码比对// TODO 后期需要进行md5加密，然后再进行比对password = DigestUtils.md5DigestAsHex(password.getBytes());if (!password.equals(employee.getPassword())) {//密码错误throw new PasswordErrorException(MessageConstant.PASSWORD_ERROR);}//........//3、返回实体对象return employee;}三、导入接口文档
3.1 操作步骤
1）打开Apifox平台，创建管理端接口项目和用户端接口项目
2）导入接口文档
四、Swagger
Swagger 是一个规范和完整的框架，用于生成、描述、调用和可视化 RESTful 风格的 Web 服务
目前，一般都使用knife4j框架。
4.1 使用步骤
导入 knife4j 的maven坐标
在pom.xml中添加依赖
<dependency><groupId>com.github.xiaoymin</groupId><artifactId>knife4j-spring-boot-starter</artifactId>
</dependency>在配置类中加入 knife4j 相关配置
WebMvcConfiguration.java
/*** 通过knife4j生成接口文档* @return
*/@Beanpublic 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/");
}4.2 常用注解
| 注解 | 说明 |
|---|---|
| @Api | 用在类上，例如Controller，表示对类的说明 |
| @ApiModel | 用在类上，例如entity、DTO、VO |
| @ApiModelProperty | 用在属性上，描述属性信息 |
| @ApiOperation | 用在方法上，例如Controller的方法，说明方法的用途、作用 |