测试开发【提测平台】分享3-正式开发产品需求&项目初始化

时间  2021-08-12
标签 javascript html 前端 vue java python mysql git github sql 栏目 快乐工作 繁體版
原文   原文链接

上两个分享主要是介绍和演示基本先后端所要使用的框架，接下来咱们将正式进入到【提测平台的开发】javascript

提要先给出依赖和内容点：html

  • 提测平台定义和产品原型需求说明前端

  • 使用github建立代码仓库进行项目管理vue

  • Flask中使用 Blueprint 进行模块开发java

  • 前端 开发IDE工具为：WebStormpython

  • 后端 开发IDE工具为：PyCharmmysql

提测平台需求说明

关于这个提测系统，N年前原始需求，是由于当初所在团队，负责太多的项目，不少需求提测，测试报告都是经过邮件手工进行，久之就有了好比信息不全、记录很差找、领导很差统计工做量等等，因此借着团队有本身前端框架，相似vue这种比较简易，就促使了这样一个测试管理小平台的诞生，其实平台的功能不是很复杂，具体的主要功能罗列以下：git

  • 项目(线)/产品管理 github

  • 提测建立和管理sql

  • 测试报告和管理

  • 统计报表(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 git@github.com: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
|-TPMWeb

TPMService优化结构

以前咱们例子中写了登录请求，这些数据其实都写在了一个文件里，那么随着功能的增多，全部代码都在一块儿确定是不合适的，而路由的实现又是显示的，因此这里咱们用到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 = 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 = [
        {"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 = {
        "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 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.getProductList
    getProductList() {
      // 固定格式调用api配置方法，并将返回结果回调给response
      apiProductList().then(response => {
        // console.log（）是调试打印，能够在chrome开发者工具中查看
        console.log(response.data)
        // 将返回的结果赋值给变量 tableData
        this.tableData = 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-基础之技术栈和开源框架选型

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程