前后端联调的⼀般步骤和Nginx简单配置
前后端联调的⼀般步骤
1、创建前端⼯程（这⾥创建的是vue-cli项⽬）
2、编写后端登录业务
3、替换页⾯元素为⾃⼰需要的，⽐如图标，标题之类的
4、编写前端页⾯Vue组件
5、编写跳转到组件的路由（router/index.js）
6、如果需要从后端获取数据，使⽤Axios异步通信，默认框架中使⽤了request封装请求
BASE_API:'"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的配置⽂件f在安装⽬录下的conf⽂件夹下，如下图所⽰
⽰例配置
server{
listen 8210;  #监听端⼝（默认监听接⼝为80）
server_name localhost; #服务名nginx部署前端项目
location ~ /edu/{  #请求路径含 /edu/的请求转发到8110端⼝
proxy_pass localhost:8110;
}
location ~ /admin/sysuser{ #请求路径含 /admin/sysuser的请求转发到8210端⼝    proxy_pass localhost:8210;
}
}
反向代理原理如下图所⽰
Nginx的常⽤命令
1、启动Nginx，双击
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
时隔两个⽉我⼜回来了，之前太堕落了，学习落下了好多，这个⽉必须要努⼒才⾏！简书更新之旅再度开启，朋友们⼀起加油吧！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。