- 博客(58)
- 收藏
- 关注
RSS订阅原创 登录信息失效后多次请求提示合并成一次
类似这种多个提示的,看起来不美观,希望改成可以把在短时间内出现相同的错误信息,只提示一次,其他的就不提示了。在通常的业务场景中经常会出现进入页面之后一次性发送好多个请求,如果登录信息失效,那就会出现很多提示。
2024-04-08 22:54:25
261
原创 vue后台管理前端实现权限控制
实现思路：用户登录之后把用户信息存储到vuex中。// store.user.jsimport { login, logout, getInfo } from '@/api/user'import { getToken, setToken, removeToken } from '@/utils/auth'import { resetRouter } from '@/router'const getDefaultState = () => { return { token
2022-03-27 13:49:35
1098
1
原创 js深拷贝
使用JSON.parse(JSON.stringify())方式来进行深拷贝let arr = [1,2,3,4,[5,6,7]]let obj = { name:'张三', age:20, children:{ name:'李四' }}let copyArr = JSON.parse(JSON.stringify(arr))let copyObj = JSON.parse(JSON.stringify(obj)) console.log(.
2022-01-20 16:33:26
721
原创 获取指定范围内的随机数
function sum(m,n){ var num = Math.floor(Math.random()*(m-n)+n) return num}
2022-01-14 16:45:58
511
原创 二次封装mescroll
<template> <mescroll-vue ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit" > <div id="mecroll_dataList"> <slot></slot> </div> </mescroll-vue></templat
2021-09-07 17:19:55
438
原创 node+express实现图片上传接口
需要用到的依赖1.moment //时间序列化2.mkdirp //文件夹管理3.multer 上传/* tools.js*/// 先引入需要用到的依赖const multer = require('multer')const mkdirp = require('mkdirp')const moment = require('moment')// 获取当前的日期const nowDate = moment().format('YYYY-MM-DD')// 封装保存
2021-06-21 18:15:33
1576
2
原创 安装cnpm和安装yarn和卸载node
安装cnpmnpm install -g cnpm -registry=https://registry.npm.taobao.org安装yarnnpm install -g yarn卸载node可以找到node的安装的msi文件，如果找不到的话，就从官网从新下一个，点击安装，会出现change,remove之类的按钮，点击remove然后跟着操作删了...
2021-01-30 19:17:30
1113
原创 jq实用插件
Viewer.js支持移动设备触摸事件支持响应式支持放大/缩小支持旋转（类似微博的图片旋转）支持水平/垂直翻转支持图片移动支持键盘支持全屏幻灯片模式（可做屏保）支持缩略图支持标题显示支持多种自定义事件...
2020-12-10 21:23:52
152
原创 git常用命令
仓库# 在当前目录新建一个Git代码库$ git init# 新建一个目录，将其初始化为Git代码库$ git init [project-name]# 下载一个项目和它的整个代码历史$ git clone [url]配置# 显示当前的Git配置$ git config --list# 编辑Git配置文件$ git config -e [--global]# 设置提交代码时的用户信息$ git config [--global] user.name "[name]"$
2020-11-24 15:59:29
112
原创 vue-cli使用gz
先下载依赖$ npm install compression-webpack-plugin --save-dev$ npm install @gfx/zopfli --save-devvue.config.js中进行配置const CompressionPlugin = require("compression-webpack-plugin");const zopfli = require('@gfx/zopfli');module.exports = { configureWebpac
2020-10-27 10:28:21
280
原创 vue-cli去除console.log
安装依赖npm install babel-plugin-transform-remove-console --save-dev查看Vue项目根目录是否有 babel.config.js 文件，没有就新建一个const plugins = []if (process.env.NODE_ENV === 'production') { plugins.push('transform-remove-console');}module.exports = { presets: [ '@
2020-10-22 15:14:02
495
原创 react笔记
创建react项目npx create-react-app my-app使用sass预编译器注:由于create-react-app里面内置了sass,所以只需要下载 node-sass 模块便可使用,如果需要使用其他的预编译器,则需执行 yarn eject 获取到webpack.config.js文件进行自己配置npm install node-sass -D下载完node-sass依赖之后即可直接使用sassimport React from 'react';import './A
2020-10-14 16:36:58
94
原创 使用element+vuedraggable实现图片上传拖拽排序
// 上传组件<template> <div class="allUpload"> <div class="clearfix"> <div class="wrap"> <draggable v-model="value" forceFallback="true"
2020-10-12 18:24:36
2292
2
原创 vue使用云片滑块验证码
文档地址https://www.yunpian.com/official/document/sms/zh_CN/captcha_captcha_service_h5效果图封装成组件<template> <div class="Yp"> <div id="wrap" class="middleCenter" v-show="show"></div> </div></template><s
2020-09-21 15:08:03
911
原创 js获取两个时间的天数差
getDayNum(startTime,endTime){ const stTime=Date.parse(new Date(startTime)) const etTime=Date.parse(new Date(endTime)) const usedTime = etTime - stTime; const days=Math.floor(usedTime/(24*3600*1000)); return days}getDay
2020-09-18 11:43:19
990
原创 使用monentJs笔记
moment(new Date()).format('MM月DD日'); // 09月01日moment(new Date()).format('MMM'); // 9月moment(new Date()).format('MMMM'); // 九月moment(new Date()).format('dd'); // 六moment(new Date()).format('ddd'); // 周六moment(new Date()).format('dddd'); // 星期六moment(n
2020-09-16 17:54:52
169
1
原创 vue在自定义组件中使用v-model
父组件代码// 父组件中引入子组件并使用<template> <children v-model='active'/></template><script>import children from '@/components/children'export default { data() { active:'' }}</script>子组件代码<template> <div>
2020-09-04 10:45:48
586
原创 vue-cli使用cdn优化
首先创建vue.config.js在vue.config.js中配置先把你要加载的cdn链接写好 // vue.config.jsconst cdn = { css: [ "//cdn.jsdelivr.net/npm/vant@2.8.6/lib/index.css", "//unpkg.com/nprogress@0.2.0/nprogress.css" ], js: [ "//unpkg.com/vue@2.6.11/dist/vue.min.js",
2020-09-03 16:56:56
942
2
原创 vue点击弹框外部关闭弹框
<template> <div class="passwordError"> <van-overlay :show="show" @click="clickOverlay" > <div class="content" ref="contentWrapper"> 内部区域 </div&
2020-09-03 15:21:30
2379
1
原创 vue-cli使用百度地图
首先,先去百度地图开放平台申请一个ak秘钥在自己的vue项目里面的index.html页面里 先引用百度地图的cdn<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你申请的ak秘钥&s=1" ></script>然后再vue.config.js中进行配置百度地图,不然会出现 BMap is not defined的错误configureWebpack:{
2020-08-28 11:12:42
551
1
原创 vue+vant注册全局loading组件
// loadgin.vue<template> <van-popup :close-on-click-overlay="false" v-model="show" style="background-color:transparent" > <div class="loadingWrap"> <van-loading v-if="show" type="spinner" /
2020-08-21 17:45:45
4409
原创 js下载本地文件
function download(url, filename) { return fetch(url).then(res => res.blob().then(blob => { let a = document.createElement('a'); let url = window.URL.createObjectURL(blob); a.href = url; a.downlo
2020-08-03 10:19:13
2564
1
原创 vue使用bus进行父子组件传值,以及解决bus多次触发的问题
新建一个bus.js文件// bus.jsimport Vue from 'vue'export default new Vue;子组件<template> <button @click="handleOpenModal"> </button></template><script>import Bus from './bus.js'export default { name: "children", methods:
2020-06-10 17:43:35
1544
原创 vue踩坑(一) vue-cli项目的创建及vuex的详细使用
全局使用scss点击子路由父路由还有对应的选中状态解决根路径一直为选中状态的问题vue使用scss在vue单文件中使用 /deep/ 来修改ui插件的样式,比如element使用 vuex-persistedstate实现vuex持久化路由命名视图的使用vue-cli的请求代理vue-i18n的使用重定向实现404页面功能实现页面跳转出现进度条vuex的使用实现路由的嵌套跳转...
2020-05-27 23:53:51
1186
原创 组装树节点
function toTree(data){ // 删除 所有 children,以防止多次调用 data.forEach(function (item) { delete item.children; }); // 将数据存储为 以 id 为 KEY 的 map 索引数据列 var ma...
2020-04-26 16:55:33
264
原创 js字符数组转化为数字数组
// 例如一个字符串数组const arr = ['1','2','3','4']//转换成 const numberArr = [1,2,3,4]// 只需要使用 arr.map(Number)
2020-04-23 15:56:12
902
原创 vue跳转路由时显示进度条
通过nprogress组件来实现进度条功能yarn add nprogress在router.js里面使用import Vue from 'vue'import VueRouter from 'vue-router'import NProgress from 'nprogress' import Login from '../views/Login.vue'import 'npro...
2020-03-31 14:03:40
514
原创 通过coding pages如何搭建静态网站？
https://help.coding.net/docs/devops/cd/static-website.html
2020-03-30 16:40:11
3014
原创 react阻止事件冒泡
class OuterClickExample extends React.Component { constructor(props) { super(props); this.state = { isOpen: false }; this.toggleContainer = React.createRef(); this.o...
2020-03-17 15:44:59
413
原创 使用tinymce-react富文本编辑器
在项目中，经常需要使用到富文本编辑器，市场上有很多各式各样版本的，但是感觉功能都不怎么强大，最近发现一款富文本编辑器，使用简单方便，功能强大。TinyMCE：功能强大、所见即所得的富文本编辑器中文文档地址：http://tinymce.ax-z.cn/general/basic-setup.php英文文档地址：https://www.tiny.cloud/docs/使用富文本编辑器tiny...
2020-02-05 11:14:19
7315
5
原创 react使用laydate
最近项目中使用的是react+antd，因为设置秒杀活动需要用到时间场次，需要控制最大时间和最小时间，个人觉得antd的时间控件不太好用，所以就使用了layui里面的laydate控件首先下载依赖npm install layui-laydate使用laydate...
2020-02-05 10:42:08
534
1
原创 moment.js时间戳与时间的转换
// 获取当前时间 const currentTime = moment() // 获取当前时间的时间戳 (秒) 大写的X const miao = moment().format("X") // 获取当前时间的时间戳 (毫秒) 小写的x ...
2019-12-27 14:16:50
10180
原创 排序
const array = [ {specName:'北京'}, {specName:'上海'}, {specName:'深圳'}, {specName:'武汉'}, {specName:'阿里'}, ]; const resultArray = array.sort( function compareFunction(param1, param2)...
2019-12-18 10:33:40
222
转载 常用正则表达式
一、校验数字的表达式1 数字：^[0-9]*$2 n位的数字：^\d{n}$3 至少n位的数字：^\d{n,}$4 m-n位的数字：^\d{m,n}$5 零和非零开头的数字：^(0|[1-9][0-9]*)$6 非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(.[0-9]{1,2})?$7 带1-2位小数的正数或负数：^(\-)?\d+(\.\d{1,2})?$...
2019-11-11 15:21:15
121
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人