测试平台前端框架搭建Vue

Vue.js简介

1、Vue是一套用于构建用户界面的渐进式框架
2、Vue被设计成自底向上逐层应用
3、Vue的核心库只关注视图层，不仅易于上手还便于与第三方库或既有项目整合
4、学习Vue.js需要一定的HTML、CSS、JavaScript基础
Vue官网
cn.vuejs.org

MVVM模式
在这里插入图片描述
Vue组件化开发
1、组件化就是把页面拆分为多个组件，每个组件依赖的css、js、模版、图片等资源放在一起维护
2、因为组件是资源独立的，所以在系统内部可服用，组件与组件之间可以嵌套

VsCode常用插件
1、ES6
2、Vetur
3、Auto Close Tag
4、Auto Rename Tag
5、Highlight Matching Tag

常见组件库
1、ElementUI https://element.eleme.io/#/
2、BootstrapVue https://bootstrap-vue.org/
3、Vuetify https://vuetifyjs.com/zh-Hans/

安装Node环境

https://nodejs.org/zh-cn/download/
安装完成后输入 npm -v node -v检查环境
在这里插入图片描述
安装vue环境

vue-cli
npm install -g @vue/cli
-g 代表全局安装，如果不加-g，会在当前目录安装
vue-ui
命令开启前端项目管理页面
选择目录和项目名称，使用npm包管理工具
vue脚手架工具自动生成
vue create project_name
使用vue框架
1、第一种
npm init vue@latest
2、第二种
使用index.html文件挂载
vue常用插件
vue add vuetify
vue add router
npm install --save axios
启动服务
npm run serve

vue项目结构
在这里插入图片描述

<!DOCTYPE html>
<!-- html 对应的是页面展示的内容， 页面有啥 html 就有啥 -->
<html lang="en">
<!-- head 元数据， 类似于python的导包，一些页面的基础设定 -->

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <!-- 引用vue -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<!-- body 页面展示的内容-->
<!-- 语法：什么类型的标签<标签类型 属性=‘属性对应的值’> -->

<body>
  <!-- id= 标签的属性，可以存在多个标签数据  "app"标签属性对应的值 -->
  <div id="app">
    <div></div>
    <!-- 在首标签内部使用vue 语法 -->
    <!-- 判断1 和 1是否相等，如果相等，展示苹果 -->
    <!-- <div v-if="1==2">苹果</div> -->
    <!-- v-else后面不跟条件 -->
    <!-- <div v-else>香蕉</div> -->
    <!-- <div v-show="1==1">葡萄</div> -->
    <!-- v-if和v-show 区别在于当不满足条件时，元素的状态不一致 -->
    <!-- 1、v-if不满足条件时，元素不会被加载 -->
    <!-- 2、v-show不满足条件时，元素依然会被加载，只是不展示 -->
    <!-- 模版语法 将模版语法和data中的数据结合，字段名需要加{
    
    {}}-->
    <!-- {
    
    {message}} -->
    <!-- v-model的特性叫做双向绑定，绑定的是普通数据 -->
    <!-- <input v-model="message">
    <input type="text" v-model="message"> -->
    <!-- 数组里边有几个元素，就会循环几次 -->
    <div v-for="i in [1,2,3]">小蛋糕</div>
    <div v-for="i in [1,2,3]">{
   
   {i}}</div>
    <!-- 超链接标签 href属性代表它要跳转的链接地址 -->
    <a href="https://baidu.com/">搜一搜</a>
    <a v-bind:href="link">搜一搜2</a>
    <!-- v-bind简写 ：，绑定的是属性-->
    <a :href="link">搜一搜3</a>
  </div>
</body>

</html>
<!-- script 动态化的处理，比如一些js脚本，请求接口，数据处理等 -->
<script>
  // 实例化vue对象
  var vm = new Vue({
      
      
    //指定vue实例挂载的页面对象
    el: "#app", // #代表定位id
    data: {
      
      
      message: "展示",
      link: "https://baidu.com/",
    },
    methods: {
      
      
    },
  });
</script>
<!-- 页面美观，好看是由样式表决定的 -->
<style></style>

vue常用指令

v-if 、v-else 元素是否存在
v-show 元素是否展示
v-model 绑定数据
v-for 循环
v-on 绑定事件，简写@
v-bind 绑定属性，简写：

vue加载核心文件
main.js
App.vue
router/index.js
在这里插入图片描述

路由实例化，路由和页面相关，访问哪个路由，就展示哪个组件对应的页面
在这里插入图片描述
App挂载

vue组件化
https://vuetifyjs.com/en/getting-started/installation/

使用组件报错
error ‘v-slot’ directive doesn’t support any modifier vue/valid-v-slot
错误“v-slot”指令不支持任何修饰符

<template v-slot:[`item.actions`]="{ item }">

在这里插入图片描述
跨域处理
跨域请求本质是进行同源判断，英文简称CSRF，中文名称：跨站请求伪造。
如果两个URL的protocol、port（如果有指定的话）和host都相同时，则这两个URL视为同源，
浏览器会阻止非同源的请求。那什么是非同源呢？既域名不同，端口不同，都属于非同源的。比如我们用vue写了个前端页面，端口为8081，Django写了个后台，端口为8000，前端往后台提交数据，后台返回数据会被浏览器拦截，因为端口不同。这就是跨域。

DRF跨域问题解决
1、安装第三方库django-cors-headers

pip install django-cors-headers

2、django-cors-headers是一个app，所以需要我们在settings.py里的app里注册 corsheaders，尽量放在前面
在这里插入图片描述
3、添加中间件，需要放在 ‘django.middleware.common.CommonMiddleware’ 中间件之前 ‘corsheaders.middleware.CorsMiddleware’

4、添加白名单

 
CORS_ALLOW_CREDENTIALS = True  # 允许跨域时携带Cookie，默认为False
CORS_ORIGIN_ALLOW_ALL = True  # 所有ip都可以访问后端接口
# CORS_ORIGIN_WHITELIST = ["http://127.0.0.1:8080",["http://192.168.10.1:8080"]  # 指定能够访问后端接口的ip或域名列表
 
# 允许访问的请求方法
CORS_ALLOW_METHODS = (
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
    'VIEW',
)
 
# 允许的headers
CORS_ALLOW_HEADERS = (
    'accept',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
)