前端日记

Vue 页面权限控制和登陆验证页面权限控制页面权限控制是什么意思呢？ 就是一个网站有不同的角色，比如管理员和普通用户，要求不同的角色能访问的页面是不一样的。如果一个页面，有角色越权访问，这时就得做出限制了。 通过动态添加路由和菜单来做控制，不能访问的页面不添加到路由表里，这是其中一种办法。 另一种办法就是所有的页面都在路由表里，只是在访问的时候要判断一下角色权限。如果有权限就让访问，没有权限就拒绝，跳转到 404 页面。 思路： 在每一个路由的 meta 属性里，将能访问该路由的角色添加到 roles 里。用户每次登陆后，将用户的角色返回。然后在访问页面时，把路由的 meta 属性和用户的角色进行对比，如果用户的角色在路由的 roles 里，那就是能访问，如果不在就拒绝访问。 代码示例： 路由信息 123456789101112131415161718routes: [ { path: '/login', name: 'login', meta: { rol ...

Vue 动态添加路由及生成菜单写后台管理系统，估计有不少人遇过这样的需求：根据后台数据动态添加路由和菜单。为什么这么做呢？因为不同的用户有不同的权限，能访问的页面是不一样的。在网上找了好多资料，终于想到了解决办法。 动态生成路由利用 vue-router 的 addRoutes 方法可以动态添加路由。 先看一下官方介绍： router.addRoutes 1router.addRoutes(routes: Array<RouteConfig>) 动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组。 举个例子： 12345678910const router = new Router({ routes: [ { path: '/login', name: 'login', component: () => import('../components/Login.vue') ...

CentOS7使用的是firewall防火墙，不再是原来的iptables 防火墙基础命令1：查看firewall防火墙状态 123firewall-cmd --state//或systemctl status firewalld 2：打开防火墙 1systemctl start firewalld 3：关闭防火墙 1systemctl stop firewalld 4：重启防火墙，使设置生效 123firewall-cmd --relaod//或systemctl reload firewalld 5：开机自启动防火墙 1systemctl enable firewalld 6：禁止开机启动防火墙 1systemctl disable firewalld 7：查看已打开的端口 1firewall-cmd --list-ports 8：开放端口 1firewall-cmd --permanent --zone=public --add-port=8080/tcp 其中permanent表示永久生效，public表示作用域，8080/tcp表示端口和类型9：关闭端口 1fire ...

Linux之Mysql安装配置 第一种：Linux离线安装Mysql（提前手动下载好tar.gz包） 第二种：通过yum安装配置Mysql（服务器有网络） 第一种：tar.gz包安装1、 查看是否已经安装 Mysql1rpm -qa | grep mysql 如果没有什么返回信息，说明没有安装 Mysql，那么直接进入2 2、下载官方 Mysql 包官方下载地址选择对应的包 如下mysql5.7（最常用） 3. 上传到服务器后解压（解压后可删除安装包，节省空间）一般放在在/usr/local目录下 1234# 解压文件至/usr/local/目录tar -zxvf mysql-5.7.20-linux-glibc2.12-x86_64.tar.gz# 重命名为 mysqlmv /usr/local/mysql-5.7.20-linux-glibc2.12-x86_64/ /usr/local/mysql 解压重命名后目录一般是这样的 4、创建用户组至于为什么要创建用户和组可以看看这篇 Linux下安装Mysql为什么要创建对应的用户和用户组 123groupadd ...

文件流下载后端返回的文件流 注意：responseType应设置为：’arraybuffer’，这样返回的文件流才会是二进制的，才能使用new Blob得到正确的文件 1234567891011121314151617181920this.$axios .post(url接口地址, params请求参数, { headers: { token: token }, responseType: "arraybuffer" }) .then((file) => { let content = file.data; // 组装a标签 let a= document.createElement("a"); // 设置下载文件名 a.download = "附件.zip"; a.style.display = "none"; let blob = new Blob([content], & ...

多种数组去重性能对比测试模板1234567891011121314151617181920212223// 创建一个 1 ~ 10w 的数组，Array.from为ES6语法let arr1 = Array.from(new Array(1000000), (x, index) => { return index})let arr2 = Array.from(new Array(500000), (x, index) => { return index + index})let start = new Date().getTime()console.log('开始数组去重')// 数组去重function distinct(a, b) { let arr = a.concat(b); // 去重方法}console.log('去重后的长度', distinct(arr1, arr2).length)let end = new Date().getTime()cons ...

将中文汉字转拼音方法1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992 ...

常用meta整理<meta> 元素概要meta标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。 必要属性 属性 值 描述 content some text 定义与http-equiv或name属性相关的元信息 可选属性 属性 值 描述 http-equiv content-type / expire / refresh / set-cookie 把content属性关联到HTTP头部。 name author / description / keywords / generator / revised / others 把 content 属性关联到一个name。 content some text 定义用于翻译 content 属性值的格式。 网页相关 申明编码 1<meta charset='utf-8' ...

使用Gitalk实现静态博客无后台评论系统前言Gitalk，一个基于 Github Issue 和 Preact 开发的评论插件。 下面我们来用它在vuepress搭建的博客中搭建评论区吧 准备使用一个新的东西首先当然是要了解它 Gitalk demo：https://gitalk.github.io/ Gitalk github：https://github.com/gitalk/gitalk 实现如何实现？最好的方法我认为是看官方文档，这里我只是记录一下实现的步骤。 使用一个别人已经开发好的 vuepress-plugin-comment 插件来帮助我们把Gitalk应用到vuepress搭建的静态博客。 安装1npm install --save vuepress-plugin-comment 使用options的配置和Gitalk的配置相同 123456789101112131415161718module.exports = { plugins: [ [ 'vuepress-plugin-comment', & ...

Markdown使用教程一、Markdown简介 Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档。 应用当前许多网站都广泛使用 Markdown 来撰写帮助文档或是用于论坛上发表消息。例如：GitHub、简书、知乎等 编辑器推荐使用Typora，官网：https://typora.io/ 二、徽章什么是徽章徽章是一种小巧精美的小图标，一般配有相关文字进行辅助说明，可对数据进行监控，链接跳转等，富有表现力。 常见于github项目主页，但其不仅出现于 github 项目主页，凡是能够表现图片的地方都可以出现徽章。 徽章的使用 在markdown中使用 12345格式:[](超链接地址) # 即超链接内部嵌套图片语法：[](https://github.com/ytanck) 徽章生成网站：https://shields.io/ 本文档主要介绍markdown，不对徽章做过多介 ...