qq_31906983的博客

原创 前端做权限的几种方式(一) --- 手把手教你在vue中做各种权限管控（JWT接口权限、菜单权限管控）

一、权限类别1、从产品的角度来说权限一般分为 功能权限 与 数据权限。功能权限是什么？即用户登录到系统后，他能看到什么模块？能看到哪些页面？能操作哪些模块，这些是属于功能权限的范畴。数据权限是什么？即用户登录到系统后，在某个模块之中能看到哪些数据？不同用户在看同一模块时可能因为数据权限不同而看到不同的数据，这些是属于数据权限的范畴。2、功能权限的类别菜单权限：后台管理系统中的菜单一般由路由定义而成，因此对菜单进行权限管控实际上就是对路由进行各种操作。 按钮权限3、数.

原创 如果Nginx已经做了gzip，那么Vue还需要做吗？（vue的gzip和nginx的gzip区别）

如果Nginx已经做了gzip，那么Vue还需要做吗？1、其实Vue本身不能做压缩打包之类的功能，他是靠webpack进行打包，而webpack有插件可以生产gz类型的文件。2、当你把一个包含gz的静态资源放到nginx上，有web请求过来时，nginx如果开启了gzip，那么它会检测你的静态资源文件夹里面有没有gz文件，如果有的话，nginx会直接返回gz文件，如果没有，nginx会动态的压缩成gz返回到浏览器。因此，当服务器配置了gzip，那么前端可以不用做gzip，但是你做好了gz文.

原创 关于promise、Generator、async 和 await 的执行原理、机制（概括）

1、 当代码运行到new promise时，把里面的异步任务放到异步队列里面不会立即执行2、 代码运行到then() 方法的时候，会把形参函数存储起来。 当主程序执行完毕，开始执行异步队列，结束后，根据结果来执行对应的函数。3、 为什么要使用一个队列来储存待调用的函数。因为如果使用变量来存储的话，可能会导致多次调用.then()的时候，只调用了最后一次.then()的回调方法。 .th...

原创 零碎知识点记录（持续记录）

目录1、使用 @babel/plugin-proposal-optional-chaining 主要是解决链式调用某一步会出现 undefined 或 null 导致程序报错的问题2、配置webpack，运行dev-server时出现 warning：3、Git报错 - refusing to merge unrelated histories （拒绝合并不相关的历史）4、利用 G...

原创 不使用 vue-cli 去搭建一个 vue + webpack 的准备项目 （配置详解）（三）webpack配置devServer，详细说明原理。

四、配置webpack-dev-server（1） 理解为什么要使用 webpack-dev-server在上面一篇文章中，我们已经可以通过webpack去打包整个项目了，但是每次写完代码，都需要手动运行一下webpack执行打包，才能看到修改后的效果，这对于我们前端开发来说是十分不方便的。还有一点就是如果我们想发送一个ajax请求，那么必须要使用http协议，而直接打开本地文件使用的则是...

原创 不使用 vue-cli 去搭建一个 vue + webpack 的准备项目 （插件、配置详解）（二）webpack的配置说明

三、配置webpack当我们安装好 vue-loader 和vue-template-compiler 后，我们就可以去配置webpack 让他可以解析.vue单文件了。这里多嘴一句，为什么必须要安装 vue-template-compiler 这个插件？实际上vue-loader并不会去解析template模板，他只是帮助webpack去处理.vue文件，当进入到.vue文件后，处...

原创 不使用 vue-cli 去搭建一个 vue + webpack 的准备项目 （插件、配置详解）（一）准备和起步

一、准备准备（不多说）：1. 全局安装 vue vue-cli2. 全局安装 webpack webpack-cli3. 全局安装 node二、起步（1）创建项目文件夹，进入项目文件夹并打开命令行，输入：npm init然后一路回车此时在根目录下会生成： package.json 文件（2）创建index.html文件，并在项目下安装 vue、web...

原创 this指向问题及什么时候不能使用箭头函数？

箭头函数固然好用，但是也不能随地滥用！回答这个问题前，先来回想下this指向方面的问题this只有在方法被调用的时候，才知道他的指向，定义的时候是不知道的。而this的指向我把它划分为以下几种：1. 对象里方法中的this指向调用他的对象。比如延时器方法setTimeout()，在调用时（非严格模式），其内部this指向为window，因为实际上它是window对象下的方法，即...

原创 Element-UI的条件搜索和分页，关于这方面的众多坑 ------- 如何做一个功能正常的分页

搜索、分页要考虑哪些东西？单独拿出来一个来说，都是比较简单的，但是结合到一起再配合需求，就会出现种种变化，一不留神就会 ‘中招’ ！要把 分页 做成 搜索 ！分两个情况进行说明！注意： 以下情况均以每页10条数据为例。情况一：搜索出来的数据超过10条，即有多页符合条件的数据。1）假设用条件 “已审批的订单” 去搜索，结果一共有21条，共3页，此时是在第一页，他代表的是 “已...

原创 vue中使用动态添加路由(router.addRoutes)加载权限侧边栏的两种方式

工作中我们经常会遇到这种需求，后台定义用户的权限数据，前端进行获取，并渲染在侧边栏导航上，不同权限的用户看到的侧边栏是不同的。即前端渲染的数据是随着后台的改变而改变的，做到真正的前后端分离。一、拿到需要动态添加的路由表我们的思路是：登录(login，所有人均可见)--------->登录成功，获取权限-------->权限不同，侧边栏的数据展示不同先定义一份公共的路由表...

原创 vue中 做权限管理 使用router.addRoutes()动态添加路由以及解决刷新失效，跳转后刷新失效问题

最近在公司做知识储备，有个权限的问题干扰了我2天，今天终于把他理顺了！！！一、需求明确我想做的是后台管理系统的权限管理，（所有的数据都是使用mockJs模拟得来），登录的时候，发送表单验证，验证成功后，后台返回权限列表，权限不同，返回的列表不同，拿到权限列表后，把权限列表渲染出来在页面侧边栏上。二、注意点（1） 前端提前设置静态的权限列表，通常只包括页面公共的部分，比如...

原创 配置axios出现 Uncaught (in promise) "TypeError: Cannot create property 'header' on boolean 'true'"

今天在写vue项目的时候遇到了这个错误，在配置好axios的请求拦截时出现的错误！！主要是原因很简单！ 因为我在配置axios的请求拦截时return 了 true而在源代码中要求返回是一个config对象！！！！所以 把true改成 config 就行啦！！之前没注意这个东西，写return true 写习惯了 顺手就写上去了。。。...

转载 Vue的生命周期函数图示详解

原创 jQ中的attr() 和 prop() 的区别,以及底层探讨!

一..attr()和prop()的区别 1.两者都是设置属性,但是又有所不同..attr()实际上是对html元素上的属性进行设置或者获取.而prop()是对我们用js/jq获取到的DOM元素对象进行属性设置或者获取.比如:常见的表单标签:<input type='text' class='username' name='username'>以上的input标...

原创 jq的$封装实现和css()方法实现(全在代码里)

//传入window是为了: //1.减少对window的搜索过程 //2.有利于代码压缩//传入undefined是为了: //防止在ie678中,undefined可以被传入数值改变 (function (window, undefined) { var jQuery = function (sele...

原创 php保持用户登陆状态,退出登陆!

1.保持用户登陆状态,我用到的是session!需要把html文件改为php文件:当用户登陆成功的时候,把用户名存到session中,记得要在php头部写 session_start();代码如下: (php中)<?phpsession_start();//重要$userName = !empty($_POST['username']) ? trim($_POST['use...

原创 php链接mysql数据库完整登陆注册验

一.登陆注册1.登陆注册的服务器逻辑:(1)接受并校验 --- >如 if(empty($_POST['username'])) { echo '....' } 判断post方式提交过来的数组中有没有username这个属性名(2)持久化---->放到数据库中/json文件中(3)响应---->比如前端用ajax请求了数据,而想让php响应一些东西回去,用echo...

原创 数字与字符串,,,字符串与字符串之间比较大小

1.数字与字符串之间比较:1）只比较内容的值!比如:   3 < ' 24 '  返回 truejs会吧'24'转化为number类型再比较。2）如果出现这种'24sss'字符串，无法转换为number类型，就会转化为NaNNaN ： not a number 的意思，是number类型且不等于任何值。因此比较3<'24sss'就会返回false,因为无法进行比...

原创 原型是什么？原型和原型链的一些心得体会

最近在复习原型，感觉有很多要重点对待的，对面向对象的理解很有帮助。遂记。我的理解：原型的主要作用：共享数据，节省空间！一、为什么要用原型？例如：有一个构造函数  Person ：function Person（name)  {  this.name = name; this.eat= function () { console.lo...

原创 原生JS写自定义滚动条！附带完整代码+思路

一、布局思路一个大盒子-->box，左边一个div-->con中用来放content，右边一个div-->scroll里面套一个div-->bar用来写滚动条。共计4个div二、先确定bar的高度bar的高度要随着content中的内容的变化而变化。即有一个比例关系： bar的高度/scroll的高度 = box的高度/con的高度，求出bar的高度三、让...

原创 JS写淘宝京东放大镜效果！思路！附全代码+练习用图

总体思路：一、布局：首先，应有2张图片，一张小，一张大。然后设置2个div，把大小图片各放进一个div里并隐藏大的div，小图片所在的div里再设置一个div用来做遮罩层，遮罩层隐藏，布局完成.注意，大图片所在的div的宽高不能超过大图片的宽高！ 二、注册鼠标进入、移动、移出事件当鼠标进入小图所在的div时，应该显示遮罩层，显示大图所在的div，当鼠标移出的时候应该隐藏...

原创 为啥要初始化css？

因为兼容问题。不同浏览器的默认样式兼容不同，如果不初始化则可能会出现差异。用*{}选取所有会消耗性能，因此需要下载一些重置好的样式文件！重置文件下载。http://www.h-ui.net/Hui-1-cssReset.shtml...

原创 如何居中一个元素？

居中有2种居中！ 水平居中和垂直居中，分类一下！一、水平居中1.行级元素：可以在父元素设置 text-align：center。另外，行级元素不能设置margin-top/bottom但是可以设置margin-left/right。当然也可以通过text-indent来改变行级元素在水平方向的缩进但是最好还是用 text-align：center。2.块级元素：有很多种情况。（...

原创 css引入样式文件，两种方式的区别

CSS引入样式文件有2种，分别是<link>标签和@import方式，下面总结了2者的区别！区别1：<link>不止可以引用样式文件，还可以引用其他的资源，但是import只能引入样式表文件。区别2：可以通过JS操作DOM来插入<link>标签去改变样式。而对@import方式来说，由于 DOM 方法是基于文档的，因此无法使用JS操作@import去插...

原创 css定位有哪些？

定位分为：static（默认）： 这是页面元素position属性的默认值，元素将按照浏览器对网页中元素的排列规则排列。注意：此时给元素设置left，right，top，bottom是并没有任何作用的。relative（相对定位）：相对自身原来位置的定位！如果以前没有设置position或者position值为static，那么设置relative后，元素的left，right，top...

原创 盒子模型是啥？？简述一下标准盒模型、怪异盒模型的区别。

在网上查了很多关于盒子模型的资料，下面进行一个总结。。首先，盒模型一共有2种模式，分别是 符合W3C标准的‘标准盒模型’ 和 在IE下的‘怪异盒模型’。我们知道无论是哪个模型，一个盒子的    总宽度 = content(内容) + padding + border 。在html的首部，我们经常会看到一个<!Doctype html>的声明，浏览器根据这个声明来判断这个文件...

原创 iframe的缺点有哪些？

1. iframe会阻塞onload事件2.不利于seo3.会影响页面的并行加载   并行加载：  同一事件对同一域名下的请求对于第三点可以用 js 动态给iframe的src加上页面内容来消除影响。...