【Flask】测试平台开发，初始化管理第一个页面开发-第三篇
项目初始化
先介绍下我们开发的这个平台工具蓝图
项目(线)/产品管理
提测创建和管理
测试报告和管理
统计报表(Leader用)
CI API （集成部署条件判断）
项目托管
选择自己想要托管的的即可，github，gitee，你怎么高兴怎么来即可
过程创建实在是太过于简单，这里就不拿出来说了，耽误时间~
创建后端服务
接口Flask服务 打开PyCharm, 创建一个flask项目: Create New Project -> Flask -> 路径可以选择到刚才克隆的项目下，起名为Service服务，并建议创建Virtual env和勾选上 Inherit ，版本选择python3.x 版本，这主要是为了使其环境独立，以免跟你本地其他项目冲突
注意：通过pycharm创建后端项目，需要pycharm是专业版本，可别傻乎乎使用社区版本，有的不支持，到头来你自己搞半天没搞明白，懵逼状态~
创建前端服务
页面vue服务 在上面演示用的是admin完整包，基本上我们不会用到里边的那么多默认页面，而我们正式项目会换成vue-admin-template, 这是一个极简的管理后台，我们在这基础上一步一步的开发。
请注意：在这里到项目结束，我们的前端vue都是基于2.x版本开发的，不兼容3.x版本哈，别自己搞个3.x，又闷逼搞不明白，如果可以，你可以试着将本项目从2.x版本升级项目迁移到3.x版本，，当然这里不是我们的重点，你自己可以查看官方文档教程，如何迁移项目
具体操作如下：
# 切换到项目目录，目录你自己看着创建，开心就行
cd /rebortcode/TestProjectManagement/
# https模式克隆到项目下
git clone https://github.com/PanJiaChen/vue-admin-template.git
# 重新命名一下，作为项目Web服务
mv vue-admin-template/ TPMWeb最终你会看到如下的项目接口，红框1：后端项目服务，红框2：前端项目服务
Flask_vss_rebort优化结构
之前我们例子中写了登陆请求，这些数据其实都写在了一个文件里，那么随着功能的增多，所有代码都在一起肯定是不合适的，而路由的实现又是显示的，所以这里我们用到python flak的中的 Blueprint 来进行模块化的管理和开发，开篇时我们就有提到这里，这里在多提一下。
迁移登陆代码
在Flask_vss_rebort跟目录下创建一个文件夹包 apis，并在此下边创建一个user.py 文件，编辑这个文件，将之前的主文件(app.py)中关于登陆的代码copy到此处，另外需要从flask中import blueprint，并注册一个对象，重点实现给出标记
迁移后的实现代码如下：
# -*- coding:utf-8 -*-from flask import requestimport jsonfrom flask import Blueprintapp_user = Blueprint("app_user", __name__)@app_user.route("/api/user/login",methods=['POST'])
def login():data = request.get_data() # 获取post请求body数据js_data = json.loads(data) # 将字符串转成jsonif 'username' in js_data and js_data['username'] == 'admin':result_success = {"code":20000,"data":{"token":"admin-token"}}return result_successelse: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_successelse:result_error = {"code": 60204, "message": "用户信息获取错误"}return result_error在后端服务主程文件(app.py) 引入分类模块即可
编写产品线接口
按照上边的思想，我们创建一个硬编码的一个产品线模块[ /apis/product.py ] ，来配合实现一个vue页面，产品管理显示，直接给出核心代码：
Product.py
# -*- coding:utf-8 -*-from flask import Blueprintapp_product = Blueprint("app_product", __name__)@app_product.route("/api/product/list",methods=['GET'])def product_list():# 硬编码返回listdata = [{"id":1, "keyCode":"project1", "title":"项目一", "desc":"这是项目1描述", "operator":"admin","update":"2025-04-06"},{"id":2, "keyCode": "project2", "title": "项目而", "desc": "这是项目2描述", "operator": "user", "update": "2025-04-03"}]# 按返回模版格式进行json结果返回resp_data = {"code": 20000,"data": data}return resp_dataapp.py
# -*- coding:utf-8 -*-from flask import Flaskfrom apis.user import app_userfrom apis.product import app_productfrom flask_cors import CORSapp = 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或者pycharm专业版本， 打开并导入我们上边的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没有在运行，此时需要将vue运行起来，效果如下展示
web端效果如下：
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 class="app-container"><!--样式组件 参考 https://element.eleme.cn/#/zh-CN/component/table--><el-table :data="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.getProductListgetProductList() {// 固定格式调用api配置方法，并将返回结果回调给responseapiProductList().then(response => {// console.log（）是调试打印，可以在chrome开发者工具中查看console.log(response.data)// 将返回的结果赋值给变量 tableDatathis.tableData = response.data})}}
}
</script>4）运行查看效果
以上如果没有错误的话，我们再重新运行后端服务，前端服务看下效果
python app.py #或PyCharm 配自run config直接运行
nmp run dev #或WebStorm 配自run config直接运行
全局一些配置
在src/settings.js 有一些全局配置，比如title可以修改下系统的名字
至此我们就实现了第一个功能界面，并且可以成功展示，下一篇我们实现数据库关联，启动数据库进行开发数据存储，展示数据
Vue中文官方文档
如果想全面或者快速了解更多vue知识可以参考官方
https://cn.vuejs.org/v2/guide/