1. Toy模板网首页
  2. > Toy博客

Vue实现自动化平台（四）--接口管理页面的实现

4月前 作者：做测试的喵酱 分类：Toy博客 阅读(13) 违法举报

这篇具有很好参考价值的文章主要介绍了Vue实现自动化平台（四）--接口管理页面的实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

上一章：

Vue实现自动化平台（三）_做测试的喵酱的博客-CSDN博客

github地址：https://github.com/18713341733/vuemiaotest 

这个目前只是用来练手的，项目还没成型。等以后我写完了，再更新一下项目链接。 

 

一、接口管理页面，页面样式

这个页面样式，与我们上一章 项目管理的页面样式展示基本一样。

所以样式是整体使用的上一章项目管理的代码，具体细节需要自己来修改一下。

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-row :gutter="20">
					<el-col :span="6">
						选择项目
						<el-select v-model="project_id" placeholder="请选择项目">
							<el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-col>
					<el-col :span="6">
						<!-- 添加接口的按钮 -->
						<el-button type="primary" icon='el-icon-plus' @click='dialogCreate="true"'>添加接口</el-button>
					</el-col>
				</el-row>





				<!-- 项目列表页 -->
				<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 {
				project_id: '',
				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>

三、选择项目按钮

Vue实现自动化平台（四）--接口管理页面的实现

 点击选择项目，展示所有的项目列表。

			<el-card class="box-card">
				<el-row :gutter="20">
					<el-col :span="6">
						选择项目
						<el-select v-model="project_id" placeholder="请选择项目">
							<el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-col>
					<el-col :span="6">
						<!-- 添加接口的按钮 -->
						<el-button type="primary" icon='el-icon-plus' @click='dialogCreate="true"'>添加接口</el-button>
					</el-col>
				</el-row>

样式都是用的element ui

下一章：

https://blog.csdn.net/qq_39208536/article/details/130078529?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22130078529%22%2C%22source%22%3A%22qq_39208536%22%7D文章来源地址https://www.toymoban.com/news/detail-415218.html

到了这里，关于Vue实现自动化平台（四）--接口管理页面的实现的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • Django实现接口自动化平台（十）自定义action names【持续更新中】

    Django实现接口自动化平台（十）自定义action names【持续更新中】

    相关文章： Django实现接口自动化平台（九）环境envs序列化器及视图【持续更新中】_做测试的喵酱的博客-CSDN博客 深入理解DRF中的Mixin类_做测试的喵酱的博客-CSDN博客  python中Mixin类的使用_做测试的喵酱的博客-CSDN博客  本章是项目的一个分解，查看本章内容时，要结合整体项

    2024年02月16日
    浏览(19)
  • Django+vue自动化测试平台（7）-- 使用Selenium+vue实现WebUI自动化及结果展示

    Django+vue自动化测试平台（7）-- 使用Selenium+vue实现WebUI自动化及结果展示

    Selenium是一个用于Web应用程序测试的工具。Selenium测试直接运行在浏览器中，就像真正的用户在操作一样。支持的浏览器包括IE（7, 8, 9, 10, 11），Mozilla Firefox，Safari，Google Chrome，Opera，Edge等。这个工具的主要功能包括：测试与浏览器的兼容性——测试应用程序看是否能够很好得

    2024年02月14日
    浏览(18)
  • Django实现接口自动化平台（十三）接口模块Interfaces序列化器及视图【持续更新中】

    Django实现接口自动化平台（十三）接口模块Interfaces序列化器及视图【持续更新中】

    相关文章： Django实现接口自动化平台（十二）自定义函数模块DebugTalks 序列化器及视图【持续更新中】_做测试的喵酱的博客-CSDN博客 本章是项目的一个分解，查看本章内容时，要结合整体项目代码来看： python django vue httprunner 实现接口自动化平台（最终版）_python+vue自动化测

    2024年02月17日
    浏览(19)
  • Django实现接口自动化平台（九）环境envs序列化器及视图【持续更新中】

    Django实现接口自动化平台（九）环境envs序列化器及视图【持续更新中】

    相关文章： Django实现接口自动化平台（八）测试报告reports序列化器及视图【持续更新中】_做测试的喵酱的博客-CSDN博客 本章是项目的一个分解，查看本章内容时，要结合整体项目代码来看： python django vue httprunner 实现接口自动化平台（最终版）_python+vue自动化测试平台_做测

    2024年02月16日
    浏览(19)

  • Django实现接口自动化平台（八）测试报告reports序列化器及视图【持续更新中】

    上一章： Django实现接口自动化平台（七）数据库设计_做测试的喵酱的博客-CSDN博客 下一章： 官方文档： Serializers - Django REST framework apps/reports/serializers.py 1.1.1 代码解释： 1、  exclude： You can set the  exclude  attribute to a list of fields to be excluded from the serializer. For example: 2、read_o

    2024年02月09日
    浏览(19)
  • Django实现接口自动化平台（十一）项目模块Projects序列化器及视图【持续更新中】

    Django实现接口自动化平台（十一）项目模块Projects序列化器及视图【持续更新中】

    相关文章： Django实现接口自动化平台（十）自定义action names【持续更新中】_做测试的喵酱的博客-CSDN博客 本章是项目的一个分解，查看本章内容时，要结合整体项目代码来看： python django vue httprunner 实现接口自动化平台（最终版）_python+vue自动化测试平台_做测试的喵酱的博

    2024年02月16日
    浏览(19)
  • Django实现接口自动化平台（十二）自定义函数模块DebugTalks 序列化器及视图【持续更新中】

    Django实现接口自动化平台（十二）自定义函数模块DebugTalks 序列化器及视图【持续更新中】

    上一章： Django实现接口自动化平台（十一）项目模块Projects序列化器及视图【持续更新中】_做测试的喵酱的博客-CSDN博客 本章是项目的一个分解，查看本章内容时，要结合整体项目代码来看： python django vue httprunner 实现接口自动化平台（最终版）_python+vue自动化测试平台_做测

    2024年02月16日
    浏览(17)
  • 接口自动化测试平台

    接口自动化测试平台

    下载了大神的EasyTest项目demo修改了下https://testerhome.com/topics/12648 原地址。也有看另一位大神的HttpRunnerManagerhttps://github.com/HttpRunner/HttpRunnerManager 原地址，由于水平有限，感觉有点复杂~~~ 【整整200集】超超超详细的Python接口自动化测试进阶教程，真实模拟企业项目实战！！  

    2024年02月15日
    浏览(11)
  • Django实现接口自动化平台（十四）测试用例模块Testcases序列化器及视图【持续更新中】

    Django实现接口自动化平台（十四）测试用例模块Testcases序列化器及视图【持续更新中】

    相关文章： Django实现接口自动化平台（十三）接口模块Interfaces序列化器及视图【持续更新中】_做测试的喵酱的博客-CSDN博客 本章是项目的一个分解，查看本章内容时，要结合整体项目代码来看： python django vue httprunner 实现接口自动化平台（最终版）_python+vue自动化测试平台

    2024年02月17日
    浏览(13)
  • 接口自动化测试系列-接入测试平台

    接口自动化测试系列-接入测试平台

    测试平台目录 测试平台自建源码 后台核心代码 部分前端代码样例

    2024年02月10日
    浏览(11)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包