| 前言
上一讲讲解了测试管理页面对应的后台接口，这一节我们主要讲解测试用例管理页面的编写，先上一张写完之后的效果图
该页面主要的功能包括：执行增删改查测试用例，运行测试用例，监控测试用例执行过程。这一讲我们讲解测试用例的增删改查页面实现。
| 添加性能测试用例管理组件
(1)添加性能测试用例管理页面路由
代码语言：javascript复制import PerformanceTestCaseManage from '../components/performance/PerformanceTestCaseManage.vue'
{path:'/performanceTestCaseManage',component:PerformanceTestCaseManage}(2)添加性能测试管理页面
代码语言：javascript复制<template> <div> <h3>Performance Testcase Manage</h3> </div></template><script> export default {}</script><style lang="less" scoped></style>| 添加面包屑组件
什么是面包屑呢？说白了就是面包屑导航的缩写，从下面截图你便能很好的理解
(1)导入面包屑组件
代码语言：javascript复制import { Button,Form,FormItem,Input,Message,Container,Header,Aside,Main,Menu, Submenu,MenuItem, Breadcrumb, BreadcrumbItem } from 'element-ui'
Vue.use(Breadcrumb)Vue.use(BreadcrumbItem)(2)在性能测试用例管理页面添加面包屑代码
代码语言：javascript复制<el-breadcrumb separator="/"> <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item> <el-breadcrumb-item><a href="/">性能测试</a></el-breadcrumb-item> <el-breadcrumb-item>用例管理</el-breadcrumb-item> </el-breadcrumb>| 添加内容卡片
那么什么是卡片呢?就是用来放管理页面的表格的大白色块，如下图
(1)导入卡片组件
代码语言：javascript复制import { Button,Form,FormItem,Input,Message,Container,Header,Aside,Main,Menu, Submenu,MenuItem, Breadcrumb, BreadcrumbItem, Card } from 'element-ui'
Vue.use(Card)(2)在性能测试用例管理页面添加卡片代码
| 添加页面头部搜索区域
(1)导入行和列组件
代码语言：javascript复制import { Button,Form,FormItem,Input,Message,Container,Header,Aside,Main,Menu, Submenu,MenuItem, Breadcrumb, BreadcrumbItem, Card, Row,Col } from 'element-ui'
Vue.use(Row)Vue.use(Col)(2)在性能测试用例管理页面添加搜索区域代码
代码语言：javascript复制<el-card> <el-row :gutter="20"> <el-col :span="8"> <el-input placeholder="请输入内容"> <el-button slot="append" icon="el-icon-search"></el-button> </el-input> </el-col> <el-col :span="4"> <el-button type="primary">添加用例</el-button> </el-col> </el-row> </el-card>| 获取列表数据
代码语言：javascript复制export default { data(){ return { queryInfo:{ pageNum: 1, pageSize: 10 }, performanceCaseList:[], total:0 } }, created() { this.getPerformanceCaseList(); }, methods:{ async getPerformanceCaseList(){ const {data:res} = await this.$http.get('performance/queryAll',{params: this.queryInfo}) if (!res.success) return this.$message.error(res.message); this.$message.success(res.message); this.performanceCaseList = res.data this.total = res.pageInfo.total console.log("performanceCaseList:" this.performanceCaseList) } } }| 渲染列表数据
(1)导入表格相关组件
代码语言：javascript复制import { Button,Form,FormItem,Input,Message,Container,Header,Aside,Main,Menu, Submenu,MenuItem, Breadcrumb, BreadcrumbItem, Card, Row,Col,Table,TableColumn } from 'element-ui'
Vue.use(Table)Vue.use(TableColumn)(2)编写列表渲染相关代码
代码语言：javascript复制<el-table :data="performanceCaseList" stripe border> <el-table-column type="index"></el-table-column> <el-table-column label="用例名" prop="caseName"></el-table-column> <el-table-column label="项目名" prop="projectName"></el-table-column> <el-table-column label="模块名" prop="moduleName"></el-table-column> <el-table-column label="脚本名称" prop="scriptName"></el-table-column> <el-table-column label="脚本数据名称" prop="scriptName"></el-table-column> <el-table-column label="操作人" prop="operator"></el-table-column> <el-table-column label="创建时间" prop="createDate" width="140px"></el-table-column> <el-table-column label="修改时间" prop="lastUpdateDate" width="140px"></el-table-column> <el-table-column label="操作" width="120px"> <template slot-scope="scope"> <el-button type="primary" icon="el-icon-edit" size="mini"></el-button> <el-button type="danger" icon="el-icon-delete" size="mini"></el-button> </template> </el-table-column> </el-table>| 实现分页显示效果
(1)引入分页组件
代码语言：javascript复制import { Button,Form,FormItem,Input,Message,Container,Header,Aside,Main,Menu, Submenu,MenuItem, Breadcrumb, BreadcrumbItem, Card, Row,Col,Table,TableColumn,Pagination } from 'element-ui'
Vue.use(Pagination)(2)编写分页相关代码
代码语言：javascript复制<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pageNum" :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>methods:{ // <!--监听pagesize变化--> handleSizeChange(newSize){ console.log(newSize) this.queryInfo.pageSize = newSize this.getPerformanceCaseList() }, // <!--监听页码值变化--> handleCurrentChange(newPage){ console.log(newPage) this.queryInfo.pageNum = newPage this.getPerformanceCaseList() } }| 实现点击搜索按钮搜索出匹配文本框内容的用例
给搜索按钮绑定获取用例列表方法，并且给输入框绑定queryInfo.query属性
代码语言：javascript复制<el-input placeholder="请输入用例名" v-model="queryInfo.query"> <el-button slot="append" icon="el-icon-search" @click="getPerformanceCaseList"></el-button> </el-input>| 清空搜索内容并返回所有用例
(1)为Input添加clearable属性
(2)添加input clear事件，并且绑定方法getPerformanceCaseList
| 用例添加对话框实现
(1)导入dialog组件
代码语言：javascript复制import { Button,Form,FormItem,Input,Message,Container,Header,Aside,Main,Menu, Submenu,MenuItem, Breadcrumb, BreadcrumbItem, Card, Row,Col,Table,TableColumn,Pagination,Dialog } from 'element-ui'
Vue.use(Dialog)(2)dialog代码编写
代码语言：javascript复制<el-dialog title="添加性能测试用例" :visible.sync="addDialogVisible" width="50%"> <span>这是一段信息</span> <span slot="footer" class="dialog-footer"> <el-button @click="addDialogVisible = false">取 消</el-button> <el-button type="primary" @click="addDialogVisible = false">确 定</el-button> </span> </el-dialog>(3)data里添加addDialogVisible属性
(4)添加用例按钮绑定addDialogVisible=true
代码语言：javascript复制<el-button type="primary" @click="addDialogVisible = true">添加用例</el-button>| 结尾
前端的页面写法大同小异，需要组件的时候直接去element-ui官网找下，都有现成的例子，至此前端界面的编写这节结束，不过多赘述，下一节(也是本系列最后一节)主要讲述性能测试用例平台怎么借助jmeter提供的api来实现性能测试的主要代码。
