测试平台开发之--项目下的服务和版本实现思路

最新推荐文章于 2023-05-28 22:31:55 发布

程序员白楠楠

最新推荐文章于 2023-05-28 22:31:55 发布

阅读量179

点赞数

文章标签： python 测试用例功能测试安全性测试

本文链接：https://blog.csdn.net/weixin_47340771/article/details/118969194

版权

本文介绍了如何实现项目、服务及其版本的管理，包括前端UI组件如卡片和对话框的使用，后端API接口的定义如添加、查询和更新服务及版本，以及Flask应用的启动。前端使用Element UI库实现交互，后端使用Python Flask进行数据操作，实现了项目服务版本的增删查改功能。

摘要由CSDN通过智能技术生成

目标

项目 => 服务 => 版本

以项目为单位，通过项目实现服务级别及版本级别的关联

表关系项目 1 ：服务 n ：版本 n 测试面试宝典

组件

卡组件：https://element.eleme.cn/#/zh-CN/component/card

例如：

<el-card class="box-card">
 <div slot="header" class="clearfix">
   <span>卡片名称</span>
   <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
 </div>
 <div v-for="o in 4" :key="o" class="text item">
  {{'列表内容 ' + o }}
 </div>
</el-card>

Dialog组件，弹出页面功能使用：https://element.eleme.cn/#/zh-CN/component/dialog

例如：

<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>

<el-dialog
 title="提示"
 :visible.sync="dialogVisible"
 width="30%"
 :before-close="handleClose">
 <span>这是一段信息</span>
 <span slot="footer" class="dialog-footer">
   <el-button @click="dialogVisible = false">取 消</el-button>
   <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
 </span>
</el-dialog>

后端实现

# !/usr/bin/env python
# -*- encoding: utf-8 -*-
# @Author : 编测编学大野
from project_setting.model.settingSql import SettingSql
import json
from flask import request, jsonify
from common.database import DataBase


class SettingApi:


   def addService(self):
       '''
      增加服务api
      :return:
      '''
       data = json.loads(request.data)
       sql = ss.add_service(data['project_id'], data['service_name'], data['service_desc'])
       db.lp3_platform(sql, m='w')
       return jsonify({"success": "true"})

   def addVersion(self):
       '''
      增加服务版本api
      :return:
      '''
       data = json.loads(request.data)
       # serviceIdSql = ss.select_serviceId(data["service"])
       # serviceId = db.lp3_platform(serviceIdSql)
       sql = ss.add_version(data["project_id"], data["service_id"], data["version_name"], data['version_manage'],
                            data['version_desc'])
       print(sql)
       db.lp3_platform(sql, m='w')
       return jsonify({"success": "true"})

   def selectProject(self):
       '''
      查询项目
      :return:
      '''
       sql = ss.select_project()
       project = db.lp3_platform(sql)
       return jsonify(project)

   def serviceVersion(self):
       '''
      查询服务版本
      :return:
      '''
       project_id = request.args.get('project_id')
       sql = ss.select_service(project_id)
       data = db.lp3_platform(sql)
       return jsonify(data)

   def updateProject(self):
       '''
      更新项目
      :return:
      '''
       data = json.loads(request.data)
       sql = ss.updeta_project(data['project_name'], data['project_code'], data['project_manager'], data['desc'],
                               data['project_id'])
       try:
           db.lp3_platform(sql, m='w')
           return jsonify({"success": "true"})
       except Exception as e:
           return jsonify({"success": "false"})

   def select_project_id(self):
       project_id = request.args.get("project_id")
       sql = ss.select_project_id(project_id)
       data = db.lp3_platform(sql)
       return jsonify(data)

   def select_service_id(self):
       service_id = request.args.get("service_id")
       sql = ss.select_service_id(service_id)
       data = db.lp3_platform(sql)
       return jsonify(data)

   def select_version_id(self):
       version_id = request.args.get("version_id")
       sql = ss.select_version_id(version_id)
       data = db.lp3_platform(sql)
       return jsonify(data)

   def updateService(self):
       '''
      更新服务
      :return:
      '''
       data = json.loads(request.data)
       sql = ss.updeta_service(data['service_name'], data['service_desc'], data['service_id'])
       try:
           db.lp3_platform(sql, m='w')
           return jsonify({"success": "true"})
       except Exception as e:
           return jsonify({"success": "false"})

   def select_version(self):
       service_id = request.args.get("service_id")
       sql = ss.select_version(service_id)
       data = db.lp3_platform(sql)
       return jsonify(data)

路由实现

# !/usr/bin/env python
# -*- encoding: utf-8 -*-
# @Author : 编测编学大野

from flask import Blueprint

project_setting = Blueprint('project_setting', __name__, url_prefix='/platform')

project_setting.add_url_rule('/addVersion/', view_func=stapi.addVersion, methods=['PUT'])
project_setting.add_url_rule('/addService/', view_func=stapi.addService, methods=['PUT'])
project_setting.add_url_rule('/updateProject/', view_func=stapi.updateProject, methods=['PUT'])
project_setting.add_url_rule('/updateService/', view_func=stapi.updateService, methods=['PUT'])

启动实现

# !/usr/bin/env python
# -*- encoding: utf-8 -*-
# @Author : 编测编学大野

from flask import Flask
from project_setting import project_setting
from datetime import timedelta
import os
from flask_session import Session

session = Session()

app = Flask(__name__)
app.config['SESSION_TYPE'] = 'filesystem'
app.config['SECRET_KEY'] = os.urandom(24)
app.config['PERMANENT_SESSION_LIFETIME'] = timedelta(weeks=1)
app.config['JSON_AS_ASCII'] = False

session.init_app(app=app)


if __name__ == '__main__':
   app.run(debug=True)

前端实现

<template>
 <div>
   <div style="height:10%">
       <el-button style="float: left;font-size:10px;" type="primary" @click="openServiceInput()">新增服务</el-button>
   </div>
   <div style="overflow-y:scroll;overflow-x:hidden;height:95%">
     <el-row :gutter="10">
       <el-col :span="4" v-for="(test,index) in listService" :key="index" :offset="1">
         <el-card :body-style="{padding:'2px'}" style="padding: 5px;margin-bottom: 20px;border: 5px solid #d4e7f3;color:#9b6559;background-color: #f5f7fa;">
             <div style="height:40px">
               <span>{{test.service_name}}</span>
                 <el-dropdown style="float: right;padding: 3px 0" >
                   <span class="el-dropdown-link"> <i class="el-icon-setting"></i></span>
                   <el-dropdown-menu slot="dropdown">
                     <el-dropdown-item>服务详情</el-dropdown-item>
                     <el-dropdown-item><el-button  type="text" @click="dialogserverUPDATE = true,select_service_id(test.id)">服务修改</el-button>
                     </el-dropdown-item>
                     <el-dropdown-item>删除</el-dropdown-item>
                     <el-dropdown-item>
                     <el-button  type="text" @click="openVersion(test.id)">增加版本</el-button>
                   </el-dropdown-item>
                   </el-dropdown-menu>
                 </el-dropdown>
                 <!-- 修改服务 -->
                 <el-dialog title="修改服务信息" :visible.sync="dialogserverUPDATE" width="">
                   <el-form :model="formData">
                     <el-form-item label="服务名称:">
                       <el-input v-model="formData.service_name" style='width:30%'></el-input>
                     </el-form-item>
                     <el-form-item label="服务描述:" >
                       <el-input type="textarea" :rows="3" placeholder="请输入内容" style='width:30%' v-model="formData.service_desc"> </el-input>
                     </el-form-item>
                   </el-form>
                   <div slot="footer" class="dialog-footer">
                     <el-button @click="dialogserverUPDATE = false">取 消</el-button>
                     <el-button type="primary" @click="update_service(test.id)">更 新</el-button>
                   </div>
                 </el-dialog>  
                 <!-- 创建版本 -->
                 <el-dialog title="创建版本" :visible.sync="dialogversion">
                   <el-form :model="formData">
                     <el-form-item label="版本名称:">
                       <el-input v-model="formData.version_name"></el-input>
                     </el-form-item>
                     <el-form-item label="版本负责人:">
                       <el-input v-model="formData.version_manage"></el-input>
                     </el-form-item>
                     <el-form-item label="版本描述:" >
                       <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="formData.version_desc"> </el-input>
                     </el-form-item>
                   </el-form>
                   <div slot="footer" class="dialog-footer">
                     <el-button @click="dialogversion = false">取 消</el-button>
                     <el-button type="primary" @click="dialogversion = false, addVersion(test.id)">确 定</el-button>
                   </div>
                 </el-dialog>
                   
             </div>
             <div>
               <el-button @click="drawer = true,select_version(test.id)" type="text" style="margin-left: 16px;" >
                点击查看版本信息
               </el-button>

               <el-drawer title="版本详情" :visible.sync="drawer" :with-header="false">
                 <span>版本详情</span><br>
                 <el-table :data="versionall">
                   <el-table-column property="version_name" label="版本号" width="100"></el-table-column>
                   <el-table-column property="version_manage" label="负责人" width="100"></el-table-column>
                   <el-table-column property="version_desc" label="说明" width="250"></el-table-column>
                   <el-table-column label="操作" width="50">
                     <template slot-scope="scope">
                       <el-button @click="select_version_id(scope.row.id)" type="text">
                         <i class="el-icon-edit-outline"></i>
                       </el-button>
                     </template>
                   </el-table-column>
                 </el-table>
               </el-drawer>
             </div>
         </el-card>
       </el-col>
     </el-row>
     <!-- 修改版本 -->
     <el-dialog title="修改版本" :visible.sync="versionUPDATE">
       <el-form :model="versionData">
         <el-form-item label="版本号:">
           <el-input v-model="versionData.version_name"></el-input>
         </el-form-item>
         <el-form-item label="版本负责人:">
           <el-input v-model="versionData.version_manage"></el-input>
         </el-form-item>
         <el-form-item label="版本描述:" >
           <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="versionData.version_desc"> </el-input>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="versionUPDATE = false">取 消</el-button>
         <el-button type="primary" @click="updata_version()">更 新</el-button>
       </div>
     </el-dialog>
     <!-- 创建服务 -->
       <el-dialog title="创建服务" :visible.sync="dialogserver">
         <el-form :model="formData">
           <el-form-item label="服务名称:">
             <el-input v-model="formData.service_name"></el-input>
           </el-form-item>
           <el-form-item label="服务描述:" >
             <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="formData.service_desc"> </el-input>
           </el-form-item>
         </el-form>
         <div slot="footer" class="dialog-footer">
           <el-button @click="dialogserver = false">取 消</el-button>
           <el-button type="primary" @click="dialogserver = false,addService()">确 定</el-button>
         </div>
       </el-dialog>    
   </div>
 </div>
</template>
<script>
export default {
 
 data() {
   return {
     version_all:'',
     drawer: false,
     dialogserverUPDATE: false,
     dialogserver: false,
     dialogversion: false,
     versionUPDATE: false,
     versionData:{
       version_name:'',
       version_manage:'',
       version_desc:'',
    },

     formData: {
       service_id:'',
       service_name:'',
       service_desc:'',
       version_name:'',
       version_manage:'',
       version_desc:'',
       updateService: undefined,
    },
     list:[],
     listService:[],
     listServiceVersion:[],
     versionall:[],
       
     rules: {},
  }
},
 
 mounted() {
   this.ServiceVersion(this.$route.query.id);
},

 methods: {
   openVersion(service_id){
     this.formData = {};
     this.dialogversion = true;
     this.formData.service_id = service_id
  },
   openServiceInput(){
     this.formData = {};
     this.dialogserver = true
  },
   open(service) {
       this.$prompt('请输入版本号', '新增', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         inputPattern: /\S/,
         inputErrorMessage: '输入版本不能为空'
      }).then(({ value }) => {
         this.addVersion(service,value)
         this.$message({
           type: 'success',
           message: '你的新增版本是: ' + value
        });
      }).catch(() => {
         this.$message({
           type: 'info',
           message: '取消输入'
        });      
      });
    },

 
   // 增加服务
   addService(){
     this.$axios
    .put('/addService/',{"service_name":this.formData.service_name,"service_desc":this.formData.service_desc,"project_id":this.$route.query.id})
    .then((res)=>{
     if(res.data["success"]==='true'){
       this.ServiceVersion(this.$route.query.id);
    }
  })
  },
 
 // 查询服务信息
 ServiceVersion(project_id){
         this.list=[],
         this.listService=[],
         this.listServiceVersion=[],
         this.$axios
        .get('/serviceVersion/',{params:{'project_id':project_id}})
        .then((res)=>{
           this.listService = res.data
        })
      },

 // 增加版本
 addVersion(){
   this.$axios
  .put('/addVersion/',{"version_name":this.formData.version_name,"service_id":this.formData.service_id,"version_manage":this.formData.version_manage,"version_desc":this.formData.version_desc,"project_id":this.$route.query.id})
  .then((res)=>{
     if(res.data["success"]==='true'){
       this.ServiceVersion(this.$route.query.id);
       
    }
  })
},
  // 修改服务
 update_service(service_id){
   console.log(service_id)
   this.$axios
  .put('/updateService/',{"service_name":this.formData.service_name,"service_desc":this.formData.service_desc,"service_id":this.formData.id})
  .then((res)=>{
     if(res.data["success"]==='true'){
       this.ServiceVersion(this.$route.query.id);
       this.dialogserverUPDATE = false;
       
    }
  })
  },

     // 查询版本
    select_version_id(version_id){
     this.versionUPDATE = true
     this.$axios
    .get('/select_version_id/',{params:{"version_id":version_id}})
    .then((res)=>{
       this.versionData = res.data[0]

    })
  },

   // 修改版本
   updata_version(){
     console.log('version>>',this.versionData.id)
     this.$axios
    .put('/updateVersion/',{"version_name":this.versionData.version_name,"version_manage":this.versionData.version_manage,"version_desc":this.versionData.version_desc,"version_id":this.versionData.id})
    .then((res)=>{
       if(res.data["success"]==='true'){
         this.select_version(this.versionData.service_id);
         this.versionUPDATE = false
      }
    })
  },

    //查询服务
   select_service_id(service_id){
     this.$axios
    .get('/select_service_id/',{params:{"service_id":service_id}})
    .then((res)=>{
       this.formData = res.data[0]
    })
  },

   // 查询版本信息
   select_version(service_id){
     this.$axios
    .get('/select_version/',{params:{"service_id":service_id}})
    .then((res)=>{
             this.versionall = res.data
          })
  }
 

   
}
}

</script>
<style>

 .el-collapse-item__header{
   color: #a0d052;
}
 .el-dropdown-link {
   cursor: pointer;
   color: #409EFF;
}
 .demonstration {
   display: block;
   color: #8492a6;
   font-size: 14px;
   margin-bottom: 20px;
}
 .el-drawer.rtl{
   width: 37%!important;
   height: 80%;
   top:10%;
   border-radius: 6px;
   padding: 2%;
}

</style>

功能慢慢来，页面慢慢写，先功能后样式，多敲多看多学习测试面试宝典