项目整体介绍

本文介绍了瑞吉外卖项目的开发流程,包括软件开发的五个阶段和角色分工。详细讲解了开发环境搭建,如数据库创建、maven项目配置,并重点展示了后台登录和退出功能的开发过程,包括需求分析、代码实现和功能测试。同时,项目采用了SpringBoot、MybatisPlus等技术栈。
摘要由CSDN通过智能技术生成

1.软件开发流程

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

1). 第1阶段: 需求分析

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

产品原型,一般是通过网页(html)的形式展示当前的页面展示什么样的数据, 页面的布局是什么样子的,点击某个菜单,打开什么页面,点击某个按钮,出现什么效果,都可以通过产品原型看到。

需求规格说明书, 一般来说就是使用 Word 文档来描述当前项目有哪些功能,每一项功能的需求及业务流程是什么样的,都会在文档中描述。

2). 第2阶段: 设计

设计的内容包含 产品设计、UI界面设计、概要设计、详细设计、数据库设计。

在设计阶段,会出具相关的UI界面、及相关的设计文档。比如数据库设计,需要设计当前项目中涉及到哪些数据库,每一个数据库里面包含哪些表,这些表结构之间的关系是什么样的,表结构中包含哪些字段,字段类型都会在文档中描述清楚。

3). 第3阶段: 编码

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

作为软件开发工程师,我们主要的工作就是在该阶段, 对分配给我们的模块功能,进行编码实现。编码实现完毕后,进行单元测试,单元测试通过后再进入到下一阶段。

4). 第4阶段: 测试

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

5). 第5阶段: 上线运维

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

我们作为软件开发工程师, 我们主要的任务是在编码阶段, 但是在一些小的项目组当中, 也会涉及到数据库的设计、测试等方面的工作。

2.角色分工

  • 项目经理:对整个项目负责,任务分配、把控进度

  • 产品经理:进行需求调研,输出需求调研文档、产品原型等

  • UI设计师:根据产品原型输出界面效果图

  • 架构师:项目整体架构设计、技术选型等

  • 开发工程师:代码实现

  • 测试工程师:编写测试用例,输出测试报告

  • 运维工程师:软件环境搭建、项目上线

     当然正常情况跟公司相关

    上述我们讲解的角色分工, 是在一个项目组中比较标准的角色分工, 但是在实际的项目中, 有一些项目组由于人员配置紧张, 可能并没有专门的架构师或测试人员, 这个时候可能需要有项目经理或者程序员兼任。    

3 软件环境

1). 开发环境(development)

我们作为软件开发人员,在开发阶段使用的环境,就是开发环境,一般外部用户无法访问。

比如,我们在开发中使用的MySQL数据库和其他的一些常用软件,我们可以安装在本地, 也可以安装在一台专门的服务器中, 这些应用软件仅仅在软件开发过程中使用, 项目测试、上线时,我们不会使用这套环境了,这个环境就是开发环境。

2). 测试环境(testing)

当软件开发工程师,将项目的功能模块开发完毕,并且单元测试通过后,就需要将项目部署到测试服务器上,让测试人员对项目进行测试。那这台测试服务器就是专门给测试人员使用的环境, 也就是测试环境,用于项目测试,一般外部用户无法访问。

3). 生产环境(production)

当项目开发完毕,并且由测试人员测试通过之后,就可以上线项目,将项目部署到线上环境,并正式对外提供服务,这个线上环境也称之为生产环境。

 拓展知识:

准生产环境: 对于有的公司来说,项目功能开发好, 并测试通过以后,并不是直接就上生产环境。为了保证我们开发的项目在上线之后能够完全满足要求,就需要把项目部署在真实的环境中, 测试一下是否完全符合要求啊,这时候就诞生了准生产环境,你可以把他当做生产环境的克隆体,准生产环境的服务器配置, 安装的应用软件(JDK、Tomcat、数据库、中间件 ...) 的版本都一样,这种环境也称为 "仿真环境"。

ps.由于项目的性质和类型不同,有的项目可能不需要这个环境

二、瑞吉外卖项目介绍

1 项目介绍

1.1 项目介绍

本项目(瑞吉外卖)是专门为餐饮企业(餐厅、饭店)定制的一款软件产品,包括系统管理后台和移动端应用两部分。其中系统管理后台主要提供给餐饮企业内部员工使用,可以对餐厅的菜品、套餐、订单等进行管理维护。移动端应用主要提供给消费者使用,可以在线浏览菜品、添加购物车、下单等。

本项目共分为3期进行开发:

  1. 第一期主要实现基本需求,其中移动端应用通过H5实现,用户可以通过手机浏览器访问。

  2. 第二期主要针对移动端应用进行改进,使用微信小程序实现,用户使用起来更加方便。

  3. 第三期主要针对系统进行优化升级,提高系统的访问性能。

1.2瑞吉外卖后台效果图(管理端)

1.3瑞吉外卖前台效果图(用户端)

2 产品原型展示

==产品原型==,就是一款产品成型之前的一个简单的框架,就是将页面的排版布局展现出来,使产品的初步构思有一个可视化的展示。通过原型展示,可以更加直观的了解项目的需求和提供的功能。

==注意:产品原型主要用于展示项目的功能,并不是最终的页面效果。==

1). 管理端

餐饮企业内部员工使用。 主要功能有:

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

2). 用户端

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

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

3 技术选型

关于本项目的技术选型, 我们将会从 用户层、网关层、应用层、数据层 这几个方面进行介绍,而对于我们服务端开发工程师来说,在项目开发过程中,我们主要关注应用层及数据层技术的应用。

 

1). 用户层

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

2). 网关层

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

3). 应用层

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

Spring: 统一管理项目中的各种资源(bean), 在web开发的各层中都会用到。

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

SpringSession: 主要解决在集群环境下的Session共享问题。

lombok:能以简单的注解形式来简化java代码,提高开发人员的开发效率。例如开发中经常需要写的javabean,都需要花时间去添加相应的getter/setter,也许还要去写构造器、equals等方法。

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

4). 数据层

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

MybatisPlus: 本项目持久层将会使用MybatisPlus来简化开发, 基本的单表增删改查直接调用框架提供的方法即可。

Redis: 基于key-value格式存储的内存数据库, 访问速度快, 经常使用它做缓存(降低数据库访问压力, 提供访问效率), 在后面的性能优化中会使用。

5). 工具

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

maven: 项目构建工具。

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

4 功能架构

1). 移动端前台功能

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

2). 系统管理后台功能

员工登录/退出 , 员工信息管理 , 分类管理 , 菜品管理 , 套餐管理 , 菜品口味管理 , 订单管理 。

5 角色

在瑞吉外卖这个项目中,存在以下三种用户,这三种用户对应三个角色: 后台系统管理员、后台系统普通员工、C端(移动端)用户。

  • 后台系统管理员:登录后台管理系统,拥有后台系统中的所有操作权限

  • 后台系统普通员工:登录后台管理系统,对菜品、套餐、订单等进行管理

  • C端(移动端)用户:登录移动端应用,可以浏览菜品、添加购物车、设置地址、在线下单等

三、开发环境搭建【重点】

前面这么多都是刚接触项目的时候需要了解的

接下来就是环境搭建

1.1 创建项目对应的数据库(图形界面或者命令行都可以)

1.2 导入表结构(资料/数据模型/db_reggie.sql)

导入表结构,既可以使用上面的图形界面,也可以使用MySQL命令:通过命令导入表结构时,==注意sql文件不要放在中文目录中==。  

注意: 通过命令导入表结构时,注意sql文件不要放在中文目录中

1.3 表介绍

序号表名说明
1employee员工表
2category菜品和套餐分类表
3dish菜品表
4setmeal套餐表
5setmeal_dish套餐菜品关系表
6dish_flavor菜品口味关系表
7user用户表(用户端)
8address_book地址簿表
9shopping_cart购物车表
10orders订单表
11order_detail订单明细表

2 maven项目搭建

我用的是springboot来创建

2.1 创建==reggie_take_out==项目

2.2 复制==坐标==到reggie_take_out的==pom.xml==中

<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.4.5</version>
    <relativePath/> <!-- lookup parent from repository -->
</parent>

<dependencies>
    <!--web起步依赖-->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <!--junit起步依赖-->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
    </dependency>
    <!--mybatis起步依赖-->
    <dependency>
        <groupId>com.baomidou</groupId>
        <artifactId>mybatis-plus-boot-starter</artifactId>
        <version>3.4.2</version>
    </dependency>
    <!--mysql驱动-->
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <scope>runtime</scope>
    </dependency>
    <!--druid起步依赖,配置连接信息的时候不需要指定type就使用DruidDataSource-->
    <dependency>
        <groupId>com.alibaba</groupId>
        <artifactId>druid-spring-boot-starter</artifactId>
        <version>1.1.23</version>
    </dependency>
    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
        <version>1.18.20</version>
        <scope>provided</scope>
    </dependency>
    <dependency>
        <groupId>com.alibaba</groupId>
        <artifactId>fastjson</artifactId>
        <version>1.2.76</version>
    </dependency>
    <dependency>
        <groupId>commons-lang</groupId>
        <artifactId>commons-lang</artifactId>
        <version>2.6</version>
    </dependency>
</dependencies>

<build>
    <plugins>
        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
        </plugin>
    </plugins>
</build>

2.3 在application.yml配置相关参数

server:
  port: 8080
spring:
  application:
    name: reggie_take_out
  datasource:
    datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/reggie?serverTimezone=Asia/Shanghai&useUnicode=true&characterEncoding=utf-8&zeroDateTimeBehavior=convertToNull&useSSL=false&allowPublicKeyRetrieval=true
    username: root
    password: root
mybatis-plus:
  configuration:
    #在映射实体或者属性时,将数据库中表名和字段名中的下划线去掉,按照驼峰命名法映射
    map-underscore-to-camel-case: true
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
  global-config:
    db-config:
      id-type: ASSIGN_ID

2.4 将=="资料/前端资源"==中的静态资源复制到==项目resources/static==目录中

链接:https://pan.baidu.com/s/1uBsFtBDXab-9KRLwOvMXYA
提取码:5aqj

如果不创建static目录需要创建一个配置类

import lombok.extern.slf4j.Slf4j;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport;

//配置一个日志方便我们调试
@Slf4j
@Configuration
public class WebMvcConfig extends WebMvcConfigurationSupport {
    //设置我们的静态资源映射  编写mvc框架的资源映射
    @Override
    protected void addResourceHandlers(ResourceHandlerRegistry registry) {
        log.info("开始进行静态资源映射......");
//        资源处理器 ResourceHandler   设置资源文件路径           classpath对应的就是我们resources目录
//        http://localhost:8080/backend/index.html
//        http://localhost:8080/backend/page/login/login.html
        registry.addResourceHandler("/backend/**").addResourceLocations("classpath:/backend/");
        registry.addResourceHandler("/front/**").addResourceLocations("classpath:/front/");
    }

}

2.5 启动项目,访问页面

访问地址:http://localhost:8080/backend/index.html

2.6 其他配置【可选】

spring:
  main:
    banner-mode: off   # 关闭SpringBoot启动图标(banner)
  • 去掉mybatisplus的banner日志输出

mybatis-plus:
  configuration:
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
  global-config:
    banner: off      # 关闭mybatisplus启动图标

四、后台登录功能开发【重点】

1 需求分析

1.1 登录页面效果

1.2 调试工具查看请求地址和参数

通过浏览器调试工具(F12),可以发现,点击登录按钮时,页面会发送请求(请求地址为http://localhost:8080/employee/login)并提交json格式参数(username和password),此时报404,是因为我们的后台系统还没有响应此请求的处理器,所以我们需要创建相关类来处理登录请求。

1.3 数据模型(employee表)

1.4 前端代码分析

当点击 "登录" 按钮, 会触发Vue中定义的 handleLogin 方法:

在上述的前端代码中, 大家可以看到, 发送登录的异步请求之后, 获取到响应结果, 在响应结果中至少包含三个属性: code、data、msg 。

2 代码开发

2.1 导入所有实体类和结果类R

2.2 登录流程分析

==在Controller中创建登录方法:==

1、将页面提交的密码password进行md5加密处理
2、根据页面提交的用户名username和密码password查询数据库
3、如果没有查询到则返回登录失败结果
4、查看员工状态,如果为已禁用状态,则返回员工已禁用结果
5、登录成功,将员工id存入Session并返回登录成功结果

2.3 代码实现==【采用优化后方案】==

2.3.1 EmployeeMapper接口

@Mapper
public interface EmployeeMapper extends BaseMapper<Employee> {
}

2.3.2 EmployeeService接口

public interface EmployeeService extends IService<Employee> {
}

2.3.3 EmployeeServiceImpl实现类

@Service
public class EmployeeServiceImpl extends ServiceImpl<EmployeeMapper, Employee> implements EmployeeService {
}

2.3.4 EmployeeController类

@Slf4j
@RestController
@RequestMapping("/employee")
public class EmployeeController {

    @Autowired
    private EmployeeService employeeService;

    // 员工登录
    @PostMapping("/login")
    //返回的json数据格式   需要注解@RequestBody
    public R<Employee> login(HttpServletRequest request, @RequestBody Employee employee){
        //1.将页面提交的代码进行md5加密处理
        String password = employee.getPassword();
        //DigestAsHex在在spring-core包中,注意导包。
        password = DigestUtils.md5DigestAsHex(password.getBytes(StandardCharsets.UTF_8));
        //2.根据页面提交的用户名来查询数据库
        LambdaQueryWrapper<Employee> qw = new LambdaQueryWrapper<>();
        //我们在数据上给用户名加上了唯一约束,
        qw.eq(Employee::getUsername,employee.getUsername())
          .eq(Employee::getPassword,password);//代码进行了md5加密,需要直接调用

        Employee emp = employeeService.getOne(qw);
        //3.如果没有查到用户名返回登录结果
        if (emp==null){
            return R.error("登录失败");
        }
        //4.有用户名后进行密码比对  密码不一致返回失败登录结果
        //其实已经在前面进行了密码对比
//        if (!emp.equals(password)){
//            return R.error("登录失败");
//        }

        //5.查看员工状态,如果是禁用,返回员工禁用结果
        if (emp.getStatus()==0){
            return R.error("账号已禁用");
        }

        //6.登录成功返回结果 ,需要将用户的id存入Session中
        request.getSession().setAttribute("employee",emp.getId());
        return R.success(emp);

    }

    //员工退出
    @PostMapping("/logout")
    public R<String> logout(HttpServletRequest request){
        //清除当前保存在Session中的员工id
        request.getSession().removeAttribute("employee");
        //返回响应结果
        return R.success("退出成功");
    }

}

3 功能测试

代码实现完毕后, 启动项目, 访问url: http://localhost:8080/backend/page/login/login.html , 进行登录测试。

在测试过程中, 可以通过debug断点调试的方式来跟踪程序的执行过程,并且可以查看程序运行时各个对象的具体赋值情况。而且需要注意, 在测试过程中,需要将所有的情况都覆盖到。

1). 问题说明

当我们在进行debug端点调试时, 前端可能会出现如下问题: 前端页面的控制台报出错误-超时;

2). 解决方案

前端进行异步请求时, 默认超时10000ms , 前端页面超时,可以修改resources/backend/js/request.js文件中的超时时间,将该值调大一些。

==由于修改了JS文件,需要手动清理一下浏览器缓存,避免缓存影响,JS不能及时生效。==

五、后台退出功能开发【重点】

1 需求分析

  • 员工登录成功后,页面跳转到后台系统首页面(backend/index.html),此时会显示当前登录用户的姓名。

对应前端代码:

  • 如果员工需要退出系统,直接点击右侧的退出按钮()即可退出系统,退出系统后页面应跳转回登录页面。

前端发送异步请求代码:

2 代码开发

用户点击页面中退出按钮,发送请求,请求地址为/employee/logout,请求方式为POST,我们只需要在EmployeeController中创建对应的处理方法即可,具体的处理逻辑如下: 1、清除session中保存当前登录的用户id 2、返回响应结果

在EmployeeController中定义logout方法处理退出请求:

/**
     * @param session 保存了用户登录成功的id
     * @return 返回响应结果
     */
@PostMapping("/logout")
public R<String> logout(HttpSession session){
    //1 清除session中保存当前登录的用户id
    session.removeAttribute("employee");
    //2 返回响应结果
    return R.success("退出成功");
}

3 功能测试

测试测试比较简单,只需要保证 1、页面跳转回登录页 2、浏览器中保存的用户信息(userInfo)清理掉

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值