nginx如何搭建前后端分离架构
作者：赵忠洋
本文介绍了如何使用Vue-cli搭建前端开发环境,并详细讲解了nginx、webpack-devserver和Postman的使用方法,此外,还介绍了API基本设计规范,包括HTTP状态码、数据格式和接口设计
本人用的是vue-cli 自动构建vue+webpack 项目，这里不对webpack、nginx进行讲解。
本文主要解决前端开发环境搭建、测试环境搭建、生产环境搭建以及接口调试
需要工具
- 1.nginx（配置代理）
- 2.webpack-devserver（启动前端服务）
- 3.postman（接口调试）
nginx的环境搭建
nginx.conf 文件配置
开发环境
http{
server {
#配置端口号
listen 9999;
#配置server_name
server_name 127.0.0.1;
#设置默认页面 地址为webpack-devserver地址
location = / {
proxy_pass http://127.0.0.1:8888/#/home;
}
#这里因为我的的vue-router 所以将带#号的请求转发到本地服务器
location ~ .*#.*$ {
proxy_pass http://127.0.0.1:8888;
}
#请求网页 图片 icon 等都会转发到本地服务器上
location ~ .*\.(js|css|htm|html|gif|jpg|jpeg|png|bmp|swf|ico|rar|zip|txt|flv|mid|doc|ppt|pdf|xls|mp3|wma|eot|woff|ttf|svg)$ {
proxy_pass http://127.0.0.1:8888;
}
#请求后端接口的服务器地址
location ~ .*$ {
proxy_pass http://10.10.1.135:8080;
}
}
}测试环境
http{
server {
#配置端口号
listen 9999;
#配置server_name
server_name 127.0.0.1;
#设置默认页面 root 为静态文件目录
location = / {
index index.html;
root /html;
}
#请求网页 图片 icon 等都会转发到nginx静态目录下
location ~ .*\.(js|css|htm|html|gif|jpg|jpeg|png|bmp|swf|ico|rar|zip|txt|flv|mid|doc|ppt|pdf|xls|mp3|wma|eot|woff|ttf|svg)$ {
root /html;
}
#请求后端接口的服务器地址
location ~ .*$ {
proxy_pass http://10.10.1.135:8080;
}
}
}生产环境搭建
http{
server {
#配置端口号
listen 80;
#配置server_name
server_name www.xxx.com;
#设置默认页面 root 为静态文件目录
location = / {
index index.html;
root /html;
}
#请求网页 图片 icon 等都会转发到nginx静态目录下
location ~ .*\.(js|css|htm|html|gif|jpg|jpeg|png|bmp|swf|ico|rar|zip|txt|flv|mid|doc|ppt|pdf|xls|mp3|wma|eot|woff|ttf|svg)$ {
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
root /html;
}
#请求后端接口的服务器地址
location ~ .*$ {
proxy_pass http://api.xxx.com;
}
}
}POSTman 接口调试
get方式
- 1.get请求方式
- 2.url请求地址
- 3.发送请求
ps：get请求参数可以写在url里边 也可以写在 下方的key value 里
post方式
- 1.post请求方式
- 2.url请求地址
- 3.发送请求
- 4.选择参数类型
- 5.将参数写入
ps：get请求参数可以写在url里边
为什么使用postman
- 1.前端请求后端接口时发生错误，postman测试接口是否正常，快速定位问题
- 2.一些小公司没有api文档，或者文档不全，通过postman可以快速的判断接口传参类型
- ps：甩锅利器
api基本设计规范
接口说明
- 数据格式全部使用json格式
- post/put 使用UTF-8编码
- 使用HTTP Status Code表示状态
- 列表参数使用start和count
返回状态码说明
通过HTTP Status Code来说明 API 请求是否成功 下面的表格中展示了可能的HTTP Status Code以及其含义
| 状态码 | 含义 | 说明 |
|---|---|---|
| 200 | ok | 请求成功 |
| 201 | CREATED | 创建成功 |
| 202 | ACCEPTED | 更新成功 |
| 401 | UNAUTHORIZED | 未授权/未登录 |
| 403 | FORBIDDEN | 被禁止访问 |
| 404 | NOT FOUND | 请求资源不存在 |
| 500 | INTERNAL SERVER ERROR | 服务器内部错误 |
通用错误代码（具体使用要api文档中给出）
| 状态码 | 含义 | 说明 |
|---|---|---|
| 999 | unknow_v2_error | 未知错误 |
| 1000 | need_permission | 需要权限 |
| 1001 | uri_not_found | 资源不存在 |
| 1002 | missing_args | 参数不全 |
| 1003 | image_too_large | 上传的图片太大 |
| 1004 | input_too_short | 输入为空，或者输入字数不够 |
| 1005 | target_not_fount | 相关的对象不存在 |
| 1006 | need_captcha | 需要验证码，验证码有误 |
| 1007 | image_wrong_format | 照片格式有误(仅支持JPG,JPEG,GIF,PNG或BMP) |
返回json数据格式
{
//描述
"msg":"image_too_large,
//状态码
"code":1003,
//数据
"data":[]
}url地址解释
/v1/m/login
| 参数 | 说明 |
|---|---|
| v1 | 版本号 |
| m | 手机端 |
| Login | 登录接口 |
版本说明
暂定大版本更替时更改
例如：
- v1 版本1.x
- v2 版本2.x
常规接口规范
列表及分页接口设计
#假定请求数据列表 /v1/m/list
请求参数
| 名称 | 请求方式 | 类型 | 说明 | 默认值 | 是否必填 |
|---|---|---|---|---|---|
| page | GET | 页码/第几页 | 1 | 否 | |
| limit | GET | 条数 | 10 | 否 |
/v1/lawyer?page=1&limit=10
返回参数
| 名称 | 类型 | 说明 |
|---|---|---|
| msg | string | 描述 |
| code | num | 状态码 |
| data | object | 数据 |
data数据格式
| 名称 | 类型 | 说明 |
|---|---|---|
| pageSize | num | 总页数 |
| page | num | 当前页 |
| limit | num | 每页条数 |
| count | num | 总条数 |
| rows | json | 数据列表 |
#示例
{
msg:ok,
code:200,
data:{
count:70,
pageSize:7,
limit:10,
page:2,
#此数据只是示例，展现数据格式
rows:[
{
id:001,
name:zzz
phone:111111
},{
id:002,
name:zzz
phone:111111
},{
id:003,
name:zzz
phone:111111
}
]
}
}详情页接口设计
请求参数
| 名称 | 请求方式 | 类型 | 说明 | 默认值 | 是否必填 |
|---|---|---|---|---|---|
| id | GET | string | 产品id | 是 |
#假定产品详情 /v1/m/product/details?id=001
返回参数
| 名称 | 类型 | 说明 |
|---|---|---|
| msg | string | 描述 |
| code | num | 状态码 |
| data | object | 数据 |
data数据格式(并不是真实字段，仅能代表数据格式)
| 名称 | 类型 | 说明 |
|---|---|---|
| id | num | 产品id |
| name | string | 产品姓名 |
| phone | num | 电话 |
| img | string | 产品头像 |
#示例
{
msg:ok,
code:200,
data:{
id:001,
name:zzz,
phone:111111,
img:"img src 路径"
}
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。