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