前后端联调的一般步骤和Nginx简单配置

深碍√TFBOYSˉ_ 2021-06-10 20:39 1080阅读 0赞

## 前后端联调的一般步骤 ##

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

反向代理原理如下图所示  
![反向代理原理][22b69a92484e85b7ab96a157d632a7bc.png]

#### 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

时隔两个月我又回来了，之前太堕落了，学习落下了好多，这个月必须要努力才行！简书更新之旅再度开启，朋友们一起加油吧！

[nginx.conf]: /images/20210607/252d49bd73754bca97455c115e29bbeb.png
[22b69a92484e85b7ab96a157d632a7bc.png]: /images/20210607/5f26a4a5d2be4ff0948ae06747a24ee4.png