Vue相关使用

一、使用全局请求过滤器为请求头添加令牌

如果token存在，将token添加到request请求头中，字段为Authorization

import store from './store'

//请求拦截:设置一个全局的拦截器,判断是否存在token,如果存在的话,给每个请求的请求头header都加上token
axios.interceptors.request.use(
  config => { 
    //
    let token = store.state.token
    if (token) {
      config.headers.Authorization = token;
    }
    return config;
    //
  },
  error => {
    return Promise.reject(error);
  });

2.全局响应过滤器

// 响应拦截:当redis中的token过期时,清除store中的信息,用户需要重新登录
axios.interceptors.response.use(
  function (response) {
    return response
  },
  function (error) {
    // 对响应错误的处理
    if (error.response && error.response.status === 401) {
      store.state.login = false
      store.state.account = {}
      store.state.token = ''
      store.commit('savelogin')
      elementUI.Message({
        message: '认证失效,请重新登录',
        type: 'warning'
      })
      router.push('/login')
      return Promise.resolve({
        status: 401
      })
    } else {
      elementUI.Message({
        message: '请求超时,请稍后再试',
        type: 'warning'
      })
    }
    return Promise.resolve(error)
  }
)

3.全局时间过滤器

// 在main.js中定义全局的时间过滤器，进行时间的格式化
Vue.filter('dateFormat', function (dateStr, pattern = "") {
  var dt = new Date(dateStr)
  var y = dt.getFullYear()
  var m = (dt.getMonth() + 1).toString().padStart(2, '0') //月份从0开始，需要加1
  var d = dt.getDate().toString().padStart(2, '0')

  if (pattern.toLowerCase() === 'yyyy-mm-dd')
    return `${y}-${m}-${d}`   //模板字符串
  else {
    var hh = dt.getHours().toString().padStart(2, '0')
    var mm = dt.getMinutes().toString().padStart(2, '0')
    var ss = dt.getSeconds().toString().padStart(2, '0')
    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
  }
})

4.全局请求超时时间

axios.defaults.timeout = 6000 //axios默认请求超时时间:如果6s内没有响应

5.设置全局请求基地址

开发模式下使用，生产模式注销

import axios from 'axios'
// axios.defaults.baseURL = 'http://127.0.0.1:18888/'
Vue.prototype.$http = axios

6.全局设置

localStorage或者SessionStorage

清除本地储存的指定字段window.localStorage.removeItem(" ");
vue跳转路由this.$router.push(" ");
刷新浏览器页面location.reload();

  logout() {
      window.localStorage.removeItem("WelcomeName"); 
      this.$router.push("/login");
      location.reload();
    },

7.输入框回车事件

        <el-input
            @keyup.enter.native=" "
          ></el-input>

8.Element UI全部导入需要手动引入样式文件
import 'element-ui/lib/theme-chalk/index.css'

import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(Element)

9.在一个组件中引入另一个组件

（1）新建三个组件，div中：

*UserForm.Vue
*Permission .Vue
*PermissionDialog .vue

    <!-- 添加编辑用户对话框 -->
    <UserForm ref="UserForm"></UserForm>
    <!-- 分配权限 -->
    <Permission ref="Permission"></Permission>
    <!-- 权限 -->
    <PermissionDialog ref="PermissionDialog"></PermissionDialog>

(2)script中引入

还需要在components中注册

<script>

import UserForm from "./UserForm";
import Permission from "./Permission";
import PermissionDialog from "./PermissionDialog";

export default {
  name: "UserList",
  components: {
    UserForm,
    Permission,
    PermissionDialog,
  },

（3）接下来就可以通过ref引用调用子组件中的属性和方法
属性： this.$refs["UserForm"].UserFormVisible = true; 方法： this.$refs["UserForm"].addInitData();

   // 创建新用户
    addUser() {
      this.$refs["UserForm"].UserFormVisible = true;
      this.$refs["UserForm"].addInitData();
    },
    //分配权限
    permission(row) {
      this.$refs["Permission"].account_id = row.user_id;
      this.$refs["Permission"].getPermissions();
      this.$refs["Permission"].visible = true;
    },
    //查看用户权限详情
    openPermission(row) {
      this.$refs["PermissionDialog"].visible = true;
      this.$refs["PermissionDialog"].account_id = row.user_id;
      this.$refs["PermissionDialog"].getFunction();
    },

10.自定义验证密码和邮箱
data（）{
定义位置
return {
}
}


和普通表单校验一样，在输入框通过prop引用校验规则

但是增加了一条通过validator验证的规则，后面就是自定义的校验规则变量。