- 博客(74)
- 收藏
- 关注
RSS订阅
原创 权限管理实现思路？
总体思路：1.用户填写完账号和密码后向服务端验证是否正确，验证通过之后，服务端会返回一个token。2.拿到token之后将这个token存起来，保证刷新页面后能记住用户登录状态，根据token去调用userInfo的接口来获取用户的详细信息（如用户权限，用户名等等信息）。3.权限验证：通过token获取用户对应的权限，将请求的权限数组和用户信息存储到vuex中 ，动态根据用户的权限通过处理得到其对应有权限的路由，通过 router.addRoutes 动态添加这些路由。一、登录：登录成
2021-12-07 14:03:24
11385
5
原创 如何在新项目中配置eslint
第一步：使用npm 下载eslint 包npm i eslint -D第二步: 使用npx命令 配置相关插件npx eslint --init2.1先选代码风格和一些设置，按照下图一个一个选：2.2 在src同级目录下创建一个文件名为的.vscode的文件 在创建 settings.json文件，然后CV下面的代码：{ "eslint.run": "onType", "eslint.options": { "extensions": [".js"...
2021-11-17 21:43:31
1244
原创 前端几款好用的编辑器
VSCode微软出厂的高颜值编辑器加载大文件几乎秒开，运行速度很快跨平台的文本编辑器，内置了对许多主流语言的支持非常方便的管理插件，可以快速找到适合自己的前端插件完全免费（非常推荐）Sublime Text!是款比较主流的前端编辑器体积非常小，运行速度特别快非常强大的命令面板功能，可以模糊匹配命令webStrom集成了许多强大的功能快速查找文件，快速搜索对js的开发全面支持，对主流行语言的支持集成了多版本版本控制工具Atomgithu.
2021-10-13 11:28:33
336
原创 git如何将项目提交到自己的仓库
创建本地项目并关联远程仓库 项目进行git初始化 $ git init # 初始化项目, 这句命令会新建一个.git文件夹$ git add . # 将修改添加到暂存$ git commit -m "人资项目初始化" # 将暂存提到本地仓库 经过上面的步骤，它就变成我们自己的项目了建立远程仓库在gitee上创建一个与本地同名的、 空的 、公开的远程仓库。推送到远程仓库有两句命令（并不需要记忆，在gitee空仓库中会有具体的提示）...
2021-10-13 10:44:55
1633
1
原创 常用的数组的方法
总结了一些常用的数组方法，希望可以帮到你。1. forEachforEach用于循环遍历数组最常用的方法之一,它提供一个回调函数，可用于处理数组的每一个元素，默认没有返回值。回调函数的参数,第一个参数是数组的每一项,第二个参数是数组中每一项的索引var arr = [1, 2, 3, 4, 5, 6];arr.forEach((item, index) => { console.log(item, index);}); // 输出结果： 1 2 3 4 5 6...
2021-09-29 22:42:44
158
原创 饿了么（elementUI）组件库如何在vue项目中使用？
官方组件库地址：Element - The world's most popular Vue UI frameworkelementui是做PC项目的首选创建项目并引入element组件库用vue-cli脚手架创建vue项目找一个合适的文件夹，打开cmd窗口，用vue create 创建项目命令：vue create 自定项目名vue create element-demo-------------------------------? Please pick a prese
2021-09-29 21:48:01
5809
2
原创 移动端rem屏幕大小适配？
当我们在开发页面时都需要做屏幕适配，今天我就来分享一下，我在日常开发中的屏幕适配是如何做的。第一步：在命令行输入命令下载包：npm iamfe-flexible 或者 yarn addamfe-flexible下载完之后在 main.js中引入包import 'amfe-flexible' // rem屏幕适配包 （只需要这一句，不需要返回值）第二步：在命令行输入此命令：npm i postcss-pxtorem -D 或者 yar...
2022-04-28 10:35:47
219
原创 防抖和节流的区别？
1、防抖(debounce)：触发高频事件后 n 秒内函数只会执行一次，如果 n 秒内高频事件再次被触发，则重新计算时间举例：就好像在百度搜索时，每次输入之后都有联想词弹出，这个控制联想词的方法就不可能是输入框内容一改变就触发的，他一定是当你结束输入一段时间之后才会触发。节流(throttle)：高频事件触发，但在 n 秒内只会执行一次，所以节流会稀释函数的执行频率举例：预定一个函数只有在大于等于执行周期时才执行，周期内调用不执行。就好像你在淘宝抢购某一件限量热卖商品时，你不断点刷新点购买，可是总有一段时间
2022-04-01 15:01:26
1692
原创 vue中点击按钮实现全屏功能
这篇文章主要为大家详细介绍了vue-cli点击实现全屏功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下本文实例为大家分享了vue-cli点击实现全屏功能的具体代码，供大家参考，具体内容如下项目中有点击按钮实现全屏功能方式一：js实现全屏代码如下： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
2022-03-24 14:23:46
2786
1
原创 vue项目中如何使用 less?
第一步：安装依赖包npm i less less-loader -D安装完成后，package.json有版本信息第二步：在webpack.base.config文件中添加编译器规则 module: { rules: [ { test: /\.less$/, use: [ 'style-loader', { loader: 'css-loader', options: { importLoade
2022-03-16 10:18:12
1056
原创 使用Vant组件库如何实现屏幕适配
前言：在使用Vant组件库进行移动端项目开发时，往往会遇到屏幕适配的问题，今天我就来分享一下屏幕适配的具体步骤吧！ 自动让所有px转成rem (以后我们可以直接写px) - webpack配合postcss和postcss-pxtorem插件就可以翻译css代码, 把px转rem使用 1. 下载 postcss [email protected] (要和当前脚手架webpack兼容) 2. 与src文件同级 创建 postcss.config.js这个文件 - 填入插件转换的基准值
2022-02-17 16:23:28
2140
原创 常用的es6语法（总结）
一、let和const在JavaScript中咱们以前主要用关键var来定义变量，ES6之后，新增了定义变量的两个关键字，分别是let和const。 对于变量来说，在ES5中var定义的变量会提升到作用域中所有的函数与语句前面，而ES6中let定义的变量则不会，let声明的变量会在其相应的代码块中建立一个暂时性死区，直至变量被声明。 let和const都能够声明块级作用域，用法和var是类似的，let的特点是不会变量提升，而是被锁在当前块中。一个非常简单的例子：function test()
2021-11-24 21:34:49
764
原创 什么是宏任务、微任务？
1.什么是宏任务、微任务2.宏任务、微任务有哪些3.宏任务、微任务的执行顺序什么是宏任务、微任务：先来了通俗易懂的例子：去银行办理业务的人就是一个个宏任务，当宏任务P1在柜台办理业务时，其它任务都需等待，当一个宏任务P1办理业务结束时，柜台职员会询问他还有没有其它微任务，如果他还有其他业务，则其他宏任务都需等待。就是微任务是在宏任务之前执行。宏任务、微任务有哪些宏任务包括：script(整体代码), setTimeout, setInterval, setImmediate, I.
2021-11-22 23:11:06
343
原创 react中 modules.scss的基本使用
1.下载引入包npm i scss -D2.修改样式文件名将css文件名改成后缀为 .module.scss （React脚手架中的约定，与普通 CSS 作区分）3.组件中进行使用导入 import styles from './index.module.scss'<div className={styles.css类名}></div> 4.最佳用法每个组件的根节点使用 CSSModules 形式的类名（ 根元素的类名： ...
2021-11-22 20:26:32
4280
1
原创 react访问控制-如何使用Route组件的render来解决？
问题：用户必须登录才能访问后台首页。思路：创建 AuthRoute 组件，判断是否登录1 登录直接显示要访问的页面2 没有登录跳转到登录页面难点：react中没有导航守卫，需要自己封装第一步：首先要在components(公用组件)文件下，封装一个名为AuthRoute.js的组件/* eslint-disable react/prop-types */import { hasToken } from '@/utils/storage'import { Redirect,
2021-11-19 23:17:59
626
原创 react中 token过期，如何处理？
思路：首先在request.js中的响应拦截器这块写token失效的提示，然后再让它进行清空token和路由跳转第一步：在request.js文件中 导入import store from '@/store'import { logout } from '@/store/actions/login'第二步：在响应拦截器下写代码：具体代码如下：// 响应拦截器 处理返回异常 数据脱壳instance.interceptors.response.use( functi.
2021-11-19 22:20:10
2375
原创 react中如何实现组件传值？
React组件通信我们常用的主要有三种通信方式：父子组件通信兄弟组件之间跨组件层级1.父传子：父组件向子组件进行传值只需要在子组件的标签身上定义自定义属性即可子组件通过this.props来进行接收父组件：传入自定义属性import { Component } from 'react'import ReactDOM from 'react-dom'import Son from './Son'import Son2 from './Son2'export default
2021-11-18 22:34:14
1067
原创 react中怎么自定义hooks--(封装倒计时)并使用？（逻辑复用）
定义:除了使用内置的 Hooks 之外，还可以自定义 Hooks自定义 Hooks 针对不同组件实现不同状态逻辑复用。 自定义 Hooks 是一个函数，约定函数名称必须以 use 开头，React 就是通过函数名称是否以 use 开头来判断是不是 Hooks Hooks 只能在函数组件中或其他自定义 Hooks 中使用，否则，会报错！ 自定义 Hooks 用来提取组件的状态逻辑，根据不同功能可以有不同的参数和返回值（就像使用普通函数一样） 使用场景:将组件状态逻辑提
2021-11-13 11:49:19
2694
原创 raact中的useContext-全局状态 如何使用？
使用目标：useContext步骤：共3步： 在根组件中，导入并调用createContext方法，得到Context对象，导出 import { createContext } from 'react'export const Context = createContext() 使用 Provider 组件包裹根组件，并通过 value 属性提供要共享的数据 return ( <Context.Provider value={ 这里放要传递的数据 }&g.
2021-11-12 20:19:27
470
原创 Vuex 的 Mutation 和 Action 之间的区别是什么？
Action：actions函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。第一点：流程顺序不同“相应视图—>修改State”拆分成两部分，视图触发Action，Action再触发Mutation。第二点：基于流程顺序，二者扮演不同的角色。Mutation：专注于修改St
2021-11-10 22:21:55
2390
原创 简述 Vuex 的数据传递流程
vuex数据传递的流程我觉得为以下几个步骤：第一步：通过new Vuex.Store()创建一个仓库 state是公共的状态，state--->components渲染页面第二步：在组件内部通过this.$store.state.属性 来调用公共状态中的state，进行页面的渲染。第三步：当组件需要修改数据的时候，必须遵循单向数据流。通过this.$store.dispatch来触发actions中的方法第四步:actions中的每个方法都会接受一个对象 这个对象里面有一个comm
2021-11-10 22:10:11
2041
原创 Vuex 的出现解决了哪些问题?
常见的有以下几个 ：1.我们在使用Vue开发项目中，经常会有通过路由传递参数时，由于参数过多会出现会导致400 Bad Request，vuex可以解决这个问题，2.解决多个组件共享状态时，单向数据流的简洁性很容易被破坏的问题3.解决多个视图依赖同一状态的问题4.解决了在中大型项目中，数据太多时，只需要在vuex更改处理数据，不用去每个页面更改...
2021-11-09 18:59:19
1971
原创 vue指令有哪些？
以下是个人总结的vue指令：⑴v-bind：给元素绑定属性⑵v-on：给元素绑定事件⑶v-html：给元素绑定数据，且该指令可以解析html标签⑷v-text：给元素绑定数据，不解析标签⑸v-model：数据双向绑定⑹v-for：遍历数组⑺v-if：条件渲染指令，动态在DOM内添加或删除DOM元素⑻v-else：条件渲染指令，必须跟v-if成对使用⑼v-else-if：判断多层条件，必须跟v-if成对使用⑽v-cloak：解决插值闪烁问题⑾v-once：只渲染元素
2021-11-08 20:36:51
916
原创 Vuex 的 5 个核心属性是什么? （精选 持续更新中 ---）
vuex五大核心属性是：state，getter，mutation，action，module1、state：存储数据，存储状态；在根组件实例中注册了store 后，用 this.$store.state 来访问；对应vue里面的data；存放数据方式为响应式，vue组件从store中读取数据，如数据发生变化，组件也会对应的更新。2、getter：可以对state 进行计算操作，它的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。3、mutation：更改 Vuex
2021-11-08 20:34:24
775
原创 vueX是什么？（精选 持续更新中 ---）
定义：Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式储存管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 使用场景：需要构建一个中大型单页应用，您很可能会考虑如何更好的在组件外部管理状态，Vuex将会成为自然而然的选择。 优点：当你在state中定义了一个数据之后，可以在所在项目中的任何一个组件里进行获取、进行修改、并且你的修改可以得到全局的响应变更。 Vuex的运行机制：在组件中通过this.$store.dis...
2021-11-08 20:31:10
112
原创 Vue 中怎么自定义过滤器?（精选-持续更新中---）
Vue.js 允许自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用 在两个地方：双花括号插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示
2021-11-07 19:46:09
1387
原创 Vue-loader 是什么？使用它的用途有哪些？（精选-持续更新中---）
Vue-loader 会解析文件，提取出每个语言块，如果有必要会通过其他 loader 处理，最后将他们组装成一个 commonjs 模块；module.exports 出一个 Vue.js 组 件对象；Vue-loader的用途可以从以下四个方面阐述它的用途：1）< temlate>语言块（1）默认语言：html（2）每个.Vue 文件最多包含一个< template>块（3）内容将被提取为字符串，将编译用作 Vue 组件的 template 选项；2）&l
2021-11-07 11:43:04
1020
原创 Vue中的:key值的作用是什么? （精选-持续更新中---）
前言：Vue 中 的 :key 很多人都弄不清楚有什么作用，甚至还有些人认为不绑定 key 就会报错。其实没绑定 key 的话，Vue 还是可以正常运行的，报警告是因为没通过 Eslint 的检查1.vue中的key的作用vue中的key的作用，vue 中遍历列表时, key最好不要用 index虚拟DOM中key的作用1. 简单讲key是虚拟DOM的标识, 在更新显示时key起着及其重要的作用2. 详细讲:当状态中的数据发生变化时, vue会根据 【新数据】生成【新的虚
2021-11-06 21:43:38
844
原创 什么是 Vue 的计算属性？ （精选-持续更新中---）
1、计算属性的定义我们己经可以搭建出一个简单的 Vue 应用，在模板中双向绑定一些数据或表达式了。但是表达式如果过长，或逻辑更为复杂时，就会变得雕肿甚至难以阅读和维护，这个时候就需要使用到我们计算属性功能。示例1：功能需求是将字符串“123,456，789”编程为“789,456,123”<div id='app'> {{text}} <br> <!-- split(',')是字符串转数组方法，join（','）是数组转字符串方法 --
2021-11-06 21:30:23
602
原创 computed 中的属性名和 data 中的属性名可以相同吗？（精选-持续更新中---）
答案是：不可以同名因为不管是 computed 属性名还是 data 数据名还是 props 数据名 都会被挂载在 vm 实例上，因此这三个都不能同名。注意：computed中的属性和data中的属性名字不能相同，一个属性要么在data里；要么在computed里，computed里的属性要跟data中的配合使用，当data属性发生变化时才会调用get方法更新reversedMessage的值，否则get方法即使返回一个随机数，reversedMessage的值也不会变。...
2021-11-05 22:46:29
1069
原创 watch 怎么深度监听对象变化？（精选-持续更新中---）
1. 深度监听handler：其值是一个回调函数。监听到变化时应该执行的函数。 deep：其值是true或false；确认是否深入监听。（一般监听时是不能监听到对象属性值的变化的，数组的值变化可以听到。） immediate：其值是true或false；确认是否以当前的初始值执行handler的函数。 当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，此时需要deep属性对对象进行深度监听 2. 演示代码如下：<template>
2021-11-05 22:24:11
3146
原创 什么是闭包？
一、什么是闭包1、函数里面包含的子函数，子函数访问父函数的局部变量2、通过return将子函数暴露在全局作用域，子函数就形成闭包3、通过闭包，父函数的局部变量没有被销毁，可通过闭包去调用 ，但同时，这个局部变量也不会被全局变量污染4.闭包=函数+环境二、简单的闭包 function aaa() { var a = 0; return function () { alert(a++)
2021-11-05 20:59:38
80
原创 v-if与v-show的共同点与不同点
区别1.手段：v-if是通过控制dom节点的存在与否来控制元素的显隐；v-show是通过设置DOM元素的display样式，block为显示，none为隐藏； 2.编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换； 3.编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载); v-show是在任何条件下（首次条件
2021-11-05 18:05:18
296
原创 一分钟带你学会git仓库
在工作中，如何使用git呢？第一步：克隆项目所有分支git clone https://github.com/ifer-itcast/test.git（组长仓库地址）git checkout release # 如果说本地有，就切换到本地的 （测试分支：release），如果没有就去远端拉取 release 并切换git checkout develop 切换到开发分支第二步：创建任务分支 ：# 切换到 develop 分支git checkout develo...
2021-11-02 21:04:06
91
原创 vue页码跳转不正常 无法重新请求数据
BUG演示：假如我有11条数据 每页显示5条，当删除第11条时，页码应该变成2 页 然后重新刷新页面，显示第二页的五条数据解决方案： --this.total // 页码显示不正常 无法刷新页面 if ((this.total % this.params.pagesize) === 0) { this.params.page = this.params.page - 1 } // 重新发请求 .
2021-11-02 16:54:48
208
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人