【實戰(zhàn)】Django + VueJS 打造內(nèi)網(wǎng) Postman

時間：2023-07-21 01:27:02 | 來源：網(wǎng)站運營

時間：2023-07-21 01:27:02 來源：網(wǎng)站運營

【實戰(zhàn)】Django + VueJS 打造內(nèi)網(wǎng) Postman：

就和你們看到 內(nèi)網(wǎng)Postman 是懵逼的一樣，我接到一個叫非標操作的需求時候我也是懵逼的

背景

我司經(jīng)常要和 API 打交道，特別是我們萌（ku）萌（ku）噠的應(yīng)用運維同學(xué)

舉個例子：

在 UCloud 官網(wǎng)控制臺的 基礎(chǔ)網(wǎng)絡(luò) 服務(wù)中，客戶可以自助的申請資源，例如外網(wǎng)IP：

（注：UCloud 控制臺申請 EIP的模態(tài)框）

我們也提供了完善的 API 供客戶的 DevOps 做二次開發(fā)，背景交代完了，開始講故事：

有一位客戶在我們云主機上的服務(wù)最近訪問量暴增，想買100個外網(wǎng)IP，他告訴我們客服：我錢充滿了，你幫我創(chuàng)建100個外網(wǎng)IP，客服告訴他：你可以在控制臺這樣...這樣...操作，或者使用你的簽名密鑰這樣...這樣...調(diào) API，客戶說：我知道，但是我不想動手。。。動手。。。手。。。


好吧， 客戶大人任性，于是一個工單就到了我們應(yīng)用運維小伙伴手里，小伙伴一愣（不超過三秒），打開了 Postman

故事純屬虛構(gòu)，只是為了說明什么是非標操作

要和API打交道，肯定少不了 Postman

它（需翻墻） 是Chrome瀏覽器的一個App，大概長這樣：


（Chrome Postman 界面）

或者更復(fù)雜一點的，支持 API 編排，用 Paw – The most advanced HTTP client for Mac，它大概長這樣：


（Paw 界面）

大部分非標操作， Postman 是可以搞定的，但是非標操作本身是不提倡通過它來做的，首先它未過權(quán)鑒系統(tǒng)，然后它是一次性的，操作時間，操作人，操作結(jié)果都不能保留，導(dǎo)致操作與工單之間的關(guān)系無處可查，是有隱患的，而且有些需要簽名的 API 更是力不從心，于是有了它：

內(nèi)網(wǎng) Postman

（名字形象吧，同事幫我起的 ^ ^）

先上特性：

1. 有權(quán)鑒，模塊化公司內(nèi)部 API 的調(diào)用邏輯，根據(jù)不同 API 自動簽名
2. 自定義，包括：API 類型，API 方法，包含參數(shù)
3. 有審計，不管成功失敗，只要 API request 發(fā)送出去，就會產(chǎn)生一條歷史記錄，以備審計
4. 最重要的，可以自動生成前端表單（Form）（這個很關(guān)鍵??！?）

直接上圖：

• 表結(jié)構(gòu)
  

• 神奇的 Django-Admin，分分鐘有界面 C R U D
  

• API 類型定義
  

• API 實例定義
  

但是這還不夠，我需要把定義好的 API API化，（有點拗），使用它分分鐘搞定：


http://www.django-rest-framework.org/


直接上偽代碼：

一個定義好的 API 的描述大概是這樣：


{ "id": 3, "_params": [ { "param_name": "xxxId", "param_desc": "xxx ID", "create_date": "2017-03-07T10:51:11Z", "api_id": 3, "modify_date": "2017-03-07T10:51:11Z", "id": 1 } ], "create_date": "2017-03-07T09:45:42Z", "modify_date": "2017-03-07T10:25:31Z", "api_name": "查詢xxx信息", "api_method": "GET", "api_desc": "", "api_group": "", "api_backend": "", "api_action": "Acxxxxxnfo", "api_type": { "id": 1, "create_date": "2017-03-07T08:26:28Z", "modify_date": "2017-03-07T08:52:55Z", "type_url": "http://xxx.ucloud.cn", "type_desc": "需要簽名" }}

• 生成的前端界面長這樣：

（無參數(shù)的 API）
（有參數(shù)的 API）

比較簡單，主要用到了：

VueJS + element UI + axios + normalize.css + lodash

關(guān)鍵代碼大概是這樣：

<!-- 動態(tài)表單 --><template v-for="(item, index) in params"> <el-form-item :label="`${item.param_desc}`"> <el-input v-model="paramsForm[item.param_name]"></el-input> </el-form-item></template>

其實這里改進的空間很大，我可在定義表結(jié)構(gòu)的時候為參數(shù)加上類型，比如：

<!-- 單選 --><el-form-item v-if="item.param_type === choice"> <choice-template></choice-template></el-form-item><!-- 時間選擇器 --><el-form-item v-if="item.param_type === datetime"> <datetime-template></datetime-template></el-form-item>// 盡情發(fā)揮這個App的后端代碼大概是這樣：

# 發(fā)請求if api_queryset.api_method.upper() == 'GET': r = requests.get(url=url, params=payload)elif api_queryset.api_method.upper() == 'POST': r = requests.post(url=url, json=payload)else: r = { 'RetCode': -1, 'Message': 'API method invalid.' }# 保存結(jié)果save_result(user_queryset=user, api_queryset=api_queryset, result=json.dumps(rt), comment=comment, desc=u'備用字段')# 就像上面判斷 method 一樣，會先判斷哪些 API 需要簽名，哪些不需要，代碼省略主要用到了：

Django + requests + djangorestframwork + MySQL

ORM 是 Django 自帶，誰用誰知道

直接上生產(chǎn)：

整個項目前后端分離，VusJS build 的時候 static 路徑配置為相對路徑

大概是這樣：

module.exports = { build: { env: require('./prod.env'), index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: '', <------ 看這里 productionSourceMap: true, bundleAnalyzerReport: process.env.npm_config_report }, dev: {}}構(gòu)建完成的 dist 目錄中的靜態(tài)文件請求全部由 Nginx 處理，然后所有 API 交給uWSGI，可以部署兩套，通過Nginx做簡單的HA，前后端可以分開發(fā)布互不影響，開發(fā)花費的時間并不長，不到一天，思考比較費時間，一天半吧，還自己推翻了自己幾次，但是能節(jié)省小伙伴不少時間

說到部署，不得不說一下開發(fā)環(huán)境與生產(chǎn)環(huán)境的切換問題了，我比較懶，開發(fā)環(huán)境與生產(chǎn)環(huán)境都在代碼里寫了，完全不用去改配置：

前端如何判斷：

export let backendConf = { get url () { if (process.env.NODE_ENV === 'production') { return '/' } else { return 'http://127.0.0.1:8000/' } }}export let somethingElse = {}// ES6寫法，定義 getter，像Python里面的 @property 裝飾器裝飾的方法，但是Python是同步的，JS是異步的，所以用法不同// process.env.NODE_ENV 會在build的時候被替換成 'production'// 使用的時候這樣import { backendConf, somethingElse } from '../../Config'url = backendConf.urlse = somethingElseDjango 后端如何判斷：

from django.conf import settingsfrom .app_settings import *if settings.DEBUG: global DEBUG DEBUG = True api = DEV_URLelse: api = PROD_URL# 附帶一個小技巧，print 大法你懂得，我這個是不用刪的那種，哈哈if DEBUG: print payload print req.url print req.json()這樣的話，代碼直接上線，什么都不用改

最后：

很遺憾，好多細節(jié)和技巧都沒寫出來，不過代碼思路和思想應(yīng)該比較清楚了，想到再補充吧，源代碼不能放出來，有問題直接問我吧，先關(guān)注哦 ?

如果偏愛實戰(zhàn)，可以看看我之前發(fā)過一篇文章：我如何使用 Django + Vue.js 快速構(gòu)建項目

里面介紹了兩個 Demo：

• Django + VueJS 結(jié)合示例：tmpbook/django-with-vuejs
• 很簡單的 dashboard 模板：tmpbook/vue-template-with-element-ui

這次實戰(zhàn)就是基于它們，嗯，其實已經(jīng)高于它們了（懶真的能讓人進步，真的）


如果本文對你有啟發(fā)，可以持續(xù)關(guān)注

我 （ UCloud-中國最大的中立云計算服務(wù)商 DevOps ）


或者我的專欄：隨心DevOps - 本站專欄

本文地址：https://zhuanlan.zhihu.com/p/25654547/，轉(zhuǎn)載請注明出處