测试平台开发-前端开发

  • 霍格沃兹测试开发

About Me

  • AD

目录

  • Vue背景介绍
  • Vue环境准备
  • Vue实战练习

Vue的背景介绍

前端领域三大框架

  • Angular：google
  • React： facebook
  • Vue：尤雨溪

Vue环境准备

Vue相关环境

  • vue-cli
    • npm install -g @vue/cli
    • -g 代表全局安装，如果不加 -g ，会在当前目录安装
  • vue-ui
    • 命令开启前端项目管理页面
    • 选择目录和项目名称，使用 npm 包管理工具
  • vue脚手架工具自动生成
    • vue create project_name

Vue项目结构

  • node_module：依赖库
  • public：公共数据
  • src：项目目录
    • assets：资源（图片）
    • components：存放组件的地方，每一块积木
    • plugins：插件
    • router：配置路由
    • main.js，App.vue：项目入口， 相当于 Python 的 main
  • package-lock.json：临时生成
  • package.json：包依赖文件，存放的是依赖的包版本，相当于 Python 的requirements.txt

Vue组件基本结构

<template>
</template>
<script>
export default {};
</script>
<style scoped>
</style>
  • template：模板，基本 HTML ，功能有限。 templage 下只能有一个标签，建议使用 div
  • script：脚本，功能强大
  • style：定义样式，HTML 的大衣

VSCODE相关插件

  • JavaScript (ES6) code snippets：包含 VSCode 的 ES6 语法中的 JavaScript 代码段。
  • Vetur：VSCode 支持 VUE 的工具，有语法高亮、格式化、错误检查、自动完成等功能。
  • （推荐）Auto Close Tag：自动添加 HTML/XML 结束标签。
  • （推荐）Auto Rename Tag：自动重命名对应的 HTML/XML 标签。
  • Highlight Matching Tag：突出显示匹配的开始和结束标签。

Vue重要知识点

https://cn.vuejs.org/v2/api/

VUE实战练习

Vue核心组件

@startmindmap
+ VUE
++ UI组件
*** Vuetify
*** elementUI
++ 路由管理器
*** vue-router
++ http库
*** axios

@endmindmap

Vue实战练习

从零到一实现测试用例新增和查询

  1. 创建vue项目
  2. 编写测试用例页面
  3. 和后端接口联调
  4. 使用组件提高代码复用性

思路

@startmindmap
+ 实战练习
++ 创建项目
*** vue create xxxproject
++ 编写测试用例界面
*** vue-router设置页面跳转
*** vuetify拼接测试用例页面
++ 联调后端接口
*** 引入axios创建基地址
*** 添加api管理接口
++ 组件化列表页
@endmindmap

安装常用插件

axios的使用

创建基类

import axios from 'axios'
var instance = axios.create({
    headers: {
        'Content-Type':'application/json'
    },
    baseURL:'http://stuq.ceshiren.com:8089/'
})

export default instance

axios的使用

导入

import api from './api/api'

Vue.config.productionTip = false
Vue.prototype.$api = api

new Vue({
  router,
  store,
  vuetify,
  render: h => h(App)
}).$mount('#app')

axios的使用

解决跨域问题

from flask_cors import CORS

# 实例化一个flask服务
app = Flask(__name__)
# 解决跨域
CORS(app, supports_credentials=True)