- 博客(45)
- 收藏
- 关注
RSS订阅原创 使用highlight 插件高亮 代码片段
1. 下包npm i highlight.js2.页面中引入import hljs from 'highlight.js'import 'highlight.js/styles/vs2015.css'3. 使用原理对 pre > code 的代码加样式useEffect(() => { // 配置 highlight.js hljs.configure({ // 忽略未经转义的 HTML 字符 ignoreUnescapedHTML: tr
2021-12-10 21:05:27
541
原创 React 封装搜索关键字高亮函数
1.要匹配的内容 2.关键字// 自封装高亮函数 const highlight = (str: string, key: string) => { return str.replace( new RegExp(key, 'ig'), (match) => `<span>${match}</span>` ) }2. 调用<div className="result-value text-ove.
2021-12-09 14:17:09
690
原创 怎么实现无感刷新
// 401处理 if (err.response.status === 401) { const { refresh_token } = getToken() // 没有refresh-token 清空本地缓存并强制跳转到login if (!refresh_token) { store.dispatch(onlogout()) history.replace('/login', { from: history.locatio..
2021-12-08 09:51:44
202
原创 React中怎么模拟路由守卫
1.自定义一个路由组件// childern 就是AuthRoute标签体里面的组件, rest就是身上的属性export default function AuthRoute ({ children, ...rest }: RouteProps) { return ( <Route {...rest} render={(props) => { // props自动传入,包含路由信息 console.log(props.
2021-12-05 20:53:13
639
原创 React项目中实现websocket
问题如何让服务器主动给客户端发请求？HTTP协议(ajax)的缺陷WebSocket 是一种数据通信协议，类似于我们常见的 http 协议。初次接触 WebSocket 的人，都会问同样的问题：我们已经有了 HTTP 协议，为什么还需要另一个协议？它能带来什么好处？答案很简单，因为 HTTP 协议有一个缺陷：通信只能由客户端发起。http基于请求响应实现。举例来说，我们想了解今天的天气，只能是客户端向服务器发出请求，服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。
2021-12-05 20:44:52
5817
原创 React 怎么在非组件环境用编程式导航
1.创建history对象并导出import { createBrowserHistory } from 'history'const history = createBrowserHistory()export default history2.在路由身上挂载以前导入的browserRouter 或者 hashRouter, 就改为Router然后再需要的地方导入history, 就可以正常使用了...
2021-12-05 14:06:11
580
原创 React组件基础
了解 React 组件的两种创建方式 使用 JS 中的函数创建组件 使用 JS 中的 class 创建组件 函数组件:// 定义一个函数式组件const Com1 = () => { return <div>第一个函数式组件</div>}类组件:// 定义一个类组件class Com2 extends React.Component { render () { return <div>第一个类组件</d
2021-11-28 21:31:48
316
原创 Vue3的改变
1.生态与优势 社区生态 - 逐步完善 整体优化 - 性能优化/TS支持优化/组合式API加持 市场使用 - 部分技术选型激进的公司已经在生产环境使用了vue3 整体优化 性能提升 首次渲染更快 diff算法更快 内存占用更少 打包体积更小 更好的Typescript支持 Composition API （重点） 目前还未火起来 ------------------.
2021-11-28 20:27:53
2270
原创 TypeScript 进阶
枚举类型enum，枚举。它用来描述一个值，该值只能是 一组命名常量 中的一个没有type之前，用枚举比较多，现在用的少了。枚举的功能类似于字面量类型+联合类型组合的功能，也可以表示一组明确的可选值// 定义枚举类型enum Direction { Up, Down, Left, Right }// 使用枚举类型function changeDirection(direction: Direction) { console.log(direction)}// 调用函数时，需要.
2021-11-25 19:54:06
393
原创 TypeScript快速入门
1.什么是TypeScript?就是js的超集,完全包含js, js有的它都有,并且额外的增加了：类型系统2.为什么添加类型系统?(1)JavaScript 属于动态类型的编程语言边解释边执行，错误只能在运行阶段才能发现比如下面这种代码:let ar = 11 // 这里是数值ar = [] // 偷偷的改成了数组类型arr.toFixed(2) // 这里会报类型错误无疑增加了找 Bug、改 Bug 的时间，严重影响开发效率(2)TS属于静态类型的编程语言它.
2021-11-24 19:54:21
616
原创 React脚手架-从零开始
创建方式11.安装脚手架npm i -g create-react-app2.用脚手架创建项目create-react-app your-project-name创建方式2直接使用npx来创建项目npx create-react-app your-project-name解释： npx create-react-app 是固定命令，create-react-app 是 React 脚手架的名称 your-project-name 表示项目名称，可以修改
2021-11-22 19:49:01
768
原创 第二个hooks: useEffect
首先理解什么是副作用 : 主作用：就是根据数据（state/props）渲染 UI 副作用：数据（Ajax）请求、手动修改 DOM、开启定时器，清空定时器，添加事件监听，删除事件, localStorage 操作等 一句话概括: 对于react 组件来说,除了渲染ui之外的其他操作.都可以称为副作用-------------------------------------执行时机页面渲染完成之后，执行Effect；来写个小案例测试一下1.导入import React
2021-11-19 12:55:36
786
原创 如何让vscode识别@路径
像上图一样,用@代表一个绝对路径,很简单,几步搞定步骤:1.在项目根目录创建jsconfig.json文件2.配置如下{ "compilerOptions": { "baseUrl": "./", "paths": { "@/*": ["src/*"] } } }光这样还不够,得让脚手架工具识别@, 使用第三方包来完成步骤:1.npm i -D @craco/craco2.在项目根目录下，创建配置...
2021-11-17 19:52:59
292
原创 React 项目中如何配置ESlint
直接上步骤1. npm i eslint typescript -D2.在项目根目录，运行npx eslint --init 按下图来选择, 最后还有一项是安装插件选yes安装完插件后自动生成 eslinttrc.js 配置文件3.设置底部状态栏4.引入prettier Now 插件 因为eslint 不能 深入 jsx去格式化, 直接在vscode扩展商店中下载 然后点击左下角设置,选工作区,右上角json设置-----如下图把下面这段全部复制...
2021-11-15 20:18:53
874
原创 React组件通讯之父传子
三种方式 父子组件之间 兄弟组件之间 跨组件层级 1.props的基本使用步骤1.在子组件身上自定义属性2.子组件通过props接收上图中state中定义了一个列表数据,并传给子组件,现在去子组件接受子组件接受,解构,打印输出就这么EZ-------------------------------------props的三个注意事项1.可以传递任意数据数字， 字符串， 布尔类型， 数组， 对象， 函数， jsx...
2021-11-13 14:47:06
793
原创 第一个hooks: useState
Hooks 是什么 Hooks：钩子、钓钩、钩住。 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。有了hooks 我们说的函数组件就有状态和生命周期了注:Hooks只能在函数组件中使用函数式组件的好处 函数本身比较简单，更好的胜任根据状态来渲染UI这件事 hooks让函数组件内部有了维护状态的能力 h..
2021-11-11 23:04:00
784
原创 Vue中怎么定义过滤器
一.定义方式全局注册与局部注册全局:Vue.filter('xxx',function(){ return xxx })局部注册:就跟定义methods一样 methods: { getFmtTime(){ return xxx } }, //局部过滤器 filters:{ timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){ // consol
2021-11-07 16:56:37
177
原创 Vue 中 watch methods computed的区别
watch : 监听属性methods: 方法computed: 计算属性一、共同点都可以对data里的数据进行加工再输出
2021-11-07 11:09:50
90
原创 Vue中 与keep-alive有关的生命周期
1.组件缓存 在开发Vue项目的时候，大部分组件是没必要多次渲染的，所以Vue提供了一个内置组件keep-alive来缓存组件内部状态，避免重新渲染， 如果没有缓存，每点击一次导航，内容区就会创建一个组件，该组件会经历整个生命周期，每点击一次，就会创建一个组件，比较浪费性能 在被keep-alive包含的组件/路由中，会多出两个生命周期的钩子：activated与deactivated。---------------------------------------...
2021-11-06 22:17:02
3279
原创 Vue项目组件命名规范
一、定义组件名注册组件命名时: 要么单词首字母都大写(大驼峰),要么都小写用短横线连接二、单文件组件命名拆分单文件组件命名时:要么单词首字母都大写(大驼峰),要么都小写用短横线连接三、基础组件命名应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如Base、App或V。像button icon 这类的四、单例组件名只应该拥有单个活跃实例的组件应该以The前缀命名，以示其唯一性。...
2021-11-06 21:48:18
16073
转载 你会用ES6，那倒是用啊
ps：ES5之后的JS语法统称ES6！！！一、关于取值的吐槽取值在程序中非常常见，比如从对象obj中取值。const obj = { a:1, b:2, c:3, d:4, e:5,}复制代码吐槽：const a = obj.a;const b = obj.b;const c = obj.c;const d = obj.d;const e = obj.e;复制代码或者const f = obj.a + obj.d;co
2021-11-06 21:02:19
206
1
原创 object.defineproperty 和 proxy 的区别
什么是ProxyProxy是ES6推出的一个类，给对象架设一层拦截器，但凡要访问或者修改这个对象上的值或者属性，都必须先经过这层拦截器, Proxy也叫代理器, 它代理了对对象的操作什么是Object.definePropertyObject.defineProperty是对对象上的属性进行新增或者修改Proxy的优势如下Proxy可以直接监听整个对象而非属性。 var needProxyObj = {name: 'chrome', age:'800'}var proxyO
2021-11-05 22:33:23
219
原创 如何实现毛玻璃效果
设计的初衷：1. 简洁清爽2. 重点突要实现封面那样的磨砂玻璃的效果很简单,给元素加上 backdrop-filter,来测试一下示例代码 :效果如下:backdrop-filter 与 filter 的对比兼容性:...
2021-11-05 18:56:37
139
原创 项目打包的一些优化
1.双击打开index.html打包之后，会得到dist目录，如果希望可以双击打开index.html，则需要提前在vue.config.js中配置{ publicPath: './'}2.路由懒加载{ path: '/login', component: () => import('@/views/login/index'), hidden: true },懒加载的意思是：只有在路由进入这个页面时，才去加载这个组件对应的资源。懒加载的魔
2021-11-02 18:33:16
165
原创 全屏功能实现
浏览器中自带的全屏功能document.documentElement.webkitRequestFullScreen()会有兼容性问题,所以改用插件1.下包导入npm i screenfull--------------------------import screenfull from 'screenfull'2.绑定事件执行回调例:<svg-icon icon-class="fullscreen" class="fullscreen"+ ...
2021-10-28 21:52:07
976
原创 Vue项目国际化多语言
1.安装国际化的包npm i [email protected].多语言配置 这里拿element-ui 的语言包举例1.导入文件与插件包并全局注册2.创建i18n实例并配置// 进行多语言支持配置import Vue from 'vue' // 引入Vueimport VueI18n from 'vue-i18n' // 引入国际化的插件包import locale from 'element-ui/lib/locale'import elementEN from ..
2021-10-28 21:09:51
394
原创 关于Vue router可能会出现的bug
1.对于addRouter添加的路由 在刷新时,可能白屏解决方案:if (xxxxxxxxxx) { // 省略其他... // 解决刷新出现的白屏bug next({ ...to, // next({ ...to })的目的,是保证路由添加完了再进入页面 (可以理解为重进一次) replace: true // 重进一次, 不保留重复历史 })} else { next()}2.发现菜单异常(控制台提示重复路由)原因:.
2021-10-27 20:21:10
458
1
原创 闭包的概念
要想了解闭包,就得先了解变量的作用域,无非两种: 全局变量与 局部变量. 1.都知道函数内部可以访问到全局变量. var n = 777 function f1 () { console.log(n); } f1() // 777 2.但外部却不能访问到函数内部 function f1 () { var n = 777 } console.log(n); // n is not defined...
2021-10-25 11:45:39
47
原创 分分钟 理解防抖和节流
ES6 Promise 是个什么玩意？复杂的概念先不讲，我们先简单粗暴地把Promise用一下，有个直观感受。那么第一个问题来了，Promise是什么玩意呢？是一个类？对象？数组？函数？
2021-10-23 21:04:55
195
1
原创 秒懂 深拷贝与浅拷贝
一句话概括: 浅拷贝: 假设B复制了A,当修改B里面的值时,A也改变了 那就是浅拷贝 深拷贝: 与上面相反,A的值没有改变那就是深拷贝举个例子:明明复制了一份 但看到原来那个也跟着变了------------------------------------------------------------------------------这里就要引出 基本数据类型 与 复杂数据类型 的概念了.基本类型: Number Strin...
2021-10-21 21:02:26
65
原创 表格翻页序号累加
1.首先在el-table-column 中添加两个属性如果不考虑累加只写 type="index"就行2. 在methods里给index绑定一个方法公式(当前页 - 1) * 每页数据条数 + index + 1
2021-10-20 20:53:16
288
原创 数组转为树形结构
<script>/*** 把平铺的数组结构转成树形结构*/const arr = [ { 'id': '29', 'pid': '', 'name': '总裁办' }, { 'id': '2c', 'pid': '', 'name': '财务部' }, { 'id': '2d', 'pid': '2c', 'name': '财务核算部'}, { 'id': '2f', 'pid': '2c', 'name': '薪资管理部'}, { 'id': ..
2021-10-20 14:51:04
3122
原创 计算数组中元素出现次数
1.reduce()let arr = [1,3,4,5,1,3,4,1,3,5] const newArr = arr.reduce((obj,item) => { obj[item] ? obj[item]++ : obj[item] = 1 return obj },{}) console.log(newArr);2.forEach()let newArr = {}
2021-10-19 20:11:10
295
原创 svg-icon 简单使用
1.components文件下新建SvgIcon组件index.vue中代码如下<template> <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" /> <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners"> .
2021-10-19 20:03:05
660
原创 vue-cli中集成的跨域解决方案
思路:在前端服务和后端接口服务之间 架设一个中间代理服务，它的地址保持和前端服务一致，那么：1.代理服务和前端服务之间由于协议域名端口三者统一不存在跨域问题，可以直接发送请求2.代理服务和后端服务之间由于并不经过浏览器没有同源策略的限制，可以直接发送请求 这样，我们就可以通过中间这台服务器做接口转发，在开发环境下解决跨域问题，看起来好像挺复杂，其实vue-cli已经为我们内置了该技术，我们只需要按照要求配置一下即可。例:module.exports = { devS...
2021-10-18 18:42:27
165
1
原创 Vue中 $router $route 的区别
1. $routerrouter为VueRouter的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象。跳转方法，钩子函数等2.$route$route相当于路由跳转对象,可以获取各种信息,path,name等3.配置路由时的 '/' 加了这个 就会被当做根路径 就不会与之前的嵌套下去官网有仔细写...
2021-10-17 17:54:40
330
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人