企业官网建设流程全解析

前言：这是由本人二刷该项目，结合老师笔记的个人总结，本博客梳理项目核心内容，助力大家学习苍穹外卖项目。全套资料位于文章末尾，自取即可🌸

思维导图

1. 苍穹外卖项目简介

本项目（苍穹外卖）是专门为餐饮企业（餐厅、饭店）定制的一款软件产品，包括系统管理后台和小程序端应用两部分。

系统管理后台:主要提供给餐饮企业内部员工使用，可以对餐厅的分类、菜品、套餐、订单、员工等进行管理维护，对餐厅的各类数据进行统计，同时也可进行来单语音播报功能。

小程序端:主要提供给消费者使用，可以在线浏览菜品、添加购物车、下单、支付、催单等。

2. 苍穹外卖项目详细介绍

2.1 项目介绍

我们将从项目简介、产品原型、技术选型三个方面来了解苍穹外卖这个项目。

接下来，通过功能架构图来展示管理端和用户端的具体业务功能模块。

1). 管理端功能

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

2). 用户端功能

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

2.2 产品原型

产品原型，用于展示项目的业务功能，一般由产品经理进行设计。

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

以下是两份产品原型。

管理端原型图：

用户端原型图：

1). 管理端

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

2). 用户端

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

2.3技术选型（老师总结）

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

1). 用户层

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

2). 网关层

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

3). 应用层

4). 数据层

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

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

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

pagehelper: 分页插件。

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

5). 工具

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

maven:项目构建工具。

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

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

3. 开发环境搭建

开发环境搭建主要包含前端环境和后端环境两部分。作为服务端开发工程师， 我们课程学习的重心应该放在后端的业务代码上， 前端的页面我们只需要导入资料中的nginx， 前端页面的代码我们只需要能看懂即可。

3.1 前端环境搭建

1). 前端工程基于 nginx

从资料中找到前端运行环境的nginx，移动到非中文目录下。

sky目录中存放了管理端的前端资源，具体如下：

2). 启动nginx，访问测试

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

3.2 后端环境搭建

3.2.1 熟悉项目结构

1). 从当天资料中找到后端初始工程：

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

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

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

sky-common:模块中存放的是一些公共类，可以供其他模块使用

分析sky-common模块的每个包的作用：

sky-pojo:模块中存放的是一些entity、DTO、VO

分析sky-pojo模块的每个包的作用：

sky-server:模块中存放的是 配置文件、配置类、拦截器、controller、service、mapper、启动类

分析sky-server模块的每个包的作用：

3.2.2 Git版本控制

将本地文件推送到Git远程仓库

Guo-chang16/sky-take-out1https://github.com/Guo-chang16/sky-take-out1

3.2.3 数据库环境搭建

1.从资料中找到sky.sql

2.执行sky.sql文件

每张表的说明：

3.2.4 前后端联调

实现思路：

1.Controller层

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

//小知识点 //DTO中包含对应的前端传过来的json格式的数据 @RequestBody EmployeeLoginDTO employeeLoginDTO

/** * 登录 * * @param employeeLoginDTO * @return */ @PostMapping("/login") public Result<EmployeeLoginVO> login(@RequestBody EmployeeLoginDTO employeeLoginDTO) { log.info("员工登录：{}", employeeLoginDTO); //调用service方法查询数据库 Employee employee = employeeService.login(employeeLoginDTO); //登录成功后，生成jwt令牌 Map<String, Object> claims = new HashMap<>(); 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(); return Result.success(employeeLoginVO); }

2.Service层

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

/** * 员工登录 * * @param employeeLoginDTO * @return */ public Employee login(EmployeeLoginDTO employeeLoginDTO) { String username = employeeLoginDTO.getUsername(); String password = employeeLoginDTO.getPassword(); //1、根据用户名查询数据库中的数据 Employee employee = employeeMapper.getByUsername(username); //2、处理各种异常情况（用户名不存在、密码不对、账号被锁定） if (employee == null) { //账号不存在 throw new AccountNotFoundException(MessageConstant.ACCOUNT_NOT_FOUND); } //密码比对 if (!password.equals(employee.getPassword())) { //密码错误 throw new PasswordErrorException(MessageConstant.PASSWORD_ERROR); } if (employee.getStatus() == StatusConstant.DISABLE) { //账号被锁定 throw new AccountLockedException(MessageConstant.ACCOUNT_LOCKED); } //3、返回实体对象 return employee; }

3.Mapper层

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

package com.sky.mapper; import com.sky.entity.Employee; import org.apache.ibatis.annotations.Mapper; import org.apache.ibatis.annotations.Select; @Mapper public interface EmployeeMapper { /** * 根据用户名查询员工 * @param username * @return */ @Select("select * from employee where username = #{username}") Employee getByUsername(String username); }

3.3 完善登录功能

解决思路：

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

// TODO 后期需要进行md5加密，然后再进行比对 password = DigestUtils.md5DigestAsHex(password.getBytes());

4. 导入接口文档

4.1 前后端分离开发流程

第一步：定义接口，确定接口的路径、请求方式、传入参数、返回参数。

第二步：前端开发人员和后端开发人员并行开发。

第三步：前后端人员进行连调测试。

第四步：提交给测试人员进行最终测试。

5. Swagger

5.1 介绍

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

1. 接口的文档在线自动生成

2. 功能测试

5.2 使用步骤

1.导入 knife4j 的maven坐标

<dependency> <groupId>com.github.xiaoymin</groupId> <artifactId>knife4j-spring-boot-starter</artifactId> </dependency>

2.在配置类中加入 knife4j 相关配置

​ /** * 通过knife4j生成接口文档 * @return */ @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; } ​

3.设置静态资源映射，否则接口文档页面无法访问

/** * 设置静态资源映射 * @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.访问测试

思考：通过 Swagger 就可以生成接口文档，那么我们就不需要 Yapi 了？

1、Yapi 是设计阶段使用的工具，管理和维护接口

2、Swagger 在开发阶段使用的框架，帮助后端开发人员做后端的接口测试

5.3 常用注解

通过注解可以控制生成的接口文档，使接口文档拥有更好的可读性，常用注解如下：

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

至此，开启学习苍穹外卖的旅程！🎉🎉🎉

《苍穹外卖》全套资料获取地方，有需要的自取哈

https://pan.baidu.com/s/13ROdNBym3t-I-TcrT8hisw
提取码: wind