Vue2项目练习｜后台管理问题总结

NeverthelessEnd

已于 2022-12-13 18:53:43 修改

阅读量434

点赞数

文章标签： javascript vue.js

于 2022-12-10 17:22:52 首次发布

本文链接：https://blog.csdn.net/sinat_41177607/article/details/128265499

版权

环境

node 16
vue/cli 5.0
Vue 2.0
Vue-router 3.0
Vuex 3.0
element UI 2.13.2

技术选型

在这里插入图片描述

路由分析

在这里插入图片描述

编辑模式与查看模式切换

需求：查看模式：显示span；编辑模式：显示input，需要控制每行各自的查看编辑切换
在这里插入图片描述
解决方案：给每一行添加一个标记flag
点击添加属性值时，给每一个属性值添加一个标记flag

点击修改属性，给当前属性的每个属性值添加一个flag标记
点击span，input获得焦点

深拷贝&浅拷贝&直接赋值

需求：点击修改按钮，弹出对话框，对话框中显示当前选中的商品信息

// 点击修改属性 按钮
    updateAttr(row) {
      // console.log(row);
      // 展示对话框
      this.isShowTable = false;
      // 对话框中显示当前选中的商品信息
      // this.attrInfo = row // 直接赋值
       // 直接赋值，这会导致 用户修改输入框里的值（row）时，页面中展示的数据（attrInfo）也会改变
      // this.attrInfo = {...row} // 浅拷贝
      // attrInfo 的数据结构复杂（对象里有数组，数组里又有对象），浅拷贝只能保证对象的基本类型互不影响，但对象的引用类型(更深层数据)还是共享同一块内存，会相互影响。
      // 必须用深拷贝（使用 lodash插件
      // 深拷贝：从堆内存中开辟一个新的区域存放新对象，两个对象不会互相影响
      this.attrInfo = cloneDeep(row);
      }

在这里插入图片描述

解决 blur 和 keyup.enter事件冲突问题

在这里插入图片描述

data恢复初始化(Object.assign

v-model收集多个字段

v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值)，因此可以一些标识符来分割多个字段，之后再根据标识符进行字符串切割
在这里插入图片描述

const [attrId, valueId] = item.attrIdAndValueId.split(":"); // 得到一个数组

Echarts展示动态数据

组件挂载，初始化echarts实例，指定图表的配置项和数据(空数据

 mounted() {
    // 图表
    this.chart = echarts.init(this.$refs.chart);
    // console.log(chart)
    this.chart.setOption({
      title: {
        text: this.title + "趋势",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          // 图表展示的数据来自 服务器，服务器返回数据需要时间，所以不能在组件挂载时就展示动态数据
          data: [],
          axisTick: {
            alignWithLabel: true,
          },
        },
      ],
      yAxis: [
        {
          type: "value",
        },
      ],
      series: [
        {
          name: "Direct",
          type: "bar",
          color: "blue",
          barWidth: "60%",
          data: [],
        },
      ],
    });
  },

使用watch监视数据，当服务器返回数据后会触发watch回调，再更新 echarts配置中的数据

// 图表初次展示动态数据
    // 使用watch监视数据 homeInfo，当服务器返回数据后会触发watch回调，再更新 echarts配置中的数据
    homeInfo(){
      this.chart.setOption({
        // x轴
        xAxis: {
          data: this.homeInfo.orderFullYearAxis
        },
        series: {
          data: this.homeInfo.orderFullYear
        }
      });
      }

权限管理

常量路由&异步路由&任意路由

常量路由：每个用户都可以进入的路由（登录、404、首页
异步路由：根据用户角色（用户信息）进行过滤的路由（商品管理、权限管理
任意路由：当路径出现错误的时候重定向404
在这里插入图片描述

添加动态路由(异步路由

分析：获取用户信息成功后，对比异步路由与服务器返回的标记信息，得到最终可以展示的路由，添加到router中

获取用户信息成功后，过滤异步路由：
在这里插入图片描述

合并所有路由：（异步、任意）路由整理成一个数组，给路由器添加 routes
注意：addRoutes是给Router添加新的路由，不会覆盖以前的路由

解决vue-router 使用 addRoutes 动态添加路由跳转后页面刷新空白问题

原因：（动态）异步路由添加，执行addRoutes 是需要时间的，刚刚addRoutes()就执行next()立刻访问被添加的路由，然而此时addRoutes()没有执行结束，因而找不到刚刚被添加的路由导致白屏。

解决方法：使用 next({…to})，从新访问一次路由（结束当前导航，执行新的导航，再次执行beforeEach回调，直到 {…to}路径找到为止，才执行next()
具体分析可以看这个文章：https://blog.csdn.net/qq_41912398/article/details/109231418
在这里插入图片描述