weixin_45766034的博客

原创 uniapp怎么实现权限登录 没有权限退出到登录页

可以使用路由拦截器来实现权限控制，当用户访问需要登录才能访问的页面时，通过拦截器检查用户的登录状态，如果没有登录或登录信息过期，则跳转到登录页。在 App.vue 中监听页面的跳转，如果用户没有登录或登录信息过期，则跳转到登录页。在登录页中可以实现登录验证，并将登录信息存储到本地存储中，以便后续的使用。在退出登录时，清空本地存储中的登录信息，并跳转到登录页。使用本地存储存储用户登录信息，如 token 等。

原创 用js模拟数据结构 栈 结构

栈 数据结构

原创 SQL的关系模型

SQL关系模型

原创 优秀程序员

1.优秀的debug能力，debug能力往往比编码本身更重要2.写代码前先画好类结构图和代码时序图，这样会让编码能力迅速进步3.定期重构代码真的是好习惯4.写文档的能力非常重要，看看Spring，hibernate，Struts等最流行的开源软件的文档就知道，他们tutorial，他们的getstarted，他们的reference文档写的多么的易懂。5.模仿造轮子是学习编码很好的方法，但熟练后就别疯狂造了6.形成自己的变量命名规则，否则取名字就耗费不少时间7.注释别怕多，就怕少8.做好封装，

原创 原型链 —— 以隐式引用作为存储方式的单向链表

原型链的表述​ 一个以隐式引用作为存储方式，以点操作符和属性访问语句作为语法糖的单向链表原型链作为一个单向链表并没有完全发挥出单向链表的特性，换句话说JS中的原型链是只用部分能力的单向链表原型对象真的没有尽头吗?当然不是的, 原型对象由浏览器自动创建, 当然也有它自己的规则规则如下:1.每个构造函数在诞生的时候, 都会创建一个该函数的实例对象作为默认原型相当于 Phone.prototype = new Phone();2.而这个原型对象的原型, 则默认指向Object.pro

原创 750px设计稿处理方式

一般设计图的宽度为750px，现在我们的目标就是将layoutviewport设置为750px；layoutviewport受到两个属性的影响，width属性我们之间设置为750，initial-scale缩放比例应该为idealviewport的宽度/750；当我们未改变meta标签属性的时候，layoutviewport的值其实就是idealviewport的值，所以可以通过document.body.clientWidth或者window.innerWidth来获取。(function () {

原创 用闭包实现重载的过程学习闭包

用闭包实现重载的过程学习闭包let global = { overLoad:function(){}};function Refactoring(func) { let oldFunc = global.overLoad; global.overLoad = function () { if (func.length === arguments.length) {//js函数length属性表示有多少个参数 return func.apply(this, arg

原创 正则表达式是匹配模式，要么匹配字符，要么匹配位置

正则表达式是匹配模式，要么匹配字符，要么匹配位置正则表达式之所以强大，是因为它能实现模糊匹配模糊匹配有两个方向上的匹配：​ 横向模糊​ 纵向模糊横向模糊一个正则可匹配的字符串的长度不是固定的正则 /ab{2,5}c/ 表示匹配这样一个字符串：第一个字符是 “a”，接下来是 2 到 5 个字符 “b”，最后是字符 “c”纵向模糊具体到某一位字符时，它可以不是某个确定的字符，可以有多种可能比如 /a[123]b/ 可以匹配如下三种字符串： “a1b”、“a2b”、“a3

原创 解决 node-gyp和node版本不兼容问题

是node版本的问题，更换node版本为最稳定的14.17.1之后就好了。nvm listnvm install 14.17.1nvm use 14.17.1copy了CSDN的文章原文链接https://blog.csdn.net/weixin_43614380/article/details/117995095此篇文章为了方便自己下次能快速解决类似问题...

原创 react-redux中的持久化数据存储redux-persist

在React项目的开发中经常会遇到，保存一些当前页面的数据，防止用户刷新导致页面出现报错或者是空白详情页的数据，是通过列表页路由跳转传过来的id，去后台拿的数据如果用户刷新当前页面，就会导致拿不到id,这个时候就会出现下面情况：这个时候需要用到redux-persist，```javascriptimport { createStore, combineReducers, applyMiddleware, compose } from 'redux'import reducers fro

原创 记录一次withRouter的实际应用场景

在项目中经常会使用到面包屑，所以想结合antDesign里面的Breadcrumb做一次封装封装后的面包屑能完成路由的跳转但是作为独立的组件Breadcrumb是拿不到路由信息的如果每次在页面组件去传递又略显麻烦所以在React-router的官网中，找到了React Router中提供的withRouter方法withRouter的作用有点类似于Redux中的connect，把要获取路由信息的组件传入with-Router，withRouter会把路由信息传递给该组件，并会返..

原创 绑定到对象上的copyWithin方法

对于在数组上使用copyWithin方法应该都很熟悉，但是绑定到对象上呢？[].copyWithin.call({length: 5, 3: 1}, 0, 3)I just began to learn JavaScript, and I have no idea how to understand the following code[].copyWithin.call({length: 5, 3: 1}, 0, 3)// {0: 1, 3: 1, length: 5}通过call方法,.

原创 [].slice.call(arguments)模拟实现 Array.of

最近在读《ES6标准入门》这本书，无意间看到下面这段代码：// Array.of()方法可以用下面的代码模拟实现。function ArrayOf(){ return [].slice.call(arguments);}不太理解这段代码的原理，于是觉得弄清楚到底是怎么做到的首先弄清楚slice方法slice() 方法返回一个新的数组对象，一个由 begin 和 end 决定的原数组的浅拷贝const animals = ['ant', 'bison', 'camel', 'duck'.

原创 React项目展示高德地图 默认为卫星地图

import styles from './index.module.less'import { PlusOutlined,EditOutlined,DeleteOutlined,SendOutlined,AppstoreOutlined,Popove} from '@ant-design/icons';import React, { useState ,useEffect } from 'react';import {Modal, Button, Form, Input,Select, messa.

原创 如何处理请求返回的二进制数据流转化成xlsx文件？

原创 git回退的四种操作

原创 常用可以下载书的网站

http://www.iread.cf/http://www.banshujiang.cn/http://www.52book.me/

原创 Git提交代码报错husky ＞ pre-commit

早上在用commit代码提交前端代码的时候出现了报错信息husky > pre-commit，于是开始查找背后的原因，最后通过阅读相关资料成功解决：报错信息定位：husky > pre-commit (node v12.13.0)进入hooks文件夹，并找到pre-commit文件，删除掉！...

原创 关于flex布局的深入学习

之前对于flex的学习比较浅层次的，工作中大多数使用display:flex;justify-content:center;align-items:center;但是遇到更高级的布局或者更灵活的布局，这些基础的flex代码已经不够用了为此决定深入学习flex布局；学习flex布局，这里我推荐一个专门学习flex布局的网站flex学习网站1.inline-flexinline-flex：将对象作为内联块级弹性伸缩盒显示2.order给3子元素块一个order:-1;此时3就排到最前

原创 怎么给vue定义全局方法

一.将方法挂载到Vue.prototype上二.利用全局混入三.使用Plugin通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成在Vue官网就教会我们自定义插件的方法：四.写全局函数: ...

原创 如何修改elementUI里面Dialog组件标题的样式

项目的需求是将箭头处的标题设计成UI稿上的样式！然后我发现，代码是这样的，于是去elementUI源码一探究竟：源码实际上是在这一块做了一个 具名插槽然后将我们在父组件中将标题传进来就可以了；那我们在父组件的时候，不传值进来；从父组件中传一个template替换掉这个具名插槽就这样，我们完成了我们想要的效果！...

原创 ES6中解构赋值深入解读

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构let [head, ...tail] = [1, 2, 3, 4];head // 1tail // [2, 3, 4]let [x, y, ...z] = ['a'];x // "a"y // undefinedz // []不完全解构let [x, y] = [1, 2, 3];x // 1y // 2let [a, [b], d] = [1, [2, 3], 4];a // 1b // 2

原创 vue项目的一些需要注意到的细节

1.key的设置在vue中，是不建议我们使用index作为key的，假设现在我们在100个元素的对象中间添加一个属性，此时插入位置后面所有的元素的index都需要加1，vue是只要检测到key发生改变就对该Element进行重新渲染，但是如果我们使用id作为key,无论怎么对数据进行增删改都不会影响其他元素的key,那么就不需要进行多余的重新渲染。key的主要作用在于：虚拟DOM算法时候，在新旧node对比时能够快速定位到相同节点。在某些情况下，vue也可以不使用key,这种就地复用的策略在普通列

原创 谷歌控制面板中的NetWrok

瀑布图颜色说明：1. 深绿色 ：浏览器和服务器进行通信之前, 必须经过 DNS 查询, 将域名转换成 IP 地址2. 橙色 ：在浏览器发送请求之前, 必须建立 TCP 连接3. 紫色 ：如果页面是通过 SSL/TLS 这类安全协议加载资源, 这段时间就是浏览器建立安全连接的过程.4. 绿色 ：浏览器请求发送到服务器的时间 + 服务器处理请求时间 + 响应报文的第一字节到达浏览器的时间. 我们用这个指标来判断你的 web 服务器是否性能不够, 或者说你是否需要使用 CDN5. 蓝色 ：浏.

原创 微任务与宏任务与eventloop

首先我们需要了解一个概念，在promise执行之前是同步任务，再.then和.catch之后变成微任务执行完同步任务之后，优先执行微任务执行顺序是：同步任务 ==> 微任务 ==>宏任务js是单线程的语言，不会同时执行两行代码，当我们出现alert弹窗时，是无法执行下面的console.info的setTimeout(_ => console.log(4))new Promise(resolve => { resolve() console.log(1)

原创 谈谈我对js中闭包的理解

闭包是一个能够访问其他函数作用域的函数。很显然这样的定义晦涩难懂，很多人都很难理解闭包的真正含义那么我们就用通俗一点的语言来解析一下什么是闭包我在知乎上看到一个比较有意思的回答：由此我们可以通俗的理解为：函数A的内部函数B,被函数A外部的一个变量引用时，就会形成一个闭包。我们最常用到闭包的情况就是函数封装展示一下我在实际项目中遇到闭包的应用场景：我们需要调用这个getFeedbackList方法的时候，只需要formFeedbackServics.getFeedbackList()就

原创 vue检测不到data里数组里面元素的变化

当前遇到的问题是： 当我们改变data中数组里面是某一个元素，视图不进行更新带着解决这个问题，我们首先来到了vue官方文档：当使用上面的方法对数组进行操作的时候，就会触发视图更新但是现在问题假如我们并不是用这些方法对数组进行操作例如： data(){ return{ arr:[1,2,3] } } ... this.arr[0] = 10那么我们就要深入vue的响应式原理了当我们在data选项中添加一些对象时2我们可以观察到 vue 将对象里的每

原创 关于前后端交互的一些基础知识点

1.如何中断ajax请求？设置超时时间让ajax自动断开手动停止ajax请求，其核心是调用XML对象的abort方法，ajax.abort()2、axios的特点有哪些？一、Axios 是一个基于 promise 的 HTTP 库，支持promise所有的API二、它可以拦截请求和响应三、它可以转换请求数据和响应数据，并对响应回来的内容自动转换成 JSON类型的数据四、安全性更高，客户端支持防御 XSRF3、axios相关配置属性？url是用于请求的服务器URLmethod是创建请

原创 关于css的基础知识点

1. calc, support, media各自的含义及用法？@support主要是用于检测浏览器是否支持CSS的某个属性，其实就是条件判断，如果支持某个属性，你可以写一套样式，如果不支持某 个属性，你也可以提供另外一套样式作为替补。calc() 函数用于动态计算长度值。 calc()函数支持 “+”, “-”, “*”, “/” 运算；@media 查询，你可以针对不同的媒体类型定义不同的样式。2. css水平、垂直居中的写法，请至少写出4种？水平居中行内元素: text-align:

原创 vue-cli 相同页面的跳转，但路由参数不同的情况下 组件状态没有更新的问题是为什么 如何解决

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成因为是单页面应用所以每次跳转都是在切换不同的组件例如从http://localhost:8088/#/config/form/201012163856507导航到http://localhost:8088/#/config/form/201009174224173可能会发生页面内容不刷新 依旧停留在地址1的内容那这是为什么呢？这两个地址都是用同一个组件，也就是这两个路由都在使用这一个组件，但是组件

原创 利用geogle中memory工具分析js占用内存

1.首先在需要找到相应的函数，在要测试的函数执行前和执行后添加两个断点。2.执行到 函数执行前 的断点上3.选中Heap snapshot 再点击小灰点4.按F8触发下一个断点 再回到memory再点击一次小灰点5.此时出现两个Snapshot6.选中对比两次内存情况shallow Size代表栈存储情况，retained Size代表堆存储情况...

原创 前端优化中使用base64的优缺点

优点（1）base64格式的图片是文本格式，占用内存小，转换后的大小比例大概为1/3，降低了资源服务器的消耗；（2）网页中使用base64格式的图片时，不用再请求服务器调用图片资源，减少了服务器访问次数。缺点（1）base64格式的文本内容较多，存储在数据库中增大了数据库服务器的压力；（2）网页加载图片虽然不用访问服务器了，但因为base64格式的内容太多，所以加载网页的速度会降低，可能会影响用户的体验。（3）base64无法缓存，要缓存只能缓存包含base64的文件，比如js或者css，这比直

原创 回流Reflow和重绘Repaint

在了解回流和重绘之前，我们先来了解一下浏览器是如何进行解析的我将它归纳为四个步骤：解析html(或者是js通过createElement)生成DOM树解析css，绘制上面是DOM树（注意！此时还未挂载到浏览器上）将DOM树挂载在浏览器上，计算各个DOM具体点的坐标，以及布局和大小（回流）在浏览器上绘制已经生成的DOM树（重绘）回流的成本比重绘的成本高很多很多！！！ 一个节点的重流，可能会导致子节点或者父节点以及同级节点的重流 如果电脑低的话 会造成卡顿和更耗电那说到现在，我们该

原创 awesome字体图标库

1.进入官网进行下载2.真实项目中的目录font-awesome.css是全局导入的去网站挑选自己需要的图标,本地 即可

原创 解决pc端浏览器不兼容的问题

1.对于浏览器之间存在的默认样式差距<link href="https://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet">2.解决ie9以下浏览器对于新增标签不识别的问题<!--[if lt IE 9]> <script type="text/javascript" src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.m

原创 输出倒逼输入 加速自己成长

最近通过写技术博客的方式提升了不少自己对于工作的兴趣，这种输出性的快乐远大于自己刷抖音看视频那种输入型快乐，这种喜悦是由内向外的，通过自身的行为而产生快感，感受到自身得到表达而平静喜乐，这种喜悦是自发的，无需外在之物，内心通透地感到平和，因自己参与行为本身而感到开心。演员胡歌说过：‘创造型快乐’才会让自己持续成长。所有的输出能力必须建立在大量输入的前提之下，为了写好一篇博客，我必须要翻阅很多类似主题的博客，取百家之长，而且更加明确自己输入的选择。很多时候我们看过很多博客或文档，观看的时候

原创 什么是情怀？

很多人都在聊情怀？知乎有条回答是:‘生存之外的追求，就是情怀’每个人心中都有一个诗意的世界无论当前的处境多么不堪 多么绝望而那些让我们继续坚持下去的理由似乎就有情怀那些看似愚蠢的执拗，傻瓜一样的坚持，在别人看来似乎很可笑 而对自己来说 确是神圣不可侵犯的信仰...

原创 我在使用chrome经常使用的一些技巧

1.在开发者工具打开的情况下，长按左上角的刷新按钮，会出现多种加载选项。2.格式化Sourses里面的代码3.快捷键Ctrl+T：打开新的标签页Ctrl+N：打开新的窗口Ctrl+Shift+N：打开新的无痕窗口Ctrl+W：关闭当前标签页Ctrl+Shift+T：恢复之前关闭的标签页（可连续恢复）空格键：向下滚动一个完整的页面Shift+空格键：向上滚动一个完整的页面Alt+D或Ctrl+L：让地址栏获取焦点Ctrl+D：为当前网页添加书签 Ctrl+H：查看历史记录...

原创 git常见命令 的区分

git fetch & git pull区分git fetch是将远程主机的最新内容拉到本地，用户在检查了以后决定是否合并到工作本机分支中。git pull 则是将远程主机的最新内容拉下来后直接合并，即：git pull = git fetch + git merge，这样可能会产生冲突，需要手动解决。...

原创 Vuex State模块化

当应用非常复杂的时候，store对象就会变得非常臃肿。为了解决上面的问题，我们将store分成模块文件目录如下方案一：方案二：状态管理中 state 就相当于 vue中 data属性， getters就相当于vue中的computed属性， mutations,actions就相当于vue中的方法gettergettetr被认为 是计算属性 返回值会作为依赖缓存起来 只有当依赖发生变化时才会重新计算mutationaction模块化import Vue from "vu