- 博客(70)
- 收藏
- 关注
RSS订阅原创 看完一本小书
1. 凡是在一个网页上能看到的东西，比如HTML，图片，脚本，视频，PDF文件，所有这些可以用一个URL地址定位的东西，都具有特定的MIME类型——在content-type头信息中指明。2. HTML5本地存储允许网站把信息存储到本地的计算机上，以便在以后需要时获取。这个概念和cookie相似，但它是为了更大容量的存储设计的。cookie的大小是受限的，并且每次请求一个新页面时，cookie信息都会被发送回服务器，不仅耗费额外的时间，而且占用宝贵的带宽。而HTML5本地存储将信息存储在用户计算机上，网
2022-04-24 13:06:05
310
原创 闭关修炼之git会这些就够用了
简单的前言：生病赋闲在家，无事写点东西。git是什么？git：分布式版本控制那么版本控制有什么作用呢？作用大致有以下几种：将项目中某个文件恢复到之前任意版本将整个项目恢复到之前任意版本比较各个版本之间差异查看最近出现的bug是谁提交代码导致git日常使用初始化git init [项目名] -->创建一个新的本地代码库git config --global user.name “your name” -->设置你的名字，将会被加到commit和t.
2022-02-28 15:01:47
417
原创 闭关修炼JS之数据可视化
简单的前言：生病赋闲在家，无事写点东西。数据可视化常用解决方案最常用的自然是Echarts不过实际开发中，移动端可能更多的是用F2熟练之后，还可以尝试玩一下d3.jsEcharts的基本使用echarts使用五部曲：下载并引入echarts.js文件------图表依赖这个js库准备一个具备大小的DOM容器------生成的图表会放入这个容器内初始化echarts实例对象------实例化echarts对象指定配置项和数据------根据具体需求修改配置选项将配置项设置给ec.
2022-02-24 16:45:35
1155
原创 JavaScript 进阶小细节-2
1. 构造函数返回属性时，属性的值为？ function Car(){ this.mark = "L" return {mark: "M"} } const myCar = new Car() console.log(myCar.mark); // M返回属性的时候，属性的值等于返回的值，而不是构造函数中设定的值。2. 修改引入的模块会怎样？// counter.js
2022-01-13 17:05:10
749
1
原创 JavaScript 进阶小细节-1
1. 定时器的返回值是什么？const timer1 = setTimeout(() => { console.log('hi'); }, 0);const timer2 = setTimeout(() => { console.log('hello'); }, 1000); const timer3 = setTimeout(() => { console.log('hey');
2022-01-12 14:21:15
507
原创 如何理解闭包
摘要本文介绍了闭包的定义，作用，及常见的理解中的误区，并没有引入其他的专业词汇。定义闭包对应的英文是closure，下边的定义是来自MDN。A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access
2021-12-05 19:38:41
731
原创 你不能不知道的mock
mock功能-了解mock的作用及使用场景目标了解mock的作用及使用场景；mock使用场景mock：假的前端程序员提到的mock数据的含义是：真的假数据真的：符合接口规范要求的。假数据：数据是人为创建出来的，不是真正的业务数据。什么时候需要mock后端接口的开发速度跟不上前端的进度， 而前端要实现业务还必须依赖数据，前端为了保证开发进度就需要自己mock数据 ，保证业务能正常开发mock的实现方式本地启mock服务器：自己用express写接口本地用专门的mock服
2021-12-02 15:36:12
453
原创 vue3快速入门
1. Vue3的生态和优势社区生态 - 逐步完善整体优化 - 性能优化/TS支持优化/组合式API加持市场使用 - 部分技术选型激进的公司已经在生产环境使用了vue3社区生态组件（插件）名称官方地址简介ant-design-vuehttps://antdv.com/docs/vue/introduce-cn/ant-design-vue 是 Ant Design 的 Vue 实现，组件的风格与 Ant Design 保持同步element-plushttps
2021-11-28 18:11:29
2302
3
原创 JS的垃圾回收机制
变量提升：是负责解析执行代码的JS引擎的工作方式产生的一种特性JS引擎在运行一份代码的时候，会按照下面的步骤执行：首先，对代码进行预解析，并获取代码的所有变量然后，将这些代码的声明语句统一放到代码的最前面最后，开始一行一行运行代码预解析：...
2021-11-24 19:03:29
918
原创 TypeScript从入门到精通（详解）
TypeScript 是什么TypeScript 简称：TS，是 JavaScript 的超集。简单来说就是：JS 有的 TS 都有。JS写的代码在TS的环境下都能跑。在 JS 基础之上，为 JS 添加了类型支持。TypeScript = Type + JavaScriptTypeScript 是微软开发的开源编程语言，可以在任何运行 JavaScript 的地方运行// TypeScript 代码有明确的数据类型let age1: number = 18// JavaScript 代码
2021-11-24 16:56:19
21476
13
原创 最常用的数组排序方法
整理了一下最常用的数组排序方法，话不多说，直接上代码1、sort() 方法是最强大的数组方法之一// 从小到大排序 let arr = [4,3,2,1,0] let newArr = arr.sort((a,b)=>a-b) console.log(newArr); // [0,1,2,3,4]// 从大到小排序 let arr = [0,1,2,3,4] let newArr = arr.sort((a,b)=>b-a) console.lo
2021-11-21 14:01:42
568
原创 最常用的数组去重方法
整理了一下我最常用的三种数组去重方法，话不多说，直接上代码1、indexOf()方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1// 第一种方法 indexOf function test(arr) { let newArr = [] for(let i=0;i<arr.length;i++){ // 如果该元素在数组中找不到 就会返回-1 if(newArr.indexOf(arr[i
2021-11-21 11:04:24
583
原创 如何实现国际化(i18n)
目标实现elementUI中英文切换功能，感受中文切换的效果安装国际化的包npm i vue-i18n@8.22.2请注意版本号。vue-i18n现在有了一个新版本，对应的api有些不兼容，请还是使用8.22.2这个版本!ElementUI多语言配置创建src/lang/index.js内容如下：// 进行多语言支持配置import Vue from 'vue' // 引入Vueimport VueI18n from 'vue-i18n' // 引入国际化的插件包import l
2021-11-20 11:57:27
1319
原创 Token失效处理
目标处理token失效的场景token作为用户的关键令牌信息不是长久有效的，一般都会有一个失效时间(由后端来决定什么时长后失效)，如果超过失效时间，当前token就不能再作为用户标识请求数据了，这时候我们需要做一些额外的失效处理思路分析后端：收到用户访问某个接口时，检查当前token是否失效，如果token已经失效，返给前端一个约定好的状态码 10002前端：在响应拦截器中，分析接口的返回值，如果状态码为10002， 则进行token失效操作代码落地在**src/utils/reques
2021-11-18 19:52:23
2604
2
原创 token-处理-持久化
token-处理-持久化目标现在的token是保存在vuex中，而页面刷新之后，vuex的内容丢失了，将会导致接口访问异常。所以我们需要对token做持久化处理： 刷新页面之后token不丢失。思路在对token进行初始化的时候先从本地取一下，优先使用本地取到的值在设置token的时候除了在vuex中存一份，在本地也同步存一份在删除token的时候除了把vuex中的删除掉，把本地的也一并删除代码准备工具方法在**utils/auth.js中，基础模板已经为我们提供了获取token，设置
2021-11-18 19:51:49
1276
原创 在项目中如何处理token？
token-处理-整体分析背景在项目中，后端接口中只有登录接口是不需要token的，其他接口都需要token才能访问。分析登陆功能之后，从后端获取到了token值，在接下来的其他请求中，接口服务器都会去检查token值，这里我们提前把它保存到统一管理公共状态的 vuex中token-处理-将token保存到vuex中目标使用vuex来保存登录接口获取到的tokenvuex的基本使用流程使用vuex的基本逻辑：数据放在state中，要修改数据则调用mutations先在state中补充
2021-11-18 19:50:53
5583
原创 本地存储webStorage
本地存储webStorage = localStorage + sessionStorage存储内容大小一般支持5M左右（不同浏览器可能会有差异）浏览器通过Window.localStorage 和 Window.sessionStorage 来实现本地存储机制相关的APIxxxxxStorage .setItem (‘key’, ‘value’)把键值对的数据添加到存储中，如果键名已经存在，则更新其对应的值xxxxxStorage .getItem (‘key’)读取获得该键名对应
2021-11-18 11:07:03
321
原创 浅谈JavaScript中的继承
原型继承：通过改造原型链，利用原型链的特性，实现继承方法（需要掌握原型、原型链）组合继承：将 原型链 和 借用构造函数 技术组合到一起，通过原型链实现对原型属性和方法的继承（主要是方法），而通过借用构造函数来实现对实例属性的继承(需要掌握call、apply方法的用法和区别) function Person(name,age){ this.name = name this.age = age } Person.prototype.say =
2021-11-15 20:51:57
428
原创 vue组件通信的10种方法
说起组件通信，可能大家耳熟能详的有以下5种：1. 父传子父组件通过自定义属性给子组件传值，子组件用props接收2. 子传父父组件在子组件标签上自定义事件，子组件通过$emit来触发自定义事件，并且可以传递参数3. 非父子组件传值eventBus事件总线：可通过eventBus进行信息的发布与订阅（创造一个都能访问到的事件总线）4. vuexvuex是专为vue.js应用程序开发的状态管理模式，它采用集中式存储管理程序的所有组件的状态，解决多组件通信。不过多用于中大型项目，小型项目用它会
2021-11-14 21:22:53
2101
原创 vue跳转路由时的传参方式（query和params的区别）
第一种方式：动态路由传参//路由配置文件中 配置动态路由{ path: '/detail/:id', name: 'Detail', component: Detail }//跳转时页面var id = 1;this.$router.push('/detail/' + id) //跳转后页面获取参数this.$route.params.id第二种方式：query传参//路由配置文件中{ path: '/detail', name
2021-11-12 21:24:27
1003
原创 axios是什么？如何在项目中使用?
什么是 axios？Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。特性-从浏览器中创建 XMLHttpRequests-从 node.js 创建 http 请求-支持 Promise API-拦截请求和响应-转换请求数据和响应数据-取消请求-自动转换 JSON 数据-客户端支持防御 XSRF安装使用 npm:$ npm install axios使用 bower:$ bower install axios使用 cdn:
2021-11-12 21:21:52
1092
原创 环境配置-引入eslint +引入prettier-now
引入eslint在react项目中配置eslint，并启用保存自动格式化功能思路在项目中安装eslint用eslint的init命令创建eslint配置文件设置vscode的自动保存格式化步骤npm i eslint typescript -D在项目根目录，运行npx eslint --init按交互提示安装相关插件它会自动生成eslint的配置文件设置vscode的自动保存格式化代码在项目根目录下，补充配置文件：.vscode\settings.json，
2021-11-11 18:32:04
282
原创 vue面试题—vue怎么实现跨域？
跨域指的是浏览器不允许当前页面的源去请求另一个源的数据。源指协议、端口、域名，这三个中有一个不同就是跨域。解决跨域有3种方式：1.JSONP用法是将get请求封装到script标签，利用script标签src属性可以跨域的原理来实现，但也只能发送get请求2.CORS全称是跨域资源共享，它允许浏览器向跨源服务器，发送XMLHttpRequest请求，从而克服AJAX只能同源使用的限制，但它需要浏览器和服务器同时支持，前端后端都需要设置3.Proxy代理（proxy）也称网络代理，是一种特殊的网
2021-11-08 20:06:47
599
原创 打包优化-在nodejs环境中布署应用
目标将打包好的代码打包上线(本地模拟)前端修改生产环境下的baseUrl前端修改生产环境的 baseUrl.env.productionVUE_APP_BASE_API = 'http://ihrm-java.itheima.net'重新打包使用 koa 框架部署项目到现在为止，我们已经完成了一个前端工程师的开发流程，按照常规的做法，此时，运维/后端会将我们的代码部署到阿里云的nginx服务上，对于我们而言，我们可以将其部署到本机的nodejs环境中建立web服务文件夹 hr.
2021-11-07 16:27:51
395
原创 CDN简介
了解CDN提问打包优化时引用的网络资源可靠吗？还有其他的地址可以使用吗？CDNCDN全称叫做“Content Delivery Network”，中文叫内容分发网络。我们用它来提高访问速度。1.免费的：公共CDN2.购买云服务把一些静态资源：css， .js，图片，视频放在第三方的CDN服务器上，可以加速访问速度。前端项目中使用CDN好处减少应用打包出来的包体积加快静态资源的访问...
2021-11-07 16:27:16
95
原创 webpack配置排除打包
目标1：webpack配置排除打包-打包瘦身通过配置vue-cli把一些平常不需要用的包排除在打包文件之外。例如:让 webpack 不打包 vue xlsx 和 element使用方式先找到 vue.config.js， 添加 externals 项，具体如下：configureWebpack: { // 配置单页应用程序的页面的标题 // 省略其他.... externals: { /** * externals 对象属性解析。 * 基本格式：
2021-11-07 16:26:41
3325
1
原创 打包优化-去掉console-log
打包优化-去掉console-log在vue.config.js中，配置：chainWebpack(config) { config.optimization.minimizer('terser').tap((args) => { args[0].terserOptions.compress.drop_console = true return args })}
2021-11-06 22:28:16
126
原创 打包优化-包大小分析
目标对开发的应用进行包大小分析包大小分析我们集成了功能，写了很多组件，最终都会打包成一堆文件（js目录下会有很多.js文件），每个包大小如何呢？我们可以使用vue-cli本身提供的性能分析工具，对我们开发的所有功能进行打包分析，它的使用非常简单npm run preview -- --report这个命令会从我们的入口**main.js**进行依赖分析，分析出各个包的大小，方便我们进行观察和优化执行完这个命令，我们会看到控制台中如下类似的输出访问：http://localhost:9
2021-11-06 22:28:00
1209
原创 vue面试题—为什么避免 v-if 和 v-for 用在一起（必会）
在v-if和v-for用在同一个元素上时，因为v-for要比v-if的优先级高，所以会先执行循环，再进行判断，这样无论条件判断的结果如何，循环都会执行。所以要避免她们用在一起，如果需要的话，可以在外层加一个template，v-if用在template上，这样就可以实现先判断再根据判断结果决定是否执行循环了。...
2021-11-06 22:25:11
707
原创 vue面试题—Vue 组件 data 为什么必须是函数（必会）
这样是为了避免组件之间的数据互相影响。同一个组件被多次复用会创建多个实例，如果data是一个对象的话，这些实例会共享同一个data，改变一个就会影响其他。为了保证组件的数据独立，将组件中的data写成一个函数，并且数据以函数返回值的形式定义，这样每次组件复用，都会返回一份新的data...
2021-11-06 21:35:43
151
原创 vue面试题—Vue 该如何实现组件缓存?（必会）
vue要想实现组件缓存，需要用到vue中的一个内置组件 keep-alive因为 keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们所以它主要用于保留组件状态或避免重新渲染
2021-11-06 18:57:40
442
原创 项目开发完成---打包优化
项目开发完成打包 ：用webpack做打包（把.vue, .js, .less ------> .js, .css, .html）在项目中都会提供命令： npm run build打包优化:在保证功能可用的前提下，让我们的文件尽可能小在保证功能可用的前提下，让我们的页面显示出来的速度更快一些打包之后，会得到dist目录，如果希望可以双击打开index.html，则需要提前在vue.config.js中配置：vue.config.js中{ publicPath: '
2021-11-05 21:41:12
133
原创 提升开发效率的方法——代码片段
前言实际开发中，我们总会写很多固定格式的代码，每次遇到了都自己去敲，或者回去cv都会消耗一定的时间，降低我们的开发效率，这时候我们可以通过创建代码片段来快速生成，提高我们的开发效率。如何创建代码片段点击vscode中的设置按钮，选择用户代码片段，再选择新建全局代码片段文件，输入你想要取的片段名后点击enter，显示代码片段编辑区。这个是我自己用的代码片段：{ "try catch async await": { "scope": "javascript,typescript", "
2021-11-02 21:27:23
163
原创 如何把得到的数据填充到el-tree中，让某些复选框处于选中状态？
问题已经获取到了数据了，如何把它填充到el-tree中，让某些个复选框处于选中状态？解决方案在el-tree组件中通过setCheckedKeys方法 + node-key将数据 回显到el-tree组件中：处于选中状态实现步骤给tree补充属性node-key<!-- 权限点数据展示 --> <el-tree ref="refTree" :data="permissionData" :props="{ label: 'name'
2021-11-01 21:34:20
906
转载 vue项目使用富文本加高亮效果
1.下载关联包npm install vue-quill-editor --save -dev // 富文本npm install highlight.js --save -dev // 代码高亮2.引入并注册import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'import 'quill/dist/quill.bubble.css'/* * 注册 - 业务模块 */// 注册富文本 import { quill
2021-10-31 22:19:26
356
原创 vue 中父组件怎么将异步请求回来的数据传递给子组件
问题：vue项目中，如何将后台请求回来的数据，传递给子组件呢？思路此时肯定会想到v-bind自定义属性传值，子组件props来接收，但是很可惜，如果只是按照普通的父传子做法来做，最后的结果是子组件拿到数据的初始值，并没有拿到数据，然后报错 invalid prop原因原因很简单，还没有等到父组件赋值给它就已经把data里面这个自定义属性所绑定的初始值传过去了，就是下面代码中的article，没有等到后台数据赋值article就把data里的article（null）传过去了。代码实现父组件
2021-10-30 22:17:08
7366
4
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人