快捷導(dǎo)航

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

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

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

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

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

需要工具

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

nginx的環(huán)境搭建

nginx.conf 文件配置

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

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

測(cè)試環(huán)境

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

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

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

POSTman 接口調(diào)試

get方式

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

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

post方式

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

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

為什么使用postman

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

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

接口說(shuō)明

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

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

通過(guò)HTTP Status Code來(lái)說(shuō)明 API 請(qǐng)求是否成功下面的表格中展示了可能的HTTP Status Code以及其含義

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

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

狀態(tài)碼	含義	說(shuō)明
999	unknow_v2_error	未知錯(cuò)誤
1000	need_permission	需要權(quán)限
1001	uri_not_found	資源不存在
1002	missing_args	參數(shù)不全
1003	image_too_large	上傳的圖片太大
1004	input_too_short	輸入為空，或者輸入字?jǐn)?shù)不夠
1005	target_not_fount	相關(guān)的對(duì)象不存在
1006	need_captcha	需要驗(yàn)證碼，驗(yàn)證碼有誤
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ù)	說(shuō)明
v1	版本號(hào)
m	手機(jī)端
Login	登錄接口

版本說(shuō)明

暫定大版本更替時(shí)更改

例如：

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

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

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

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

請(qǐng)求參數(shù)

名稱	請(qǐng)求方式	類型	說(shuō)明	默認(rèn)值	是否必填
page	GET		頁(yè)碼/第幾頁(yè)	1	否
limit	GET		條數(shù)	10	否

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

返回參數(shù)

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

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

名稱	類型	說(shuō)明
pageSize	num	總頁(yè)數(shù)
page	num	當(dāng)前頁(yè)
limit	num	每頁(yè)條數(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
            }
          ]
        }
    }

詳情頁(yè)接口設(shè)計(jì)

請(qǐng)求參數(shù)

名稱	請(qǐng)求方式	類型	說(shuō)明	默認(rèn)值	是否必填
id	GET	string	產(chǎn)品id		是

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

返回參數(shù)

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

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

名稱	類型	說(shuō)明
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 路徑"
        }
    }