上兩個分享主要是介紹和演示基本前后端所要使用的框架，接下來我們將正式進入到【提測平臺的開發】
提要先給出依賴和內容點：
提測平臺定義和產品原型需求說明
使用github創建代碼倉庫進行專案管理
Flask中使用 Blueprint 進行模塊開發
前端 開發IDE工具為：WebStorm
后端 開發IDE工具為：PyCharm
提測平臺需求說明
關于這個提測系統，N年前原始需求，是因為當初所在團隊，負責太多的專案，很多需求提測，測驗報告都是通過郵件手工進行，久之就有了比如資訊不全、記錄不好找、領導不好統計作業量等等，所以借著團隊有自己前端框架，類似vue這種比較簡易，就促使了這樣一個測驗管理小平臺的誕生，其實平臺的功能不是很復雜，具體的主要功能羅列如下：
-
專案(線)/產品管理
-
提測創建和管理
-
測驗報告和管理
-
統計報表(Leader用)
-
CI API （集成部署條件判斷）
當然這其中其他還有集成公司的統一人員管理，權限管理，以及特殊的管理，這些在這個專案中都將以一個通用的方式去實作，具體如果這個專案能應用在你們的團隊中，可以在對這部分進行二次的開發，
特別說明，由于發現原來畫的產品原型，在這次重新開發中并不適用了，所以這次就不給出來了，就留在下篇迭代開發中給出吧，
GitHub托管代碼專案
官方 https://github.com 在自己的目錄下創建個專案，作為專案的全程代碼托管，當然如果你只打算本地用，可以忽略github創建，直接創建本地的一個稍微正式一點的專案檔案夾即可，
專案名稱定義為：TestProjectManagement - Public
SSH方式git clone代碼
本地電腦打開終端 ssh-keygen -p 命令生成密鑰，如果有忽略
ssh-keygen -p
復制密鑰, 根據生成路徑找到 id_rsa.pub 復制到剪貼板，我這里mac默認在：
cat .ssh/id_rsa.pub
粘貼密鑰在到github上，位置在 個人頭像 -> Settings -> SSH and GPG keys -> New GPG Key
進入TestProjectManagement，切換成SSH模式，復制，本地自己開發位置直接克隆即可
git clone [email protected]:mrzcode/TestProjectManagement.git
創建前后端服務
介面Flask服務 打開PyCharm, 創建一個flask專案: Create New Project -> Flask -> 路徑可以選擇到剛才克隆的專案下，起名為Service服務，并建議創建Virtual env和勾選上 Inherit ，版本選擇python3.x 版本，這主要是為了使其環境獨立，以免跟你本地其他專案沖突，尤其是有2.x的專案，
頁面vue服務 在之前文章中演示用的是admin完整包，基本上我們不會用到里邊的那么多默認頁面，而我們正式專案會換成vue-admin-template, 這是一個極簡的管理后臺，我們在這基礎上一步一步的開發，
# 切換到專案目錄 cd /mrzcode/TestProjectManagement/ # https模式克隆到專案下 git clone https://github.com/PanJiaChen/vue-admin-template.git # 重新命名一下，作為專案Web服務 mv vue-admin-template/ TPMWeb
這里關于還有個技巧就是對其Fork，方便作者有修復Bug等情況及時更新我們的基礎代碼，具體的后續可以找個小結專門講下，
最終我們就得到一個帶有前后端完整專案目錄結構如下：
TestProjectManagement
|-TPMService
|-TPMWebTPMService優化結構
之前我們例子中寫了登陸請求，這些資料其實都寫在了一個檔案里，那么隨著功能的增多，所有代碼都在一起肯定是不合適的，而路由的實作又是顯示的，所以這里我們用到python flak的中的 Blueprint 來進行模塊化的管理和開發，
遷移登陸代碼
在TPMService跟目錄下創建一個檔案夾包 apis，并在此下邊創建一個user.py 檔案，編輯這個檔案，將之前章節的主檔案(run.py)中關于登陸的代碼copy到此處，另外需要從flask中import blueprint，并注冊一個物件，重點實作給出標記
遷移后代碼實作如下(/apis/user.py):
#!/usr/bin/env python3
# -*- coding:utf-8 -*-
from flask import request
import json
from flask import Blueprint
app_user = Blueprint("app_user", __name__)
@app_user.route("/api/user/login",methods=['POST'])
def login():
data = https://www.cnblogs.com/mrzcode/archive/2021/08/05/request.get_data() # 獲取post請求body資料
js_data = json.loads(data) # 將字串轉成json
if'username' in js_data and js_data['username'] == 'admin':
result_success = {"code":20000,"data":{"token":"admin-token"}}
return result_success
else:
result_error = {"code":60204,"message":"賬號密碼錯誤"}
return result_error
@app_user.route("/api/user/info",methods=['GET'])
def info():
# 獲取GET中請求token引數值
token = request.args.get('token')
if token == 'admin-token':
result_success = {
"code":20000,
"data":{
"roles":["admin"],
"introduction":"I am a super administrator",
"avatar":"https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif",
"name":"Super Admin"}
}
return result_success
else:
result_error = {"code": 60204, "message": "用戶資訊獲取錯誤"}
return result_error
在后端服務主程檔案(app.py) 引入分類模塊即可
撰寫產品線介面
按照上邊的思想，我們創建一個硬編碼的一個產品線模塊[ /apis/product.py ] ，來配合實作一個vue頁面，產品管理顯示，直接給出核心代碼：
product.py
# -*- coding:utf-8 -*-
from flask import Blueprint
app_product = Blueprint("app_product", __name__)
@app_product.route("/api/product/list",methods=['GET'])
def product_list():
# 硬編碼回傳list
data = https://www.cnblogs.com/mrzcode/archive/2021/08/05/[
{"id":1, "keyCode":"project1", "title":"專案一", "desc":"這是專案1描述", "operator":"admin","update":"2020-04-06"},
{"id":2, "keyCode": "project2", "title": "專案而", "desc": "這是專案2描述", "operator": "user", "update": "2020-04-03"}
]
# 按回傳模版格式進行json結果回傳
resp_data = https://www.cnblogs.com/mrzcode/archive/2021/08/05/{"code": 20000,
"data": data
}
return resp_data
app.py
# -*- coding:utf-8 -*-
from flask import Flask
from apis.user import app_user
from apis.product import app_product
from flask_cors import CORS
app = Flask(__name__)
CORS(app, supports_credentials=True)
app.register_blueprint(app_user)
app.register_blueprint(app_product)
if __name__ == '__main__':
app.run(debug=True)
其中不要忘記之前文章中提到的CORS配置
最終后端服務目前結構如下
TPMWeb優化實作
按照之前的文章，分別來遷移或者重新修改下請求域名和請求API，詳細可以翻看上一篇文章，此處需要打開WebStorm 打開并匯入我們上邊的TPMWeb專案，然后直接通過IDE進行編碼，
遷移登陸配置
開發環境的請求域名修改，并且因為是新的框架環境，需要重新安裝依賴即 npm install
配置請求登陸API，并嘗試運行，開是否正常編譯
實作產品或者部門頁面及串列顯示
1）創建product 前端頁面
在路徑TPMWeb/src/views/下創建個檔案夾product, 接著右鍵 New Vue Compoent，命名為 product.vue，其中Script 中那么命名頁面名字為大寫的Product, 再放置個<label>我是產品管理頁面</label>方便下邊定義路由后查看，
2）配置選單產品線管理路由
編輯 TPMWeb/router/index.js ，在 dashboard下邊配置，一個新的選單資訊，重點compent引數的指向view的地址一定要正確，其他引數配置參考如下
如果vue未在運行，那么在Terminal下邊執行 npm run dev ，看下效果
3）配置后端產品線 API
在src/api/product.js 創建一個介面組態檔，配置上邊服務的get請求地址，其中定義方法名為apiProductList(), 具體代碼如下：
import request from '@/utils/request'
export function apiProductList() {
return request({
url: '/api/product/list',
method: 'get'
})
}
3）實作產品table串列顯示
編輯views/product/product.vue ，這里從 https://element.eleme.cn/#/zh-CN/component/table 直接參考它組件的例子來實作，
其中涉及到知識點有：
vue 是一套回應式框架，一般組件、方法和樣式在一個頁面中集中實作
模塊 <template></template> 組件UI實作區域
模塊 <script></script> 業務實作的區域
<script>內部定義的意義
data(){} 定義值，屬性等
methods:{} 方法，事件處理等
created():() 頁面首次加載處理
template代碼實作
<template>
<!--app-container 框架內嵌的一個樣式，可以嘗試去掉看看效果有什么不同-->
<div >
<!--樣式組件 參考 https://element.eleme.cn/#/zh-CN/component/table-->
<el-table :data="https://www.cnblogs.com/mrzcode/archive/2021/08/05/tableData"><!--:data 系結data()的陣列值,會動態根據其變化而變化-->
<el-table-column prop="id" label="編號"/>
<!--:data prop系結{}中的key，label為自定義顯示的串列頭-->
<el-table-column prop="title" label="名稱"/>
<el-table-column prop="keyCode" label="代號"/>
<!--<el-table-column prop="desc" label="描述"/>-->
<el-table-column prop="operator" label="操作人"/>
<el-table-column prop="update" label="操作時間"/>
</el-table>
</div>
</template>
script代碼實作
<script>
// 參考src/api/proudct 配置的請求串列方法
import { apiProductList } from '@/api/product'
export default {
name: 'Product', // 頁面名稱
// data() 資料\屬性，固定return中配置
data() {
return {
tableData: []
}
},
// 頁面生命周期中的創建階段呼叫
created() {
// 呼叫methods的方法，即初次加載就請求資料
this.getProductList()
},
methods: {
// getProductList自定義方法名，提供其他地方呼叫this.getProductList
getProductList() {
// 固定格式呼叫api配置方法，并將回傳結果回呼給response
apiProductList().then(response => {
// console.log（）是除錯列印，可以在chrome開發者工具中查看
console.log(response.data)
// 將回傳的結果賦值給變數 tableData
this.tableData = https://www.cnblogs.com/mrzcode/archive/2021/08/05/response.data
})
}
}
}
</script>
4）運行查看效果
以上如果沒有錯誤的話，我們再重新運行后端服務，前端服務看下效果
python app.py #或PyCharm 配自run config直接運行 nmp run dev #或WebStorm 配自run config直接運行
資料從服務器端請求并自動按照屬性配置顯示了資料
番外一些內容
全域一些配置
在src/settings.js 有一些全域配置，比如title可以修改下系統的名字
去除vue框架一些示例代碼
這次雖然使用的極簡模版，但是還有有一些例子是用不到的，我們可以將其洗掉掉，大概涉及到如下一些
-
/src/table.js
-
/views/table
-
/views/tree
-
/views/form
-
/views/nested
-
/mock
以及/src/router/index.js 中的相關上述選單配置
當然也可以保留方便參考，我這里最終去除后的結構如下
Vue中文官方檔案
如果想全面或者快速了解更多vue知識可以參考官方
https://cn.vuejs.org/v2/guide/
代碼托管
本地代碼除錯通過通過就可以提交代碼github進行托管了, 我已經提交，可以下載參考或者直接使用
https://github.com/mrzcode/TestProjectManagement
下一期預告和必要準備：資料落庫和產品線頁面管理功能
所以可以提前準備下可用的mysql環境，我個人使用的資料IDE是Navicat
*可能需要前要閱讀*
【提測平臺】分享2-基礎之專案前后端聯調互通
【提測平臺】分享1-基礎之技術堆疊和開源框架選型
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/291992.html
標籤：其他