前后端环境搭建

前端环境搭建

打开资料中的nginx服务

注意nginx不能是在有中文的目录下

在浏览器中输入localhost

到此为止我们已经搭建好前端环境

后端环境搭建

先看看整体框架

使用git进行项目代码的版本控制

创建Git本地仓库

创建Git远程仓库

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

这个用于存储一些不希望git管理的文件

创建Git本地仓库

目前只能commit，还不能push（因为没有远程仓库）

创建Git远程仓库

复制

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

选择push

第一次push的时候本地仓库和远程仓库还没有关联

将复制的复制加入到URL

点击push

回到网页刷新页面

数据库环境搭建

前后端联调

注意修改配置文件

这儿的账号一般是root 账号就是对应的数据库连接的密码

忽略报错

因为后端代码还不完善

打个断点

前端页面先退出，执行一下登录，就能够看到前端传来的数据

ctrl进入login

打断点，观察

获取用户名获取密码

以上都是废话

接下来正式进入前后端联调

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

前端的请求是如何发送到后端？
 

前端请求地址

F12 打开网络 点击登录 观察

发现前端请求是

http://localhost/api/employee/login

然而后端接口地址并不是这个

这就是nginx的作用

nginx

将前端发送的动态请求由nginx转发到后端tomcat服务器

nginx反向代理的好处

• 提高访问速度，因为nginx可以缓存数据
• 可以进行负载均衡，可以将大量的请求按照指定的方式均衡的分配给集群中的每台服务器，如果没有nginx，前端只能固定的访问某一台服务器
• 保证后端服务的安全，nginx走内网给后端

nginx反向代理的配置

nginx负载均衡的配置

完善登录功能

将数据库中的明文修改为md5密文

然后加入代码

导入接口文档

使用yapi接口

从数据管理导入数据

通过swagger进行测试

使用swagger只需要按照其规范去定义接口以及相关信息，就可以做到生成接口文档以及在线接口调试

Knife4j是Java MVC框架集成Swagger生成Api文档的增强解决方案

Swagger使用

• 导入Knife4j的maven坐标
• 在配置类中加入knife4j的相关配置
• 设置静态资源映射，否则接口文档页面无法访问

Knife4j框架动态生成出来的页面

通过swagger可以做接口测试

（输入login需要的账号密码）

后端响应的数据

如果没有设置静态资源映射

我们将以上的代码进行注释，重新打开，会发现访问失败

页面也会报警告

Swagger和yapi

swagger是开发阶段使用的框架，帮助后端人员做后端的接口测试

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

Swagger注释

效果如下：