b2c电子商务网站系统分析/跨境电商网站开发

目录

一、软件开发整体介绍

1. 软件开发流程

1 第1阶段: 需求分析

2 第2阶段: 设计

3 第3阶段: 编码

4 第4阶段: 测试

5 第5阶段: 上线运维

2. 角色分工

3. 软件环境

1 开发环境(development)

2 测试环境(testing)

3 生产环境(production)

二、苍穹外卖项目介绍

1. 项目介绍

2. 产品原型

3. 技术选型

三、开发环境搭建

1. 前端环境搭建

2. 后端环境搭建

1 熟悉项目结构

1 使用idea打开项目

2 项目结构说明

2 Git版本控制

1 准备远程仓库

2 初始化Git本地仓库

​编辑

3 提交并推送到远程仓库

(2) 添加到暂存区

(3) 提交到本地仓库

(4) 推送到远程仓库

3 准备数据库环境

(1) 执行SQL脚本

(2) 配置数据库密码

(3) 表的说明

3. 前后端联调和nginx

1 debug跟踪登录功能

2 nginx反向代理

(1) 反向代理介绍

(2) nginx反向代理的好处【重点】

(3) nginx反向代理的配置

(4) nginx负载均衡的配置

3.3 nginx小结

4. 完善登录功能

四、导入接口文档

五、Swagger

1. 介绍

2. 使用步骤

3. 常用注解

​编辑

4. yapi和Swagger的区别

5. 小结

---

克隆地址：魁(代码疑点)/sky-take-out

一、软件开发整体介绍

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

1. 软件开发流程

graph LR
需求分析-->设计
设计-->UI设计 & 接口设计 & 数据库设计 -->编码
编码-->前端编码-->前端自测-->联调
编码-->后端编码-->后端自测-->联调
联调-->测试-->上线运维

1 第1阶段: 需求分析

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

需求规格说明书， 一般来说就是使用 Word 文档来描述当前项目的各个组成部分，如：系统定义、应用环境、功能规格、性能需求等，都会在文档中描述。例如：

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

2 第2阶段: 设计

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

UI设计

用户界面的设计，主要设计项目的页面效果，小到一个按钮，大到一个页面布局，还有人机交互逻辑的体现。例如：

数据库设计

需要设计当前项目中涉及到哪些数据库，每一个数据库里面包含哪些表，这些表结构之间的关系是什么样的，表结构中包含哪些字段。例如：

接口设计

通过分析原型图，首先，粗粒度地分析每个页面有多少接口，然后，再细粒度地分析每个接口的传入参数，返回值参数，同时明确接口路径及请求方式

3 第3阶段: 编码

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

项目代码编写：作为软件开发工程师，我们需要对项目的模块功能分析后，进行编码实现。

单元测试：编码实现完毕后，进行单元测试，单元测试通过后再进入到下一阶段。例如：

4 第4阶段: 测试

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

5 第5阶段: 上线运维

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

2. 角色分工

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

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

        

3. 软件环境

作为软件开发工程师，在编码的过程中就不可避免地会接触多种软件环境，我们主要来分析在工作中经常遇到的三套环境， 分别是: 开发环境、测试环境、生产环境。 接下来，我们分别介绍一下这三套环境的作用和特点。

1 开发环境(development)

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

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

2 测试环境(testing)

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

3 生产环境(production)

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

application-dev.yaml：配置 开发环境的各种参数，比如开发环境的数据库地址

application-test.yaml：配置 测试环境的各种参数，比如测试环境的数据库地址

application.prod.yaml：配置 生产环境的各种参数，比如生产环境的数据库地址

程序部署到哪个环境，就激活对应的配置文件：

• java -jar -Dspring.profiles.active=dev xxx.jar 启动程序并激活dev环境的配置

二、苍穹外卖项目介绍

到公司里边，需要给你提供 远程仓库的地址、并给你的git帐号开通权限。如果没有权限，是不能克隆的

获取本地仓库：

• 克隆远程仓库，得到本地仓库。 这种仓库里边已经包含了 远程仓库的地址信息

• 本地初始化仓库，这种仓库没有关联远程仓库，需要添加远程仓库的信息 git remote add 简称代号 地址

切换分支，在分支里编写代码：

• 开发中，通常是要完成一个功能，就先拉取一个分支；要修改一个bug，需要先拉取一个分支

• 在分支里编写代码并提交，可以推送

• 把分支代码合并到 主开发分支

推送到远程仓库：

• 推送到远程仓库：git push origin 分支名

• 获取最新的代码：git pull origin 分支名

1. 项目介绍

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

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

1. 管理端功能

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

2. 用户端功能

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

2. 产品原型

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

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

1. 管理端

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

2. 用户端

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

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请求，获取对应的响应结果。

三、开发环境搭建

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

1. 前端环境搭建

1). 前端工程基于 nginx

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

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

2). 启动nginx，访问测试

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

http://localhost:80

2. 后端环境搭建

1 熟悉项目结构

1 使用idea打开项目

后端工程基于 maven 进行项目构建，并且进行分模块开发。

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

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

2 项目结构说明

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

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

sky-common模块

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

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

sky-pojo模块

模块中存放的是一些 entity、DTO、VO

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

sky-server模块

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

2 Git版本控制

1 准备远程仓库

1.访问Gitee - 基于 Git 的代码托管和研发协作平台，新建仓库

2 初始化Git本地仓库

3 提交并推送到远程仓库

1) 准备忽略文件

(2) 添加到暂存区

右键模块  --  Git -- Add

(3) 提交到本地仓库

(4) 推送到远程仓库

成功推送至远程仓库

3 准备数据库环境

(1) 执行SQL脚本

今天的资料中有数据库脚本：

sql文件，到数据库执行

(2) 配置数据库密码

yml配置文件修改本地数据库账户和密码

(3) 表的说明

3. 前后端联调和nginx

1 debug跟踪登录功能

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

实现思路：

2 nginx反向代理

对登录功能测试完毕后，接下来，我们思考一个问题：前端发送的请求，是如何请求到后端服务的？

前端请求地址：http://localhost/api/employee/login

后端接口地址：http://localhost:8080/admin/employee/login

很明显，两个地址不一致，那是如何请求到后端服务的呢？

nginx介绍

nginx：Engine X，俄罗斯人开发的一个软件，早期作为邮件收发的服务器代理。随着后来的发展，也提供了其它的功能：

• 部署静态资源，供客户端访问

• 作为反向代理服务器，实现负载均衡

• 作为邮件收发的服务器

(1) 反向代理介绍

nginx 反向代理，就是将前端发送的动态请求由 nginx 转发到后端服务器

那为什么不直接通过浏览器直接请求后台服务端，需要通过nginx反向代理呢？

(2) nginx反向代理的好处【重点】

• 提高访问速度

  因为nginx本身可以进行缓存，如果访问的同一接口，并且做了数据缓存，nginx就直接可把数据返回，不需要真正地访问服务端，从而提高访问速度。

• 进行负载均衡

  所谓负载均衡,就是把大量的请求按照我们指定的方式均衡的分配给集群中的每台服务器。

• 保证后端服务安全

  因为一般后台服务地址不会暴露，所以使用浏览器不能直接访问，可以把nginx作为请求访问的入口，请求到达nginx后转发到具体的服务中，从而保证后端服务的安全。

(3) nginx反向代理的配置

nginx 反向代理的配置方式：

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

proxy_pass：该指令是用来设置代理服务器的地址，可以是主机名称，IP地址加端口号等形式。

如上代码的含义是：监听80端口号， 然后当我们访问 http://localhost:80/api/../..这样的接口的时候，它会通过 location /api/ {} 这样的反向代理到 http://localhost:8080/admin/上来。

# 反向代理,处理管理端发送的请求
location /api/ {proxy_pass   http://localhost:8080/admin/;#proxy_pass   http://webservers/admin/;
}

当在访问http://localhost/api/employee/login，nginx接收到请求后转到http://localhost:8080/admin/，故最终的请求地址为http://localhost:8080/admin/employee/login，和后台服务的访问地址一致。

(4) nginx负载均衡的配置

当如果服务以集群的方式进行部署时，那nginx在转发请求到服务器时就需要做相应的负载均衡。其实，负载均衡从本质上来说也是基于反向代理来实现的，最终都是转发请求。

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

upstream：如果代理服务器是一组服务器的话，我们可以使用upstream指令配置后端服务器组。

如上代码的含义是：监听80端口号， 然后当我们访问 http://localhost:80/api/../..这样的接口的时候，它会通过 location /api/ {} 这样的反向代理到 http://webservers/admin，根据webservers名称找到一组服务器，根据设置的负载均衡策略(默认是轮询)转发到具体的服务器。

注：upstream后面的名称可自定义，但要上下保持一致。

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=9;server 192.168.100.129:8080 weight=1;
}

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

正向代理:指客户端的代理，服务端不知道(无感知的)=>VPN翻(非法)

反向代理;指服务端的代理，客户端不知道(无感知的)

3.3 nginx小结

nginx的作用：

• 部署静态资源，作为静态资源服务器

• 作为反向代理，实现负载均衡

nginx要部署静态资源：把静态资源直接放到nginx的html目录里

nginx要作为反向代理，并实现负载均衡：要修改nginx.conf

nginx负载均衡策略：

• 轮询：默认策略，不配置负载均衡策略就是轮询。把请求轮流分发到不同的目标服务器上

• weith：权重模式，给每个目标服务器设置权重值，值越大，被分发到请求的机率就越高

• ip_hash：ip哈希，相同ip的客户端的请求，始终被分配到某一台服务器上

• url_hash：url哈希，相同请求路径url的请求，始终被分配到某一台服务器上

• least_conn：最少连接，哪个服务器正在处理的请求少，就分配到哪个服务器上

• fair：公平模式，哪个服务器响应时间短，说明服务器性能好，就多处理一些请求

4. 完善登录功能

数据不允许存取名文密码，安全不达标

使用MD5算法对明文密码加密

注意：MD5算法，不是加密算法，是数据摘要算法。在计算转换过程中，会丢弃一部分原始数据。

特点：

• 不可逆。有密文，不可能通过算法还原出来明文

• 一个明文 经过MD5计算的结果，总是不变的

所以：MD5不可逆，但并不是不可破解。破解的方式：准备彩虹表，就是 常用明文密码和对应的MD5结果

将来：会使用 MD5 + 盐 进一步提升安全性，提升破解的难度

1. 修改数据库中明文密码，改为MD5加密后的密文

   打开employee表，修改密码。明文密码123456，对应的md5值是：e10adc3949ba59abbe56e057f20f883e

2. 修改Java代码，前端提交的密码进行MD5加密后再跟数据库中密码比对

   打开EmployeeServiceImpl.java，修改比对密码

四、导入接口文档

前后端分离

将课程资料中提供的项目接口导入YApi。访问地址：【YApi非常慢】YApi Pro-高效、易用、功能强大的可视化接口管理平台，注册帐号并登录

选择苍穹外卖-管理端接口.json导入

五、Swagger

1. 介绍

Swagger 是一个规范和完整的框架，用于生成、描述、调用和可视化 RESTful 风格的 Web 服务(API Documentation & Design Tools for Teams | Swagger)。 它的主要作用是：

1. 使得前后端分离开发更加方便，有利于团队协作。

2. 接口的文档在线自动生成，降低后端开发人员编写接口文档的负担。

   如果开发中接口和早期设计的接口不同，不需要花很多时间重新编写接口文档，Swagger会根据代码直接生成接口文档

3. 功能测试

   Spring已经将Swagger纳入自身的标准，建立了Spring-swagger项目，现在叫Springfox。通过在项目中引入Springfox ，即可非常简单快捷的使用Swagger。

knife4j是为Java MVC框架集成Swagger生成Api文档的增强解决方案,前身是swagger-bootstrap-ui,取名kni4j是希望它能像一把匕首一样小巧,轻量,并且功能强悍!

目前，一般都使用knife4j框架。

2. 使用步骤

1. 导入 knife4j 的maven坐标

   在sky-pojo模块的pom.xml中添加依赖（已添加）

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

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

在sky-server模块中找到配置类com.sky.config.WebMvcConfiguration，添加内容：

/*** 通过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;}/*** 设置静态资源映射* @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

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

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

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

3. 常用注解

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

补充：参数不是实参类：在形参上加 @ApiParam("参数描述")

//实体类
@ApiModel(description = "员工登录时传递的数据模型")
public class EmployeeLoginDTO implements Serializable {}//实体类
@ApiModel(description = "员工登录返回的数据格式")
public class EmployeeLoginVO implements Serializable {//实体类的变量@ApiModelProperty("主键值")private Long id;@ApiModelProperty("用户名")private String userName;@ApiModelProperty("姓名")private String name;@ApiModelProperty("jwt令牌")private String token;}--------------------------//Controller类
@Api(tags = "员工相关接口")
public class EmployeeController {//Controller类类里的方法@ApiOperation("员工退出")public Result<String> logout() {}}

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

4. yapi和Swagger的区别

两者的共同点：都是API接口文档

不同点：

• YApi侧重于功能开发之前，设置API接口；Swagger侧重于功能实现之后，生成接口文档

• YApi仅仅是设计接口，可以给前端用于Mock测试；Swagger可以给后端开发人员，用于功能测试

5. 小结

项目如果整合了Swagger，在开发中需要添加注解：

• Controller类上加注解 @Api(tags="Controller类的描述")

• Controller类里方法上加注解 @ApiOperation("方法的描述")

• Controller类里方法参数：

  • 参数是实体类

    实体类上加 @ApiModel(decription="实体类的描述")

    类里的各种属性上加 @ApiModelProperty("属性的描述")

  • 参数不是实参类：在形参上加 @ApiParam("参数描述")

Swagger会根据我们代码里配置的注解，自动生成接口文档；也可以直接进行功能测试