上一章：
Vue实现自动化平台（二）_做测试的喵酱的博客-CSDN博客
github地址：https://github.com/18713341733/vuemiaotest
这个目前只是用来练手的，项目还没成型。等以后我写完了，再更新一下项目链接。
一、路由配置
1.1 、跟路由重定向到/home
访问/路径时，重定向到/home页面。
配置路由router/index.js
const routes = [{
path: '/',
redirect:'/home'
}1.2 进入/home时，左侧栏位默认展开项目列表。
1、/home路由中，再重定向到子路由redirect:'/projects',
path: '/home',
name: 'home',
component: Home,
redirect:'/projects',2、修改Home.vue 默认激活的菜单
default-active='/projects'1.3 修改后的整体代码
路由index.js整体代码
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from "../components/Login.vue"
import Home from "../components/Home.vue"
import Interface from "../components/Interface.vue"
import Cases from "../components/Cases.vue"
import Projects from "../components/Projects.vue"
Vue.use(VueRouter)
const routes = [{
path: '/',
redirect:'/home'
},{
path: '/login',
name: 'login',
component: Login
},{
path: '/home',
name: 'home',
component: Home,
redirect:'/projects',
children:[
{
path: '/cases',
name:'cases',
component: Cases
},{
path: '/interface',
name: 'interface',
component: Interface
},{
path: '/projects',
name:'/projects',
component: Projects
}
]},
]
const router = new VueRouter({
routes
})
// 添加路由导航守卫
// 添加路由导航守卫
// 用来对访问的路由进行权限控制
// 除了login这个路由其他的路由都要进行了登录之后才能访问
router.beforeEach((to, from, next) => {
// console.log(to)
// console.log(from)
// console.log(next)
// 判断访问的是否是登录页面
// if (to.path === '/login') {
// return next()
// // 判断当前sessionStorage中是否有token(判断是否登录过)
// } else if (window.sessionStorage.getItem('token')) {
// return next()
// } else {
// return next('/login')
// }
if(to.path=== '/login' || window.sessionStorage.getItem('token')) return next()
return next('/login')
})
export default router
首页Home.vue整体代码
<template>
<el-container>
<!-- 页面顶部 -->
<el-header>
<div class="title">
接 口 自 动 化 测 试 平 台
</div>
<div class="logonout">
<el-popconfirm title="确认退出登录？" @confirm='loginout()'>
<div slot="reference">退出登录</div>
</el-popconfirm>
</div>
</el-header>
<el-container>
<!-- 侧边菜单栏 -->
<el-aside width="250px">
<el-menu :router='rou' background-color='#555500' class="el-menu-demo" :default-active='activeMenu'
text-color="#fff" active-text-color="#00aaff" unique-opened>
<!-- 项目管理 -->
<el-submenu index="projectManage">
<template slot="title">
<i class="el-icon-s-home"></i>
<span>项目管理</span>
</template>
<el-menu-item index="/projects">
<template slot="title">
<i class="el-icon-document-copy"></i>
<span>项目列表</span>
</template>
</el-menu-item>
</el-submenu>
<!-- 接口管理 -->
<el-submenu index="interfacaseManage">
<template slot="title">
<i class="el-icon-folder-opened"></i>
<span>接口管理</span>
</template>
<el-menu-item index="/interface">
<template slot="title">
<i class="el-icon-tickets"></i>
<span>接口列表</span>
</template>
</el-menu-item>
</el-submenu>
<!-- 用例管理 -->
<el-submenu index="caseManage">
<template slot="title">
<i class="el-icon-notebook-2"></i>
<span>用例管理</span>
</template>
<el-menu-item index="/cases">
<template slot="title">
<i class="el-icon-notebook-1"></i>
<span>用例列表</span>
</template>
</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
<!-- 主体内容显示区域 -->
<el-main style='padding: 0 5px;'>
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</template>
<script>
/*
退出登录的实现
1、点击退出登录按钮，触发点击事件
2、在处理函数中，删除sessionStorage中的token,并将路由重定向到login页面
*/
export default {
data() {
return {
rou: true,
activeMenu:'/dprojects',
}
},
methods: {
// 退出登录的方法
loginout() {
window.sessionStorage.removeItem('token')
this.$router.push('/login')
}
},
}
</script>
<style scoped>
/* --------页面顶部的样式-------- */
.el-header {
background: #555500;
margin-bottom: 5px;
}
.title {
width: 90%;
color: #fff;
font: normal 28px/60px "microsoft yahei";
text-align: center;
float: left;
}
.logonout {
width: 60px;
color: #fff;
font: normal 14px/60px "microsoft yahei";
float: right;
text-align: center;
}
.logonout:hover {
background: #000;
}
/* ----------侧边菜单的样式---------- */
.el-menu {
height: 900px;
}
</style>
二、项目管理页面
2.1 项目管理页面展示
1、列表页数据展示
2、底部分页功能
3、每个项目的编辑、删除功能
4、新建项目功能
5、顶部面包屑
2.1.1 整体代码：
Projects.vue
<template>
<div class="project_list">
<el-card class="box-card">
<!-- 顶部的面包屑 -->
<div slot="header" class="clearfix">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>项目管理</el-breadcrumb-item>
<el-breadcrumb-item>项目列表</el-breadcrumb-item>
</el-breadcrumb>
</div>
<el-card class="box-card">
<!-- 添加项目的按钮 -->
<el-button type="primary" icon='el-icon-plus' @click='dialogCreate="true"'>创建项目</el-button>
<!-- 项目列表页 -->
<el-table :data="projectList" style="width: 100%;margin-bottom: 10px;">
<el-table-column prop="id" label="ID" width="80" sortable>
</el-table-column>
<el-table-column prop="name" label="项目名" width="200">
</el-table-column>
<el-table-column prop="desc" label="描述信息" width="280">
</el-table-column>
<el-table-column prop="leader" label="负责人" width="100" sortable>
</el-table-column>
<el-table-column prop="tester" label="测试人员" width="100">
</el-table-column>
<el-table-column prop="interfaces" label="接口数量" width="120" sortable>
</el-table-column>
<el-table-column prop="testcases" label="用例数量" width="80">
</el-table-column>
<el-table-column prop="testsuits" label="套件数量" width="80">
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" @click="proEdit(scope.row)">编辑</el-button>
<el-button size="mini" type="danger" @click="proDelete(scope.row.id)">删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 项目翻页管理 -->
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="page" :page-sizes="[5, 10, 20, 30]" :page-size="size"
layout="total, sizes, prev, pager, next, jumper" :total="count">
</el-pagination>
</el-card>
</el-card>
<!-- 编辑项目的弹框 -->
<el-dialog title="编辑项目" :visible.sync="dialogEdit">
<el-form :model="editProject" :rules="caseRules" ref='updateRef' label-width="80px">
<el-form-item label="项目名" prop="name">
<el-input v-model="editProject.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="负责人" prop="leader">
<el-input v-model="editProject.leader" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="测试人员" prop="tester">
<el-input v-model="editProject.tester" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="开发人员" prop="programmer">
<el-input v-model="editProject.programmer" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="发布应用" prop="publish_app">
<el-input v-model="editProject.publish_app" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="描述信息">
<el-input type="textarea" v-model="editProject.desc" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogEdit = false">取 消</el-button>
<el-button type="primary" @click="updateProject">确 定</el-button>
</div>
</el-dialog>
<!-- 创建项目的弹框 -->
<el-dialog :visible.sync="dialogCreate" :rules="caseRules" ref='createRef'>
<template slot='title'>
<div style="text-align: center;width: 100%;font-size: 24px;">创建项目</div>
</template>
<el-form :model="newProject" label-width="80px" size='mini' :rules="caseRules" ref='createRef'>
<el-form-item label="项目名称" prop="name">
<el-input v-model="newProject.name"></el-input>
</el-form-item>
<el-form-item label="测试者" prop="tester">
<el-input v-model="newProject.tester" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="负责人" prop="leader">
<el-input v-model="newProject.leader" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="开发人员" prop="programmer">
<el-input v-model="newProject.programmer" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="发布应用" prop="publish_app">
<el-input v-model="newProject.publish_app" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="项目描述">
<el-input type="textarea" :rows="5" v-model="newProject.desc"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogCreate = false">取 消</el-button>
<el-button type="primary" @click="createProject">提 交</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
projectList: [],
// 当前选择的页码
page: 1,
// 数据总数
count: 0,
//每页的数据量
size: 10,
//编辑窗口显示
dialogEdit: false,
editProject: {},
//创建项目
dialogCreate: false,
newProject: {
name: '',
leader: '',
tester: '',
programmer: '',
publish_app: '',
desc: ''
},
// 校验规则
caseRules: {
name: [{
required: true,
message: '项目名不能为空',
trigger: 'blur'
}],
leader: [{
required: true,
message: '负责人不能为空',
trigger: 'blur'
}, ],
tester: [{
required: true,
message: '测试人员不能为空',
trigger: 'blur'
}, ],
programmer: [{
required: true,
message: '开发人员不能为空',
trigger: 'blur'
}, ],
publish_app: [{
required: true,
message: '发布应用不能为空',
trigger: 'blur'
}, ]
}
}
},
methods: {
// 创建项目的方法
createProject() {
// 发送请求之前对表单进行预验证
this.$refs.createRef.validate(async (valid) => {
if (!valid) return
// 验证通过，发送请求
const response = await this.$request.post('/projects/', this.newProject)
if (response.status === 201) {
this.$message({
type: 'success',
message: '项目创建成功!',
duration: 1000
});
// 更新页面的数据
this.getProject()
// 关闭弹框
this.dialogCreate = false
} else {
console.log(response)
this.$message.error('服务端异常!')
}
})
},
// 编辑项目
proEdit(value) {
console.log(value)
// 把接收到的项目数据，
this.editProject = {
...value
}
// 显示编辑框
this.dialogEdit = true
},
// 请求修改项目的接口
async updateProject() {
// 发送请求之前对表单进行预验证
this.$refs.updateRef.validate(async (valid) => {
if (!valid) return
const response = await this.$request.put('/projects/' + this.editProject.id + '/', this
.editProject)
if (response.status === 200) {
this.$message({
message: '修改项目成功',
type: 'success',
duration: 1000
})
this.getProject()
this.dialogEdit = false
} else {
this.$message({
message: '修改失败',
type: 'error',
duration: 1000
})
}
})
},
// 删除项目
async proDelete(id) {
console.log('当前删除的数据id为：', id)
// 通过接口删除后端数据
const response = await this.$request.delete('/projects/' + id + '/')
// 后端接口是安装resetful规范设计的，delete方法成功时，返回的状态码为204
if (response.status === 204) {
// 删除成功
this.$message({
message: '删除成功',
type: 'success',
duration: 1000
});
// 重写加载数据
this.getProject()
} else {
this.$message({
message: '删除失败',
type: 'error',
duration: 1000
});
}
},
// 获取项目
async getProject() {
// 请求项目列表的接口，获取所有的项目
const response = await this.$request.get('/projects/', {
params: {
page: this.page,
size: this.size
}
})
if (response.status !== 200) return this.$message.error('服务器异常')
// 保存接口返回的项目列表
this.projectList = response.data.results
// 保存数据总数
this.count = response.data.count
console.log(response)
},
// 处理每页数量大小变化的方法
handleSizeChange(size) {
this.size = size
this.page = 1
this.getProject()
},
// 处理页码变化的方法
handleCurrentChange(page) {
this.page = page
this.getProject()
}
},
// vue实例数据挂载之后，出触发这个钩子函数
mounted() {
this.getProject()
}
}
</script>
<style>
</style>
依赖的接口返回数据。
http://127.0.0.1:8001/projects/
{"count": 1450, "current_page_num": 1, "next": "http://127.0.0.1:8001/projects/?page=2", "previous": "null", "results": [{"configures": 4, "create_time": "2023-11-11 12:12:12", "desc": "\u81ea\u52a8\u5316\u5e73\u53f0\u63cf\u8ff0", "id": 1, "interfaces": 90, "leader": "fuckworld", "name": "miaojiang\u81ea\u52a8\u5316\u5e73\u53f0", "programmer": "\u6d4b\u8bd5", "publish_app": "\u81ea\u52a8\u5316\u5e73\u53f0\u5e94\u7528", "testcases": 24, "tester": "miaojaing", "testsuits": 5}, {"configures": 4, "create_time": "2023-11-11 12:12:12", "desc": "\u81ea\u52a8\u5316\u5e73\u53f0\u63cf\u8ff0", "id": 2, "interfaces": 90, "leader": "fuckworld", "name": "miaojiang\u81ea\u52a8\u5316\u5e73\u53f0", "programmer": "\u6d4b\u8bd5", "publish_app": "\u81ea\u52a8\u5316\u5e73\u53f0\u5e94\u7528", "testcases": 24, "tester": "miaojaing", "testsuits": 5}, {"configures": 4, "create_time": "2023-11-11 12:12:12", "desc": "\u81ea\u52a8\u5316\u5e73\u53f0\u63cf\u8ff0", "id": 3, "interfaces": 90, "leader": "fuckworld", "name": "miaojiang\u81ea\u52a8\u5316\u5e73\u53f0", "programmer": "\u6d4b\u8bd5", "publish_app": "\u81ea\u52a8\u5316\u5e73\u53f0\u5e94\u7528", "testcases": 24, "tester": "miaojaing", "testsuits": 5}, {"configures": 4, "create_time": "2023-11-11 12:12:12", "desc": "\u81ea\u52a8\u5316\u5e73\u53f0\u63cf\u8ff0", "id": 4, "interfaces": 90, "leader": "fuckworld", "name": "miaojiang\u81ea\u52a8\u5316\u5e73\u53f0", "programmer": "\u6d4b\u8bd5", "publish_app": "\u81ea\u52a8\u5316\u5e73\u53f0\u5e94\u7528", "testcases": 24, "tester": "miaojaing", "testsuits": 5}, {"configures": 4, "create_time": "2023-11-11 12:12:12", "desc": "\u81ea\u52a8\u5316\u5e73\u53f0\u63cf\u8ff0", "id": 5, "interfaces": 90, "leader": "fuckworld", "name": "miaojiang\u81ea\u52a8\u5316\u5e73\u53f0", "programmer": "\u6d4b\u8bd5", "publish_app": "\u81ea\u52a8\u5316\u5e73\u53f0\u5e94\u7528", "testcases": 24, "tester": "miaojaing", "testsuits": 5}, {"configures": 4, "create_time": "2023-11-11 12:12:12", "desc": "\u81ea\u52a8\u5316\u5e73\u53f0\u63cf\u8ff0", "id": 6, "interfaces": 90, "leader": "fuckworld", "name": "miaojiang\u81ea\u52a8\u5316\u5e73\u53f0", "programmer": "\u6d4b\u8bd5", "publish_app": "\u81ea\u52a8\u5316\u5e73\u53f0\u5e94\u7528", "testcases": 24, "tester": "miaojaing", "testsuits": 5}, {"configures": 4, "create_time": "2023-11-11 12:12:12", "desc": "\u81ea\u52a8\u5316\u5e73\u53f0\u63cf\u8ff0", "id": 7, "interfaces": 90, "leader": "fuckworld", "name": "miaojiang\u81ea\u52a8\u5316\u5e73\u53f0", "programmer": "\u6d4b\u8bd5", "publish_app": "\u81ea\u52a8\u5316\u5e73\u53f0\u5e94\u7528", "testcases": 24, "tester": "miaojaing", "testsuits": 5}, {"configures": 4, "create_time": "2023-11-11 12:12:12", "desc": "\u81ea\u52a8\u5316\u5e73\u53f0\u63cf\u8ff0", "id": 8, "interfaces": 90, "leader": "fuckworld", "name": "miaojiang\u81ea\u52a8\u5316\u5e73\u53f0", "programmer": "\u6d4b\u8bd5", "publish_app": "\u81ea\u52a8\u5316\u5e73\u53f0\u5e94\u7528", "testcases": 24, "tester": "miaojaing", "testsuits": 5}, {"configures": 4, "create_time": "2023-11-11 12:12:12", "desc": "\u81ea\u52a8\u5316\u5e73\u53f0\u63cf\u8ff0", "id": 9, "interfaces": 90, "leader": "fuckworld", "name": "miaojiang\u81ea\u52a8\u5316\u5e73\u53f0", "programmer": "\u6d4b\u8bd5", "publish_app": "\u81ea\u52a8\u5316\u5e73\u53f0\u5e94\u7528", "testcases": 24, "tester": "miaojaing", "testsuits": 5}, {"configures": 4, "create_time": "2023-11-11 12:12:12", "desc": "\u81ea\u52a8\u5316\u5e73\u53f0\u63cf\u8ff0", "id": 10, "interfaces": 90, "leader": "fuckworld", "name": "miaojiang\u81ea\u52a8\u5316\u5e73\u53f0", "programmer": "\u6d4b\u8bd5", "publish_app": "\u81ea\u52a8\u5316\u5e73\u53f0\u5e94\u7528", "testcases": 24, "tester": "miaojaing", "testsuits": 5}], "total_pages": 141}2.2 页面布局
2.2.1 实现顶部面包屑
样式来源，element ui :
Element - The world's most popular Vue UI framework
<!-- 顶部的面包屑 -->
<div slot="header" class="clearfix">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>项目管理</el-breadcrumb-item>
<el-breadcrumb-item>项目列表</el-breadcrumb-item>
</el-breadcrumb>
</div>2.2.2 实现项目列表的展示
1、样式来源，element ui :
Element - The world's most popular Vue UI framework
2、项目列表的数据来源 :data="projectList" 方法
<!-- 项目列表页 -->
<el-table :data="projectList" style="width: 100%;margin-bottom: 10px;">项目列表的数据，来源于http请求后端的/projects接口。所以这里需要做一个get请求，然后展示返回值。
// 请求修改项目的接口
async updateProject(){
const response = await this.$request.put('/projects/' +this.editProject.id +'/',this.editProject)3、列表数据展示
:data="projectsList" 绑定的数据
prop="id",列数据展示绑定的对应字段
2.2.3 创建项目按钮
<!-- 添加项目的按钮 -->
<el-button type="primary" icon='el-icon-plus'>创建项目</el-button>2.2.4 封装请求项目列表
进入项目页面时，要请求/projects/来展示项目列表，
当翻页时，也需要去请求/projects/来展示翻页后的项目列表。
这个我们直接在methods中定义函数。（不需要勾子函数）
// 获取项目
async getProject() {
// 请求项目列表的接口，获取所有的项目
const response = await this.$request.get('/projects/', {
params: {
page: this.page,
size: this.size
}
})
if (response.status !== 200) return this.$message.error('服务器异常')
// 保存接口返回的项目列表
this.projectList = response.data.results
// 保存数据总数
this.count = response.data.count
console.log(response)
},2.2.5 、底部翻页管理
来源：Element - The world's most popular Vue UI framework
Pagination 分页
<!-- 项目翻页管理 -->
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="page" :page-sizes="[5, 10, 20, 30]" :page-size="size"
layout="total, sizes, prev, pager, next, jumper" :total="count">
</el-pagination>事件：
:current-page="page" 当前页码
:page-size="size"
:total="count"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:page-sizes="[20, 40, 60, 80]"，设置每一页的数据条数。
举例：
当pageSize(用户选择一页展示40条数据时）改变时，会触发size-changge事件，并将每页条数size作为参数传递给size-changge调用的方法。
页面元素：
<!-- 项目翻页管理 -->
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"方法：
// 处理每页数量大小变化的方法
handleSizeChange(size) {
// 先给size赋值
this.size = size
// 更改页码的时候，将当前页码置为1
this.page = 1
this.getProject()
},
// 处理页码变化的方法
handleCurrentChange(page) {
this.page = page
this.getProject()
}
核心实现逻辑：
事件触发后，更新页面的设置。
2.2.6 列表数据排序
根据哪个字段排序，加sortable。
使用id进行排序
<el-table-column prop="id" label="ID" width="80" sortable>在前端id项，生成一个排序按钮。
2.2.7 数据的编辑
元素
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" @click="proEdit(scope.row)">编辑</el-button>
<el-button size="mini" type="danger" @click="proDelete(scope.row.id)">删除
</el-button>
</template>
</el-table-column>编辑与删除，都是通过项目的id实现的。
删除项目，我们需要将项目的id传给删除方法。scope.row.id 表示当前这一行的id。
编辑项目，scope.row 表示当前表单，这一行所有的数据。先进行数据回显，再调用后端编辑接口。
在点击编辑按钮时，会弹出一个弹窗。
编辑项目的弹窗。
:visible.sync="dialogEdit" 控制弹窗是否显示，默认为false 布尔值。
<!-- 编辑项目的弹框 -->
<el-dialog title="编辑项目" :visible.sync="dialogEdit">
<el-form :model="editProject">
<el-form-item label="项目名">
<el-input v-model="editProject.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="负责人">
<el-input v-model="editProject.leader" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="测试人员">
<el-input v-model="editProject.tester" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="开发人员">
<el-input v-model="editProject.programmer" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="发布应用">
<el-input v-model="editProject.publish_app" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="描述信息">
<el-input v-model="editProject.desc" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogEdit = false">取 消</el-button>
<el-button type="primary" @click="updateProject">确 定</el-button>
</div>
</el-dialog>
在methods中定义编辑方法
编辑项目
methods: {
// 编辑项目
proEdit(value) {
console.log(value)
// 把接收到的项目数据，
this.editProject = {...value}
// 显示编辑框
this.dialogEdit = true
},
// 请求修改项目的接口
async updateProject(){
const response = await this.$request.put('/projects/' +this.editProject.id +'/',this.editProject)
if (response.status===200){
this.$message({
message: '修改项目成功',
type: 'success',
duration: 1000
});
this.getProject()
this.dialogEdit = false
}else{
this.$message({
message: '修改失败',
type: 'error',
duration: 1000
});
}
},2.2.8 编辑弹窗的必填项校验
对表单进行校验。发送请求之前对表单进行预验证
1、在data里定义校验规则
// 校验规则
caseRules: {
name: [{
required: true,
message: '项目名不能为空',
trigger: 'blur'
}],
leader: [{
required: true,
message: '负责人不能为空',
trigger: 'blur'
}, ],
tester: [{
required: true,
message: '测试人员不能为空',
trigger: 'blur'
}, ],
programmer: [{
required: true,
message: '开发人员不能为空',
trigger: 'blur'
}, ],
publish_app: [{
required: true,
message: '发布应用不能为空',
trigger: 'blur'
}, ]
}2、在表单上，绑定校验规则
2.2.9 数据的删除
元素
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" @click="proEdit(scope.row)">编辑</el-button>
<el-button size="mini" type="danger" @click="proDelete(scope.row.id)">删除
</el-button>
</template>
</el-table-column>编辑与删除，都是通过项目的id实现的。
删除项目，我们需要将项目的id传给删除方法。scope.row.id 表示当前这一行的id。
删除项目
// 删除项目
async proDelete(id) {
console.log('当前删除的数据id为：', id)
// 通过接口删除后端数据
const response = await this.$request.delete('/projects/' + id +'/')
// 后端接口是安装resetful规范设计的，delete方法成功时，返回的状态码为204
if (response.status === 204) {
// 删除成功
this.$message({
message: '删除成功',
type: 'success',
duration: 1000
});
// 重写加载数据
this.getProject()
} else {
this.$message({
message: '删除失败',
type: 'error',
duration: 1000
});
}
},2.2.10 创建项目
1、弹窗样式
绑定校验规则 :rules="caseRules"
创建的窗口，默认显示隐藏。:visible.sync="dialogCreate"
ref='createRef'
<!-- 创建项目的弹框 -->
<el-dialog :visible.sync="dialogCreate" :rules="caseRules" ref='createRef'>2、发送请求之前对表单进行预验证
// 创建项目的方法
createProject() {
// 发送请求之前对表单进行预验证
this.$refs.createRef.validate(async (valid) => {
if (!valid) return
// 验证通过，发送请求
const response = await this.$request.post('/projects/', this.newProject)
if (response.status === 201) {
this.$message({
type: 'success',
message: '项目创建成功!',
duration: 1000
});
// 更新页面的数据
this.getProject()
// 关闭弹框
this.dialogCreate = false
} else {
console.log(response)
this.$message.error('服务端异常!')
}
})3、创建项目，定义初始化数据
在data里，定义创建项目弹窗中，初始化数据
newProject: {
name: '',
leader: '',
tester: '',
programmer: '',
publish_app: '',
desc: ''
},下一章：