1117-1121 权限菜单项目

最新推荐文章于 2023-11-02 16:09:14 发布

原创最新推荐文章于 2023-11-02 16:09:14 发布 · 208 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

权限菜单

当登录用户以不同的身份进入到这个页面的时候能查看到的信息是不一样的
会涉及到一些后台数据交互的

管理员进入的时候可以查看到全部的信息和内容
但是普通用户进入的是只会查看到部分的内容

Stirng 中的 trim()方法的作用就是去掉字符串前面和后面的空格.

作用是在输入身份验证的时候去除前后的空格

String str = " test trim ";
System.out.println(str.trim());
// 输出的结果会是test trim前后的空格就没了.

浏览器的本地存储 session

属于 WebAPI 接口----这是浏览器存储的一些机制
还提到了 token
功能:把一些信息存到浏览器中，最常用的就是存储登录的状态

可以采用两种存储方式

服务器:登陆过了，给服务器发了个请求验证登录了，但是频繁的关闭浏览器，服务器里面又得重新发请求，频繁，不太适合用。
浏览器:浏览器开着数据就在，关了数据就没了。
为了解决在用户界面点击登录的时候 isLogin = true 进入到其他页面了 isLogin = false 的问题。也就是登录的数据消失了
用户登录了我们就需要把用户登录的数据给保存起来，以便于识别用户的身份展示数据直到把浏览器关掉，存储的数据才会消失。以便于用户在刷新的时候重新去拿数据，导致登录的数据不会丢失

存储登录的状态 sessionStorage localStorage cookie
sessionStorage 浏览器关闭数据就会自动消失
localStorage 浏览器关闭数据不会消失，只能手动的去删除数据
只能存四种数据类型字符串(String) + 数字(number) + 布尔(boolean) + 对象(Object)要加 JSON.stringify()
只能一个个的存储数据，不能一下子传
传对象的时候要使用 -----> 字符串化 JSON.stringify() 标准化 JSON.parse()
打开多个相同的页面地址，然后存储数据和删除数据都互不影响。

localStorage 的用法和 session 的用法一模一样

created() {
  sessionStorage.setItem("password", "123456");
  sessionStorage.setItem("password", "123456");
  console.log(sessionStorage.getItem('password')); // 123456
},

// 保存数据到 sessionStorage
sessionStorage.setItem('key', 'value');
sessionStorage.setItem('data', JSON.stringify({x:12345}));

// 从 sessionStorage 获取数据
let data = sessionStorage.getItem('key');
let data = sessionStorage.getItem(JSON.parse(data));

// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem('key');

// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();

示例

下面的代码访问当前域名的 session Storage 对象，并使用 Storage.setItem() 访问往里面添加一个数据条目。

sessionStorage.setItem(‘myCat’, ‘Tom’);
下面的示例会自动保存一个文本输入框的内容，如果浏览器因偶然因素被刷新了，文本输入框里面的内容会被恢复，因此写入的内容不会丢失。

// 获取文本输入框
let field = document.getElementById("field");

// 检测是否存在 autosave 键值
// (这个会在页面偶然被刷新的情况下存在)
if (sessionStorage.getItem("autosave")) {
  // 恢复文本输入框的内容
  field.value = sessionStorage.getItem("autosave");
}

// 监听文本输入框的 change 事件
field.addEventListener("change", function () {
  // 保存结果到 sessionStorage 对象中
  sessionStorage.setItem("autosave", field.value);
});

1120

下午讲的

浏览器的本地存储 sessionStorage localStorage cookie
做笔记当成一个模块 浏览器的本地存储
什么时候会遇到 undefined 变量声明了未被赋值，就使用了，拿到 undefined 的不是报错
还提到一些字符串的方法自己去查
=== 是严格相等
解构 { menuList }
<template> 空标签 v-for
.toString()变成字符串
前端全栈：前后端都是js去做，后端就用 node+js的语法去做。有兴趣就去研究 node 和 mongodb 。学 node 是很有优势的，老师会教 mongodb 的一些增删改查，怎么搭建 mongodb 的环境,通过这些才知道什么叫做前后端分离，现在我们学的这个东西算是小型的一个全栈的东西，server.js 就是我自己做的后端，src 里面就是我的前端代码
后端做后端，前端做前端的，后端只暴露接口，我们前端发请求去访问。
看到了19上午 11分钟了

set()添加 + get()获取 + remove()-clear()清空
sessionStorage localStorage cookie 的 区别:在 MDN 中查找

子路由不能加 /login

为什么刷新的时候就没了；是因为只是保存了 menuTree 没有保存路由数据

权限菜单

权限菜单从字面上理解就是会根据登录不同的身份对后台拿取不同的数据做展示那么久会涉及到一些前后台数据交互的，首先我们要搭建一个后台–> node，那么有数据了又必须要想到 vuex,基本上能用到 vue 的地方基本都用的到 vuex 进行数据的状态管理，那么为了页面的更好看呢就要使用 element-ui ,现在我们用 vue 框架做项目，点击每一级菜单的话就要展示不同的页面，那么跟 vue-Router 路由构建单页面应用自然是离不开的。
当登录用户以不同的身份进入到这个页面的时候能查看到的信息是不一样的
node(服务器) + vuex(对 vue 各个组件内数据的状态进行管理) + Elment(修饰界面效果和页面结构) + router(单页面应用)

管理员进入的时候可以查看到全部的信息和内容
但是普通用户进入的是只会查看到部分的内容

第一阶段：使用 node 创建后台数据库，并且已经使用 axios 发请求拿到了数据。
第二阶段：把拿到的数据进行处理话，变成自己想要的数据，并且创建 vuex ，使用 element 进行递归展示。

使用 node 搭建数据库，以后会逐渐使用 Mongodb 搭建数据库

其实我们现在用的就是 node 里面的 npm,只是 node 前端提供的一个工具包，管理我们的项目依赖
node 本身是后台语言，里面写 js 就可以做后台，数据库对应的就是 Mongodb 。
我们现在用的基本都是 axios 发请求。
后台数据：扁平化数据做成树(基本会给你一样完整的表，然后你要根据表内的不同内容去处理获取不同的树做展示)
创建 server.js 必须的安装包。借助 node + express 搭建简易后台服务器，并且添加一些数据，express 是 node 的包，快速搭建服务器
import express from "express"; 这是 ES6 的导入方式。
const express = require("express"); node 的导入方式
const app = express()
app.listen(3000); 在 server.js 文件下启动 npm server.js
这样就起了一个 node 服务器，要一直启用才行。
app.get('/menus'(req,res)=>{res.json({menuList:[{}]})})
获取数据并设置跳转的页面(现在还不支持跨域)
res 是响应，响应类似 json 的文件,意思就是传入一个 json 的一个文件，然后 req 是依赖解析 req.body post 发送的数据解析出来的对象
app.get(’./menus) ==> http://localhost:3000/menus 是基于服务器地址的不同于 axios.get(‘http://localhost:3000’)
发请求是在 async created 中发请求
先导入 import axios from 'axios'
const res = await axios.get('http://localhost:3000/menus')
跨域从 8080 向 3000 发送了请求当一个请求 url 的协议、域名、端口三者之间任意一个与当前页面 url 不同即为跨域，外网的就可以，但是本地不可以，我们在服务器中进行一系列操作。
跨域请求 all 所有请求 * 是所有地址 next() 跟路由守卫的通行差不多，next 就代表我让你通行。 res 是响应

其实 node 数据库已经使用 server.js 上传好了，后台有个接口 get()方法，方法的地址是 /menus, 然后使用 axios.get(发请求拿到 /menus 里面的 json 数据，在使用 json.parse 解析里面就有 menuList)

跨域请求解决办法

// 6. 跨域请求
// all 所有请求  * 是所有地址 next() 跟路由守卫的通行差不多 ，next 就代表我让你通行。 res 是响应
app.all("*", (req, res, next) => {
  // 响应头的设置，我的后台支持跨域请求
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Content-Type");
  res.header("Access-Control-Allow-Methods", "*");
  res.header("Content-Type", "application/json;charset=utf-8");
  next();
});

导入 express ,借助 express 创建一个服务器 app，并且设置一个端口，使用 get 接口处理一些数据，然后再设置跨域请求就行了。剩下的就交给 axios 发请求让它自己拿了
当时用 node npm 安装 express 的时候有一些问题：原因是安装中断了，又重新安装，在 babel.config.js 里面有两个插件。

axios 部分,又重新学到了一个东西 axios 的响应拦截器(就是后台反馈给我的东西)。

import axios from "axios";
axios.defaults.baseURL = "http://localhost:3000";
// axios 看云查找拦截和响应
// axios 的拦截器
// response 响应拦截器
// axios 就会以这个函数的返回值作为响应的结果
axios.interceptors.response.use((res) => {
  // 对响应器做点什么
  return res.data;
  // return '哈哈哈';  //响应什么就显示什么。
});
async created(){
  const res = await axios.get('/meenus')
  // console.log(res.menuList) //数组。。。。
  // const res = await axios.post('/meenus',{text})
}

这是之前 juejin.vue axios 发请求的例子

// .get("http://localhost:3000/posts?type=frontend&sort=popular")
  axios.get(`http://localhost:3000/posts?${queryStr}`).then((res) => {
    setTimeout(() => {
      this.list = res.data;
    }, 500);
  });
}

我做的后台，什么地方暴露出来的接口，这个接口用什么方法去访问的，然后反馈给我的是什么样的数据，然后我拿到数据后该怎样去使用或者处理。
后端暴露出来一些接口供前端去访问，用 get 方法提供一个接口/menu，返回一个 json 对象，对象里面有个属性 menuList,这个属性的属性值是一个数组。然后前端拿的时候怎么去拿,(axios 发请求)，怎么去解析(axios 拦截器和 post:body-parser)
我的这个后台不要在 sre 文件夹内，因为 src 内是 vue 所写的代码项目，localhost 访问的是 8080 ，所以 src 是在 8080 下跑的前端，不能前端和后端放在一起。
我们使用 node 的 npm 只是限于管理项目依赖
现在讲的 server.js 是后端的东西，这个 express 是后端的包，是 node d 的包，不是前端 axios 之类的包，是搭建服务器的一个包，就是承载后台数据库的一个东西。

vuex

现在数据拿到了扁平化数据就要做成树(Tree)然后用 element 菜单递归。

扁平化数据变成树(Tree)

// 扁平化数据
menuList = [
  { pid: -1, name: "购物车", id: 1, auth: "cart" },
  { pid: 1, name: "购物车列表", id: 4, auth: "cartlist" },
  { pid: 4, name: "彩票", id: 5, auth: "lottery" },
  { pid: 4, name: "商品", id: 6, auth: "goods" },
  { pid: -1, name: "商店", id: 2, auth: "store" },
  { pid: -1, name: "个人中心", id: 3, auth: "me" },
];
// forEach() 遍历数组
const menuTree = [];
menuList.forEach((item) => {
  if (item.pid === -1) {
    menuTree.push(item);
  } else {
    // 就要把 相等的那一个放到父级的 children 里面
    const o = menuList.find((e) => (e.id = item.pid));
    // 如果父级存在 children
    if (o.children) {
      o.chilren.push(item);
    } else {
      o.chidlren = [item];
    }
  }
  return menuTree;
});

vuex 对组件内的数据的状态进行管理

先不做模块

mutations 的方法参数(state,载荷数据)
actions 的方法参数({context.conmmit},{传参})
在组件内写 this.$store.dispatch 触发 actions 里面的方法发请求参数，拿到参数后做一些处理。
写组件开始展示递归展示
递归组件 <Menu><MenuItem v-for="menuTree"/><Menu> <MenuItem> <MenuItem v-if="item.children" 传参/> <MenuItem/>
但是想到这里有一点不明白 props: ["menuTree"] 去那里继承的，哈哈哈
递归思路的一些问题：