努力做大神-CSDN博客

前言系统在用了一段时间后，产品经理提出了新建子账号并可配置菜单权限的需求。配置子账号拥有部分菜单权限，并在子账号登录后，在地址栏直接输入本不属于该子账号的页面路由，要求重定向到404页面，即实现拦截。开始经过各种查阅资料，决定使用addRoute 动态添加路由。后台在登录后会返回账户菜单，是一个code的str合集，这个code对应每个菜单的code，是前后台约定好的。步骤如下：1、router/index.js：定义初始路由constantRoutes 和动态变化的路由DynamicRoutes

2022-02-07 16:23:54 524

原创前端div块的瀑布流布局

前言如图，每个新闻类别是一个块。新闻类别个数是动态的，每个类别的新闻条数是动态的，产品经理要求做成图中这样的瀑布流布局。借鉴别人图片的瀑布流布局，来实现这个新闻块的瀑布流布局。开始对于图片的瀑布流布局来说，有定宽或者定高。我选择定宽的方法。但是在实际情况中，浏览器有多种屏幕宽度，既要给每个div块定宽，又要做到自适应。所以在这里，1、我用css计算并设置不同屏幕下div块的宽度：如在>1500宽度下，可以放置5列，除去中间的间距，每列宽度为width:calc(100% - 30px*4)

2021-06-23 16:53:33 1457

转载 vue项目更新后文件存在缓存，需要强制刷新才能呈现更新

前言vue项目每次发布新版本后，测试人员都要强制刷新才能更新浏览器代码来验证bug。对于用户来说，这更不合理。于是，想办法让浏览器自动更新文件。开始1.在static静态目录下新建version.json每次发版更改里面的版本号{ "version": "1.0.1"}2.在src中新建 libs/versionUpdate.js文件import axios from 'axios' const isNewVersion = () => { let url = `//$

2021-06-23 15:43:23 11392 11

原创 uni-app微信小程序报错：更改appid失败touristappid Error:tourist appid

事情是这样的，我用HbuilderX新建了一个uni-app小程序，然后运行到微信开发者工具，原本正常开发，后来我在微信开发者工具中，把 project.config.json文件中的 “appid”: “touristappid”，改为了一个我之前开发过的小程序的appid，然后保存文件报错。撤回更改后仍报错。这时无法改回默认的touristappid。我打开微信开发者工具，点击新建小程序，生成一个测试号，然后把测试号的appid用于这个小程序就可以了。如果后续申请了appid，可以改为新的app

2021-04-01 10:16:18 9807 3

原创 Echarts的一些配置

前言在此记录echarts使用过程中的一些配置。开始一、整体使用以一个环形图为例：html<div id="myChart" :style="{width: '100%', height: '180px'}"></div>js部分drawWarningLine(list) { let warningChart = this.echarts.init(document.getElementById("warningChart"));

2021-03-17 14:04:07 1865

原创 react antd-design Modal里加form表单，用ref回显数据，第一次打开取到的是null

开始react项目里，使用ui框架ant-design。table列表的每一行都有编辑按钮，点击编辑，弹窗Modal出现，里面使用Form表单，然后用ref回显数据。但是发现第一次点编辑打开弹窗，ref取到的current总是null，关闭再次打开就可以正常取到。解决方法Modal里有一个属性为强制渲染给Modal加上此属性即可。 forceRender = {true}上全部代码：import React, { Component } from 'react';import { Fo

2020-11-30 14:32:37 5771 3

原创 vue element-ui左侧菜单移入移出折叠效果

前言由于项目主页面数据较多，需要通屏展示，所以要将左侧导航做成可以折叠的效果。效果如下（请忽略一下gif图的水印吧 T^T）：鼠标移入左侧蓝色按钮，导航从左侧缓慢滑出，右面内容加遮罩层；点击右面遮罩层部分，遮罩层消失，导航向左缓慢滑出。开始上代码：app.vue<template> <div> <el-container> <span class="slideIcon" @mouseover="open">

2020-11-26 16:47:04 4618 1

原创 react报错：Cannot read property ‘forEach‘ of undefined at Object.injectIntoGlobalHoo

react项目启动后控制台报错报错信息：Cannot read property ‘forEach’ of undefined at Object.injectIntoGlobalHoo解决方法：删掉（不是禁用，是移除或者删除）浏览器里关于react的扩展程序，再刷新页面就可以了。在此记录解决问题的过程，也给小伙伴们一些思路。如有不严谨的地方还请不吝赐教。...

2020-11-18 15:24:34 1913

原创安装webpack一直提示要安装webpack-cli

安装webpack后，执行webpack -v 查看版本时候，一直提示要安装webpack-cli。查询相关资料，如果是webpack4+版本，还需要安装 cli，因为webpack 4将 cli 分离出来了。我文件夹里安装cli，npm install --save-dev webpack-cli结果还是提示要安装cli。然后执行全局安装命令就可以了。npm install --save-dev webpack-cli -g在此记录解决问题的过程，也给小伙伴们一些思路。如有不严谨的地方

2020-08-20 17:05:10 2925

原创 create-react-app安装出错

安装 create-react-app执行命令：npm i -g create-react-app结果出错，错误如下：淘宝镜像换源：//换源npm config set registry https://registry.npm.taobao.org//查看npm config get registry再次执行安装命令报错：这时候我去到 C:\Users\Lenovo\AppData\Roaming\npm\node_modules 文件夹，把create-react-app 文

2020-07-28 15:26:31 1823

原创 vue自定义插件--右上角通知框，随任务的轮询结束可自动关闭

前言最近在做一个基于vue的云控制台的项目，其中包括很多创建主机、创建云盘等功能，但是创建需要一个时间，得做一个正在创建中的消息通知窗进行展示来告知客户，同时随任务的结束，通知窗显示成功失败，并可以自动隐藏或者手动关闭。elementui里有一个Notification通知插件，但是有好多地方不符合我的需求，于是查阅资料自己封装一个。业务逻辑总结一下业务逻辑：当点击触发某任务时，首先后台接口返回操作成功，并有任务taskid列表，效果如下：任务正在进行：任务成功：实现文件目录代码

2020-07-23 10:59:28 2066

原创循环中调用异步接口获取数据

前言遇到这样一个需求：调用接口，返回一个新闻列表，再循环这个新闻列表，用每个新闻的id异步请求这个新闻的视频地址，这就需要在循环里调用接口。如果用for循环，接口还没请求完成，for循环就已经执行完了。所以改成promise去处理。开始整体思路就是：先存数组，然后循环生成每一个promise，然后用promise.all来调用，then的时候返回的是一个结果数组。1、首先定义循环里的异步请求getInfo(item ,index){ return new Promise((resolve,

2020-07-17 10:07:33 4871

原创 elementui form表单自定义验证两个输入框大小的规则

前言有这样一个表单，需要判断结束端口大于起始端口。起始端口的prop:pubPortStart，结束端口的prop:pubPortEnd。开始开始我是这样定义的，分别去定义两个接口的验证规则，然后再验证规则里再去验证另一个输入框，这样就回造成重复调用，浏览器报错。<script> export default{ data(){ var validateStart = (rule, value, callback) => { if(this.portTy

2020-06-08 10:44:16 4803 2

原创 Maximum call stack size exceeded

vue项目配置好路由后报错：Maximum call stack size exceeded;Cannot read property ‘matched’ of undefined;通过查阅各种资料，发现了解决办法，配置路由时候，redirect用错，去掉后就可以了。...

2020-04-23 15:50:54 405

原创 h5手机端适配字体设置

前言手机端页面动态设置根元素，适配不同屏幕大小。开始<script> //rem为html的字体大小通过改变html的字体大小达到适配的效果 remChange(); //监听屏幕改变resize事件触发remChange方法 window.addEventListener("resize", remChange) function r...

2019-09-18 14:22:28 5226

原创 vue动态生成表单并加验证规则，input输入框无法输入

vue动态生成表单，input输入框无法输入前言开始需要注意的地方前言开发过程中，遇到一个页面是纯表单配置页面，表单项有四五十个，于是只能想办法动态生成。开始1、后台返回数据格式为： ``` formData: [{ surplusValue: 100, usedValue: 0, quotasValue: 100...

2019-08-06 14:47:32 7446

qq_39352780的博客

原创 js获取某月往前推一年或半年的年月数组

原创 vue跨域iframe自适应高度

原创 vue实现图片框选标注

原创 move the returned value immediately after the `=＞`

原创 Configuration for rule “linebreak-style“ is invalid: Value [“error“,“windows“] should NOT ha

原创 The engine “node“ is incompatible with this module. Expected version

原创 vue addRoute 实现子账号权限管理