- 博客(43)
- 收藏
- 关注
RSS订阅
原创 Vue的路由守卫
全局路由守卫import Vue from "vue";import VueRouter from "vue-router";Vue.use(VueRouter);//路由表const routes = [ // 重定向定的是Home页面 { path: "/", redirect: "/Home" }, { path: "/Login", name: "Login", component: () => import("@/comp
2021-05-06 07:36:45
595
5
原创 正则验证的方法大全
1、手机号码的校验2、身份证的校验3、邮箱的校验4、URL的校验5、IPv4的校验6、16进制颜色的校验7、日期 YYYY-MM-DD8、日期 YYYY-MM-DD hh:mm:ss9、整数的校验10、小数的校验11、保留n位小数12、邮政编号的校验13、QQ号的校验14、微信号的校验15、车牌号的校验16、只含字母的字符串17、包含中文的字符串18、密码强度的校验19、字符串长度n的校验20、文件拓展名的校验21、匹配img和src22、匹配html中的注释23
2022-06-27 14:25:44
5953
原创 基于 Vue 实现页面中文本的复制功能
1. 需求说明在项目中点击按钮复制某行文本是很常见的应用场景，在Vue项目中实现复制功能需要借助 vue-clipboard2 插件。2. 代码实现安装依赖：在 main.js 文件中全局引入插件，示例代码如下：在组件中有两种方法可以实现复制功能。方法一：使用 vue-clipboard2 提供的指令方法二：使用 vue-clipboard2 全局绑定的 $copyText 事件方法3. 效果演示...
2022-06-22 11:35:59
1274
原创 关于git一些命令
git pull;git branch -av //列举出所有的版本列表 前面带*号的代表你当前工作目录所处的分支基于某一个分支创建一个分支：git checkout -b shiyf_repair_service_0425 --track remotes/origin/develop删除分支: 删除分支前需要将当前分支切换到删除分支之外的其他分支上git branch -d shi_repair_0425合并分支之后需要 git push命令将最新的代码push到远程分支上git ch
2022-05-20 14:47:53
93
原创 微信小程序的本地存储
为什么要要把数据存在本地呢？因为缓存数据 减少前后端交互所浪费的事件 1. 每次请求数据 由于数据量非常大 导致接口请求时间超过1s 2. 缓存数据 可以不用频繁的去请求数据(常规操作中,一般是由后台设置在响应头中的接口数据是否缓存的)前端存储 或者缓存1.存储的位置(本地存储) 浏览器和微信小程序的本地存储 浏览器 1. window.localStorage.setIte("key","value"); 微信小程序2. wx.s
2021-05-12 21:49:25
3790
2
原创 深拷贝跟浅拷贝
让我们首先了解深拷贝和浅拷贝的区别：1.浅拷贝： 将原对象或原数组的引用直接赋给新对象，新数组，新对象／数组只是原对象的一个引用2.深拷贝： 创建一个新的对象和数组，将原对象的各项属性的“值”（数组的所有元素）拷贝过来，是“值”而不是“引用”为什么要用深拷贝呢？原因：我们希望在改变新的数组（对象）的时候，不改变原数组（对象）...
2021-05-11 21:59:48
154
原创 javascript数组去重方法
将数组var arr = [1,1,‘true’,‘true’,true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,‘NaN’, 0, 0, ‘a’, ‘a’,{},{}]中重复的值过滤掉1、 ES6-set使用ES6中的set是最简单的去重方法var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,
2021-05-10 18:27:11
71
原创 数组的排序方法
js中数组排序（冒泡、快速、插入）冒泡排序法：function MaoPaoSort(arr){ for(var i = 0;i<arr.length-1;i++) { for(var j = 0;j<arr.length-i-1;j++){ if(arr[j]>arr[j+1]){ //把大的数字放到后面 var str = arr[
2021-05-10 18:26:42
132
原创 JS中的字符串
1. 统计一个字符串中某个字符出现的次数？ function sum(str, a) { let b = str.indexOf(a); var num = 0; while (b !== -1) { console.log(b); num++; b = str.indexOf(a, b + 1) } return num; }2. 统计一个字符串中，出现次数最多的字符，出现了多少次？方法一：str = 'as
2021-05-10 18:26:07
65
原创 什么是数组扁平化？
数组扁平化就是将一个多维数组转换为一个一维数组实现基本方式1、对数组的每一项进行遍历。2、判断该项是否是数组。3、如果该项不是数组则将其直接放进新数组。4、是数组则回到1，继续迭代。5、当数组遍历完成，返回这个新数组。1.常规方式 递归处理Array.prototype.flatten = function () { var resultArr = []; var len = this.length; for (var i = 0; i < len; i ++) {
2021-05-10 18:25:40
759
原创 作用域和变量
作用域 （种类）作用域分为全局作用域跟函数作用域以及ES6新增的块级作用域JS首先有一个最外层的作用域 全局作用域JS可以通过函数来创建一个独立作用域被称为函数作用域，函数可以嵌套，所以作用域也可以嵌套es6中新增了块级作用域简单介绍一下：自由变量自由变量的概念： 当前作用域没有定义的变量一个变量在当前作用域没有定义，但被使用了向上一级作用域，一层层一次查找，直到找到为止如果到全局作用域都没有找到，就会报错…is not defindvar w=200function Fn
2021-05-09 20:25:36
92
原创 闭包的概念以及使用
1. 如何产生闭包闭包作用域应用的特殊情况，有两种表现函数作为参数被传递函数作为返回值被返回//函数作为返回值 function create() { let a = 100 return function () { console.log(a); } } let fn = create() let a = 200
2021-05-09 20:25:18
103
原创 js异步之宏任务（marcroTask）和微任务（microTask）
什么是宏任务和微任务宏任务： setTimeout,setInterval,Ajax,DOM事件微任务：Promise async await微任务执行时机比宏任务要早异步和单线程异步和单线程是相辅相成的，js是一门单线程脚本语言，所以需要异步来辅助异步和同步的区别:异步不会阻塞程序的执行，同步会阻塞程序的执行，前端使用异步的场景：定时任务：setTimeout，setInverval网络请求：ajax请求，动态img加载事件绑定//ajax请求代码示例cons
2021-05-09 20:24:55
119
原创 js数据类型跟堆栈的存储的理解
js数据类型有哪些基本数据类型： Number、String、Boolean、Undefined、Null引用数据类型: Object。包含Object、Array、 function、Date、RegExp。引用类型堆栈存储： 主要针对Object、Array这两种引用数据以及null， 同时存储在栈（stack）和堆（heap）中，占据空间大、大小不固定。引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。引用类
2021-05-09 20:24:34
267
原创 递归手写深拷贝
深拷贝和浅拷贝是只针对Object和Array这样的引用数据类型的，想要了解拷贝，前提需要对数据类型跟堆内存栈内存要有一定的认识浅拷贝的理解：浅拷贝是按位拷贝对象，它会创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值；如果属性是内存地址（引用类型），拷贝的就是内存地址 ，因此如果其中一个对象改变了这个地址，就会影响到另一个对象。即默认拷贝构造函数只是对对象进行浅拷贝复制(逐个成员依次拷贝)，即只复制对象空间而不复制资源。深拷贝的理解：深拷贝会另外创
2021-05-09 20:24:08
244
原创 js数据类型判断
说起Js的数据类型判断大家应该都会那么让我们一起看看吧数据类型的判断有四种：typeof、instanceof、constructor、Object.prototype.toString.call()、jquery.type()首先让我们了解typeofconsole.log( typeof 100, //"number" typeof 'abc', //"string" typeof false, //"boolean" typeof undefined, //"u
2021-05-09 20:21:11
72
原创 梦学谷管理系统（二）
项目架构接着上篇博客写,上篇博客写到了梦学谷后台管理系统首页,基本布局和退出登录及修改密码已经写完了，接下来让我们看看功能模块会员管理会员管理页面的实现需要对页面进行一个基本的布局,在利用mock.js的模拟到的数据,通过接口获取到数据对页面进行一个最基础的渲染,需要实现列表分页,用户查询.新增列表,编辑用户,删除列表等功能,下面附上页面效果图:代码展示：<template> <div> <!-- :inline="true" 表单一行显示
2021-05-06 07:34:47
349
原创 梦学谷管理系统（一）
系列文章目录文章目录系列文章目录前言一、项目架构二、项目技术栈三、项目所有模块总结前言最后决定模仿 梦学谷管理系统 做一个项目。可能时间隔得有点久了，之前学的东西很多都差不多忘记了，做这个项目基本上都是看着官方的文档一点一点做的。在家里也免不了有各种各样的事情耽误了项目的进度。现在终于差不多做好了，分享出来，新手上路，如有错误，请多多指教一、项目架构element-uimock.jsmomentaxiosapi封装请求二、项目技术栈前端 Vue+Vue-router+V
2021-05-06 07:34:02
588
1
原创 Watcher源码解析
function Watcher(vm, exp, cb) { //在watcher的实例上保存回调函数 this.cb = cb; //用于更新界面的回调函数 this.vm = vm; //MVVM的实例vm this.exp = exp; //对应的表达式 this.depIds = {}; //n个相关的dep的容器 this.value = this.get(); //初始化获取当前表达式对应的value}Watcher.prototype =
2021-05-05 20:02:42
95
原创 Observer的源码解析
function Observer(data) { //在Observer实例上暂存data this.data = data; this.walk(data);}Observer.prototype = { walk: function(data) { var me = this; //对data里所有的属性名进行遍历 Object.keys(data).forEach(function(key) {
2021-05-05 20:01:13
91
原创 MVVM的源码解析
function MVVM(options) { //给实例新增一个$options属性,.并且把传递过来的配置进行暂存 this.$options = options; this.$options.beforeCreate && this.$options.beforeCreate(); //在实例上新增一个_data 保存传递过来的data数据 var data = this._data = this.$options.data; /
2021-05-05 20:00:06
110
原创 Compile的源码解析
function Compile(el, vm) { this.$vm = vm; //this Compile的实例 $vm 是MVVM的实例 (vm) // el == "#app" 判断当前用户传递的el属性是元素节点还是选择器,如果是元素节点则直接保存到$el中通, //如果不是 则根据选择器 去查找对应的元素 然后保存 this.$el = this.isElementNode(el) ? el : document.querySelector(el);
2021-05-05 19:53:26
129
原创 5 分钟上手ECharts
获取 ECharts你可以通过以下几种方式获取 Apache EChartsTM。从 Apache ECharts 官网下载界面 获取官方源码包后构建。在 ECharts 的 GitHub 获取。通过 npm 获取 echarts，npm install echarts --save，详见“在 webpack 中使用 echarts”通过 jsDelivr 等 CDN 引入引入 ECharts通过标签方式直接引入构建好的 echarts 文件<!DOCTYPE html><
2021-05-05 19:31:35
138
原创 Vue电商管理系统（3）
权限管理页面角色列表权限列表角色列表难点分析，个人认为就是分配权限，渲染页面的布局页面渲染操作：有element-ui的table组件+Layout 布局+tag标签，分配权限：代码操作：<template> <div> <mian /> <el-card> <el-button type="primary" class="btn" @click="addUser" >
2021-05-05 19:09:24
225
2
原创 Vue的电商后台管理系统（2）
Vue的电商后台管理系统（2）上一节已经实现该系统的登陆界面、路由、登录、退出及导航守卫功能，本期将继续完善该系统的以下功能：从后端获取后台列表数据并渲染到前端页面、用户列表的展示、修改、删除和添加。1.后台首页基本布局.实现后台首页的基本布局.实现左侧菜单栏实现用户列表展示实现添加用户本系统后台将采用Element UI 中的Container布局容器。基本结构<el-container> <el-header>Header</el-header&
2021-05-03 23:16:25
362
原创 Vue电商后台管理系统（1）
Vue电商后台管理系统（1）登录在components文件夹下创建登录组件，Login.vue，并快速生成template、script和style骨架。配置路由，进入router文件夹，导入Login组件，创建路由并重定向首页为登录界面，进入首页时会自动跳转至登录页面，配置如下：绘制页面：<template> <div class="login_container"> <div class="login_box"> <!--
2021-05-03 21:56:54
598
1
原创 Vue高平率面试题
系列文章目录文章目录系列文章目录为何组件的data必须是一个函数vue常用指令：v-if与v-show的区别Vue生命周期钩子函数Vue的双向数据绑定原理（简洁版）Vue中的虚拟dom，diff 算法Vue组件通信什么是vuex?vue监听和深度监听watchvue中Computed、Methods、Watch区别vue中的修饰符为何组件的data必须是一个函数Object是引用数据类型，如果不用function返回，每个组件的data都是内存的同一个地址，一个数据改变了其他也改变了，这就造
2021-04-29 08:32:50
567
1
原创 史上最全Vue的组件传值
一…父传子如何传递1.父组件parent代码如下： <template> <div class="parent"> <h2>{{ msg }}</h2> <son psMsg="父传子的内容:叫爸爸"></son> <!-- 子组件绑定psMsg变量--> </div> </template> <script> import son f
2021-04-25 21:59:52
340
原创 vue中如何做全屏跟全局时间过滤器
首先我们在template写一些标签 <div class="Full-screen" @click="addScreen"> <el-tooltip effect="dark" :content="fullscreen ? `取消全屏`:`全屏`" placement="bottom"> <i class="el-icon-rank"></i> </el-tooltip>
2021-04-21 11:41:43
183
原创 常见的HTTTP状态码
http状态码分类：100-199 提示信息 – 表示请求正在处理200-299 成功 – 表示请求正常处理完毕300-399 重定向 – 要完成请求必须进行更进一步的处理400-499 客户端错误 – 请求有语法错误或请求无法实现500-599 服务器端错误 – 服务器处理请求出错2xx成功2xx状态200表示从客户端发来的请求在服务端正在被处理201Created请求已被实现，而且有一个新的资源依据请求的需要而建立202Accepted请求已接受，
2021-04-20 22:00:31
912
原创 Vue的生命周期函数
vue 生命钩子函数图一张图让一目了然，豁然开朗，奥里给那么接下来让我们一起细细的了解，你准备好了吗？1.beforeCreate(){console.log(“创建之前”);}, beforeCreate(),这是第一个生命周期函数, 表示实例完全被创建出来之前, 会执行它,此时data和methods中的数据和方法都还没有被初始化,在这里是获取不到data中的数据的,console会报错,undefined2.created(){console.log(“创建完成”);}, created(
2021-04-20 19:07:52
165
原创 vue中data为什么必须是一个函数
VUE组件中的data必须是函数在函数内声明实例属性保存data，每个实例对象的data都是经过一次函数执行得到有不同的返回结果，所以返回data的值具有自己独立的作用域。在定义Vue实例时，给Vue传参是一个对象，对象中data就是一个函数，Vue在实例化的时候会调用这个函数每个实例都会返回新的值，data得到不同的值作用域另外，赋值函数不一定要定义在原型上，也可以定义为函数或类的实例方法理解对象为引用关系，当复用组件时，由于数据对象都指向同一个data对象，当找一个组件中修改data时，其他
2021-04-15 09:02:06
207
原创 从输入url到页面加载完成发生了什么
1、浏览器的地址栏输入URL并按下回车。2、浏览器查找当前URL是否存在缓存，并比较缓存是否过期。3、DNS解析URL对应的IP。4、根据IP建立TCP连接（三次握手）。5、HTTP发起请求。6、服务器处理请求，浏览器接收HTTP响应。7、渲染页面，构建DOM树。8、关闭TCP连接（四次挥手）。一、URL我们常见的RUL是这样的:http://www.baidu.com,这个域名由三部分组成：协议名、域名、端口号，这里端口是默认所以隐藏。除此之外URL还会包含一些路径、查询和其他片段，例如
2021-04-08 11:31:54
136
1
原创 原生Ajax的创建过程
创建xhr 核心对象var xhr=new XMLHttpRequest();调用open 准备发送参数一：请求方式参数二: 请求地址参数三：true异步，false 同步xhr.open('post','http://www.baidu.com/api/search',true)如果是post请求，必须设置请求头。xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded').
2021-04-01 20:58:09
57
原创 javascript数组方法
整理了以下数组方法：join()push()和pop()shift() 和 unshift()sort()reverse()concat()slice()splice()indexOf()和 lastIndexOf() （ES5新增）forEach() （ES5新增）map() （ES5新增）filter() （ES5新增）every() （ES5新增）some() （ES5新增）1. join( )join，就是把数组转换成字符串，然后给他规定个连接字符，默认的是逗号
2021-03-31 19:03:36
86
原创 get与post区别
一、背景介绍get 和 post是HTTP中请求数据的方法；application json 与form表单是HTTP中传输文件的类型，所以要了解其中的区别，要先了解HTTP 协议格式 和 HTTP Header二、请求报文、响应报文我们发送的http请求，浏览器都会整理成请求报文，发送到服务器。服务器响应的数据，浏览器会以响应报文的形式接受。HTTP请求报文:个HTTP请求报文由四个部分组成：请求行、请求头部、请求空行、请求数据。HTTP响应报文:同样的，HTTP响应报文也由四部分组成：响
2021-03-31 18:36:29
150
原创 this的理解
一图搞懂javascript中的this与call/apply/bind的6中关系 **总结**在浏览器里，在全局范围内this 指向window对象；在函数中，this永远指向最后调用他的那个对象；构造函数中，this指向new出来的那个新的对象；call、apply、bind中的this被强绑定在指定的那个对象上；箭头函数中this比较特殊,箭头函数this为父作用域的this，不是调用时的this.要知道前四种方式,都是调用时确定,也就是动态的,而箭头函数的this指向是静态的,声明的
2021-03-30 19:02:27
1283
1
原创 css命名规则
头：header内容：content/container尾：footer导航：nav侧栏：sidebar栏目：column页面外围控制整体布局宽度：wrapper左右中：left right center登录条：loginbar标志：logo广告：banner页面主体：main热点：hot新闻：news下载：download子导航：subnav菜单：menu子菜单：submenu搜索：search友情链接：friendlink页脚：footer版权：copyrigh
2021-03-30 08:02:29
64
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人