文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

苍穹外卖(一)最适合新手的Java练手项目Springboot+SSM项目《苍穹外卖》项目实战、笔记(超详细、新手)[持续更新]

2023-09-02 19:22

关注

项目地址https://gitee.com/zhang-zakcomy/cang-qiong-take-out/

软件开发流程

image.png

  1. 需求分析

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

  1. 设计

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

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

接口,就相当于某种协议,在软件或项目设计中让不同的组件或模块之间更好地相互联系、协同工作

  1. 编码:这个阶段主要是根据设计文档,实现软件的各个模块和功能,编写具体的代码。在这个阶段,需要注重代码的质量和可读性,同时需要遵循编码规范和标准,确保代码的可靠性和可维护性。
  2. 测试:这个阶段主要是对编译好的程序进行测试,验证程序是否符合需求和设计要求,同时发现并修复可能存在的缺陷和漏洞。在这个阶段,需要制定详细的测试计划和测试用例,同时需要考虑到各种可能的场景和情况,确保程序的的质量和稳定性。
  3. 上线运维:这个阶段主要是将程序部署到生产环境中,进行实际的运行和维护。在这个阶段,需要制定合理的部署计划和运行维护方案,同时需要实时监控程序的的状态和运行情况,及时发现并处理可能出现的问题和故障。

角色分工

在对整个软件开发流程熟悉后, 我们还有必要了解一下在整个软件开发流程中涉及到的岗位角色,以及各个角色的职责分工。

岗位/角色对应阶段职责/分工
项目经理全阶段对整个项目负责,任务分配、把控进度
产品经理需求分析进行需求调研,输出需求调研文档、产品原型等
UI设计师设计根据产品原型输出界面效果图
架构师设计项目整体架构设计、技术选型等
开发工程师编码功能代码实现
测试工程师测试编写测试用例,输出测试报告
运维工程师上线运维软件环境搭建、项目上线

在实际的项目中, 有一些项目组由于人员配置紧张, 可能并没有专门的架构师或测试人员, 这个时候可能需要有项目经理或者程序员兼任。

软件环境

作为软件开发工程师,在编码的过程中就不可避免地会接触多种软件环境,我们主要来分析在工作中经常遇到的三套环境, 分别是: 开发环境、测试环境、生产环境。 接下来,我们分别介绍一下这三套环境的作用和特点。
1). 开发环境(development)
我们作为软件开发人员,在开发阶段使用的环境,就是开发环境,一般外部用户无法访问。
比如,我们在开发中使用的MySQL数据库和其他的一些常用软件,我们可以安装在本地, 也可以安装在一台专门的服务器中, 这些应用软件仅仅在软件开发过程中使用, 项目测试、上线时,我们不会使用这套环境了,这个环境就是开发环境。
2). 测试环境(testing)
当软件开发工程师,将项目的功能模块开发完毕,并且单元测试通过后,就需要将项目部署到测试服务器上,让测试人员对项目进行测试。那这台测试服务器就是专门给测试人员使用的环境, 也就是测试环境,用于项目测试,一般外部用户无法访问。
3). 生产环境(production)
当项目开发完毕,并且由测试人员测试通过之后,就可以上线项目,将项目部署到线上环境,并正式对外提供服务,这个线上环境也称之为生产环境。

首先,会在开发环境中进行项目开发,往往开发环境大多数都是本地的电脑环境和局域网内的环境,当开发完毕后,然后会把项目部署到测试环境,测试环境一般是一台独立测试服务器的环境,项目测试通过后,最终把项目部署到生产环境,生产环境可以是机房或者云服务器等线上环境。

项目介绍

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

产品原型

产品原型,用于展示项目的业务功能,一般由产品经理进行设计。
注意事项: 产品原型主要用于展示项目的功能,并不是最终的页面效果。
“资料”文件夹的产品原型文件夹下,提供了两份产品原型。
image.png
1). 管理端
餐饮企业内部员工使用。 主要功能有:

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

2). 用户端
移动端应用主要提供给消费者使用。主要功能有:

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

技术选型

image.png
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请求,获取对应的响应结果。

前端环境搭建

  1. 前端工程基于nginx

在“资料”中:
image.png
image.png放在一个目录地址没有中文的文件夹下,取名为“CangqiongTakeout”image.png

一定要将这个文件夹放在木有中文的目录下,否则启动不成功

  1. 启动nginx,访问测试

双击nginx.exeqidong nginx服务,访问端口号为80
http://localhost/
如果启动成功,界面如下:
image.png

后端环境搭建

熟悉项目结构

后端工程基于maven进行项目创建,并且进行分模块开发

  1. 从“资料”中找到后端初始工程

image.png

  1. 将初始工程复制到刚才创建的“CangqiongTakeout”目录下

image.png
用IDEA打开初始工程,了解项目结构


如果项目没有生成.iml文件,则需要进行以下设置:

  1. 在本项目下打开idea里面的终端

image.png

  1. .进入到对应模块,输入mvn idea:module 命令,回车
  2. BUILD SUCCESS后,看到对应模块下,生成了.iml文件

image.png


设置后之后,初始项目结构如下
image.png


对工程的每个模块作用说明:

序号名称说明
1sky-take-outmaven父工程,统一管理依赖版本,聚合其他子模块
2sky-common子模块,存放公共类,例如:工具类、常量类、异常类等
3sky-pojo子模块,存放实体类、VO、DTO等
4sky-server子模块,后端服务,存放配置文件、Controller、Service、Mapper等

对项目整体结构了解后,接下来详细分析上述的每个子模块:

git版本控制

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

  1. 创建git仓库

image.pngimage.png
当IDEA中出现image.png时创建成功

  1. 创建git远程仓库

登录链接gitee.com,新建仓库
image.pngimage.png
点击“创建”后如下图:
image.png

  1. 提交文件至本地仓库

image.png
开始提交:
点击此处image.png
image.pngimage.png

  1. 添加至git远程仓库

image.png

image.pngimage.png
推送完成
刷新gitee页面:
image.png

数据库环境搭建

image.png
将数据库中sky.sql文件导入MySQL,间脚本代码复制到MySQL运行即可
创建出11张表
image.png
image.png
修改idea后端代码 的数据库 的配置信息

前后端联调

后端的初始工程中已经实现了登录功能,直接进行前后端联调测试即可

意思就是,在后端已经有了登录功能的代码了,前端也有了页面实现的代码了,现在需要将前后端联结起来

image.png


首先,先编译一下,能够保证项目能够正常运行
image.png
image.png
登录一下:
双击nginx.exeqidong nginx服务,访问端口号为80
http://localhost/

要保证前面数据库idea中将相关配置信息根据实际情况配制成自己数据库的信息

image.png
点击登录:
image.png

右上角的“错误”先不用管,后面会解决

nginx反向代理和负载均衡

对登录功能测试完毕后,接下来,思考一个问题:前端发送的请求,是如何请求到后端服务的?
在使用Nginx作为反向代理的Java项目中,前端发送的请求会被Nginx接收并处理,然后转发给后端服务。以下是一些基本步骤:

  1. 客户端(前端)发送请求到Nginx服务器。
  2. Nginx服务器接收请求,并根据配置的规则进行处理。
  3. Nginx根据配置的规则将请求转发给后端服务。
  4. 后端服务接收到请求并处理,然后返回响应。
  5. Nginx接收后端服务的响应,并将其返回给客户端。

在这个过程中,Nginx扮演了反向代理的角色,接收客户端的请求并转发给后端服务,同时也将后端服务的响应返回给客户端。通过Nginx,可以实现对请求的负载均衡、缓存、安全过滤等处理,提高系统的性能和安全性。


当你在浏览器中输入一个网站地址并发送请求时,这个请求首先会被Nginx服务器接收。Nginx服务器会根据你发送的请求类型、请求头、参数等来进行处理,然后决定将请求转发给哪个后端服务。这个后端服务可以是应用程序服务器、数据库服务器或其他类型的服务。
一旦后端服务接收到请求并处理完成,它会将响应返回给Nginx服务器。Nginx服务器再将这些响应返回给你所在的浏览器。在这个过程中,Nginx还可以对请求和响应进行一些处理,例如提供缓存功能、防止DDoS攻击、拦截恶意请求等,从而提高系统的性能和安全性。

在实际情况中,前端请求地址和后端接口地址通常是不一致的,这是因为前端通常只需要知道如何将请求发送到后端,而不需要知道后端的具体实现细节,包括端口、上下文路径等。

在nginx服务器中,可以通过配置反向代理来实现前后端请求的映射。具体来说,可以在nginx配置文件中添加以下配置:

location /api {    proxy_pass http://localhost/80/admin;}

这样,当有请求发送到nginx服务器的/api路径时,nginx会将请求转发到后端服务器的/admin路径。
在SpringBoot项目中,也可以使用Spring Cloud Gateway等反向代理框架来实现前后端请求的映射。例如,可以配置Spring Cloud Gateway的路由规则,将/api/_路由到后端服务器的/admin/_路径。
总之,无论使用nginx还是Spring Cloud Gateway等反向代理框架,都可以实现前后端请求的映射,使得前端请求能够正确地请求到后端服务。

接下来,就要进入到项目的业务开发了,而我们的开发方式就是基于当前企业主流的前后端分离开发方式,那么这种方式就要求我们之前需要先将接口定义好,这样前后端人员才能并行开发,所以,这个章节就需要将接口文档导入到管理平台,为我们后面业务开发做好准备。其实,在真实的企业开发中,接口设计过程其实是一个非常漫长的过程,可能需要多次开会讨论调整,甚至在开发的过程中才会发现某些接口定义还需要再调整,这种情况其实是非常常见的,但是由于项目时间原因,所以选择一次性导入所有的接口,在开发业务功能过程当中,也会带着大家一起来分析一下对应的接口是怎么确定下来的,为什么要这样定义,从而培养同学们的接口设计能力。

前后端分离开发流程

第一步:定义接口,确定接口的路径、请求方式、传入参数、返回参数。
第二步:前端开发人员和后端开发人员并行开发,同时,也可自测。
第三步:前后端人员进行连调测试。
第四步:提交给测试人员进行最终测试

操作步骤

  1. 找到“资料”中的接口文件

image.png

  1. 导入到Yapi平台

登录Yapi
image.png
image.pngimage.png
image.png
两个操作步骤相同

介绍

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框架。

使用步骤

  1. 导入 knife4j 的maven坐标
    在pom.xml中添加依赖
<dependency>   <groupId>com.github.xiaoymingroupId>   <artifactId>knife4j-spring-boot-starterartifactId>dependency>
  1. 在配置类中加入 knife4j 相关配置
    WebMvcConfiguration.java
    @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;    }
  1. 设置静态资源映射,否则接口文档页面无法访问
    WebMvcConfiguration.java
protected void addResourceHandlers(ResourceHandlerRegistry registry) {        registry.addResourceHandler("/doc.html").addResourceLocations("classpath:/META-INF/resources/");        registry.addResourceHandler("/webjars@RestController@RequestMapping("/admin/employee")@Slf4j@Api(tags = "员工相关接口")public class EmployeeController {    @Autowired    private EmployeeService employeeService;    @Autowired    private JwtProperties jwtProperties;        @PostMapping("/login")    @ApiOperation(value = "员工登录")    public Result<EmployeeLoginVO> login(@RequestBody EmployeeLoginDTO employeeLoginDTO) {        //..............            }        @PostMapping("/logout")    @ApiOperation("员工退出")    public Result<String> logout() {        return Result.success();    }}

启动服务:访问http://localhost/80/doc.html
image.png

  1. 这个项目最开始是直接导入的黑马程序员的所谓的“初始项目”
    1. 就是实现把框架、依赖、配置等都给你实现好了
  2. 先跟着视频教程流程完成这个项目吧
    1. 有些地方可能不适合细嚼慢咽地理解,而是囫囵吞枣
    2. 可能等完成整个项目的时候,就自然而然地有些地方就理解了
    3. 可能有些地方完成这个项目之后也不明白,但是再完成这个项目后就理解了
  3. 完成一个项目或一个项目中的某一阶段要停下来
    1. 看看之囫囵吞下去的东西现在能不能嚼的动

来源地址:https://blog.csdn.net/qq_64744030/article/details/132009782

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯