nginx搭建前后端分离架构

本人用的是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 路径"
        }
    }