当老师学生以不同的身份进入到系统的时候，展示的菜单是不一样的。
手动配置
重要的事：
muneList:[{pid:-1,name:“购物车”,id:1,auth:“cart”}]
讲 node.js 的东西
安装 express
跨域的问题，什么是跨域 http 就是协议
async
一定要学会使用箭头函数
这段时间都是练习递归
:index=“index.to.String()” 变成字符串的数字

vue-menu

手动配置模板
babel 是翻译 js 的，根据项目来加 Router element vuex express 以后可以根据自己的项目需要安装一个自己的模板
路由的 history 区别:带锚点与不带锚点的区别
重要的事：之前我们是拿到了 Tree 展示出来，现在是我们没有拿到 Tree,只拿到数据，我们要变成 Tree 展示出来。现在教大家 node 搭建数据库，最后写在 src 外面
创建 server.js node 服务器
import express from "express"; 这是 ES6 的导入方式。
要用 const express = require("express"); node 的导入方式
借助 node + express 搭建简易后台服务器，并且添加一些数据
express 是 node 的包，快速搭建服务器
const app = express()
app.listen(3000); 在 server.js 文件下启动 npm server.js
用 app.get(’/menus’(req,res)=>{res.json({menuList:[{}]})}) 方法获取数据，是基于服务器地址 ,res 是响应，响应类似 json 的文件,获取数据并设置跳转的页面(现在还不支持跨域)
发请求是在 async created 中发请求，
先导入 import axios from 'axios'
const res = await axios.get('http://localhost:3000/menus')
跨域从 8080 向 3000 发送了请求当一个请求 url 的协议、域名、端口三者之间任意一个与当前页面 url 不同即为跨域，外网的就可以，但是本地不可以，我们在服务器中进行一系列操作。
将扁平化数据转化成树
App.vue 中
用 axios 拦截器做一些事情 1. 先拦截到网址 2. 然后再相应的做一些事情
下午
变成树的形式
element-ui 导入 Menu.vue 中四个
把 App 中 d 的请求转化为 vuex
d

怎样找到从一个树中找到想要的那个 id

  data() {
    return {
      res: [
        {
          pid: -1,
          name: "购物车",
          id: 1,
          auth: "cart",
          children: [
            {
              pid: 1,
              name: "购物车列表",
              id: 4,
              auth: "cart-list",
              children: [
                { pid: 4, name: "彩票", id: 5, auth: "lottery" },
                { pid: 4, name: "商品", id: 6, auth: "product" },
              ],
            },
          ],
        },
        { pid: -1, name: "商店", id: 2, auth: "shop" },
        { pid: -1, name: "个人中心", id: 3, auth: "store" },
      ],
    };
  },
  created() {
    // console.log(this.res);
    // 1. 定义一个箭头函数 getObj
    const getObj = (id, tree) => {
      const stack = [...tree];
      let currentObj; // const currentObj = xxx  let 可以不设赋值
      for (let i = 0; i < stack.length; i++) {
        currentObj = stack[i];
        if (currentObj.id === id) {
          break;
        } else {
          if (currentObj.children) {
            stack.push(...currentObj.children);
          }
        }
      }
      return currentObj;
      // return stack;
    };
    console.log(getObj(4, this.res));
  }

响应拦截器
函数里面如果用 await 的话必须要用 async

import axios from "axios";
axios.defaults.baseURL = "http://localhost:3000";
// axios 的拦截器  响应拦截器
axios.interceptors.response.use((res) => {
  // 对响应器做点什么 axios 就会以这个函数的返回值作为响应的结果
  return res.data; // return '哈哈哈哈'
});
created(){
  const { menuList } = await axios.get("/menus");
  const res = await axios.get("/menus");
  // console.log(res.data.menuList);  //没做响应器之前
  console.log(res.menuList); // 做响应器之后
}

将扁平化数据转化成树

data(){
  return{
     menuList: [
        { pid: -1, name: "购物车", id: 1, auth: "cart" },
        { pid: 1, name: "购物车列表", id: 4, auth: "cart-list" },
        { pid: 4, name: "彩票", id: 5, auth: "lottery" },
        { pid: 5, name: "彩票1", id: 7, auth: "lottery1" },
        { pid: 5, name: "彩票2", id: 8, auth: "lottery2" },
        { pid: 4, name: "商品", id: 6, auth: "product" },
        { pid: -1, name: "商店", id: 2, auth: "shop" },
        { pid: -1, name: "个人中心", id: 3, auth: "store" },
      ],
  }
}
ceated(){
      // 1. pid 为 -1 的话是根节点
    // 2. 往下查找如果 pid !== -1 就把它放到 pid = -1 里面
    const menuList = this.menuList;
    const menuTree = [];
    menuList.forEach((item) => {
      // pid 为 -1 的话是根节点
      if (item.pid === -1) {
        menuTree.push(item);
      } else {
        // pid 不为 -1
        //  e 就是 menuList 数组的每一项，然后开始每一项查找，找到了的话就在里面添加 children，在children 里面添加 当前的item
        // 如果没有找到的有返回当前的 item

        // if (menuList.find((e) => e.id === item.pid)) {
        //   if (menuList.find((e) => e.id === item.pid).children) {
        //     menuList.find((e) => e.id === item.pid).children.push(item);
        //   } else {
        //     menuList.find((e) => e.id === item.pid).children = [item];
        //   }
        // }

        //原数组内找到 id 跟当前 pid 相同的对象
        const obj = menuList.find((e) => e.id === item.pid);
        if (obj) {
          if (obj.children) {
            obj.children.push(item);
          } else {
            obj.children = [item];
          }
        }
      }
    });
    console.log(menuTree);
    console.log(menuList);
}

在 vuex 中显示
1. state
  state 内存放的是组件内共享的数据
2. mutations
  mutations 是修改 state 内数据的方法
  mutations 的方法默认只接收两个参数 state 对象 payload 载荷数据
3. actions
  actions 方法默认设置和 mutations 方法同名，可以不同名，然后在 commit 提交的方法中和 mutations 的方法同名就可以了
  actions 函数内默认只接受一个 context 作为参数 context 是一个对象，对象下有 commit 方法
  actions 函数的主要作用是解决异步请求的
  commit 内提交的方法要和 mutations 内的方法一样,commit 传递的数据在 mutations 的第二个参数会自动接收
  然后在组件内使用 this.$store.dispatch('getMenu') 触发方法 actions 下的方法
element-ui

里面套
根节点有内容的无内容的,可以用 children 判断
在最外层套可以套一个空的标签为了获取数组生成一级菜单
因为空标签不能加 :key=“index” 要加在 el-submenu 上
el-submenu 要求 index 唯一标志，还是字符串类型的
如果不在 el-submenu 和 el-menu-item 加判断就会显示两个

现在是怎展示这个 Tree 的事情了

循环展示的内容我们可以用递归
在里面自己递归自己,但是要加一些判断，不然会无限循环，会报错，有 children 才循环，然后把 item.children 的数据传给

CV攻城师

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Menu

1112 vue-Cascader主要讲1117权限菜单当老师学生以不同的身份进入到系统的时候，展示的菜单是不一样的。手动配置重要的事：muneList:[{pid:-1,name:“购物车”,id:1,auth:“cart”}]讲 node.js 的东西安装 express跨域的问题，什么是跨域 http 就是协议async一定要学会使用箭头函数这段时间都是练习递归:index=“index.to.String()” 变成字符串的数字vue-menu手动配置模板b
复制链接

扫一扫