前后端联调的一般步骤
1、创建前端工程（这里创建的是vue-cli项目）
2、编写后端登录业务
3、替换页面元素为自己需要的，比如图标，标题之类的
4、编写前端页面Vue组件
5、编写跳转到组件的路由（router/index.js）
6、如果需要从后端获取数据，使用Axios异步通信，默认框架中使用了request封装请求
BASE_API:'"http://localhost:8120'
7、编写处理后端接口的js函数
import request from '@/utils/request'
export function login(username,password){
return request({
url:'/admin/sysuser/login',//后端的请求路径
method:'post', //请求方式
data:{ //参数
username,
password
}
})
}
8、由于后端可能有多台服务器提供接口服务，前端无法实现分发请求，这个时候就需要使用到反向代理服务器，我们这里使用Nginx来进行请求的分发
9、前后端联调测试
- 前端api接口对接后端请求
- axios异步获取请求拿到后端数据，然后进行页面渲染
- 页面细节的处理
10、具体业务功能编写
Nginx简单配置
配置文件
Nginx的配置文件nginx.conf在安装目录下的conf文件夹下，如下图所示
nginx.conf
示例配置
server{
listen 8210; #监听端口（默认监听接口为80）
server_name localhost; #服务名
location ~ /edu/{ #请求路径含 /edu/的请求转发到8110端口
proxy_pass http://localhost:8110;
}
location ~ /admin/sysuser{ #请求路径含 /admin/sysuser的请求转发到8210端口
proxy_pass http://localhost:8210;
}
}
反向代理原理如下图所示
反向代理原理
Nginx的常用命令
1、启动Nginx，双击nginx.exe
nginx
2、停止Nginx
nginx -s stop
3、查看Nginx进程
ps -ef|grep nginx
4、重启Nginx
nginx -s reload
5、强制停止Nginx
pkill -9 nginx
6、查看Nginx版本
nginx -v
时隔两个月我又回来了，之前太堕落了，学习落下了好多，这个月必须要努力才行！简书更新之旅再度开启，朋友们一起加油吧！
