快捷導(dǎo)航

nginx如何搭建前后端分離架構(gòu)

更新時間：2025年01月22日 17:17:52 作者：趙忠洋

本文介紹了如何使用Vue-cli搭建前端開發(fā)環(huán)境,并詳細講解了nginx、webpack-devserver和Postman的使用方法,此外,還介紹了API基本設(shè)計規(guī)范,包括HTTP狀態(tài)碼、數(shù)據(jù)格式和接口設(shè)計

本人用的是vue-cli 自動構(gòu)建vue+webpack 項目，這里不對webpack、nginx進行講解。

本文主要解決前端開發(fā)環(huán)境搭建、測試環(huán)境搭建、生產(chǎn)環(huán)境搭建以及接口調(diào)試

需要工具

1.nginx（配置代理）
2.webpack-devserver（啟動前端服務(wù)）
3.postman（接口調(diào)試）

nginx的環(huán)境搭建

nginx.conf 文件配置

開發(fā)環(huán)境

http{
    server {
	    #配置端口號
        listen 9999;
        #配置server_name
        server_name 127.0.0.1;
        #設(shè)置默認頁面 地址為webpack-devserver地址
        location = / {
            proxy_pass http://127.0.0.1:8888/#/home;
        }
        #這里因為我的的vue-router 所以將帶#號的請求轉(zhuǎn)發(fā)到本地服務(wù)器
        location ~ .*#.*$ {
            proxy_pass http://127.0.0.1:8888;
        }
        #請求網(wǎng)頁 圖片 icon 等都會轉(zhuǎn)發(fā)到本地服務(wù)器上
        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;
        }
        #請求后端接口的服務(wù)器地址
        location ~ .*$ {
            proxy_pass http://10.10.1.135:8080;
        }
    }
}

測試環(huán)境

http{
    server {
	    #配置端口號
        listen 9999;
        #配置server_name
        server_name 127.0.0.1;
        #設(shè)置默認頁面 root 為靜態(tài)文件目錄
        location = / {
            index  index.html;
            root /html;
        }
        #請求網(wǎng)頁 圖片 icon 等都會轉(zhuǎn)發(fā)到nginx靜態(tài)目錄下
        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;
        }
        #請求后端接口的服務(wù)器地址
        location ~ .*$ {
            proxy_pass http://10.10.1.135:8080;
        }
    }
}

生產(chǎn)環(huán)境搭建

http{
    server {
	    #配置端口號
        listen 80;
        #配置server_name
        server_name www.xxx.com;
        #設(shè)置默認頁面 root 為靜態(tài)文件目錄
        location = / {
            index  index.html;
            root /html;
        }
        #請求網(wǎng)頁 圖片 icon 等都會轉(zhuǎn)發(fā)到nginx靜態(tài)目錄下
        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;
        }
        #請求后端接口的服務(wù)器地址
        location ~ .*$ {
            proxy_pass http://api.xxx.com;
        }
    }
}

POSTman 接口調(diào)試

get方式

1.get請求方式
2.url請求地址
3.發(fā)送請求

ps：get請求參數(shù)可以寫在url里邊也可以寫在下方的key value 里

post方式

1.post請求方式
2.url請求地址
3.發(fā)送請求
4.選擇參數(shù)類型
5.將參數(shù)寫入

ps：get請求參數(shù)可以寫在url里邊

為什么使用postman

1.前端請求后端接口時發(fā)生錯誤，postman測試接口是否正常，快速定位問題
2.一些小公司沒有api文檔，或者文檔不全，通過postman可以快速的判斷接口傳參類型
ps：甩鍋利器

api基本設(shè)計規(guī)范

接口說明

數(shù)據(jù)格式全部使用json格式
post/put 使用UTF-8編碼
使用HTTP Status Code表示狀態(tài)
列表參數(shù)使用start和count

返回狀態(tài)碼說明

通過HTTP Status Code來說明 API 請求是否成功下面的表格中展示了可能的HTTP Status Code以及其含義

狀態(tài)碼	含義	說明
200	ok	請求成功
201	CREATED	創(chuàng)建成功
202	ACCEPTED	更新成功
401	UNAUTHORIZED	未授權(quán)/未登錄
403	FORBIDDEN	被禁止訪問
404	NOT FOUND	請求資源不存在
500	INTERNAL SERVER ERROR	服務(wù)器內(nèi)部錯誤

通用錯誤代碼（具體使用要api文檔中給出）

狀態(tài)碼	含義	說明
999	unknow_v2_error	未知錯誤
1000	need_permission	需要權(quán)限
1001	uri_not_found	資源不存在
1002	missing_args	參數(shù)不全
1003	image_too_large	上傳的圖片太大
1004	input_too_short	輸入為空，或者輸入字數(shù)不夠
1005	target_not_fount	相關(guān)的對象不存在
1006	need_captcha	需要驗證碼，驗證碼有誤
1007	image_wrong_format	照片格式有誤(僅支持JPG,JPEG,GIF,PNG或BMP)

返回json數(shù)據(jù)格式

{
//描述
 "msg":"image_too_large,
//狀態(tài)碼
 "code":1003,
 //數(shù)據(jù)
 "data":[]
}

url地址解釋

/v1/m/login

參數(shù)	說明
v1	版本號
m	手機端
Login	登錄接口

版本說明

暫定大版本更替時更改

例如：

v1 版本1.x
v2 版本2.x

常規(guī)接口規(guī)范

列表及分頁接口設(shè)計

#假定請求數(shù)據(jù)列表
/v1/m/list

請求參數(shù)

名稱	請求方式	類型	說明	默認值	是否必填
page	GET		頁碼/第幾頁	1	否
limit	GET		條數(shù)	10	否

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

返回參數(shù)

名稱	類型	說明
msg	string	描述
code	num	狀態(tài)碼
data	object	數(shù)據(jù)

data數(shù)據(jù)格式

名稱	類型	說明
pageSize	num	總頁數(shù)
page	num	當(dāng)前頁
limit	num	每頁條數(shù)
count	num	總條數(shù)
rows	json	數(shù)據(jù)列表

    #示例
    {
        msg:ok,
        code:200,
        data:{
          count:70,
          pageSize:7,
          limit:10,
          page:2,
          #此數(shù)據(jù)只是示例，展現(xiàn)數(shù)據(jù)格式
          rows:[
            {
                id:001,
                name:zzz
                phone:111111
            },{
                id:002,
                name:zzz
                phone:111111
            },{
                id:003,
                name:zzz
                phone:111111
            }
          ]
        }
    }

詳情頁接口設(shè)計

請求參數(shù)

名稱	請求方式	類型	說明	默認值	是否必填
id	GET	string	產(chǎn)品id		是

#假定產(chǎn)品詳情
/v1/m/product/details?id=001

返回參數(shù)

名稱	類型	說明
msg	string	描述
code	num	狀態(tài)碼
data	object	數(shù)據(jù)

data數(shù)據(jù)格式(并不是真實字段，僅能代表數(shù)據(jù)格式)

名稱	類型	說明
id	num	產(chǎn)品id
name	string	產(chǎn)品姓名
phone	num	電話
img	string	產(chǎn)品頭像

    #示例
    {
        msg:ok,
        code:200,
        data:{
          id:001,
          name:zzz,
          phone:111111,
          img:"img src 路徑"
        }
    }