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

【苍穹外卖项目】Day01

📘博客主页:程序员葵安

🫶感谢大家点赞👍🏻收藏⭐评论✍🏻

                文章目录

一、苍穹外卖项目介绍

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 进行项目构建,并且进行分模块开发。

序号名称说明
1sky-take-outmaven父工程,统一管理依赖版本,聚合其他子模块
2sky-common子模块,存放公共类,例如:工具类、常量类、异常类等
3sky-pojo子模块,存放实体类、VO、DTO等
4sky-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文件

序号表名中文名
1employee员工表
2category分类表
3dish菜品表
4dish_flavor菜品口味表
5setmeal套餐表
6setmeal_dish套餐菜品关系表
7user用户表
8address_book地址表
9shopping_cart购物车表
10orders订单表
11order_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的方法,说明方法的用途、作用

 

相关文章:

  • ZeroTier+CCproxy+Proxifier实现内网穿透和流量转发
  • uniapp 腾讯云 COS 文件管理进阶(文件夹分类与批量操作)
  • 网络安全A模块专项练习任务七解析
  • 常见的网络协议有哪些
  • 数据结构学习20250612
  • Transformer模型详解
  • Docker 构建文件代码说明文档
  • Vue 3 前端和 Spring Boot 后端生成 Docker 镜像的标准做法
  • CentOS7下MySQL8.0的安装到基本操作
  • ubuntu网络连接失败 + mobaxterm拖拽文件出错等问题解决方法
  • 42 C 语言随机数生成:rand() 与 srand() 深度解析、生成指定范围随机数、应用实战
  • vue通过路由传参时布尔类型问题
  • 力扣-198.打家劫舍
  • Excel大厂自动化报表实战(互联网金融-数据分析周报制作上)
  • 2.倒排索引
  • 补充讲解perfetto/systrace的CPU Trace信息详解和抓取方法
  • 博图SCL语言教程:灵活加、减计数制作自己的增减计数器(CTUD)
  • VUE - AxiosError-ERR_BAD_REQUEST
  • ZooKeeper详解以及应用部署(AI)
  • 日语学习-日语知识点小记-构建基础-JLPT-N4阶段(34):ようですそうですばかりのに
  • wordpress模版开发/合肥360seo排名
  • 技术网站建设/网络广告的形式有哪些
  • dreamweaver可以做网站/灰色词排名代做
  • 深圳网站建设 手机网站建设/网站群发推广软件
  • 网站建设找睿智骄阳/手游推广平台有哪些
  • 网站运维公司/新闻发布平台有哪些