- 博客(72)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 关于解决token过期失效问题
关于解决token过期失效问题，用户对token无感知（实现免登陆）一、先认识下token二、整体思路三、实现步骤1.理清各个文件作用2.路由导航守卫3.封装localStorage方法4.vuex5.封装axios 实现请求拦截器和响应拦截器（重点部分）四、小结一、先认识下token二、整体思路三、实现步骤1.理清各个文件作用2.路由导航守卫设置用户有无token访问主页，并且登录成功回到目标页import Vue from 'vue'import VueRouter from 'v
2020-06-15 21:38:56
38109
8
原创 实现人物关系图还在用Echarts吗？快试试relation-graph
relation-graph使用支持Vue和React的 关联关系图谱组件，可以展示如组织机构图谱、股权架构图谱、集团关系图谱等知识图谱，可提供多种图谱布局，包括树状布局、中心布局、力学布局自动布局等。支持Vue和React的 关联关系图谱组件，可以展示如组织机构图谱、股权架构图谱、集团关系图谱等知识图谱，可提供多种图谱布局，包括树状布局、中心布局、力学布局自动布局等。
2023-08-29 15:06:14
560
原创 vue3时代别再写mixin，快来试试hooks
mixin是一种思想，一种混入的思想。混入的内容就是可以在被混入的地方使用，他会自动的将混入的东西准确的分配到指定的组件中。在vue中，mixin相当于指定混入的变量&函数放入他不混入时候该放的地方。可以认为，vue中的mixin就是相当于组件中的组件。举例：表单弹框业务，属于很常见的业务场景，新增打开弹框，表单校验，编辑打开弹框进行数据回显等import {// 补充setFormValues 代码如下 /** 表单对象的赋值操作})export{});
2023-05-31 15:01:12
1482
原创 vue插槽使用总结
插槽就是子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。
2023-05-29 09:24:13
705
原创 前端中间件Midway的使用
Midway 框架是在内部已经使用使用 5 年以上的 Node.js 框架，有着长期投入和持续维护的团队做后盾，已经在每年的大促场景经过考验，稳定性无须担心，并且有着丰富的组件和扩展能力，例如数据库，缓存，定时任务，进程模型，部署以及 Web，Socket 甚至 Serverless 等新场景的支持。一体化调用方案可以方便快捷和前端页面协同开发和良好的 TypeScript 定义支持。所以在项目中应用Midway, 能够为应用提供更优雅的架构。
2023-05-26 21:35:57
2195
3
原创 前端项目性能优化合集
因为css简写把所有值初始化为initial，尽量不使用属性简写可以最小化重绘(repaint)和回流(reflow)，（实际工作中，由于css简写带来的性能影响微乎其微，再加上css全都展开写还会增加code size，另外css简写还能解决一些样式覆盖的问题）Ajax在发送的数据成功后，为了提高页面的响应速度和用户体验，会把请求的URL和返回的响应结果保存在缓存内，当下一次调用Ajax发送相同的请求（URL和参数完全相同）时，它就会直接从缓存中拿数据。而性能优化的第一定律就是：优先考虑使用缓存。
2023-05-23 18:39:02
708
原创 vue3.2 setup模式下代码语法糖相关书写
vue3.2以上版本 在书写逻辑时跟vue3有些不同script setup语法<script setup lang="ts">// 书写相关逻辑</script>这样就不用像vue3时写下面代码setup() { return { // }}props相关应用若props的值只在相关页面DOM应用defineProps<{ h: string;}>();若props的值需要在逻辑里面进行处理，比如监听，计算等，则需要进
2022-07-15 09:52:54
228
原创 windows系统切换node版本
利用工具Nvm首先下载nvm下载地址：https://github.com/coreybutler/nvm-windows/releases或者 https://download.csdn.net/download/xiaofiy/85235297下载安装过程建议傻瓜式安装，直接安装到c盘使用nvm install 14/ nvm install 16 安装14版本和16版本的node（默认会安装最新最稳定版本），完成之后用nvm ls列出所有可管理的node版本，如下图：如果安装
2022-04-28 11:15:22
4058
1
原创 vscode让代码敲出火焰
第一步：下载插件：Power Mode第二步：配置settings.josn文件位置：{ "explorer.confirmDelete": false, "powermode.enabled": true, //启动 "powermode.presets": "flames", // 火花效果 "powermode.enableShake": true, // 去除代码抖动 "powermode.shake.enabled": false, "po
2022-04-25 09:48:08
2565
原创 TypeScript--笔记三（类、继承、泛型、命名空间、装饰器）
一、类定义类包含两个部分 属性 和 方法1.模板：2.直接定义的属性是实例属性，需要通过对象实例去访问 方法同理3.使用static关键字可以定义类属性（静态类）,可以直接通过类访问 方法同理4. readonly开头的属性表示一个只读的属性无法修改5.构造函数6.Super 关键字7.抽象类二、继承三、泛型四、命名空间五、装饰器1.类装饰器2. 属性装饰器3. 方法装饰器4. 参数装饰器一、类定义类包含两个部分 属性 和 方法1.模板：class 类名 { // 定义属性 属性名: 类型.
2022-02-12 09:32:13
952
原创 安装nodejs n版本模块报错
使用npm install -g n报错如下图解决：在命令后面加上 --force 重新运行就行了npm install -g n --force
2022-01-25 13:33:12
928
原创 react路由
路由1.什么是路由2.准备工作3.路由模式BrowserRouter与HashRouter的区别4.简单实现路由5.路由组件6.NavLink与封装NavLinkNavLink为什么要封装NavLink封装NavLink7.Switch的使用8.路由的严格匹配与模糊匹配9.路由重定向Redirect的使用10.嵌套路由 （二级以上路由）11.路由组件传递参数12.路由跳转模式13.编程式路由导航14.withRouter15.路由懒加载1.什么是路由根据不同的地址，web服务器处理不同的业务以及逻辑。
2021-10-20 18:47:30
144
原创 react中Hooks
React Hook/Hooks是什么？常见的Hook1. state Hook2. Effect Hook3. Ref Hook4. Context HookReact Hook/Hooks是什么？1 Hook是react 16.8版本增加的新特性/新语法2 因为函数式组件没有this,使用hooks可以让函数式组件使用 state 以及其他的react 特性（比如生命周期钩子）常见的Hook(1) state Hook：React.useState()(2) Effect Hook: Re.
2021-10-19 16:36:31
478
原创 Redux数据集中管理
Redux数据集中管理一、滤清关系二、react原理图大白话讲解原理图：三、搭建步骤store.js中所要做的事：action中所要做的事：reducers中所要做的事：具体组件中使用项目根文件index.js 文件中所要做的事：一、滤清关系React ： 前端语言框架Redux ：状态集中管理的架构React-Redux：React 专用进行状态集中管理的库首先Redux 跟React 没有关系，他俩是两个不同公司的产物，当然Vue中也可以使用redux,但是大家都习惯在vue项目中用vuex来
2021-09-30 11:27:47
230
原创 React组件通信归纳
React组件通信1.父子组件通信1.1父传子 采用props的格式1.2 子传父2.兄弟组件通信3.祖孙组件传值总结 搭配方式1.父子组件通信1.1父传子 采用props的格式 父组件 中export default class Father extends Component { //数据状态 state = {todos:[ {id:'001',name:'吃饭',done:true}, {id:'002',name:'睡觉',done:true} ]} render()
2021-09-23 20:28:20
163
原创 React组件三大核心属性state、props、refs
一、state1.state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)2.组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)3.注意3.1.组件中render方法中的this为组件实例对象3.2.组件自定义的方法中this为undefined，如何解决？a)强制绑定this: 通过函数对象的bind()b)箭头函数3.3.状态数据，不能直接修改或更新// 定义初始状态state = {count:0,isHot:false
2021-09-03 10:59:22
278
原创 React中jsx语法规则
1.定义虚拟DOM不要写引号，因为不是字符串const VDOM1 = <h1>Hello,React</h1>const VDOM2 = ( /* 此处一定不要写引号，因为不是字符串 */ <h1 id="title"> <span>Hello,React</span> </h1>)2.标签中混入JS表达式时要用{}const data = ['Angular','React','Vue']const VDO
2021-09-01 15:02:33
125
原创 浅谈闭包
Javascript闭包闭包概念闭包的作用闭包的影响体验闭包闭包会造成内存泄露吗？闭包概念用阮大师的话说：闭包就是能够读取其他函数内部变量的函数。闭包的作用1. 可以读取函数内部的变量2. 让这些变量的值始终保持在内存中闭包的影响1.由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。2.闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对
2021-05-28 17:28:26
103
原创 TypeScript--笔记二（Map对象、联合类型、接口）
TypeScriptMap 对象创建Map对象及初始化Map 相关的函数与属性联合类型声明式 联合类型函数参数使用 联合类型联合类型数组接口示例联合类型和接口接口和数组接口继承Map 对象创建Map对象及初始化TypeScript 使用 Map 类型和 new 关键字来创建 Map：let myMap = new Map();初始化 Map，可以以数组的格式来传入键值对：let myMap = new Map([ ["key1", "value1"], ["key2", "valu
2021-05-27 14:57:20
4965
原创 this指向问题以及如何改变this指向方法
一、this指向问题二、改变this指向方法一、this指向问题先了解this分别在不同情况都指向谁，一般情况下this的最终指向的是哪个调用它的对象（通俗讲就是 谁调用指向谁），二般情况分具体看待，以下分情况谈谈。1. 全局作用域或者普通函数中this指向全局对象window ,如果一个函数中有this，但是它没有被上一级的对象所调用，那么this指向的就是window（注意定时器里面的this指向window）案例一、function Hello(){ var user = "你好".
2021-05-08 20:30:07
750
3
原创 npm切换镜像源
npm镜像npm i xxxx时，它默认会去npm官网上下载，它会很慢。可以去它的"分店"(镜像)去下载，在国内比较常用是淘宝的镜像。命令# 如果安装比较慢，可以切换成淘宝镜像。npm config set registry https://registry.npm.taobao.org有一个工具 nrm 可以自由去切换，而不需要去记上边的长长的地址nrm安装全局安装npm i nrm -g使用nrm ls如果nrm不能运行，看下面链接（引用他人）：解决问题链接引用地址：h
2021-04-15 17:01:34
439
2
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人