python自动化（七）自动化测试平台开发：7.前端开发之vue.js基础讲解

最新推荐文章于 2024-03-18 11:47:03 发布
最新推荐文章于 2024-03-18 11:47:03 发布
阅读量652 收藏 3
点赞数 1
分类专栏： python自动化 文章标签： vue 前端 软件测试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ouyicnm/article/details/117455053
版权

一.vue框架简介

vue官网：https://cn.vuejs.org/

1.什么是vue

在这里插入图片描述

2.vue的工作原理

在这里插入图片描述

在这里插入图片描述

vue的工作原理是基于MVVM模式，该模式可以分为三层：

  • View层：view层是指DOM层，可以理解为用户能看到的界面。程序与用户的交互都是通过view层来完成的。
  • Model层：数据层，可以简单理解为后台数据层。
  • VueModel层：位于View和Model层之间，前后端的数据交互都会通过vue层。
  • 双向绑定：当我们model层的数据改变时，会通过AJAX等手端传递给中间的VueModel层，VueModel层则会将数据传递给View层，从而改变界面的数据。同理Vuew层数据改变也能通过VueModel层来改变Model层的数据。而且这种改变是及时响应的，不需要刷新页面等操作。

3.组件化开发

在这里插入图片描述
组件化开发是现在前端开发的一种潮流。以前的前端开发都是按照页面把所有内容揉在一起，这种方式不利于我们的维护。

组件化开发将相同格式的内容设置为一个组件，将组件的各种资源放在一起维护。当某个页面需要这种内容时，直接使用该组件即可。

例如：
在这里插入图片描述

4.常用的组件库

现在有许多开源的组件库，在其中定义了许多常用的组件。可以供我们直接使用。
在这里插入图片描述

二.vue的安装

1.安装vue

要使用vue，需要先引入vue。常用的引入vue的方式：

（1）在文件中引入vue

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者：

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

（2）安装vue-cli（需要node环境）

第一步：安装node：https://nodejs.org/zh-cn/

当执行以下命令成功时，表示安装完成。
在这里插入图片描述
第二步：安装淘宝镜像（类似于阿里云的maven中央仓库镜像）

# 安装
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 验证
cnpm -v

第三步：安装webpack。WebPack可以看做是模块打包机：它可以自动分析项目的代码结构，将项目中的不能被被浏览器使用的语言转换为可以被浏览器识别的语言。

# 安装
npm install webpack -g
# 验证
webpack -v
# 注意：如果安装webpack报错，可以执行以下命令
npm config set strict-ssl false # 关闭npm的ssl验证

第四步：安装vue_cli

# 安装
npm install --global vue-cli
验证
vue -V

2.创建vue项目

如果使用第一种方式安装vue，不需要创建vue项目，直接在文件中使用vue即可。如果安装的是vue_cli，则需要创建vue项目。

第一步：初始化vue项目test_vue：

# webpack表示项目模板为webpack 
vue init webpack my_test_vue

说明创建过程中会有许多选择项：

  • Vue build ==> 打包方式，回车即可；
  • Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到 所以Y 回车；
  • Use ESLint to lint your code ==> 是否需要 js 语法检测 y 回车；
  • Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车；
  • Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 目前我们不需要 所以 n 回车；
    第二步：安装项目依赖
# 进入项目目录
cd my_test_vue
# 安装项目依赖
cnpm i

第三步：启动项目

npm run dev

在这里插入图片描述
会在本地启动一个服务，可以访问该服务。
在这里插入图片描述

3.vue项目结构介绍

在这里插入图片描述

  • build：构建脚本目录

    • build.js ==> 生产环境构建脚本；

    • check-versions.js ==> 检查npm，node.js版本脚本；

    • utils.js ==> 构建相关工具方法脚本；

    • vue-loader.conf.js ==> 配置了css加载器以及编译css之后自动添加前缀脚本；

    • webpack.base.conf.js ==> webpack基本配置；

    • webpack.dev.conf.js ==> webpack开发环境配置；

    • webpack.prod.conf.js ==> webpack生产环境配置；

  • config：项目配置

    • dev.env.js ==> 开发环境变量；

    • index.js ==> 项目配置文件；

    • prod.env.js ==> 生产环境变量；

  • node_modules：npm 加载的项目依赖模块

  • src：这里是我们要开发的代码目录，我们的开发工作基本上都是在该目录下：

    • assets：资源目录，放置一些图片或者公共js、公共css。这里的资源会被webpack构建；

    • components：组件目录，我们写的组件就放在这个目录里面；

    • router：前端路由，我们需要配置的路由路径写在index.js里面；

    • App.vue：根组件；

    • main.js：入口js文件；

  • static：静态资源目录，如图片、字体等。不会被webpack构建

  • index.html：首页入口文件，可以添加一些 meta 信息等

  • package.json：npm包配置文件，定义了项目的npm脚本，依赖包等信息

  • README.md：项目的说明文档，markdown 格式

  • 其他以.开头的文件：这些是一些配置文件，包括语法配置，git配置等

三.vue的常用指令

1.vue的基本使用

使用vue可以分为三步：

  • 创建挂载元素：即创建一个有id等属性的元素
  • 生成vue实例：使用new Vue({})方式来生成一个vue实例对象。
  • 使用vue实例来管理挂载元素。

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!--创建一个id为app的元素作为挂载点-->
		<div id="app">
			{{ message }}
		</div>
		
		<!--实例化一个vue对象-->
		<script type="text/javascript">
			var v = new Vue({
				el: "#app",
				data:{
					message: "hello vue"
				}
			})
		</script>
			
	</body>
</html>

运行效果如下：
在这里插入图片描述
讲解：

  • 使用var v = new Vue({})初始化一个vue实例对象
  • 使用el: "#app"将vue与挂载点关联起来
  • 修改vue实例中message的内容，挂载点下对应的内容也会修改。
    在这里插入图片描述

2.vue实现模板内容渲染

（1）方式一：直接渲染

格式：

1.vue实例中在data属性下，创建数据`key:value`
2.在挂载点中使用`{{ key }}`来获取值value

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!--创建一个id为app的元素作为挂载点-->
		<div id="app">
			{{ message }}
		</div>
		
		<!--实例化一个vue对象-->
		<script type="text/javascript">
			var v = new Vue({
				el: "#app",
				data:{
					message: "hello vue"
				}
			})
		</script>
			
	</body>
</html>

（2）方式二：使用v-text渲染

使用v-text方式与直接渲染一样。不过挂载点在使用它时，是定义在标签框内<>。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!--创建一个id为app的元素作为挂载点-->
		<div id="app" v-text="message">
			
		</div>
		
		<!--实例化一个vue对象-->
		<script type="text/javascript">
			var v = new Vue({
				el: "#app",
				data:{
					message: "hello vue"
				}
			})
		</script>
			
	</body>
</html>

运行效果如下：
在这里插入图片描述

（3）方式三：使用v-html渲染

v-html的方式与前两个不一样，它会将内容解析为html内容后，再渲染到模板中。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!--创建一个id为app的元素作为挂载点-->
		<div id="app" v-html="message">
			
		</div>
		
		<!--实例化一个vue对象-->
		<script type="text/javascript">
			var v = new Vue({
				el: "#app",
				data:{
					message: "<h1>hello vue</h1>"
				}
			})
		</script>
			
	</body>
</html>

运行效果如下：
在这里插入图片描述

3.v-on绑定事件

我们可以使用v-on来给元素绑定事件。
格式：

1.在vue的methods属性中，设置事件
2.在挂载点的元素标签中，使用`v-on:事件名="函数名称"`来关联事件到该标签
3.也可以简写成`@事件名="函数名称"`来关联事件到标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!--创建一个id为app的元素作为挂载点-->
		<div id="app" >
			<button type="button" v-on:click="x1">{{ message }}</button>
		</div>
		
		<!--实例化一个vue对象-->
		<script type="text/javascript">
			var v = new Vue({
				el: "#app",
				data:{
					message: 0
				},
				methods:{
					x1: function(){
						this.message++;
					}
				}
			})
		</script>
			
	</body>
</html>

运行效果如下：
在这里插入图片描述

4.v-bind绑定标签属性

格式：


语法格式1:
    使用 v-bind:属性名称="data中的key"
 
语法格式2:  
    语法1的简写,  使用 :属性名称="data中的key"

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<!--创建一个id为app的元素作为挂载点-->
		<div id="app" >
			<img v-bind:src="tupian" v-bind:style="sss">
		</div>
		
		<!--实例化一个vue对象-->
		<script type="text/javascript">
			var v = new Vue({
				el: "#app",
				data:{
					tupian: "img/maimi.jpg",
					sss: {
						width: "100px",
						height: "100px",
						}
				}
			})
		</script>
			
	</body>
</html>

效果如下：
在这里插入图片描述

5.v-model双向绑定 ( 仅用于input标签 )

  • 在前端中我们常常需要通过input标签来与用户进行数据交互。使用vue中可以使用v-model来实现与input标签的双向绑定。即可以通过改变vue中数据的值来改变input标签中的值，也可以通过改变input标签中的值来改变vue中数据的值。
  • 能双向绑定的input标签包括：text格式，select格式和textarea格式等

格式：

 v-model="data中的数据key"

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<!--创建一个id为app的元素作为挂载点-->
		<div id="app" >
			<input v-model="text1"/>
			<p>{{ text1 }}</p>
		</div>
		
		<!--实例化一个vue对象-->
		<script type="text/javascript">
			var v = new Vue({
				el: "#app",
				data:{
					text1: ""
				}
				
			})
		</script>
			
	</body>
</html>

在这里插入图片描述

6.vue的计算属性

表示一个属性, 是通过其他多个属性计算得到的 。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<!--创建一个id为app的元素作为挂载点-->
		<div id="app" >
			<input v-model="firstName" placeholder="请输入姓">
			<input v-model="lastName" placeholder="请输入名">
			<h3>{{fullName1}}</h3>
		</div>
		
		<!--实例化一个vue对象-->
		<script type="text/javascript">
			var v = new Vue({
				el: "#app",
				data:{
					firstName: "",
					lastName: ""
				},
				computed:{
					fullName1:function(){
						return this.firstName + this.lastName
					}
				}
				
			})
		</script>
			
	</body>
</html>

运行效果如下：
在这里插入图片描述
当然我们也可以使用methods来增加一个方法达到同样的效果。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<!--创建一个id为app的元素作为挂载点-->
		<div id="app" >
			<input v-model="firstName" placeholder="请输入姓">
			<input v-model="lastName" placeholder="请输入名">
			<h3>{{fullName1()}}</h3>
		</div>
		
		<!--实例化一个vue对象-->
		<script type="text/javascript">
			var v = new Vue({
				el: "#app",
				data:{
					firstName: "",
					lastName: ""
				},
				methods:{
					fullName1: function(){
						return this.firstName + this.lastName;
					}
				}
				
			})
		</script>
			
	</body>
</html>

运行后的效果如使用计算属性一样。
在这里插入图片描述
methods方法和计算属性computed都可以实现计算功能，但是它们也有些不同：

  • computed计算属性是一个属性，挂载点使用它不需要在后面加括号。例如：fullName1
  • methods是一个方法，挂载点使用它需要在后面加括号。例如：fullName1()
  • computed计算属性会将值存到缓存中，当它的值没变化时，则不会计算，而是使用缓存。而methods则不同，每调用一次方法都会计算一次。所以对于不太变化的内容使用计算属性可以大大减小系统的消耗。

7.vue中的侦听器

  • 用于侦听data中属性, 或 计算属性的变化.

  • 侦听器表示一个个等待执行的代码块, 当被侦听的属性发生改变时, 则代码块自动执行

格式：

在vue实例中 添加属性: 
        watch:{
            侦听的属性名1:function(){},
            侦听的属性名2:function(){},
            ...
        }

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<!--创建一个id为app的元素作为挂载点-->
		<div id="app" >
			<input v-model="firstName" placeholder="请输入姓">
			<input v-model="lastName" placeholder="请输入名">
			<h3>{{fullName1}}</h3>
			<h3>姓被改变了{{ count1 }}次，名被改变了{{ count2 }}次，姓名被改变了{{ count3 }}次</h3>
		</div>
		
		<!--实例化一个vue对象-->
		<script type="text/javascript">
			var v = new Vue({
				el: "#app",
				data:{
					firstName: "",
					lastName: "",
					count1: 0,
					count2: 0,
					count3: 0
				},
				computed:{
					fullName1:function(){
						return this.firstName + this.lastName
					}
				},
				watch:{
					firstName: function(){
						this.count1++
					},
					lastName: function(){
						this.count2++
					},
					fullName1: function(){
						this.count3++
					},
				}
				
			})
		</script>
			
	</body>
</html>

运行效果如下：
在这里插入图片描述

8.vue中是否显示标签

（1）v-if

用于判断是否加载元素 , 如果结果为true , 则加载此元素 , 如果结果为false 则不加载此元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<!--创建一个id为app的元素作为挂载点-->
		<div id="app" >
			<img src="img/maimi.jpg" v-if="flag" style="width: 100px;height: 100px;">
			<button @click="x1">显示</button> 
			<button @click="x2">隐藏</button>
		</div>
		
		<!--实例化一个vue对象-->
		<script type="text/javascript">
			var v = new Vue({
				el: "#app",
				data:{
					flag: true
				},
				methods:{
					x1: function(){
						this.flag = true
					},
					x2: function(){
						this.flag = false
					}
				}
				
			})
		</script>
			
	</body>
</html>

运行效果如下：
在这里插入图片描述

（2）v-show

作用: 用于判断是否显示元素 , 如果结果为true , 则显示此元素 , 如果结果为false 则不隐藏此元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<!--创建一个id为app的元素作为挂载点-->
		<div id="app" >
			<img src="img/maimi.jpg" v-show="flag" style="width: 100px;height: 100px;">
			<button @click="x1">显示</button> 
			<button @click="x2">隐藏</button>
		</div>
		
		<!--实例化一个vue对象-->
		<script type="text/javascript">
			var v = new Vue({
				el: "#app",
				data:{
					flag: true
				},
				methods:{
					x1: function(){
						this.flag = true
					},
					x2: function(){
						this.flag = false
					}
				}
				
			})
		</script>
			
	</body>
</html>

运行效果同v-if一样

（3）两者的区别

  • v-if : 控制的是元素是否加载 , 当为false时, 直接从网页中移除元素 !
  • v-show : 控制的是元素是否显示 , 无论true或false,元素都会加载, 只是false时,元素display:none

9.v-for循环展示数组数据

语法格式：


语法格式1:
        给元素添加属性:    v-for="item of 数组名"  , 注意数组名为 data中的数据key , 值为数组
 
语法格式2:
        给元素添加属性:    v-for="(item,index) of 数组名"  , 注意数组名为 data中的数据key , 值为数组
 
在上述的两种语法格式中, 
    item    :   表示每次循环时得到的数据 ,在标签中 可以通过插值表达式 显示 {{item}}
    index   :   表示每次循环时数据的索引 ,在标签中 可以通过插值表达式 显示 {{index}}

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<!--创建一个id为app的元素作为挂载点-->
		<div id="app" >
			<ul>
				<li v-for="item of name_list">{{ item }}</li>
			</ul>
		</div>
		
		<!--实例化一个vue对象-->
		<script type="text/javascript">
			var v = new Vue({
				el: "#app",
				data:{
					name_list: ['张三','王五','李四']
				},
				
				
			})
		</script>
			
	</body>
</html>

效果如下：
在这里插入图片描述

10.注意

挂载点中使用到的所有数据都必须在vue的data属性中注册，挂载点中使用到的所有方法都必须在vue的methods属性中注册。

new nm个对象
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
详解Puppeteer前端自动化测试实践
10-17
主要介绍了详解Puppeteer前端自动化测试实践，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
前端自动化测试探索
02-25
本文来自于cnblogs，文章主要探讨了前端自动化测试领域的可测试方向和一些开源的工具，并阐述了一些实践经验等。测试是完善的研发体系中不可或缺的一环。前端同样需要测试，你的css改动可能导致页面错位、js改动可能导致功能不正常。由于前端偏向GUI软件的特殊性，尽管测试领域工具层出不穷，在前端的自动化测试上面却实施并不广泛，很多人依旧以手工测试为主。本文试图探讨前端自动化测试领域的工具和实践。一个项目最终会经过快速迭代走向以维护为主的状态，在合理的时机以合理的方式引入自动化测试能有效减少人工维护成本。自动化测试的收益可以简单总结为：自动化的收益=迭代次数*全手动执行成本-首次自动化成本-维护次数
接口自动化测试平台源码+项目说明（基于HttpRunner+Python+Django+Vue）.zip
02-28
接口自动化测试平台源码+项目说明（基于HttpRunner+Python+Django+Vue）.zip 1、该资源内项目代码经过严格调试，下载即用确保可以运行！ 2、该资源适合计算机相关专业(如计科、人工智能、大数据、数学、电子信息等)正在做课程设计、期末大作业和毕设项目的学生、或者相关技术学习者作为学习资料参考使用。 3、该资源包括全部源码，需要具备一定基础才能看懂并调试代码。 接口自动化测试平台源码+项目说明（基于HttpRunner+Python+Django+Vue）.zip 1、该资源内项目代码经过严格调试，下载即用确保可以运行！ 2、该资源适合计算机相关专业(如计科、人工智能、大数据、数学、电子信息等)正在做课程设计、期末大作业和毕设项目的学生、或者相关技术学习者作为学习资料参考使用。 3、该资源包括全部源码，需要具备一定基础才能看懂并调试代码。 接口自动化测试平台源码+项目说明（基于HttpRunner+Python+Django+Vue）.zip 1、该资源内项目代码经过严格调试，下载即用确保可以运行！ 2、该资源适合计算机相关专业(如计科、人工智能、大数据、数学
python----Vue框架学习
m0_64005688的博客
03-18 191
的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue渐进式的理解:http://www.bslxx.com/a/vue/2017/1205/1490.html。Vue是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。Vue（读音 /vjuː/, 类似于 view）是一个构建。的 API 实现响应的数据绑定和组合的视图组件。官网：https://cn.vuejs.org/Vue的目标是通过尽可能。
接口自动化测试平台源码+项目说明（后端Django REST framework编写，前端vue+elementUI）.zip
02-28
1、该资源内项目代码经过严格调试，下载即用确保可以运行！ 2、该资源适合计算机相关专业(如计科、人工智能、大数据、数学、电子信息等)正在做课程设计、期末大作业和毕设项目的学生、或者相关技术学习者作为学习资料参考使用。 3、该资源包括全部源码，需要具备一定基础才能看懂并调试代码。 接口自动化测试平台源码+项目说明（后端采用Django REST framework编写接口，前端页面采用比较容易上手的vue+elementUI）.zip 接口自动化测试平台源码+项目说明（后端采用Django REST framework编写接口，前端页面采用比较容易上手的vue+elementUI）.zip 接口自动化测试平台源码+项目说明（后端采用Django REST framework编写接口，前端页面采用比较容易上手的vue+elementUI）.zip 接口自动化测试平台源码+项目说明（后端采用Django REST framework编写接口，前端页面采用比较容易上手的vue+elementUI）.zip
dtest自动化测试平台使用说明.pdf
07-13
包含接口自动化，web前端自动化，数据测试自动化
python+flask+vue自动化测试平台
linmumum的博客
11-05 2658
技术栈： 后端：python+flask+Jenkins 前端：vue+nodejs+h5 主要功能 新建用户 新建项目 新建全局参数 导入swagger 增删改测试用例 新建测试集 执行测试用例或测试集并生成报告 自动化平台的缺点此处不做探讨，本文为记录进阶之路，相对来说，我发现了该框架更多的优点： 1.简单易上手>>>> 这是目前大团队最需要的东西了,以我的经验来说，pytest，robotframework，都需要培训，而且是反复的培训，都不难，但关
Vue进阶（十六）：Vue 项目启动原理详解
热门推荐
IT全栈 华强工作室
12-19 1万+
一般项目创建好后会有三个文件：index.html、main.js、app.vue1、index.html ：所有vue文件都是单页面形式开发，所有vue组件都是通过index.html进行渲染加载。2、main.js：相当于java的入口函数，控制初次启动vue项目要加载的组件import Vue from 'vue' 引入vueimport App from './App' 引入App.v...
【Vue基础】VueCLI创建和启动项目&VueCLI生成的项目结构&Vue双向数据绑定的原理
一个普通人的博客
10-03 551
输入指令：cd test进入新建的项目目录 ( 因为我起的文件夹名字是test，换成你起的即可 )进入项目目录后，输入指令：运行项目，等待它自动跑完即可（其实就是看上面的最后两句提示，也不一定是run serve，它提示什么就写什么即可）
Python技术栈前后端分离项目（Vue）容器化部署解决方案
代码大萝卜的博客
07-29 1710
本文主要介绍了多种python技术栈的web项目部署方式
pythonvue自动化_Vue项目的自动化测试
weixin_39617669的博客
12-20 751
Vue项目的自动化测试说到自动化测试，许多开发团队都是听说过、尝试过，但最后都止步于尝试，不能将TDD(测试驱动开发)、BDD(行为驱动开发)的完整流程贯彻到项目中。思考其中的原因：终究还是成本抵不上收益。很多后端开发人员可能写过很多自动化的单元测试代码，但是对前端测试一头雾水。这是因为相对于后端开发人员的自动化单元测试，前端的自动化测试成本更高。自动化测试就是通过自动化脚本将一个又一个测试用例串...
基于VUE3 vue test utils的前端自动化测试项目
03-23
包含菜单、路由配置、两个测试业务模块、对应模块单测封装，仅提供增删改查
前端自动化测试框架源代码CYPRESS
08-10
前端自动化前端测试框架，CYPRSS. 后selenium时代测试框架，三驾马车（CYPRESS，testcafe，puppeteer）中一个图书的源代码
Python-基于Flask和Vuejs前后端分离的微型博客项目
08-12
支持多用户、Markdown文章（喜欢/收藏文章）、粉丝关注、用户评论（点赞）、动态通知、站内私信、黑名单、邮件支持、管理后台、权限管理、Celery任务队列、Elasticsearch全文搜索、Linux VPS部署、Docker容器部署等
基于python3+django+Vue自动化测试平台开发源码+项目说明.zip
02-28
基于python3+django+Vue自动化测试平台开发源码+项目说明.zip 1、该资源内项目代码经过严格调试，下载即用确保可以运行！ 2、该资源适合计算机相关专业(如计科、人工智能、大数据、数学、电子信息等)正在做课程设计...
《接口自动化测试平台,基于HttpRunner+Python+Django+Vue》+源代码+文档说明
最新发布
03-18
接口自动化测试平台,基于HttpRunner+Python+Django+Vue - 不懂运行，下载完可以私聊问，可远程教学 该资源内项目源码是个人的毕设，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96分，放心下载使用...
搭建Django+pyhon+vue自动化测试平台
MXB1220的博客
08-04 1322
切换到appfront目录。
＜三＞vue2.0项目启动原理
fraya1234的专栏
07-05 609
vue2.0项目启动后调用顺序：index.html-->main.js-->App.vue-->index.js-->components/组件 一般项目创建好后会有四个文件：index.html、main.js、app.vue、index.js 1、index.html：所有vue文件都是单页面形式开发，所有vue组件都是通过index.html进行渲染。 2、main.js：相当于java的入口函数，控制初次启动vue项目要加载的组件 import Vue fr
[Android] 关于 Model 层的几点思考（一）
weixin_33895695的博客
04-03 1026
前言 Android 开发过程中，Model 层通常是比较薄弱的。获取数据的代码经过各种优秀的封装，已经可以简化到短短几行代码，对于简单的项目而言，全都写在 Activity/Fragment 中就是最合适的了，如果使用了 MVP 或者 MVVM 模式，也基本会把数据的获取放在 Presenter/ViewModel 中。（后面用业务逻辑层表示 Controller/Presenter/ViewM...
vue.js前端开发基础与项目实战pdf
07-22
总之，《Vue.js前端开发基础与项目实战PDF》是一本适合前端开发初学者的实用教程，通过学习本书，读者能够系统地了解和掌握Vue.js的开发技术和应用，为自己的前端开发之路奠定坚实的基础。 ### 回答2： "vue.js...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值