Vue实现自动化平台（三）--实现项目管理页面
上一章：
Vue实现自动化平台（二）_做测试的喵酱的博客-CSDN博客
一、路由配置
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整体代码
接 口 自 动 化 测 试 平 台
退出登录
项目管理
项目列表
接口管理
接口列表
用例管理
用例列表
二、项目管理页面
2.1 项目管理页面展示
1、列表页数据展示
2、底部分页功能
3、每个项目的编辑、删除功能
4、新建项目功能
5、顶部面包屑
2.1.1 整体代码：
Projects.vue
首页
项目管理
项目列表
创建项目
编辑
删除
创建项目
依赖的接口返回数据。
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
首页
项目管理
项目列表
2.2.2 实现项目列表的展示
1、样式来源，element ui :
Element - The world's most popular Vue UI framework
2、项目列表的数据来源 :data="projectList" 方法
项目列表的数据，来源于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 创建项目按钮
创建项目 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 分页
事件：
: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调用的方法。
页面元素：
方法：
// 处理每页数量大小变化的方法
handleSizeChange(size) {
// 先给size赋值
this.size = size
// 更改页码的时候，将当前页码置为1
this.page = 1
this.getProject()
},
// 处理页码变化的方法
handleCurrentChange(page) {
this.page = page
this.getProject()
}
核心实现逻辑：
事件触发后，更新页面的设置。
2.2.6 列表数据排序
根据哪个字段排序，加sortable。
使用id进行排序
在前端id项，生成一个排序按钮。
2.2.7 数据的编辑
元素
编辑
删除
编辑与删除，都是通过项目的id实现的。
删除项目，我们需要将项目的id传给删除方法。scope.row.id 表示当前这一行的id。
编辑项目，scope.row 表示当前表单，这一行所有的数据。先进行数据回显，再调用后端编辑接口。
在点击编辑按钮时，会弹出一个弹窗。
编辑项目的弹窗。
:visible.sync="dialogEdit" 控制弹窗是否显示，默认为false 布尔值。
在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 数据的删除
元素
编辑
删除
编辑与删除，都是通过项目的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'
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: ''
},下一章：