m0_60823684的博客

原创 当后端所需字段名是“xxx-xxx”形式时如何发请求

getList() { this.tableLoading = true; this.$store .dispatch("tenant/getList", { ...this.listQuery, "qp-channelName-eq": this.listQuery.channelName, "qp-channelStatus-eq": this.listQuery.channelStatus .

原创 ：before和：：before的区别

::before 是一个伪类元素，代表生成的内容元素，表示相应元素的可抽象样式的第一个子元素，即：所选元素的第一个子元素 利用::before可以把需插入的内容插入到元素的其他内容之前，并且默认内联显示。::before需要使用content属性来指定内容的值。区别：单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。但因为兼

原创 react自定义hooks发请求拿初始应用状态

一.项目情景在做前端开发的时候,基本上每个页面都会涉及到向后台发请求拿数据和渲染数据的两个功能,这都是一些重复且没有挑战性的工作,而我在学习react的时候正好又接触到了自定义hooks这个可以达到功能复用的很有趣的知识,就想着自己能不能把这些重复性的功能步骤封装成一个自定义hooks,让自己的开发效率更高,代码写的更优雅.然后就不断的在网上查阅资料和视屏学习,在自己的不懈努力下,终于学会并且能够封装一些简单的自定义hooks达到功能复用的效果,极大的提升了团队的开发效率.二.封装自...

原创 react+TypeScript基础配置

一.基础文件结构二.文件详情1.store/index.tsimport { applyMiddleware, createStore } from 'redux'import rootRouter from './reducers'import { composeWithDevTools } from 'redux-devtools-extension'import thunk, { ThunkAction } from 'redux-thunk'import { Chann..

原创 react中模块化的redux

一.目录文件夹二.各文件详细信息1.store/index.js// 创建store,再导出import { createStore, applyMiddleware } from 'redux'import rootReducer from './reducers/index'import { composeWithDevTools } from 'redux-devtools-extension'// thunk中间件允许在 action 里执行异步操作import thu.

原创 react-router中设置render控制访问权限

一.背景分析有的页面需要登录后才能访问，比如，项目后台首页、内容管理等（除了登录页面，其他页面需要登录才能访问）,因此，就需要对项目进行登录访问控制，让需要登录才能访问的页面，必须在登录后才能访问。在没有登录时，直接跳转到登录页面，让用户进行登录。二.解决方案路由基本格式: <Route path="/login" component={组件}>使用render函数格式: <Route path="/login" render={() => { return &l..

原创 react项目打包优化

一.生产环境优化(去除redux中间件)在store/index.js中let middlewaresif (process.env.NODE_ENV === 'production') { // 生产环境，只启用 thunk 中间件 middlewares = applyMiddleware(thunk)} else { middlewares = composeWithDevTools(applyMiddleware(thunk))}二.路由懒加载import {

原创 react通过history.location.state来携带参数

一.state格式history.push(path, [state])<Redirect to={{pathname: '/xxx', state: {} }}二.实际操作1.用history.push方法携带state参数 history.push('/login', { from: history.location.pathname })2.用Redirect里的to属性携带state参数<Redirect to={{pathname: '/login',s

原创 react如何在非组件环境下拿到路由信息

一.背景react-router-dom中直接有Router这个包，但是Router 没有history属性安装react-router-dom时，默认会安装history包，我们可以通过这个包来自己创建history对象二.思路1.单独引入Router，并自己创建history，import { Router, Route, Switch, Redirect } from 'react-router-dom'import { createBrowserHistory } from

原创 Vue 数据双向绑定的原理

Vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty()来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。 第一步:需要 observe 的数据对象进行递归遍历，包括子属性对象的属 性，都加上 setter 和 getter 这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化第二步:compile 解析模板指令，将模板中的变量替换成数据，然后初始...

原创 Vue 中怎么自定义过滤器

一.全局:1.格式:Vue.filter("过滤器名称",function(){...return 返回值})(定义在main.js里面)2.每个.vue组件都可以使用二.局部:1.格式:filters:{ 过滤器名称1(){}, 过滤器名称2(){},}2.只能在当前文件可以使用三.总结:效果显示如下:...

原创 Vue-loader 是什么？使用它的用途有哪些？

vue-loader本质上是一个 webpack 的 loader一.loader:当然,说起vue-loader,就不得不说一下loader了,在webpack官方文档中对loader的解释是: loader 用于对模块的源代码进行转换。它可以使你在import或"加载"模块时预处理文件。简单点说就是它可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中import...

原创 Vue 中 key 值的作用是什么

一.原因因为vue实现了一套虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法。所以当我们需要改变DOM元素时,有key属性和无key属性对虚拟DOM的操作方式是不一样的.二.作用1.无key属性: Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。2.有key属性: 它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。3.注意: 有相同父元素的子元素必须有独特

原创 什么是 Vue 的计算属性

一.计算属性创造目的:计算属性的目的就是用来处理那些需要复杂逻辑的数据,使模板内容简单明了.二.计算属性的特点:1、 依赖于数据，数据更新，处理结果自动更新； 2、 计算属性内部 this 指向 vm 实例； 3、 在 template 调用时，直接写计算属性名即可； 4、 常用的是 getter 方法，获取数据，也可以使用 set 方法改变数据； 5、 相较于 methods，不管依赖的数据变不变，methods 都会重新计算，但是依赖 数据不变的时候 computed 从

原创 computed 中的属性名和 data 中的属性名可以相同嘛?

不可以,因为不管是computed还是data都会挂载到vm实例上,如果同名的话,根据js编译代码从上往下执行的机制,前面的属性就会被后面定义的属性覆盖 function initState (vm) { vm._watchers = []; var opts = vm.$options; if (opts.props) { initProps(vm, opts.props); } if (opts.methods) { initMethods(vm, ...

原创 watch 怎么深度监听对象变化

deep设置为true 就可以监听到对象的变化let vm=new Vue({ el:"#first", data:{msg:{name:'北京'}}, watch:{ msg:{ handler (newMsg,oldMsg){ console.log(newMsg); }, immediat

原创 怎么在 watch 监听开始之后立即被调用

设置 immediate 属性为 truelet vm=new Vue({ el:"#first", data:{msg:'liuneng'}, watch:{ msg:{ handler (newMsg,oldMsg){ console.log(newMsg); }, immediate:tr

原创 watch、methods 和 computed 的区别

一.相同点:methods,watch 和 computed 都是以函数为基础的,它们都是通过监听自身依赖的数据在变化时触发相关的函数去实现自身数据的变动,二.不同点:1.加载顺序1. computed 是在 HTML,DOM 加载后马上执行的，如赋值；（属性将被混入到 Vue 实例） 2. methods 则必须要有一定的触发条件才能执行，如点击事件 3. watch 呢？它用于观察 Vue 实例上的数据变动。 4. 所以不执行 methods的默认加载顺序是: ...

原创 为什么避免 v-if 和 v-for 用在一起

一.原因:因为v-for的优先级比v-if的优先级高,所以每次渲染时都会先循环再进行条件判断,而又因为v-if会根据渲染条件为ture或false来决定渲染与否的,所以如果将v-if 和 v-for 用在一起会特别消耗性能二.解决方法:1.将v-if放在外层嵌套template（页面渲染不生成dom节点），在这一层进行v-if判断，然后在内部进行v-for循环2.如果条件出现在循环内部,不得不放在一起时,可通过计算属性computed提前过滤掉那些不需要显示的项...

原创 v-show和v-if

一.相同点:v-show和v-if都可以控制元素的显示与隐藏二.不同点:1.实现本质的不同:v-show 是通过把css中的display属性设置为block或none来控制显示与隐藏的v-if 是动态的向Dom树内添加或者删除元素,它会确保在切换过程中,条件块内的事件监听器和子组件适当的被销毁和重建2.编译条件的不同:v-show 不管渲染条件是显示还是隐藏,都会进行编译v-if 的编译条件是false的话,就不会进行编译了三.总结所以,结合现实情况和编译条件总的来

原创 flex布局

一.布局原理:通过给父盒子添加flex属性,来控制盒子的位置和排列方式注意:1.当我们为父盒子设置flex布局后,子元素的float,clear和vertical-align属性都将失效2.伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局二.常见属性:1.flex-direction:设置主轴方向(默认主轴,在x轴上从左到右;默认侧轴,在y轴上从上到下)row:默认从左到右row-reverse:从右到左column从上到下column-reverse从下到上

原创 防抖和节流

一.防抖1.什么是防抖:是当事件被触发后，延迟 n 秒后再执行回调，如果在这 n 秒内事件又被触 发，则重新计时。王者荣耀的回城机制就运用到了防抖技术,在npc回城时,如果再点击一次回城按钮,就会重新计算回城时间.2.防抖的应用场景:用户在输入框中连续输入一串字符时，可以通过防抖策略，只在输入完后，才执行查询的请求，这样可 以有效减 少请求次数，节约请求资源；3.实现输入框的防抖 a. 防抖动的 timer b. 定义防抖的函数，函数里面定义一个延时器，在演示器里面调用.

原创 路由携带参数跳转

一. router-link1.不带参数<router-link :to="{name:'home'}">router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。2.带参数1.<router-link :to="{name:'home', params: {id:1}}">.

原创 git的基础用法

一.组长1.创建本地项目:rm -rf .git # 删除项目中的 `.git` 文件夹git init # 初始化仓库git add . # 添加暂存区git commit -m 项目初始化 # 提交本地仓库git remote add origin https://gitee.com/ifercarly/hmm-front.git # 添加远程仓库地址git push -u origin master # 推送到远端，第一次推送到 master 写完整，后续再推送到 master .

原创 如何实现英文字母的点击添加的递增

需求:现在有数组['A','B','C'],点击了某个按钮之后,如何让数组变为['A','B','C','D'],再次点击之后变为['A','B','C','D','E'].....实现:<body> <button class="btn">点我</button> <script> var btn = document.querySelector('.btn') var arr = ['

原创 Vue + Element UI使用富文本编辑器

一.下载组件npm install vue-quill-editor二.在需要使用的组件内引用富文本组件及其样式import { quillEditor } from 'vue-quill-editor'import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'import 'quill/dist/quill.bubble.css'三.注册组件及使用// 注册components: { .

原创 element-ui里Switch开关的用法

一.Switch可以放在form表单里面和表单数据一起使用二.当你只是仅仅要获得true和false时,通过绑定它的change事件拿到value值并打印就可以获得,如下所示:上述代码就会根据Switch的开与关相应的显示true和false三.如果想要根据Switch开关时显示的是别的值,可以通过设置active-value和inactive-value的值来获取,如图所示:上诉代码就会根据Switch的开与关相应的显示'1'和'2',总结:写这个的原因是在写添加修..

原创 在nodejs环境中布署应用

一.目标:将打包好的代码打包上线(本地模拟)二.使用 koa 框架部署项目1.建立web服务文件夹 hrServer2.在该文件夹下，初始化npmnpm init -y3.安装服务端框架koa(也可以采用express或者egg)npm install koa koa-static4.hrServer中新建public目录，并拷贝上小节打包的dist目录内容，到hrServer/public下5.在根目录下创建app.js，代码如下const Koa = re

原创 打包优化会用到的代码

一.路由懒加载懒加载的意义:一个路由对一个组件，表示一个页面。只有在路由进入这个页面时，才去加载这个组件对应的资源。路由懒加载中的魔法注释通过在注释中指定webpackChunkName，可以人为设置这个文件的名字。如下示例:components = () => import(/* webpackChunkName:"login"*/ "../component/Login.vue");二.包大小分析我们可以使用vue-cli本身提供的性能分析工具，对我们开发的所有功能进.

原创 简述http和https

一.http和https的基本概念1.http:http是一种超文本传输协议，是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），用于从WWW服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。2.https:是以安全为目标的HTTP通道，简单讲是HTTP的安全版，即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。https协议的主要作用是：建立一个信息安全通道，来确保数组的传输，确保网

原创 学习动态添加路由后的收获

1.addRoutes基本使用格式router.addRoutes([路由配置对象])或者:this.$router.addRoutes([路由配置对象])示例:// 按钮<button @click="hAddRoute">addRoute</button>// 回调hAddRoute() { this.$router.addRoutes([{ path: '/abc', component: () =>...

原创 RBAC权限设计思想

背景为了达成不同的帐号登陆系统后能看到不同的页面，能执行不同的功能的目标，我们有很多种解决方案，RBAC(Role-Based Access control)权限模型 ，也就是基于角色的权限分配解决方案。其权限模式如下:三个关键点用户:使用系统的人(员工)权限点：这个系统中有多少个功能（例始：有3个页面，每个页面上的有不同的操作）角色：不同的权限点的集合如何给用户添加功能给用户分配角色，给角色分配权限点注意:系统中的权限点不能随意添加,必须是程序员已经开发出来的功

原创 数组转树递归方法

原创 图片储存方案

一.思路二.编写步骤1.根据id获取头像地址2.v-model给子组件显示3.用户点击,选中图片,调用腾讯云的api上传图片.返回图片地址4.显示图片通过v-model的属性然后在第 2 步的时候就设置好了显示图片的步骤5.将新地址保存到自己的服务器调接口保存图片地址数据三.总结由于图片都存放到自己的服务器上，占据空间很大,成本很高.所以一般都选择存到第三方的云服务器(阿里云，七牛云，腾讯云 )...

原创 [{id:‘1‘,value:‘嘻嘻‘},{id:‘2‘,value:‘哈哈‘}]如何转换为[{1:嘻嘻},{2:哈哈}]

reduce永远ds

原创 依赖vue-element-admin进行二次开发的导出Excel功能

一.学习使用现成的excel导出组件1.分析:通过查看vue-element-admin的源文件和网页路由结构可知插件包位于src/vendor/export2Excel中,采用的是按需引入的方式,意思就是什么时候正式要使用导出功能了,插件才会被正式引入到应用里,import('@/vendor/Export2Excel').then(excel => {})2.使用:将vue-element-admin中的src/vendor/export2Excel复制到本项目中，直接使用

原创 依赖vue-element-admin进行二次开发的导入Excel功能

一.安装必要插件npm install xlsx -S二.引入UploadExcel组件并注册为全局1.在vue-element-admin项目中复制src/components/upload-excel.vue文件到自己的项目中2.复制到自己的src/components/文件下,3.注意:这个组件引入了XLSX包， 需要给它提供两个props： beforeUpload：上传之前的函数 onSuccess: 成功调用之后的函数 4.注册为全局组件在s.

原创 得到传入页码page,页面条数size,数据总条数total得到分页数组

一.需求function toArr(total, size, page, btnCount = 5) {const newArr = [].......return newArr}toArr(100, 5, 7)问题:如何让上面的函数输出的是[5,6,7,8,9]问题介绍:这个问题是为了解决分页显示功能的,当传入页码和页码量之后可以输出一个以page为中间值的数组,注意:当页码的最小值小于1和最大值大于总页数除以页面条数的值时,都不能让传入的页码page称为

原创 Vue.use()

一.作用它是Vue提供一个静态方法，用来向Vue注册插件(增强vue的功能)。二.说明 Vue.use 可以接收一个对象，Vue.use(obj) 对象obj中需要提供一个 install 函数 在 Vue.use(obj) 时，会自动调用该 install 函数，并传入 Vue构造器 三.示例:1.局部祖册组件2.全局祖册组件3.通过Vue.use()来注册在其他页面中，均可以直接使用page-tools(上诉就是全局注册的完整写法...

原创 在表单中做编辑时表格中数据也跟着变

一.错误效果如下:可以看到我在弹框中编辑的时候下面表单中的数据就会跟着变化1.原因由上图可知弹框中的数据是通过浅拷贝表单中的数据拿到的(浅拷贝:只复制数据指向数据地址的指针,不会复制数据地址),也就造成了修改弹框中的数据,表单中的数据就会对应的变化的情况二.解决方案1.利用深拷贝去拿到表单中的数据传给弹框的表单中...