当前位置：首页 > news >正文

【苍穹外卖】学习

news 2025/9/30 17:36:53

软件开发整体介绍

作为一名软件开发工程师,我们需要了解在软件开发过程中的开发流程，以及软件开发过程中涉及到的岗位角色，角色的分工、职责，并了解软件开发中涉及到的三种软件环境。那么这一小节，我们将从软件开发流程、角色分工、软件环境三个方面整体介绍一下软件开发。
在这里插入图片描述

第1阶段: 需求分析

完成需求规格说明书、产品原型编写。

需求规格说明书，一般来说就是使用 Word 文档来描述当前项目的各个组成部分，如：系统定义、应用环境、功能规格、性能需求等，都会在文档中描述。
产品原型，一般是通过网页(html)的形式展示当前的页面展示什么样的数据, 页面的布局是什么样子的，点击某个菜单，打开什么页面，点击某个按钮，出现什么效果，都可以通过产品原型看到。

第2阶段: 设计

设计的内容包含 UI设计、数据库设计、接口设计。

UI设计：用户界面的设计，主要设计项目的页面效果，小到一个按钮，大到一个页面布局，还有人机交互逻辑的体现。
数据库设计：需要设计当前项目中涉及到哪些数据库，每一个数据库里面包含哪些表，这些表结构之间的关系是什么样的，表结构中包含哪些字段。
接口设计：通过分析原型图，首先，粗粒度地分析每个页面有多少接口，然后，再细粒度地分析每个接口的传入参数，返回值参数，同时明确接口路径及请求方式。

第3阶段: 编码

编写项目代码、并完成单元测试。

项目代码编写：作为软件开发工程师，我们需要对项目的模块功能分析后，进行编码实现。
单元测试：编码实现完毕后，进行单元测试，单元测试通过后再进入到下一阶段。

第4阶段: 测试

在该阶段中主要由测试人员, 对部署在测试环境的项目进行功能测试, 并出具测试报告。

第5阶段: 上线运维

在项目上线之前，会由运维人员准备服务器上的软件环境安装、配置，配置完毕后，再将我们开发好的项目，部署在服务器上运行。

角色分工

在对整个软件开发流程熟悉后，我们还有必要了解一下在整个软件开发流程中涉及到的岗位角色，以及各个角色的职责分工。
在这里插入图片描述

软件环境

开发环境(development)
测试环境(testing)
生产环境(production)

苍穹外卖项目介绍

项目介绍

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

功能架构

在这里插入图片描述

管理端功能

员工登录/退出 , 员工信息管理 , 分类管理 , 菜品管理 , 套餐管理 , 菜品口味管理 , 订单管理，数据统计，来单提醒。

用户端功能

微信登录 , 收件人地址管理 , 用户历史订单查询 , 菜品规格查询 , 购物车功能 , 下单 , 支付、分类及菜品浏览。

产品原型

管理端原型图

在这里插入图片描述

用户端原型图

在这里插入图片描述

管理端主要功能

在这里插入图片描述

用户端主要功能

在这里插入图片描述

技术选型

关于本项目的技术选型, 我们将会从用户层、网关层、应用层、数据层这几个方面进行介绍，主要用于展示项目中使用到的技术框架和中间件等。
在这里插入图片描述

用户层

本项目中在构建系统管理后台的前端页面，我们会用到H5、Vue.js、ElementUI、apache echarts(展示图表)等技术。而在构建移动端应用时，我们会使用到微信小程序。

网关层

Nginx是一个服务器，主要用来作为Http服务器，部署静态资源，访问性能高。在Nginx中还有两个比较重要的作用：反向代理和负载均衡，在进行项目部署时，要实现Tomcat的负载均衡，就可以通过Nginx来实现。

应用层

SpringBoot：快速构建Spring项目, 采用 “约定优于配置” 的思想, 简化Spring项目的配置开发。

SpringMVC：SpringMVC是spring框架的一个模块，springmvc和spring无需通过中间整合层进行整合，可以无缝集成。

Spring Task: 由Spring提供的定时任务框架。

httpclient: 主要实现了对http请求的发送。

Spring Cache: 由Spring提供的数据缓存框架

JWT: 用于对应用程序上的用户进行身份验证的标记。

阿里云OSS: 对象存储服务，在项目中主要存储文件，如图片等。

Swagger：可以自动的帮助开发人员生成接口文档，并对接口进行测试。

POI: 封装了对Excel表格的常用操作。

WebSocket: 一种通信网络协议，使客户端和服务器之间的数据交换更加简单，用于项目的来单、催单功能实现。

数据层

MySQL：关系型数据库, 本项目的核心业务数据都会采用MySQL进行存储。

Redis：基于key-value格式存储的内存数据库, 访问速度快, 经常使用它做缓存。

Mybatis：本项目持久层将会使用Mybatis开发。

pagehelper: 分页插件。

spring data redis: 简化java代码操作Redis的API。

工具

git: 版本控制工具, 在团队协作中, 使用该工具对项目中的代码进行管理。

maven: 项目构建工具。

junit：单元测试工具，开发人员功能实现完毕后，需要通过junit对功能进行单元测试。

postman: 接口测工具，模拟用户发起的各类HTTP请求，获取对应的响应结果。

开发环境搭建

前端环境搭建

前端工程基于 nginx

从资料中找到前端运行环境的nginx，移动到非中文目录下。
在这里插入图片描述
sky目录中存放了管理端的前端资源，具体如下：

启动nginx，访问测试

双击 nginx.exe 即可启动 nginx 服务，访问端口号为 80
http://localhost:80
在这里插入图片描述

Mac系统启动nginx

安装nginx

# 安装nginx
[HOMEBREW_NO_AUTO_UPDATE=1] brew install nginx# 查看nginx信息（后续着重讲解）
brew info nginx# 启动
brew services start nginx# 修改配置后重启
brew services restart nginx# 停止
brew services stop nginx# 查看nginx是否启动，存在nginx:master即是启动中的nginx进程号
ps -ef|grep nginx

m2芯片，安装目录是：/opt/homebrew/Cellar/nginx
然后配置文件在：/opt/homebrew/etc/nginx
查看nginx的各个文件的配置：nginx -V（注意大写），
然后报错了可以查看错误日志：tail -f error.log

配置nginx

# 进入nginx配置文件目录
cd /opt/homebrew/etc/nginx/nginx.conf
# 修改配置文件
vim nginx.conf修改为以下内容：
worker_processes  1;
events {worker_connections  1024;
}
http {include       mime.types;default_type  application/octet-stream;sendfile        on;keepalive_timeout  65;map $http_upgrade $connection_upgrade{default upgrade;'' close;}upstream webservers{server 127.0.0.1:8080 weight=90 ;#server 127.0.0.1:8088 weight=10 ;}server {listen       80;server_name  localhost;location / {root   html/sky;index  index.html index.htm;}error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}# 反向代理,处理管理端发送的请求location /api/ {proxy_pass   http://localhost:8080/admin/;#proxy_pass   http://webservers/admin/;}# 反向代理,处理用户端发送的请求location /user/ {proxy_pass   http://webservers/user/;}# WebSocketlocation /ws/ {proxy_pass   http://webservers/ws/;proxy_http_version 1.1;proxy_read_timeout 3600s;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection "$connection_upgrade";}}
}

复制文件

看配置文件的内容,把资料中html中的文件复制到/opt/homebrew/Cellar/nginx/1.xx.xx/html 中，注意和nginx配置文件不在一个目录。
授权：sudo chmod -R 777 /opt/homebrew/Cellar/nginx/1.xx.xx/html/sky
在这里插入图片描述

验证

重启nginx，然后访问127.0.0.1

后端环境搭建

在这里插入图片描述

Git版本控制

在这里插入图片描述

数据库环境搭建

在这里插入图片描述

前后端联调

略

nginx反向代理和负载均衡

nginx 反向代理的配置方式：

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

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

nginx 负载均衡策略：
在这里插入图片描述
具体配置方式：
轮询：

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;
}

导入接口文档

将课程资料中提供的项目接口导入YApi。访问地址：https://yapi.adb-tech.com//

从资料中找到项目接口文件

在这里插入图片描述

导入到YApi平台

在这里插入图片描述

Swagger

导入 knife4j 的maven坐标

<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/");
}

访问测试

接口文档访问路径为 http://ip:port/doc.html —> http://localhost:8080/doc.html
在这里插入图片描述

常用注解

在这里插入图片描述

员工管理

员工管理效果

在这里插入图片描述

新增员工

需求分析和原型设计

在这里插入图片描述

接口设计

在这里插入图片描述

表设计

在这里插入图片描述

代码开发

略

功能测试

代码已经发开发完毕，对新增员工功能进行测试。

功能测试实现方式：

通过接口文档测试
通前后端联调测试

全局异常处理器

进入到sky-server模块，com.sky.hander包下，GlobalExceptionHandler.java添加方法。

	/*** 处理SQL异常* @param ex* @return*/@ExceptionHandlerpublic Result exceptionHandler(SQLIntegrityConstraintViolationException ex){//Duplicate entry 'zhangsan' for key 'employee.idx_username'String message = ex.getMessage();if(message.contains("Duplicate entry")){String[] split = message.split(" ");String username = split[2];String msg = username + MessageConstant.ALREADY_EXISTS;return Result.error(msg);}else{return Result.error(MessageConstant.UNKNOWN_ERROR);}}

ThreadLocal

介绍：
ThreadLocal 并不是一个Thread，而是Thread的局部变量。 ThreadLocal为每个线程提供单独一份存储空间，具有线程隔离的效果，只有在线程内才能获取到对应的值，线程外则不能访问。

常用方法：

public void set(T value) 设置当前线程的线程局部变量的值
public T get() 返回当前线程所对应的线程局部变量的值
public void remove() 移除当前线程的线程局部变量

在这里插入图片描述

员工分页查询

需求分析和原型设计

在这里插入图片描述

接口设计

在这里插入图片描述

代码开发

略

功能测试

略

操作时间字段显示优化

解决方法一

在属性上加上注解，对日期进行格式化，但这种方式，需要在每个时间属性上都要加上该注解，使用较麻烦，不能全局处理。
在这里插入图片描述

解决方法二（推荐）

在WebMvcConfiguration中扩展SpringMVC的消息转换器，统一对日期类型进行格式处理

	/*** 扩展Spring MVC框架的消息转化器* @param converters*/protected void extendMessageConverters(List<HttpMessageConverter<?>> converters) {log.info("扩展消息转换器...");//创建一个消息转换器对象MappingJackson2HttpMessageConverter converter = new MappingJackson2HttpMessageConverter();//需要为消息转换器设置一个对象转换器，对象转换器可以将Java对象序列化为json数据converter.setObjectMapper(new JacksonObjectMapper());//将自己的消息转化器加入容器中converters.add(0,converter);}

启用禁用员工账号

需求分析和原型设计

在这里插入图片描述

接口设计

在这里插入图片描述

代码开发

略

功能测试

略

编辑员工

需求分析和原型设计

在这里插入图片描述

接口设计

在这里插入图片描述

代码开发

略

功能测试

略

菜品分类

菜品分类效果

在这里插入图片描述

需求分析与原型设计

在这里插入图片描述

接口设计

根据上述原型图分析，菜品分类模块共涉及6个接口。

新增分类
分类分页查询
根据id删除分类
修改分类
启用禁用分类
根据类型查询分类

表设计

在这里插入图片描述

代码开发

略

功能测试

略

菜品管理

菜品管理效果图

在这里插入图片描述

公共字段自动填充

问题分析

在上一章节我们已经完成了后台系统的员工管理功能和菜品分类功能的开发，在新增员工或者新增菜品分类时需要设置创建时间、创建人、修改时间、修改人等字段，在编辑员工或者编辑菜品分类时需要设置修改时间、修改人等字段。这些字段属于公共字段，也就是也就是在我们的系统中很多表中都会有这些字段，如下：
在这里插入图片描述
而针对于这些字段，我们的赋值方式为：

1). 在新增数据时, 将createTime、updateTime 设置为当前时间, createUser、updateUser设置为当前登录用户ID。

2). 在更新数据时, 将updateTime 设置为当前时间, updateUser设置为当前登录用户ID。

目前,在我们的项目中处理这些字段都是在每一个业务方法中进行赋值操作,编码相对冗余、繁琐，那能不能对于这些公共字段在某个地方统一处理，来简化开发呢？

实现思路

在实现公共字段自动填充，也就是在插入或者更新的时候为指定字段赋予指定的值，使用它的好处就是可以统一对这些字段进行处理，避免了重复代码。在上述的问题分析中，我们提到有四个公共字段，需要在新增/更新中进行赋值操作, 具体情况如下:
在这里插入图片描述
实现步骤：

1). 自定义注解 AutoFill，用于标识需要进行公共字段自动填充的方法

2). 自定义切面类 AutoFillAspect，统一拦截加入了 AutoFill 注解的方法，通过反射为公共字段赋值

3). 在 Mapper 的方法上加入 AutoFill 注解

若要实现上述步骤，需掌握以下知识(之前课程内容都学过)

**技术点：**枚举、注解、AOP、反射

代码开发

略

功能测试

略

新增菜品

需求分析与原型设计

在这里插入图片描述

接口设计

根据上述原型图先粗粒度设计接口，共包含3个接口。

接口设计：

根据类型查询分类（已完成）
文件上传
新增菜品

在这里插入图片描述

表设计

在这里插入图片描述

代码开发

其中文件上传功能，采用阿里云的oss服务进行存储。
其他功能略。

功能测试

略

菜品分页查询

略

删除菜品

略

修改菜品

略

Redis入门

略

营业状态设置

营业状态设置效果图

在这里插入图片描述

需求分析与原型设计

进到苍穹外卖后台，显示餐厅的营业状态，营业状态分为营业中和打烊中，若当前餐厅处于营业状态，自动接收任何订单，客户可在小程序进行下单操作；若当前餐厅处于打烊状态，不接受任何订单，客户便无法在小程序进行下单操作。
在这里插入图片描述
点击营业状态按钮时，弹出更改营业状态：

接口设计

根据上述原型图设计接口，共包含3个接口。

设置营业状态
管理端查询营业状态
用户端查询营业状态

注：从技术层面分析，其实管理端和用户端查询营业状态时，可通过一个接口去实现即可。因为营业状态是一致的。但是，本项目约定：

管理端发出的请求，统一使用/admin作为前缀。
用户端发出的请求，统一使用/user作为前缀。

因为访问路径不一致，故分为两个接口实现。
在这里插入图片描述

代码开发

略

功能测试

略

HttpClient介绍

略

微信小程序开发

略

微信登录

微信登录：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html

需求分析和设计

用户进入到小程序的时候，微信授权登录之后才能点餐。需要获取当前微信用户的相关信息，比如昵称、头像等，这样才能够进入到小程序进行下单操作。是基于微信登录来实现小程序的登录功能，没有采用传统账户密码登录的方式。若第一次使用小程序来点餐，就是一个新用户，需要把这个新的用户保存到数据库当中完成自动注册。
在这里插入图片描述

接口设计

通过微信登录的流程，如果要完成微信登录的话，最终就要获得微信用户的openid。在小程序端获取授权码后，向后端服务发送请求，并携带授权码，这样后端服务在收到授权码后，就可以去请求微信接口服务。最终，后端向小程序返回openid和token等数据。
在这里插入图片描述

代码开发

略

商品浏览功能

该功能需要从代码包中导入。

需求分析和设计

在这里插入图片描述

接口设计

根据上述原型图先粗粒度设计接口，共包含4个接口。

接口设计：

查询分类
根据分类id查询菜品
根据分类id查询套餐
根据套餐id查询包含的菜品

接下来细粒度分析每个接口，明确每个接口的请求方式、请求路径、传入参数和返回值。
在这里插入图片描述

代码导入

略

功能测试

略

缓存菜品

功能介绍

用户端小程序展示的菜品数据都是通过查询数据库获得，如果用户端访问量比较大，数据库访问压力随之增大。
在这里插入图片描述
通过Redis来缓存菜品数据，减少数据库查询操作。

代码开发

略

功能测试

略

缓存套餐

Spring Cache

介绍

Spring Cache 是一个框架，实现了基于注解的缓存功能，只需要简单地加一个注解，就能实现缓存功能。

Spring Cache 提供了一层抽象，底层可以切换不同的缓存实现，例如：

EHCache
Caffeine
Redis(常用)

依赖地址

<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-cache</artifactId><version>2.7.3</version>		            		       	 					   
</dependency>

常用注解

在SpringCache中提供了很多缓存操作的注解，常见的是以下的几个：
在这里插入图片描述

@CachePut注解

作用: 将方法返回值，放入缓存

value: 缓存的名称, 每个缓存名称下面可以有很多key

key: 缓存的key ----------> 支持Spring的表达式语言SPEL语法

在save方法上加注解@CachePut

当前UserController的save方法是用来保存用户信息的，我们希望在该用户信息保存到数据库的同时，也往缓存中缓存一份数据，我们可以在save方法上加上注解 @CachePut，用法如下：

	/*** CachePut：将方法返回值放入缓存* value：缓存的名称，每个缓存名称下面可以有多个key* key：缓存的key*/@PostMapping@CachePut(value = "userCache", key = "#user.id")//key的生成：userCache::1public User save(@RequestBody User user){userMapper.insert(user);return user;}

**说明：**key的写法如下

#user.id : #user指的是方法形参的名称, id指的是user的id属性 , 也就是使用user的id属性作为key ;

#result.id : #result代表方法返回值，该表达式代表以返回对象的id属性作为key ；

#p0.id：#p0指的是方法中的第一个参数，id指的是第一个参数的id属性,也就是使用第一个参数的id属性作为key ;

#a0.id：#a0指的是方法中的第一个参数，id指的是第一个参数的id属性,也就是使用第一个参数的id属性作为key ;

#root.args[0].id:#root.args[0]指的是方法中的第一个参数，id指的是第一个参数的id属性,也就是使用第一个参数的id属性作为key ;

@Cacheable注解

作用: 在方法执行前，spring先查看缓存中是否有数据，如果有数据，则直接返回缓存数据；若没有数据，调用方法并将方法返回值放到缓存中

value: 缓存的名称，每个缓存名称下面可以有多个key

key: 缓存的key ----------> 支持Spring的表达式语言SPEL语法

在getById上加注解@Cacheable

	/*** Cacheable：在方法执行前spring先查看缓存中是否有数据，如果有数据，则直接返回缓存数据；若没有数据，	  *调用方法并将方法返回值放到缓存中* value：缓存的名称，每个缓存名称下面可以有多个key* key：缓存的key*/@GetMapping@Cacheable(cacheNames = "userCache",key="#id")public User getById(Long id){User user = userMapper.getById(id);return user;}

@CacheEvict注解

作用: 清理指定缓存

value: 缓存的名称，每个缓存名称下面可以有多个key

key: 缓存的key ----------> 支持Spring的表达式语言SPEL语法

在 delete 方法上加注解@CacheEvict

	@DeleteMapping@CacheEvict(cacheNames = "userCache",key = "#id")//删除某个key对应的缓存数据public void deleteById(Long id){userMapper.deleteById(id);}@DeleteMapping("/delAll")@CacheEvict(cacheNames = "userCache",allEntries = true)//删除userCache下所有的缓存数据public void deleteAll(){userMapper.deleteAll();}

实现思路

1). 导入Spring Cache和Redis相关maven坐标

2). 在启动类上加入@EnableCaching注解，开启缓存注解功能

3). 在用户端接口SetmealController的 list 方法上加入@Cacheable注解

4). 在管理端接口SetmealController的 save、delete、update、startOrStop等方法上加入CacheEvict注解。

代码开发

略

功能测试

略

添加购物车

需求分析和设计

用户可以将菜品或者套餐添加到购物车。对于菜品来说，如果设置了口味信息，则需要选择规格后才能加入购物车;对于套餐来说，可以直接点击在这里插入图片描述将当前套餐加入购物车。在购物车中可以修改菜品和套餐的数量，也可以清空购物车。

接口设计

在这里插入图片描述
**说明：**添加购物车时，有可能添加菜品，也有可能添加套餐。故传入参数要么是菜品id，要么是套餐id。

表设计

在这里插入图片描述

代码开发

略

功能测试

略

查看购物车

需求分析和设计

当用户添加完菜品和套餐后，可进入到购物车中，查看购物中的菜品和套餐。
在这里插入图片描述

接口设计

在这里插入图片描述

代码开发

略

功能测试

略

清空购物车

需求分析和设计

当点击清空按钮时，会把购物车中的数据全部清空。
在这里插入图片描述

接口设计

在这里插入图片描述

代码开发

略

功能测试

略

导入地址簿功能代码

需求分析和设计

地址簿，指的是消费者用户的地址信息，用户登录成功后可以维护自己的地址信息。同一个用户可以有多个地址信息，但是只能有一个默认地址。
在这里插入图片描述
对于地址簿管理，我们需要实现以下几个功能：

查询地址列表
新增地址
修改地址
删除地址
设置默认地址
查询默认地址

接口设计

根据上述原型图先粗粒度设计接口，共包含7个接口。

接口设计：

新增地址
查询登录用户所有地址
查询默认地址
根据id修改地址
根据id删除地址
根据id查询地址
设置默认地址

接下来细粒度分析每个接口，明确每个接口的请求方式、请求路径、传入参数和返回值。
在这里插入图片描述

表设计

在这里插入图片描述

代码开发

略

功能测试

略

用户下单

需求分析和设计

用户下单业务说明：在电商系统中，用户是通过下单的方式通知商家，用户已经购买了商品，需要商家进行备货和发货。用户下单后会产生订单相关数据，订单数据需要能够体现如下信息：
在这里插入图片描述

接口设计

在这里插入图片描述

表设计

在这里插入图片描述

代码开发

略

功能测试

略

订单支付

微信支付介绍

在这里插入图片描述
本项目选择小程序支付

参考：https://pay.weixin.qq.com/static/product/product_index.shtml
在这里插入图片描述

微信小程序支付时序图：
在这里插入图片描述
微信支付相关接口：

微信支付准备工作

略

内网穿透工具

通过cpolar软件可以获得一个临时域名，而这个临时域名是一个公网ip，这样，微信后台就可以请求到商户系统了。

下载与安装

下载地址：https://dashboard.cpolar.com/get-started
在这里插入图片描述

cpolar指定authtoken

在这里插入图片描述

获取临时域名

在这里插入图片描述

验证临时域名有效性

在这里插入图片描述

代码导入

略

功能测试

略

Spring Task

介绍

Spring Task 是Spring框架提供的任务调度工具，可以按照约定的时间自动执行某个代码逻辑。

**定位：**定时任务框架

**作用：**定时自动执行某段Java代码

cron表达式

cron表达式其实就是一个字符串，通过cron表达式可以定义任务触发的时间

**构成规则：**分为6或7个域，由空格分隔开，每个域代表一个含义

每个域的含义分别为：秒、分钟、小时、日、月、周、年(可选)

举例：

2022年10月12日上午9点整对应的cron表达式为：0 0 9 12 10 ? 2022

说明：一般日和周的值不同时设置，其中一个设置，另一个用？表示。

**比如：**描述2月份的最后一天，最后一天具体是几号呢？可能是28号，也有可能是29号，所以就不能写具体数字。

为了描述这些信息，提供一些特殊的字符。这些具体的细节，我们就不用自己去手写，因为这个cron表达式，它其实有在线生成器。

cron表达式在线生成器：https://cron.qqe2.com/
在这里插入图片描述
可以直接在这个网站上面，只要根据自己的要求去生成corn表达式即可。所以一般就不用自己去编写这个表达式。
通配符：

表示所有值；

? 表示未说明的值，即不关心它为何值；

表示一个指定的范围；

, 表示附加一个可能值；

/ 符号前表示开始时间，符号后表示每次递增的值；

cron表达式案例：

*/5 * * * * ? 每隔5秒执行一次

0 */1 * * * ? 每隔1分钟执行一次

0 0 5-15 * * ? 每天5-15点整点触发

0 0/3 * * * ? 每三分钟触发一次

0 0-5 14 * * ? 在每天下午2点到下午2:05期间的每1分钟触发

0 0/5 14 * * ? 在每天下午2点到下午2:55期间的每5分钟触发

0 0/5 14,18 * * ? 在每天下午2点到2:55期间和下午6点到6:55期间的每5分钟触发

0 0/30 9-17 * * ? 朝九晚五工作时间内每半小时

0 0 10,14,16 * * ? 每天上午10点，下午2点，4点

入门案例

略

订单状态定时处理

需求分析

用户下单后可能存在的情况：

下单后未支付，订单一直处于**“待支付”**状态
用户收货后管理端未点击完成按钮，订单一直处于**“派送中”**状态

在这里插入图片描述
支付超时的订单如何处理？派送中的订单一直不点击完成如何处理？

对于上面两种情况需要通过定时任务来修改订单状态，具体逻辑为：

通过定时任务每分钟检查一次是否存在支付超时订单（下单后超过15分钟仍未支付则判定为支付超时订单），如果存在则修改订单状态为“已取消”
通过定时任务每天凌晨1点检查一次是否存在“派送中”的订单，如果存在则修改订单状态为“已完成”

代码开发

略

功能测试

略

WebSocket

介绍

WebSocket 是基于 TCP 的一种新的网络协议。它实现了浏览器与服务器全双工通信——浏览器和服务器只需要完成一次握手，两者之间就可以创建持久性的连接，并进行双向数据传输。

HTTP协议和WebSocket协议对比：

HTTP是短连接
WebSocket是长连接
HTTP通信是单向的，基于请求响应模式
WebSocket支持双向通信
HTTP和WebSocket底层都是TCP连接

在这里插入图片描述

WebSocket缺点

服务器长期维护长连接需要一定的成本各个浏览器支持程度不一 WebSocket 是长连接，受网络限制比较大，需要处理好重连

**结论：**WebSocket并不能完全取代HTTP，它只适合在特定的场景下使用

WebSocket应用场景

视频弹幕

在这里插入图片描述

网页聊天

在这里插入图片描述

体育实况更新

股票基金报价实时更新

在这里插入图片描述

入门案例

略

来单提醒

需求分析和设计

用户下单并且支付成功后，需要第一时间通知外卖商家。通知的形式有如下两种：

语音播报
弹出提示框

在这里插入图片描述
设计思路：

通过WebSocket实现管理端页面和服务端保持长连接状态
当客户支付后，调用WebSocket的相关API实现服务端向客户端推送消息
客户端浏览器解析服务端推送的消息，判断是来单提醒还是客户催单，进行相应的消息提示和语音播报
约定服务端发送给客户端浏览器的数据格式为JSON，字段包括：type，orderId，content
- type 为消息类型，1为来单提醒 2为客户催单
- orderId 为订单id
- content 为消息内容

代码开发

略

功能测试

略

客户催单

需求分析和设计

用户在小程序中点击催单按钮后，需要第一时间通知外卖商家。通知的形式有如下两种：

语音播报
弹出提示框

在这里插入图片描述
设计思路：

通过WebSocket实现管理端页面和服务端保持长连接状态
当用户点击催单按钮后，调用WebSocket的相关API实现服务端向客户端推送消息
客户端浏览器解析服务端推送的消息，判断是来单提醒还是客户催单，进行相应的消息提示和语音播报约定服务端发送给客户端浏览器的数据格式为JSON，字段包括：type，orderId，content
- type 为消息类型，1为来单提醒 2为客户催单
- orderId 为订单id
- content 为消息内容

当用户点击催单按钮时，向服务端发送请求。

接口设计

在这里插入图片描述

代码开发

略

功能测试

略

Apache ECharts

介绍

Apache ECharts 是一款基于 Javascript 的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。官网地址：https://echarts.apache.org/zh/index.html
在这里插入图片描述

入门案例

略

营业额统计

产品原型

营业额统计是基于折现图来展现，并且按照天来展示的。实际上，就是某一个时间范围之内的每一天的营业额。同时，不管光标放在哪个点上，那么它就会把具体的数值展示出来。并且还需要注意日期并不是固定写死的，是由上边时间选择器来决定。比如选择是近7天、或者是近30日，或者是本周，就会把相应这个时间段之内的每一天日期通过横坐标展示。
在这里插入图片描述

接口设计

在这里插入图片描述

代码开发

略

功能测试

略

用户统计

需求分析和设计

所谓用户统计，实际上统计的是用户的数量。通过折线图来展示，上面这根蓝色线代表的是用户总量，下边这根绿色线代表的是新增用户数量，是具体到每一天。所以说用户统计主要统计两个数据，一个是总的用户数量，另外一个是新增用户数量。
在这里插入图片描述
业务规则：

基于可视化报表的折线图展示用户数据，X轴为日期，Y轴为用户数
根据时间选择区间，展示每天的用户总量和新增用户量数据

接口设计

在这里插入图片描述

代码开发

略

功能测试

略

订单统计

需求分析和设计

订单统计通过一个折现图来展现，折线图上有两根线，这根蓝色的线代表的是订单总数，而下边这根绿色的线代表的是有效订单数，指的就是状态是已完成的订单就属于有效订单，分别反映的是每一天的数据。上面还有3个数字，分别是订单总数、有效订单、订单完成率，它指的是整个时间区间之内总的数据。
在这里插入图片描述
业务规则：

有效订单指状态为 “已完成” 的订单
基于可视化报表的折线图展示订单数据，X轴为日期，Y轴为订单数量
根据时间选择区间，展示每天的订单总数和有效订单数
展示所选时间区间内的有效订单数、总订单数、订单完成率，订单完成率 = - 有效订单数 / 总订单数 * 100%

接口设计

在这里插入图片描述

代码开发

略

功能测试

略

销量排名Top10

需求分析和设计

所谓销量排名，销量指的是商品销售的数量。项目当中的商品主要包含两类：一个是套餐，一个是菜品，所以销量排名其实指的就是菜品和套餐销售的数量排名。通过柱形图来展示销量排名，这些销量是按照降序来排列，并且只需要统计销量排名前十的商品。
在这里插入图片描述
业务规则：

根据时间选择区间，展示销量前10的商品（包括菜品和套餐）
基于可视化报表的柱状图降序展示商品销量
此处的销量为商品销售的份数

接口设计

在这里插入图片描述

代码开发

略

功能测试

略

工作台功能

需求分析和设计

工作台是系统运营的数据看板，并提供快捷操作入口，可以有效提高商家的工作效率。

工作台展示的数据：

今日数据
订单管理
菜品总览
套餐总览
订单信息

名词解释：
营业额：已完成订单的总金额
有效订单：已完成订单的数量
订单完成率：有效订单数 / 总订单数 * 100%
平均客单价：营业额 / 有效订单数
新增用户：新增用户的数量

接口设计

通过上述原型图分析，共包含6个接口。

接口设计：

今日数据接口
订单管理接口
菜品总览接口
套餐总览接口
订单搜索（已完成）
各个状态的订单数量统计（已完成）

在这里插入图片描述

代码导入

略

功能测试

略

Apache POI

介绍

Apache POI 是一个处理Miscrosoft Office各种文件格式的开源项目。简单来说就是，我们可以使用 POI 在 Java 程序中对Miscrosoft Office各种文件进行读写操作。一般情况下，POI 都是用于操作 Excel 文件。
在这里插入图片描述

入门案例

略

导出运营数据Excel报表

需求分析和设计

在数据统计页面，有一个数据导出的按钮，点击该按钮时，其实就会下载一个文件。这个文件实际上是一个Excel形式的文件，文件中主要包含最近30日运营相关的数据。表格的形式已经固定，主要由概览数据和明细数据两部分组成。真正导出这个报表之后，相对应的数字就会填充在表格中，就可以进行存档。
在这里插入图片描述

业务规则：

导出Excel形式的报表文件
导出最近30天的运营数据

接口设计

在这里插入图片描述

代码开发

略

功能测试

略