nginx搭建前后端分离架构_nginx 前后端分离

本人用的是vue-cli 自动构建vue+webpack 项目，这里不对webpack、nginx进行讲解。
1

本文主要解决前端开发环境搭建、测试环境搭建、生产环境搭建以及接口调试

一、需要工具

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;
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

测试环境

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;
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

生产环境搭建

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;
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

POSTman 接口调试

get方式

1.get请求方式
2.url请求地址
3.发送请求
ps：get请求参数可以写在url里边 也可以写在 下方的key value 里
1
2
3
4

post方式

1.post请求方式
2.url请求地址
3.发送请求
4.选择参数类型
5.将参数写入
ps：get请求参数可以写在url里边 
1
2
3
4
5
6

为什么使用postman

1.前端请求后端接口时发生错误，postman测试接口是否正常，快速定位问题
2.一些小公司没有api文档，或者文档不全，通过postman可以快速的判断接口传参类型 
ps：甩锅利器
1
2
3

api基本设计规范

接口说明

• 数据格式全部使用json格式
• post/put 使用UTF-8编码
• 使用HTTP Status Code表示状态
• 列表参数使用start和count

返回状态码说明

通过HTTP Status Code来说明 API 请求是否成功 下面的表格中展示了可能的HTTP Status Code以及其含义

通用错误代码（具体使用要api文档中给出）

返回json数据格式

{
//描述
 "msg":"image_too_large,
//状态码
 "code":1003,
 //数据
 "data":[]
}
1
2
3
4
5
6
7
8

url地址解释

/v1/m/login

版本说明

暂定大版本更替时更改
例如：
    v1 版本1.x
    v2 版本2.x
1
2
3
4

常规接口规范

列表及分页接口设计

#假定请求数据列表
/v1/m/list
1
2

请求参数

    /v1/lawyer?page=1&limit=10
1

返回参数

data数据格式

    #示例
    {
        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
            }
          ]
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

详情页接口设计

请求参数

#假定产品详情
/v1/m/product/details?id=001
1
2

返回参数

data数据格式(并不是真实字段，仅能代表数据格式)

    #示例
    {
        msg:ok,
        code:200,
        data:{
          id:001,
          name:zzz,
          phone:111111,
          img:"img src 路径"
        }
    }
1
2
3
4
5
6
7
8
9
10
11