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

前后端联调的一般步骤

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

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