Vue2

.Vue模板结构

import * as echarts from 'echarts'
import { getListlddm, getListRoadRange } from '@/api/util'
import { getCameraGunDatas } from '@/api/surplus'

export default {
  name: 'EventDetectionRatio',
  data() {
    return {
      tableKey: 1,
      query: {
        startTime: null
      }
    }
  },
  mounted() {
      // 模板组件中只有mounted和data是方法其他全部是属性
  },
  watch: {
  },
  methods: {
    reset() {
        es6 中 :function 可以直接忽略
    }
  },
  filters: {
      // 过滤器 必须有一个参数 有 管道传递
    capitalize: function (value) {
    	if (!value) return ''
    	value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
   }
  }
}

data数据定义

data中的数据属性不要定义为null vue模板会无法加载 如果是空定义对应的类型 {} [] ,''

注册全局组件

import Vue from 'vue'
import RuleTable from './RuleTable'
Vue.component(`${RuleTable.name}`, RuleTable)

Vue.component(组件的名字,组件模板)

在进行模块导入的时候如果是给定的文件夹则默认导入文件夹下index.js的文件

Props

组件间的通信(父---->子)

props: {
    title: { type: String, default: '弹出框' },
    visible: { type: Boolean, required: true },
    height: { type: String, default: '60%' },
    detail: { type: Object, default: () => { return {} } }
  }

// type
验证的type 类型可以是：
• String
• Number
• Boolean
• Object
• Array
• Function
type 也可以是一个自定义构造器，使用instanceof 检测。
当prop 验证失败时，在开发版本下会在控制台抛出一条警告。
// default 默认值
// required 是否必须传递

父组件传递的时候带上v-bind : 代表是表达式 不然只能接收到str

props 中声明的数据与组件data 函数return 的数据主要区别就是props 的来自父级，而data 中的是组件自己的数据，作用域是组件本身，这两种数据都可以在模板template 及计算属性computed和方法methods 中使用。

props中的属性是只读的要把数据转存到data中信息读写操作

自定义事件

组件间的通信(子---->父)

sendMsg(){
   //func: 是父组件指定的传数据绑定的函数，this.msg:子组件给父组件传递的数据
   this.$emit('func',this.msg)
}
注意：这里的func是父组件中绑定的函数名
父组件中在子组件的标签上添加自定义事件并添加回调函数
<child @func="getMsgFormSon"></child>
getMsgFormSon(data){
	this.msgFormSon = data
	console.log(this.msgFormSon)
}

自定义标签

components

当vue中引用组件时 要在components中声明自定义标签 才可以在当前vue组件

dom

如果要操作dom元素在标签添加ref属性

等待页面重新渲染后再执行此方法

image-20211227133150455

this.$nextTick(()=>{})

自定义组件的插槽

image-20211227133244244

在子组件中用标签来说明默认name为default 可以自定义

子组件定义后 在 父组件中可以进行添加内容 并且自定替换的插槽 v-slot: 简写 #

侦听器

watch属性

computed 和 watch 作用一样 执行时机比watch早一些

监听单个属性
firstName(val) {
    this.fullName = val + ' ' + this.lastName
}
单个对象
info:{
    handler(newval){
        log(newval)
    }
    // 深度监听 默认false
    deep:true
    // 加载页面就监听
    imediate:true
}
对象中的单个属性
'info.username'(newval){
    log(newval)
}

表单验证

from 表单添加属性
:rules="rules" ref="ruleForm" :model="ruleForm"

prop代表要校验的对象的属性
  <el-form-item label="活动名称" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
rules对象放在data数据中对象属性就是prop规则名

该属性是一个列表 列表中存放多个校验对象

字段说明

type     示type要使用的验证器。 默认string
        string：类型必须为string。type 默认是 string
        boolean：
        integer：
        number：类型必须为number
        float:
        array:
        enum:
        // 校验
        enum: [
        {type: 'enum', enum: ['aaa', 'bbb'], message: `不存在enum中`, trigger: 'change'}
        ]
        url:
        email：类型必须为 email
        method：类型必须为 function
        regexp：必须是 RegExp 创建新时不会产生异常的的实例或字符串 RegExp。
        object：类型必须为 object
        date：类型必须为 date
        hex：类型必须为 hex
        any：任何类型
required  是否必须bollean
message   提示消息str
min:      最小长度int
max: 	  最大长度int
len:      自定确切长度（如果该len属性与min和max范围属性结合使用，len则优先。）int
trigger   触发器 str
	trigger类型为blur的功能是文本框失去焦点才会触发
    trigger类型为change的功能是文本框在输入内容时触发
    trigger类型也可以同时使用blur和change，功能结合上面两个的功能

rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          date1: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ]
        }

触发校验

只有valid为true的使用才成功

    add() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.addupAroundPlace(this.form)
          this.dealDialog = false
        } else {
          console.log('error submit!!')
        }
      })
    },

axios封装

一

image-20211227133516884

挂载到每个vue实例中就可以直接使用

this.http.xxx

缺点:不利于api的复用没使用一个相同的接口 都要写一坨一样的数据处理方法

二

封装request.js模块

image-20211227133751691

import axios from 'axios'

const request1 = axios.create((
	∥指定请求的报路径
	baseURL:'https://www.escook.cn'
})
const request2 = axios.create((
	∥指定请求的报路径
	baseURL:'https://www.escook.cn'
})
export default request1
export default request2

实际例子

import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'

// Axios 中文说明
// https://www.kancloud.cn/yunye/axios/234845

const Authorization = process.env.VUE_APP_AUTH_TOKEN_KEY
const apiUrl = process.env.VUE_APP_BASE_API

// create an axios instance
const service = axios.create({
  // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
  // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
  // baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // baseURL: '/api_wangq/eventCheckServer', // url = base url + request url
  baseURL: apiUrl, // url = base url + request url
  // baseURL: 'http://10.44.111.223:8081/eventCheckServer', // url = base url + request url
  // `transformRequest` 允许在向服务器发送前，修改请求数据
  // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
  // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
  // transformRequest: [function(data) {
  //   // 对 data 进行任意转换处理
  //   return data
  // }],
  // `transformResponse` 在传递给 then/catch 前，允许修改响应数据
  // transformResponse: [function(data) {
  //   // 对 data 进行任意转换处理
  //   return data
  // }],
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 60000 // request timeout
})

// request interceptor
service.interceptors.request.use(
  config => {
    // do something before request is sent
    if (store.getters.token) {
      // let each request carry token
      // ['X-Token'] is a custom headers key
      // please modify it according to the actual situation
      // [{"key":"Authorization","value":"bearer 97b3dfec-4b39-4584-be37-f7d0b5e6fbd3","description":""}]
      config.headers[Authorization] = `bearer ${store.getters.token}`
    }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

// response interceptor
service.interceptors.response.use(
  /**
   * If you want to get http information such as headers or status
   * Please return  response => response
  */

  /**
   * Determine the request status by custom code
   * Here is just an example
   * You can also judge the status by HTTP Status Code
   */
  response => {
    const { data } = response
    // 以下为新定义data格式
    if (data.hasOwnProperty('status')) {
      if (data.status !== 'OK' && data.status !== true) {
        // 错误处理: data.code
        const message = data.message || 'Unknown Error'
        Message({ message: message, type: 'warning' })
        return Promise.reject(new Error(message))
      }
    }
    return data
  },
  error => {
    if (error.response) {
      const { status, data } = error.response
      // to re-login 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired; 401: Permission denied
      if (status === 401) {
        // You have been logged out, you can cancel to stay on this page, or log in again
        MessageBox.confirm(`${data.resp_msg}`, 'Confirm logout', { confirmButtonText: 'Re-Login', cancelButtonText: 'Cancel', type: 'warning' }).then(() => {
          store.dispatch('user/resetToken').then(() => {
            location.reload()
          })
        })
      } else if (status === 5000) {
        //
      } else {
        Message({ message: data.resp_msg || data.message || 'Network Error', type: 'error' })
      }
    } else {
      // console.log(error) // for debug
      Message({ message: error.message || 'Network Error', type: 'error', duration: 5 * 1000 })
    }
    return Promise.reject(error)
  }
)

export default service

api.js

import request from '@/utils/request'

export function getConstructionDetails(data) {
  return request({
    url: '/reportForms/surplusStatistics/getConstructionDetails',
    method: 'post',
    data: data
  })
}
export function getConstructionCard(params) {
  return request({
    url: '/reportForms/surplusStatistics/getConstructionCard',
    method: 'get',
    params
  })
}

路由

image-20211228152256613

image-20211228152327699挂载路由到vue

image-20211228152511617

image-20211228152525779

路由重定向 redirect

image-20211228152613186

子路由 在 路由页面中还有路由

image-20211228152702050

posted @ 2021-12-20 20:58  李广龙  阅读(115)  评论(0)    收藏  举报