测试开发进阶(十六)

来呀～

欢迎关注我呀～「测试游记」「zx94_11」

后续部分

到底什么是测试开发

• 一定不仅是测试

1. 非常敏锐的开发视角

2. 极其强大的开发能力

• 一定不是开发

1. 无需严谨的校验

2. 无需完美的用户体验

测试开发平台是产品吗

对于一个不是产品的东西，我们测开（或者领导）对它的要求是什么？

• 效率

两周内开发出一个平台

• 至少能实现基本自动化测试

• 无需花里胡哨的功能

• 无需严谨的校验

• 能用轮子的尽量用轮子

• 能少写的一段代码就少写一段

测试开发的价值，理念

• 看得懂大神写的代码，也能从中获取启发

• 能改大神的代码，去除糟粕，取其精华

测试开发课程到底学什么？

• 编程思维重于一切

• 轮子

• 快速开发的理念「敏捷开发」

Vue框架

• 前端三大主流框架之一

Angular.js

React.js

Vue.js

• 简单小巧

使用gzip压缩后，只有20kb左右

入门容易

• 自动进行响应式更新

只需关注前端业务逻辑，无需操作DOM

• 高级特性

解耦视图和数据

可复用组建

前端路由

状态管理

虚拟DOM

MVVM模式

• 类似于MVC(Java)和Django(MVT)

M

• 模型

• 从后端获取的数据

V

• 视图

• 界面展示

VM

• 视图模型

• 核心控制

Vue-demo

	
	
	
    	
    	
    	
	
	
    
	
        {{msg}}	
    
	
    	
	

	
	
    {{msg}}	

组件化

• 模块化

以不同的组件，来划分不同的功能模块

• 复用

• 高效

• 解耦

前端工程化，组件化

安装Node.js:http://nodejs.cn/download/

查看版本

$ node -v	
$ npm -v # 相当于python中的pip

使用淘宝npm镜像:http://npm.taobao.org/

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

安装vue-cli脚手架

# 注意Linux或Mac 可能需要使用sudo -i进入管理员模式	
$ cnpm install -g @vue/cli	
# -g:全局

创建项目

$ vue create 项目名	
# 选择default

$ npm run serve # 开启项目

node_modules：系统库

public/：单界面

src ：需要压缩的部分

/src/assets:资源（字体，图片等）

/src/components:组件

main.js：相当于一个main函数，最先加载

// 导入Vue.js	
import Vue from 'vue'	
// 导入App.vue根组件	
import App from './App.vue'	
Vue.config.productionTip = false	
new Vue({	
    render: h => h(App), //渲染App根组件	
}).$mount('#app')

App.vue:

/src/components/HelloWorld.vue被当作子组件传入

修改 App.vue， msg="「测试游记」"/>把msg传入

HelloWorld.vue

修改 HelloWorld.vue中的内容

查看页面

HelloWorld组件里面的msg内容改变的原因：

创建一个组件

在 /src/components新建一个 greeting.vue

填充

在 App.vue里面声明

import greeting from './components/greeting.vue'	
components: { //声明子组件	
            HelloWorld,	
            greeting	
        }

修改颜色