测试开发进阶(十六)

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

后续部分

到底什么是测试开发

一定不仅是测试

非常敏锐的开发视角

极其强大的开发能力

一定不是开发

无需严谨的校验

无需完美的用户体验

测试开发平台是产品吗

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

效率

两周内开发出一个平台

至少能实现基本自动化测试
无需花里胡哨的功能
无需严谨的校验
能用轮子的尽量用轮子
能少写的一段代码就少写一段

测试开发的价值，理念

看得懂大神写的代码，也能从中获取启发
能改大神的代码，去除糟粕，取其精华

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

编程思维重于一切
轮子
快速开发的理念「敏捷开发」

Vue框架

前端三大主流框架之一

Angular.js

React.js

Vue.js

简单小巧

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

入门容易

自动进行响应式更新

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

高级特性

解耦视图和数据

可复用组建

前端路由

状态管理

虚拟DOM

MVVM模式

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

M

模型

从后端获取的数据

V

视图

界面展示

VM

视图模型

核心控制

Vue-demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>「测试游记」</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">
        {{msg}}
    </div>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                msg:'Hello Python'
            }
        })
    </script>
</body>
</html>

<script>
    // Vue实例创建,会控制id为app元素中的所有内容
    // Vue的实例 MVVM中的VM
    let vm = new Vue({
        el:'#app', // 控制的区域
        // data代表数据 -> MVVM中的M
        data:{
            msg:'Hello Python'
        }
    })
</script>

<!--MVVM模式中的V-->
<div id="app">
    {{msg}}
</div>

组件化

Component Tree

模块化

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

复用
高效
解耦

前端工程化，组件化

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

查看版本

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

查看版本

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

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

安装vue-cli脚手架

1
2
3

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

安装vue-cli脚手架

查看安装结果

创建项目

1 2	$ vue create 项目名 # 选择default

1	$ 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:

<!--template用于展示给用户，相当于MVVM中的V-->
<template>
    <div id="app">
        <img alt="Vue logo" src="./assets/logo.png">
        <!--在父组件中给子组件传值-->
        <HelloWorld msg="Welcome to Your Vue.js App"/>
    </div>
</template>

<script>
    import HelloWorld from './components/HelloWorld.vue'

    export default {
        // 定义组件名称
        name: 'app',
        components: { //声明子组件
            HelloWorld
        }
    }
</script>

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

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

<!--template用于展示给用户，相当于MVVM中的V-->
<template>
    <div id="app">
        <img alt="Vue logo" src="./assets/logo.png">
        <!--在父组件中给子组件传值-->
        <HelloWorld msg="「测试游记」"/>
    </div>
</template>

修改HelloWorld.vue中的内容

<template>
    <div class="hello">
        <h1>{{ msg }}</h1>
    </div>
</template>

查看页面

页面展示

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

<script>
    export default {
        name: 'HelloWorld',
        props: { //从父组件获取msg
            msg: String
        }
    }
</script>

创建一个组件

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

<template>

</template>

<script>
    export default {
        name: "greeting"
    }
</script>

<style scoped>

</style>

填充

<template>
    <div class="msg">
        插值表达式：
        <p>{{message}}</p>
    </div>
</template>

<script>
    export default {
        name: "greeting",
        // {} -> 对象
        data() {
            return {
                message: 'Hello Python'
            }
        }
    }
</script>

<style scoped>

</style>

在App.vue里面声明

<script>
    import HelloWorld from './components/HelloWorld.vue'
    import greeting from './components/greeting.vue'

    export default {
        // 定义组件名称
        name: 'app',
        components: { //声明子组件
            HelloWorld,
            greeting
        }
    }
</script>

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

修改颜色

<style scoped>
    .msg p {
        color: red;
    }
</style>

修改颜色