测试开发进阶(十六)
- 2019 年 10 月 4 日
- 筆記
后续部分
到底什么是测试开发
- 一定不仅是测试
- 非常敏锐的开发视角
- 极其强大的开发能力
- 一定不是开发
- 无需严谨的校验
- 无需完美的用户体验
测试开发平台是产品吗
对于一个不是产品的东西，我们测开（或者领导）对它的要求是什么？
- 效率
两周内开发出一个平台
- 至少能实现基本自动化测试
- 无需花里胡哨的功能
- 无需严谨的校验
- 能用轮子的尽量用轮子
- 能少写的一段代码就少写一段
测试开发的价值，理念
- 看得懂大神写的代码，也能从中获取启发
- 能改大神的代码，去除糟粕，取其精华
测试开发课程到底学什么？
- 编程思维重于一切
- 轮子
- 快速开发的理念「敏捷开发」
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>
组件化
- 模块化
以不同的组件，来划分不同的功能模块
- 复用
- 高效
- 解耦
前端工程化，组件化
安装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:
<!--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， <HelloWorldmsg="「测试游记」"/>把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>
