- 博客(61)
- 收藏
- 关注
RSS订阅原创 js原生实现防抖节流
共同点：都用到了setTimeout定时器，都是在指定时间间隔后执行函数，都是为了解决数据时时变化而时时请求导致性能差的问题区别：防抖在指定时间间隔里再次调用函数，会清除定时器，重新计时，直到在最新的计时时间间隔里没有调用函数，才会执行定时器里的函数。而节流会在指定时间间隔后会执行一次函数，不会清除定时器而重新计时防抖缺点：当用户在指定时间间隔里一直操作，那么setTimeout里的函数永远不会执行节流缺点：如果用户一直操作，那么setimeout里的函数会在指定时间间隔后都会执行一次，如此反复
2020-09-10 17:51:10
7869
原创 js - 计算elment-ui里的日期插件的结束日期与开始日期相差的年月日
需求：日一致，则相差年月日为年、月相减，不做具体天数的计算，如2020年7月1日-2020年8月1日，则相差年月日为“0年1月0日”插件：element-ui、moment，使用了moment来获取某个月份的天数// 获取到的日期格式为["yyyy-mm-dd", "yyyy-mm-dd"]<el-date-picker v-model="dateTime" type="daterange" align="left" unlink-panels range-separa
2020-08-10 20:41:31
766
原创 js - do while与while的区别
do while先执行后判断，循环至少执行一次，即便条件为falsewhile先判断后执行let i = 2do { console.log(i) // 2 i++}while(i < 2) { console.log(i) // 3}let j = 2while(j < 2) { // 没有执行 console.log(j)}...
2020-08-07 18:20:34
1001
原创 js - return在for 循环与forEach循环里的的区别
for循环里的return中止整个循环，循环后面的代码不会被执行。forEach循环里的return中止本次循环，继续下一次循环，循环后面的代码会被执行。forEach可以使用try catch来中止整个循环。// for循环里的return中止整个循环let test = ()=>{ for(let i=0;i<5;i++){ if(i === 3){ return } cons...
2020-08-07 18:18:42
552
原创 JS中使用instanceof能得到哪些类型
instanceof用来判断对象的具体类型objectName instanceof objectType其原理就是检测函数的prototype是否在被检测对象的原型链上console.log([] instanceof Array) // trueconsole.log({} instanceof Object) // trueconsole.log((()=>{}) instanceof Function) // true// instanceof用来判断数组存在误区，原...
2020-08-05 14:09:41
1020
原创 JS中使用typeof能得到哪些类型
typeof用于判断数据类型，返回值有6个字符串：string、number、undefined、boolean、object、functionarray、object、null、函数实例（new + 函数）通过typeof判断都为objectArray、Object、function(){}、(()=>{})、Function通过typeof判断都为functionconsole.log(typeof 'aa') // stringconsole.log(typeof 4) // .
2020-08-05 11:44:51
1216
原创 js - 循环滚动TOP10
场景：在固定高度区域里循环滚动前10条数据<div id="caseRank"> <ul id="rankList1"> <li v-for="(item,index) in platList" :key="index" > <span>{{ index + 1 }}</span> <span class="cont">{{ item.name }}</sp
2020-06-17 16:57:16
627
原创 sessionStorage 存、取、删除、清空数据方法封装
存数据：sessionStorageSet// 存数据export const sessionStorageSet = (name, obj) => { if (typeof obj === 'undefined') { return false } // obj为undefined或null或空字符串不能存储，布尔值可存储，但取时为字符串 if(!obj && (typeof obj === 'undefined' || typeof obj === '.
2020-06-17 15:53:33
14399
1
原创 hash模式下，获取url中的参数，并解决乱码问题
encodeURIComponent 编码decodeURIComponent 解码例如：http://xxx?userId='666'&userName=’用户名‘utils.js// 获取url中的参数 hash模式下export function formatUrlParams() { let url = window.location.hash let obj = {} if (url.indexOf('?') !== -1) { let start.
2020-06-17 14:48:51
2202
原创 history模式下，获取url中的参数，并解决乱码问题
encodeURIComponent 编码decodeURIComponent 解码例如：http://xxx?userId='666'&userName=’用户名‘utils.js// 获取url中的参数 history模式下export function formatUrlParams() { let url = window.location.href let obj = {} if (url.indexOf('?') !== -1) { let st.
2020-06-17 14:48:45
1567
原创 vue项目中mockjs的简单场景使用
安装mockjs：npm install mockjs --save-dev在vue.config.js平级创建mock.jsimport Mock from 'mockjs'// 该方法用于拦截带参数的地址let getRegExpUrl = (url) => { return RegExp(url + '.*')}Mock.mock(getRegExpUrl('/cooperate-case-server/flowRules/selectFlowRules'), { '
2020-06-17 14:24:43
782
原创 vue-cli3 vue.config.js 配置entry 引入mock..js
使用场景：在开发环境，使用mock.js；在生产环境，不使用mock.jspackage.json配置："scripts": { "serve": "cross-env NODE_ENV=development vue-cli-service serve", "build": "cross-env NODE_ENV=production vue-cli-service build",}vue.cofig.jsconfigureWebpack: (config) => {
2020-06-17 14:16:13
8457
原创 el-table 动态生成多级表头
html代码：<el-table v-loading="loading" :data="orgTableData" :header-cell-style="{'background':'#f5f7fa','color':'#666'}" stripe border> <el-table-column prop="number" label="序号" width="80" type="index" align="cent
2020-06-17 14:07:50
4195
3
原创 el-table 动态生成表头
html代码：<el-table v-loading="loading" :data="orgTableData" :header-cell-style="{'background':'#f5f7fa','color':'#666'}" stripe border> <el-table-column prop="number" label="序号" width="60" type="index" align="cent
2020-06-17 14:04:41
5437
原创 通过finalshell查找前端端口号的nginx配置文件
第一步：新建并连接服务如不清楚，可参考文章：https://blog.csdn.net/qq_32678401/article/details/103564131第二步：找到nginx配置文件命令： netstat -nltp |grep端口号 pwdx进程号 ----查看工作目录第三步：在nginx配置文件里，找到含有关键词的文件...
2019-12-16 16:23:23
2881
原创 finalshell - 新建并连接服务
第一步：新建服务（1）点击“文件”图标，出现连接管理器弹窗（2）点击下面红框里的图标，选择第一个“SSH连接(Linux)”，出现新建连接的弹窗（3）在新建连接弹窗中，输入名称、主机、用户名、密码。一般名称与主机保持一致。点击确定，在连接管理器窗口里会增加一条服务。第二步：连接服务（4）在连接管理器窗口，右键新建的服务，点击连接，进入命令窗口，看到以下界面，说明连接成...
2019-12-16 15:56:58
5805
原创 vscode中使用eslint + prettier来规范代码格式
1，vscode扩展中安装ESlint，并ctrl+,打开设置，点击右上角从左到右第三个图标，打开settings.json文件2，在vscode设置settings.json中添加如下配置 "eslint.autoFixOnSave": true, // 保存时自动格式化 "eslint.validate": [ "javascript", "javascri...
2019-08-20 14:57:48
3992
原创 new RegExp() + scrollIntoView() 实现关键词查询，添加高亮样式
通过一个小demo实现以下功能点： （1）对内容做关键词查询，将内容中的关键词添加高亮样式，默认第一个关键词样式区别其它关键词样式 （2）点击上一个下一个按钮查找关键词，使当前关键词样式区别于其它关键词样式 （3）当前关键词通过scrollIntoView()，使其始终出现在可见区域内 （4）点击清空，清空所有关键词高亮样式，滚动条...
2019-08-19 15:34:05
398
原创 js - 通过锚点实现导航联动内容，通过监听容器里的滚动条，实现内容联动导航
写这篇文章的背景：接手的项目中有一个页面，通过锚点实现了导航联动内容，但是没有实现内容滚动时联动导航于是我在项目中实现这一功能之前，在本地模拟了相同的场景以下代码可以直接复制到本地查看效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <ti...
2019-08-15 17:19:40
2477
原创 visibilitychange - 指定标签页可见时，刷新页面数据
三个知识点： 一通过监听浏览器页面可见性改变（visibilitychange）事件，来判断标签页是否可见 二配置路由的meta，来判断是否是指定的标签页 三调用其它模块的actions，刷新数据router.jsroutes: [ { path: "/", redirect: "index" }, { path: "/ind...
2019-08-08 16:31:53
1117
原创 vue项目中如何嵌入其它项目的页面
通过iframe嵌入，src的路径在static中（vue-cli3在public）配置编译打包时，不会将static/public里的文件编译，前端可修改index.js里的url方式一：创建index.js，在入口页面中引入static/urls/index.jswindow.urlsPath = { statisticsUrl: 'http://xx.xx.xx.x...
2019-08-08 15:01:09
34674
3
原创 iView - table 解决分页后跳转到其它页，序号还是从1开始的问题
不分页的情况下，可以type="index"；data() { return { tableColumn: [{type: 'index', width: 70, align: 'center', title: '序号'}] }}分页的情况下，有两种方式：方式一：在data中定义列表项时赋值data() { return { tableColu...
2019-08-08 09:45:33
2047
原创 axios post请求变成了get 报错405
今天sb了……创建了axios实例，配置选项后，发现post请求变成了get请求，报错405对axios封装的部分代码：let instance = axios.create()const $axios = function(opts) { opts.params = { time: new Date().getTime() } retu...
2019-08-05 17:47:36
8183
11
原创 iview--table表格title提示和气泡提示
简述：文本不换行，超出显示省略号，两种提示方式，title提示和气泡提示气泡提示不足：当内容没超过一行，也会出现气泡提示。觉得不如Element-UI的table组件好用。若有简单有效的解决方案，还请告知哦^_^<Table border :columns="tableColumn" :data="tableData"></Table>mounted(...
2019-07-30 17:40:22
4305
原创 vue打包dist包，通过nginx反向代理，在本地访问
第一步：去官网下载nginx第二步：打开配置文件：conf/nginx.conf，有三处配置server { listen 8888; location / { # 配置dist文件路径 root /project/project-rsdq/RSDQ/rsdq-client/dist; index index.html i...
2019-07-25 10:42:01
2406
2
原创 深拷贝与浅拷贝
深拷贝： 与原数据不指向同一对象 原数据第一层数据若为基本数据类型，改变不会使原数据一同改变 原数据中包含子对象，改变不会使原数据一同改变export funtion deepCopy(obj){ var newObj = {}; if(!obj || typeof obj != 'object'){ newObj = obj; }els...
2019-07-24 17:27:49
77
原创 vue-cli 3.0 反向代理 配置跨域
描述：通过定义的参数，代理到proxy中target指向的地址。vue.config.jsmodule.exports = { devServer: { proxy: { // 配置跨域 '/api': { target: "http://172.33.44.11:8081/rsd...
2019-07-24 17:08:58
1836
原创 vuex，缓存字典数据 + 调用其它模块的actions里请求
描述：调用其它模块actions里的请求接口，查字典，用于格式化数据。在查字典接口里，第一次会把请求数据缓存起来，以便调用时，先从缓存里拿字典数据，如果缓存没有，才会发起请求。store -> modules -> dic.jsimport axios from '@/utils/http'import api from '@/api/dic'import * as ...
2019-07-24 16:55:43
3534
1
原创 sublime ctrl+shift+p 不能调出 Package Control: Install Package 调出之后报错There are no packages available ……
从官网下载sublime之后，想下载一些插件，但是ctrl+shift+p 不能调出 Package Control: Install Package 解决如下：进入菜单：Perferences->Browse Packages将Package Control文件夹放进去，与User平级。此时可以调出 Package Control: Install Package 啦...
2019-02-26 11:07:11
5173
3
原创 通过Everything工具实现两台电脑之间的文件传输
场景：笔记本需要台式机中的文件工具：Everything前提：两台电脑之间能够ping，如果不能，关掉台式机的防火墙，再试试1，查找台式机的ip地址：ipconfig2，在笔记本ping台式机ip：ping 10.4.126.463，在台式机上，打开Everything->工具->选项，如下，切记，勾选允许FTP文件下载4，在笔记本文件路径中输入：t...
2019-02-22 17:02:06
12090
1
原创 插入MySQL新用户报错：ERROR 1364 (HY000): Field 'ssl_cipher' doesn't have a default value
插入MySQL新用户： insert into mysql.user(Host,User,Password) values("localhost","test",password("root"));报错：ERROR 1364 (HY000): Field 'ssl_cipher' doesn't have a default value错误分析：mysql版本引起的问题解决方法...
2019-01-25 14:25:48
1150
原创 MySQL常用命令
在cmd命令行中的操作，需要先登录MySQL无密码：mysql -u root有密码：mysql -u root -p （会提示输入数据库密码）如果直接在mysql命令行中操作，则没有登录MySQL这一步。MySQL常用命令:一、操作数据库和数据表：显示数据库：show databases; 创建数据库： create database 数据库名; 切换数据...
2019-01-25 14:23:39
167
原创 vuejs实现折叠面板展开收缩动画
vuejs通过css3实现元素固定高度到auto高度的动画和auto高度到固定高度的动画。循环列表，html:<template> <div class="newslist"> <ul> <li v-for="(item,index) in newslist" :key="index">
2018-09-05 16:01:27
19470
1
原创 jquery 通过animate实现height: auto展开收缩动画
实现原理：当点击展开时，获取元素height: auto的高度为多少像素，由当前高度到height:auto的过渡；反之。var m_flag = true;var el = $(".case-detail-con"), curHeight = el.height();$("#casesdetail_more").click(function(){ if(m_flag){ ...
2018-08-27 23:30:41
4073
原创 vue中使用Vue.set()报错 Cannot convert undefined or null to object
使用Vue.set()直接在data上增加属性 export default { data() { return { width: '100' } }, methods: { scrollFn(e) { Vue.set(this.data, 'height', 0) } ...
2018-08-27 14:27:01
22673
原创 mpvue 未找到app.json入口文件
（1）情景一：通过 vue init mpvue/mpvue-quickstart my-project 创建一个mpvue项目，发现项目中没有app.json文件。解决：npm run dev 编译一下，会在根目录生成一个dist文件夹，app.json在其中。（2）情景二：复制mpvue项目，没有dist文件夹，npm install -> npm run dev ...
2018-08-27 14:09:17
4276
3
原创 vue中wowjs的使用
（1）通过npm安装：npm install wowjs --save-devanimate.css会自动安装。（2）在main.js中引入animate.cssimport 'animate.css'在组件需要的地方引入wowjs有两种使用方式：1. import {WOW} from 'wowjs' mounted() { new WOW().init() ...
2018-08-24 13:47:45
11269
3
原创 vue中element-ui组件的使用
element-ui Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库（1）通过npm安装：npm install element-ui --save-dev（2）完整引入，全局配置：在main.js中引入：import Element from 'element-ui'import 'element-ui/lib/theme-ch...
2018-08-24 13:37:39
2497
原创 vue中.sync修饰符的使用
场景需求：在父组件data里定义一个变量page，我们希望在子组件里改变这个变量并传给父组件。在父组件里： <template> <v-pagination :page.sync="page></v-pagination> </template> <script type="text/ecmascript-6">.
2018-08-24 11:53:28
12232
原创 vue将时间戳转换成日期格式
（1）创建一个处理时间格式的js，内容如下：export function formatDate(date, fmt) { if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)) } let o = { ...
2018-08-23 16:53:05
45046
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人