0
0

基于SpringBoot+Redis的前后端分离外卖项目-苍穹外卖(一)

熟悉项目环境

1. 苍穹外卖项目介绍

1.1 项目介绍

苍穹外卖是专门为餐饮企业（餐厅、饭店）定制的一款软件产品，包括 系统管理后台 和 小程序端应用 两部分。其中系统管理后台主要提供给餐饮企业内部员工使用，可以对餐厅的分类、菜品、套餐、订单、员工等进行管理维护，对餐厅的各类数据进行统计，同时也可进行来单语音播报功能。小程序端主要提供给消费者使用，可以在线浏览菜品、添加购物车、下单、支付、催单等。

在这里插入图片描述

项目分为管理端和用户端。

在这里插入图片描述

1). 管理端

餐饮企业内部员工使用。 主要功能有:
模块描述登录/退出内部员工必须登录后,才可以访问系统管理后台员工管理管理员可以在系统后台对员工信息进行管理，包含查询、新增、编辑、禁用等功能分类管理主要对当前餐厅经营的 菜品分类 或 套餐分类 进行管理维护， 包含查询、新增、修改、删除等功能菜品管理主要维护各个分类下的菜品信息，包含查询、新增、修改、删除、启售、停售等功能套餐管理主要维护当前餐厅中的套餐信息，包含查询、新增、修改、删除、启售、停售等功能订单管理主要维护用户在移动端下的订单信息，包含查询、取消、派送、完成，以及订单报表下载等功能数据统计主要完成对餐厅的各类数据统计，如营业额、用户数量、订单等
2). 用户端

移动端应用主要提供给消费者使用。主要功能有:
模块描述登录/退出用户需要通过微信授权后登录使用小程序进行点餐点餐-菜单在点餐界面需要展示出菜品分类/套餐分类, 并根据当前选择的分类加载其中的菜品信息, 供用户查询选择点餐-购物车用户选中的菜品就会加入用户的购物车, 主要包含 查询购物车、加入购物车、删除购物车、清空购物车等功能订单支付用户选完菜品/套餐后, 可以对购物车菜品进行结算支付, 这时就需要进行订单的支付个人信息在个人中心页面中会展示当前用户的基本信息, 用户可以管理收货地址, 也可以查询历史订单数据

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请求，获取对应的响应结果。

2. 开发环境搭建

在这里插入图片描述

2.1 前端环境

1). 前端工程基于 nginx

双击 nginx.exe 即可启动 nginx 服务，访问端口号为 80

http://localhost:80

在这里插入图片描述
（如果启动不了，可能是端口号冲突，在nginx的配置文件中修改端口号即可）。

2.2 后端环境搭建

后端工程基于 maven 进行项目构建，并且进行分模块开发。

1). 用 IDEA 打开初始工程，了解项目的整体结构：

在这里插入图片描述
2). 数据库共11张表，每张表的说明：
序号表名中文名1employee员工表2category分类表3dish菜品表4dish_flavor菜品口味表5setmeal套餐表6setmeal_dish套餐菜品关系表7user用户表8address_book地址表9shopping_cart购物车表10orders订单表11order_detail订单明细表
3). 导入接口文档：
项目是基于前后端分离开发的·，所有需要根据接口文档来开发。
在这里插入图片描述

2.3 Git版本控制

使用Git进行项目代码的版本控制，具体操作：

1). 创建Git本地仓库

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

当Idea中出现：

在这里插入图片描述
说明本地仓库创建成功。

2). 创建Git远程仓库

访问https://gitee.com/，新建仓库
在这里插入图片描述

点击 创建
在这里插入图片描述
3). 将本地文件推送到Git远程仓库

  1. 提交文件至本地仓库忽略以下类型文件

在这里插入图片描述

开始提交

在这里插入图片描述

中间出现：点击commit

在这里插入图片描述

  1. 添加Git远程仓库地址复制远程地址：

在这里插入图片描述

添加地址：

在这里插入图片描述
在这里插入图片描述

  1. 推送

在这里插入图片描述

成功推送至远程仓库

在这里插入图片描述

2.4 nginx反向代理和负载均衡

我们先思考一个问题：前端发送的请求，是如何请求到后端服务的？

前端请求地址：http://localhost/api/employee/login
在这里插入图片描述
后端接口地址：http://localhost:8080/admin/employee/login
在这里插入图片描述

很明显，两个地址不一致，那是如何请求到后端服务的呢？

在这里插入图片描述

1). nginx反向代理

nginx 反向代理，就是将前端发送的动态请求由 nginx 转发到后端服务器

在这里插入图片描述

那为什么不直接通过浏览器直接请求后台服务端，需要通过nginx反向代理呢？

nginx 反向代理的好处：

  • 提高访问速度因为nginx本身可以进行缓存，如果访问的同一接口，并且做了数据缓存，nginx就直接可把数据返回，不需要真正地访问服务端，从而提高访问速度。
  • 进行负载均衡所谓负载均衡,就是把大量的请求按照我们指定的方式均衡的分配给集群中的每台服务器。
  • 保证后端服务安全因为一般后台服务地址不会暴露，所以使用浏览器不能直接访问，可以把nginx作为请求访问的入口，请求到达nginx后转发到具体的服务中，从而保证后端服务的安全。

在这里插入图片描述

nginx 反向代理的配置方式：

server{
    listen 80;
    server_name localhost;
    
    location /api/{
        proxy_pass http://localhost:8080/admin/; #反向代理
    }
}

proxy_pass：该指令是用来设置代理服务器的地址，可以是主机名称，IP地址加端口号等形式。

如上代码的含义是：监听80端口号， 然后当我们访问 http://localhost:80/api/…/…这样的接口的时候，它会通过 location /api/ {} 这样的反向代理到 http://localhost:8080/admin/上来。

接下来，进到nginx-1.20.2\conf，打开nginx配置

# 反向代理,处理管理端发送的请求
location /api/ {
    proxy_pass   http://localhost:8080/admin/;
    #proxy_pass   http://webservers/admin/;
}

当在访问http://localhost/api/employee/login，nginx接收到请求后转到http://localhost:8080/admin/，故最终的请求地址为http://localhost:8080/admin/employee/login，和后台服务的访问地址一致。

2). nginx 负载均衡

当如果服务以集群的方式进行部署时，那nginx在转发请求到服务器时就需要做相应的负载均衡。其实，负载均衡从本质上来说也是基于反向代理来实现的，最终都是转发请求。

nginx 负载均衡的配置方式：

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;#负载均衡
    }
}

upstream：如果代理服务器是一组服务器的话，我们可以使用upstream指令配置后端服务器组。

如上代码的含义是：监听80端口号， 然后当我们访问 http://localhost:80/api/…/…这样的接口的时候，它会通过 location /api/ {} 这样的反向代理到 http://webservers/admin，根据webservers名称找到一组服务器，根据设置的负载均衡策略(默认是轮询)转发到具体的服务器。

注：upstream后面的名称可自定义，但要上下保持一致。

nginx 负载均衡策略：
名称****说明轮询默认方式weight权重方式，默认为1，权重越高，被分配的客户端请求就越多ip_hash依据ip分配方式，这样每个访客可以固定访问一个后端服务least_conn依据最少连接方式，把请求优先分配给连接数少的后端服务url_hash依据url分配方式，这样相同的url会被分配到同一个后端服务fair依据响应时间方式，响应时间短的服务将会被优先分配
具体配置方式：

轮询：

upstream webservers{
    server 192.168.100.128:8080;
    server 192.168.100.129:8080;
}

weight:

upstream webservers{
    server 192.168.100.128:8080 weight=90;
    server 192.168.100.129:8080 weight=10;
}

ip_hash:

upstream webservers{
    ip_hash;
    server 192.168.100.128:8080;
    server 192.168.100.129:8080;
}

least_conn:

upstream webservers{
    least_conn;
    server 192.168.100.128:8080;
    server 192.168.100.129:8080;
}

url_hash:

upstream webservers{
    hash &request_uri;
    server 192.168.100.128:8080;
    server 192.168.100.129:8080;
}

fair:

upstream webservers{
    server 192.168.100.128:8080;
    server 192.168.100.129:8080;
    fair;
}

3.登录功能

问题：员工表中的密码是明文存储，安全性太低。

在这里插入图片描述

解决思路：

  1. 将密码加密后存储，提高安全性

在这里插入图片描述

  1. 使用MD5加密方式对明文密码加密

在这里插入图片描述

实现步骤：

  1. 修改数据库中明文密码，改为MD5加密后的密文在这里插入图片描述1.Controller层

在sky-server模块中，com.sky.controller.admin.EmployeeController

/**
     * 登录
     *
     * @param employeeLoginDTO
     * @return
     */@PostMapping("/login")publicResult<EmployeeLoginVO>login(@RequestBodyEmployeeLoginDTO employeeLoginDTO){
        log.info("员工登录：{}", employeeLoginDTO);//调用service方法查询数据库Employee employee = employeeService.login(employeeLoginDTO);//登录成功后，生成jwt令牌Map<String,Object> claims =newHashMap<>();
        claims.put(JwtClaimsConstant.EMP_ID, employee.getId());String token =JwtUtil.createJWT(
                jwtProperties.getAdminSecretKey(),
                jwtProperties.getAdminTtl(),
                claims);EmployeeLoginVO employeeLoginVO =EmployeeLoginVO.builder().id(employee.getId()).userName(employee.getUsername()).name(employee.getName()).token(token).build();returnResult.success(employeeLoginVO);}

2.Service层

在sky-server模块中，com.sky.service.impl.EmployeeServiceImpl

/**
        * 员工登录
        *
        * @param employeeLoginDTO
        * @return
        */publicEmployeelogin(EmployeeLoginDTO employeeLoginDTO){String username = employeeLoginDTO.getUsername();String password = employeeLoginDTO.getPassword();//1、根据用户名查询数据库中的数据Employee employee = employeeMapper.getByUsername(username);//2、处理各种异常情况（用户名不存在、密码不对、账号被锁定）if(employee ==null){//账号不存在thrownewAccountNotFoundException(MessageConstant.ACCOUNT_NOT_FOUND);}//密码比对// 进行md5加密，然后再进行比对
        password =DigestUtils.md5DigestAsHex(password.getBytes());if(!password.equals(employee.getPassword())){//密码错误thrownewPasswordErrorException(MessageConstant.PASSWORD_ERROR);}if(employee.getStatus()==StatusConstant.DISABLE){//账号被锁定thrownewAccountLockedException(MessageConstant.ACCOUNT_LOCKED);}//3、返回实体对象return employee;}

3.Mapper层

在sky-server模块中，com.sky.mapper.EmployeeMapper

packagecom.sky.mapper;importcom.sky.entity.Employee;importorg.apache.ibatis.annotations.Mapper;importorg.apache.ibatis.annotations.Select;@MapperpublicinterfaceEmployeeMapper{/**
     * 根据用户名查询员工
     * @param username
     * @return
     */@Select("select * from employee where username = #{username}")EmployeegetByUsername(String username);}

4. Swagger

4.1 介绍

Swagger 是一个规范和完整的框架，用于生成、描述、调用和可视化 RESTful 风格的 Web 服务(https://swagger.io/)。 它的主要作用是：

  1. 使得前后端分离开发更加方便，有利于团队协作
  2. 接口的文档在线自动生成，降低后端开发人员编写接口文档的负担
  3. 功能测试Spring已经将Swagger纳入自身的标准，建立了Spring-swagger项目，现在叫Springfox。通过在项目中引入Springfox ，即可非常简单快捷的使用Swagger。

knife4j是为Java MVC框架集成Swagger生成Api文档的增强解决方案,前身是swagger-bootstrap-ui,取名kni4j是希望它能像一把匕首一样小巧,轻量,并且功能强悍!

目前，一般都使用knife4j框架。

4.2 使用步骤

  1. 导入 knife4j 的maven坐标在pom.xml中添加依赖<dependency><groupId>com.github.xiaoymin</groupId><artifactId>knife4j-spring-boot-starter</artifactId></dependency>
  2. 在配置类中加入 knife4j 相关配置WebMvcConfiguration.java/** * 通过knife4j生成接口文档 * @return*/@BeanpublicDocketdocket(){ApiInfo apiInfo =newApiInfoBuilder().title("苍穹外卖项目接口文档").version("2.0").description("苍穹外卖项目接口文档").build();Docket docket =newDocket(DocumentationType.SWAGGER_2).apiInfo(apiInfo).select().apis(RequestHandlerSelectors.basePackage("com.sky.controller")).paths(PathSelectors.any()).build();return docket;}
  3. 设置静态资源映射，否则接口文档页面无法访问WebMvcConfiguration.java/** * 设置静态资源映射 * @param registry*/protectedvoidaddResourceHandlers(ResourceHandlerRegistry registry){ registry.addResourceHandler("/doc.html").addResourceLocations("classpath:/META-INF/resources/"); registry.addResourceHandler("/webjars/**").addResourceLocations("classpath:/META-INF/resources/webjars/");}
  4. 访问测试接口文档访问路径为 http://ip:port/doc.html —> http://localhost:8080/doc.html

在这里插入图片描述

4.3 常用注解

通过注解可以控制生成的接口文档，使接口文档拥有更好的可读性，常用注解如下：
注解****说明@Api用在类上，例如Controller，表示对类的说明@ApiModel用在类上，例如entity、DTO、VO@ApiModelProperty用在属性上，描述属性信息@ApiOperation用在方法上，例如Controller的方法，说明方法的用途、作用
接下来，使用上述注解，生成可读性更好的接口文档

在sky-pojo模块中

EmployeeLoginDTO.java

@Data@ApiModel(description ="员工登录时传递的数据模型")publicclassEmployeeLoginDTOimplementsSerializable{@ApiModelProperty("用户名")privateString username;@ApiModelProperty("密码")privateString password;}

EmployeeLoginVo.java

@Data@Builder@NoArgsConstructor@AllArgsConstructor@ApiModel(description ="员工登录返回的数据格式")publicclassEmployeeLoginVOimplementsSerializable{@ApiModelProperty("主键值")privateLong id;@ApiModelProperty("用户名")privateString userName;@ApiModelProperty("姓名")privateString name;@ApiModelProperty("jwt令牌")privateString token;}

在sky-server模块中

EmployeeController.java

/**
 * 员工管理
 */@RestController@RequestMapping("/admin/employee")@Slf4j@Api(tags ="员工相关接口")publicclassEmployeeController{/**
     * 登录
     */@PostMapping("/login")@ApiOperation(value ="员工登录")publicResult<EmployeeLoginVO>login(@RequestBodyEmployeeLoginDTO employeeLoginDTO){//.............}/**
     * 退出
     */@PostMapping("/logout")@ApiOperation("员工退出")publicResult<String>logout(){returnResult.success();}}

启动服务：访问http://localhost:8080/doc.html

在这里插入图片描述

后记
👉👉💕💕美好的一天，到此结束，下次继续努力！欲知后续，请看下回分解，写作不易，感谢大家的支持！！ 🌹🌹🌹

标签： spring boot redis 后端
本文转载自: https://blog.csdn.net/m0_59230408/article/details/132768205
版权归原作者 失重外太空. 所有， 如有侵权，请联系我们删除。
登录后发布评论

“基于SpringBoot+Redis的前后端分离外卖项目-苍穹外卖(一)”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航