Vue开发中一些常见的需求

Warm

已于 2023-05-19 23:06:30 修改

阅读量239

点赞数 1

文章标签：开发语言 javascript 前端 vue.js 前端框架

于 2023-05-17 18:24:40 首次发布

本文链接：https://blog.csdn.net/2302_76493271/article/details/130730484

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、登录需求
- 使用步骤
- 1.表单校验
- 2.封装axios
二、数组转树
总结

前言

记录日常开发中的一些常见需求和在下的一些思路~

一、登录

先大致了解一下整体的流程

1. 登录表单校验通过

2.调用Vuex里面的action

3.封装axios

4.通过action进行一系列操作

5.登录成功获取token

6.利用Vuex的特性将token存入

二、使用步骤

思路：在vuex中封装action → 在组件中调用

这部分在登录流程中比较重要，单独拎出来讲讲~

const state = {
//可以定义一个空 token
  token: null
}

const mutations = {
  //3.将自定义的token值赋值给state里面的token
  setToken(state, token) {
    state.token = token
  }
}

const actions = {
  // context上下文，传入参数
  login(context, data) {
    console.log('从login.vue传回来的数据', data)

    // 1.假设一个token值
    const token = '123456789'

    // 2.通过commit方法调用mutations里面的方法
    context.commit('setToken', token)
  },
}

export default {
  namespaced: true, // 开启命名空间
  state,
  mutations,
  actions
}

先假设一下哈~后续封装接口再进行调整！

1.表单就不讲了哈~可以自行去Element组件库去官方文档

Element - The world's most popular Vue UI framework

2.表单校验完成后分几步

a.先对表单进行一个兜底校验 validate方法

      this.$refs.loginForm.validate((isok) => {
        if (!isok) return
      })

b.在登录组件中调用action方法

//因为前面开启了命名空间，所以需要带上模块名

this.$store.dispatch('模块名/xxx，'参数')

c.看下最上面Vuex组件里面的流程，能将项目跑通console.log能打印就算成功啦~

3.封装axios

图解流程哈哈

axios的封装一般做三件事

a.基地址和超出时间

b.请求拦截器，携带头带上token

c.响应拦截器处理错误

基地址和封装axios的模板可以参考官方文档哈~

axios的文档参考：拦截器 | Axios 中文文档 | Axios 中文网

聊聊请求和响应拦截器的具体功能

请求拦截器：

主要是针对token做出的操作，在请求上携带token

request.interceptors.request.use(config => {
  // console.log('请求拦截器:', config)
  // 获取vuex中的token
  const token = store.state.user.token

  // 请求头添加token
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }

  return config
}, error => Promise.reject(error))

响应拦截器：

主要是针对服务器响应的状态进行操作

成功：message提示

普通错误：抛出异常

401错误：调用Vuex里面定义的方法，清空token 并跳转页面至登录页

具体代码看自己需求哈~提供一个思路

request.interceptors.response.use(response => {

  // 登录成功返还成功提示
  if (response.data.message) {
    return response.data
  } else {
    // 登录错误提示错误并且抛出一个promise对象，登录页可以try catch捕获
    Message.error(response.data.message)
    return Promise.reject(response.data.message)
  }
}, error => {
  console.dir(error.response.status)
  // 判断401错误
  if (error.response.status === 401) {
    Message.error('请重新登录')
    store.dispatch('user/logout')
    router.push('/login')
  }

  return Promise.reject(error)
})

3.封装api

最后一步就是通过接口文档封装响应的api执行上面的操作

总结

登录功能做的优化项比较多

例如数据脱壳，让代码变得更优雅~

例如配置环境变量，在不同的运行环境下，它的值会自动改变~

例如如何在进入主页后判断来访者的权限等等~

总而言之，任何优雅完善的代码都是基于毛胚房。先讲讲基础功能哈哈哈

二、数组转树

电脑上图片比较少！随便拿一张作分割线哈~

需求：在实际开发中，难免遇到需要上下级嵌套关系的表格，这个时候后端接口返回的数据，我们要将其转成我们需要的形式，就要用到下面的技术啦~

这种场景应该比较常见哈~

为了方便管理和代码观赏性，我们可以先封装一个递归函数简单实现一下功能，然后在组件里面调用

// 1.先准备一个数组
const arr = [
  { 'id': 1, 'pid': 0, 'name': '传智教育' },
  { 'id': 2, 'pid': 1, 'name': '总裁办' },
  { 'id': 3, 'pid': 2, 'name': '行政部' },
  { 'id': 4, 'pid': 2, 'name': '人事部' },
  { 'id': 5, 'pid': 1, 'name': '财务部' },
  { 'id': 6, 'pid': 1, 'name': '技术部' },
  { 'id': 7, 'pid': 1, 'name': '运营部' },
  { 'id': 8, 'pid': 1, 'name': '市场部' },
  { 'id': 9, 'pid': 4, 'name': '财务核算部' },
  { 'id': 10, 'pid': 4, 'name': '税务管理部' }
]


// 封装一个函数，完成数组转树
export function arrlist(arr, rootId) {
//定义一个新的数组用来接收
  const newArr = []
  arr.forEach(item => {
    // 如果数组里的item.pid 等于 你传入的数值
    if (item.pid === rootId) {
      // 找到arr里面的和父元素的id相同的元素添加到children，作为二级目录
      const children = arrlist(arr, item.id)
      item.children = children
      //添加数据
      newArr.push(item)
    }
  })
  return newArr
}

const res = arrlist(arr, 1)
console.log(res)

这个简单的递归就实现啦，当然现在只有两级，有需求的话可以自己拓展哈~逻辑都一样，记得递归还是一级一级写思路会清晰一点！

这个实现之后接下来去你要实现需求的组件里面引入调用这个方法就可以啦