投稿

nginx如何搭建前后端分离架构

KTMWN • • 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方式

nginx如何搭建前后端分离架构

  • 1.get请求方式
  • 2.url请求地址
  • 3.发送请求

ps：get请求参数可以写在url里边 也可以写在 下方的key value 里

post方式

nginx如何搭建前后端分离架构

  • 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 路径"
        }
    }

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持恩蓝小号。

原创文章，作者：KTMWN，如若转载，请注明出处：http://www.wangzhanshi.com/n/19262.html

赞 (0)
KTMWN的头像KTMWN
0 0
上一篇 2025年2月24日 07:37:41
下一篇 2025年2月24日 07:37:45

相关推荐

发表回复

登录后才能评论