vue一些方法封装

使用的时候直接导入封装的文件就可以

服务封装

import axios from 'axios'
import { getToken } from './setToken'
import { Message } from 'element-ui'
const service = axios.create({
  baseURL: '/api',//baseURL会自动加在请求地址上
  timeout: 3000
})
// 添加请求拦截器
service.interceptors.request.use((config) => {
  // 在请求之前做的事情(获取token)
  config.headers['token'] = getToken('token')
  return config
}, (error) => {
  return Promise.reject(error)
})
// 添加响应拦截器
service.interceptors.response.use((response) => {
  // 对响应数据做些什么
  let { status, message } = response.data
  if (status !== 200) {
    Message({ message: message || 'error', type: 'warning' })
  }
  return response
}, (error) => {
  return Promise.reject(error)
})
export default service

Token封装

export function setToken (tokenKey, token) {
  return localStorage.setItem(tokenKey, token)
}
export function getToken (tokenKey) {
  return localStorage.getItem(tokenKey)
}
export function removeToken (tokenKey) {
  return localStorage.removeItem(tokenKey)
}

我在文件中的使用是这样，具体各位可以根据自己的需求进行修改

 // 登录请求
    login (form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          // console.log(this.form);
          login(this.form).then(res => {
            if (res.data.status === 200) {
              setToken('username', res.data.username)
              setToken('token', res.data.token)
              this.$message({ message: '登录成功', type: 'success' })
              this.$router.push('/hello')
              // console.log(res.data);
            }
          })
        } else {
          console.error(this.form);

        }
      });
    },

请求封装

// 获取信息表格数据封装
export function getTable (root, url, params) {
  root.service.get(url, { params: params || {} }).then(res => {
    if (res.data.status === 200) {
      root.tableData = res.data.data
      root.total = res.data.total
      root.loading = false
    }
  }).catch(err => {
    throw err
  })
}
// 新增和修改封装
import qs from 'qs'
export function getInfo (root, method, url, form, callback) {
  let data = qs.stringify(form)
  root.service[method](url, data).then(res => {
    if (res.data.status === 200) {
      callback(root, url)
      root.addDialog = false
      // 重置表单，清除表单初始值
      root.$refs['form'].resetFields()
      root.$message({ type: 'success', message: res.data.message })
      // console.log(res);
    }
    else {
      root.$refs['form'].resetFields()
    }
  }).catch(err => {
    throw err
  })
}
// 删除封装
// 不完全建议不使用封装，没有取消按钮自动删除
export function getDel (root, url, id, callFun) {
  root.$alert('该操作将永久删除此学生信息, 是否继续该操作?',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      callback: () => {
        root.service.delete(`${url}/${id}`).then(res => {
          if (res.data.status === 200) {
            callFun(root, url)
            root.$message({ message: res.data.message, type: 'success' })
          }
        })
          .catch(err => {
            throw err
          })
      }
    })
}
// 获取作业列表数据
export function getTalbleData (root, url, params) {
  root.service.get(url, { params: params || {} }).then(res => {
    if (res.data.status === 200) {
      root.tableData = res.data.data
      root.total = res.data.total
      // root.tableData.map(item => {
      //   arr.map(aItem => [
      //     item[aItem] ? item[aItem + '_text'] = '是' : item[aItem + '_text'] = '否'
      //   ])
      // })
      // console.log(res.data.data);
      root.loading = false
    }
  }).catch(err => {
    throw err
  })
}

验证封装

// 快捷键fn+f1
// 用户名验证
export function nameRule (rule, value, callback) {
  let reg = /(^[a-zA-Z-9]{4,10}$)/
  if (value === '') {
    callback(new Error('请输入用户名'))
  } else if (!reg.test(value)) {
    callback(new Error('请输入4-10位用户名'))
  } else {
    callback()
  }
}
// 密码验证
export function pwdRule (rule, value, callback) {
  let reg = /^\S*(?=\S{6,12})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/
  if (value === '') {
    callback(new Error('请输入密码'))
  } else if (!reg.test(value)) {
    callback(new Error('请输入6-12位密码需要包含大小写字母和数字及特殊符号'))
  } else {
    callback()
  }
}

  /(^[a-zA-Z-9]{4,10}$)/这个验证有一个自动生成的插件

在某一行中，输入快捷键F1,我的是fn+F1,就会出现以下窗口，然后输入你想要的验证回车就会自动生成验证规则了