- 博客(43)
- 收藏
- 关注
RSS订阅原创 后台管理系统开发总结
这个后台管理系统是我自己从零到一基于vue2和element-ui开发的我自己使用的一个vue2的开发模板，配置好了vue-router，vuex，和element-ui的按需引入这些最基本的配置开发的话尽量使用路由的懒加载 以便我们后期优化打包代码我就不写入了，就说一下总结和一些细节然后就可以开始写我们的项目了vue是一个模块化开发的理念，先定好我们所需要组成的组件，配好路由开始写入代码我先写的是一个login的页面这里边的逻辑没什么好说的就是登录然后请求接口登陆成功登录成功后是一个首
2021-06-24 20:00:48
2411
原创 diff算法
diff算法的本质是找出两个对象之间的差异diff算法的核心是子节点数组对比，思路是通过首尾两端对比key的作用主要是决定节点是否可以复用建立key-index的索引，主要是替代遍历，提升性能。diff算法的作用渲染真实DOM的开销很大，有时候我们修改了某个数据，直接渲染到真实dom上会引起整个dom树的重绘和重排。我们希望只更新我们修改的那一小块dom，而不是整个dom，diff算法就帮我们实现了这点。diff算法的本质就是：找出两个对象之间的差异，目的是尽可能做到节点复用。此处.
2021-06-21 07:54:23
11172
原创 函数防抖与函数节流
函数防抖函数防抖(debounce)：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。举个栗子function ajax(content) { console.log('ajax request ' + content)}function debounce(fun, delay) { return function (args) { let that = this let _args = args let delay
2021-06-21 07:42:00
186
原创 vue的双向数据绑定
vue的双向数据绑定是采用数据劫持结合发布订阅的模式,通过object.defineProperty()中的get和set，当数据发生变动是发布消息给订阅者触发相应的监听回调来改变视图实现原理实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性
2021-06-17 08:20:46
116
原创 iframe 优点、缺点
优点iframe能够原封不动的把嵌入的网页展现出来。如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。缺点会产生很多页面，不容易管理。iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条
2021-06-14 18:40:10
95
1
原创 项目中如何修改element-ui的默认样式 （去除scoped,样式穿透 ＞＞＞ , less/sass : /deep/）
我们可以在原来的css下边，编写一个不带有scoped的style去修改emementui的默认样式缺点：这样设置的是全局样式，意思就是如果你的项目里面有多个css需要修改，那么这么设置，两个地方都会被改变。使用 >>> 箭头穿透父类（或者更高级） >>> 需要修改的类缺点：有时候sass会不识别，从而不起效果。使用/deep/穿透父类（或者更高级）/deep/ 需要修改的类缺点：暂时还未发现...
2021-06-11 07:42:31
99
原创 elemeng-ui 中el-form 表单如何校验
我们在使用element-ui中的form表单做一些简单校验时先看官方文档api自带的rules就是验证的规则有两种方法一种是写在js代码中trigger代表在什么时候触发验证message代表出发验证时提示内容type代表验证的格式 例如 “string” “number” “eamil”…之类min: 3, max: 5 代表最小长度 和 最大长度required代表是否开始判空验证 rules: { name: [ { req
2021-06-07 20:49:16
420
原创 windows安装Nginx
简介Nginx (engine x) 是一个高性能的HTTP和反向代理服务器，也是一个IMAP/POP3/SMTP服务器。Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru 站 点（俄文：Рамблер）开发的 它也是一种轻量级的Web服务器，可以作为独立的服务器部署网站（类似Tomcat）。它高性能和低消耗内存的结构受到很多大公司青睐，如淘宝网站架设。。安装步骤去官网下载最新版或者稳定版 官网下载完成后解压到指定目录3、控制台（CMD）切换到Nginx目录下，输入s
2021-06-07 11:06:05
108
原创 vue-router的鉴权 守卫
vue-router鉴权的方式1、通过vue-router addRoutes 方法通过请求服务端获取当前用户路由配置，编码为 vue-router 所支持的基本格式（具体如何编码取决于前后端协商好的数据格式），通过调用 this.$router.addRoutes 方法将编码好的用户路由注入到现有的 vue-router 实例中去，以实现用户路由。addRoutes 方法仅仅是帮你注入新的路由，并没有帮你剔除其它路由！2、通过vue-router beforeEach 钩子限制路由跳转通过请求服
2021-06-06 18:22:26
230
原创 webpack
路由懒加载（1）vue-router文件中的router使用懒加载方式。如下图所示（2）在vue文件中，也采用类似方式引入其他vue组件const showImage = () => import(’@/components/common/showImage’);这个优化的方式在vue官网也有介绍 官网启用gzip压缩和关闭sourcemap所有现代浏览器都支持 gzip 压缩并会为所有 HTTP 请求自动协商此类压缩。启用 gzip 压缩可大幅缩减所传输的响应的大小（最多可缩减90
2021-06-04 16:13:40
67
原创 vant-ui 按需引入
我们在开发移动端的时候，布局大多数会用到vant-ui 毕竟别人封装好的好用。用起来方便而且也可以快速完成一个项目开发1安装vant在现有项目中使用 Vant 时，可以通过 npm 或 yarn 进行安装：Vue 2 项目，安装 Vant 2：npm i vant -SVue 3 项目，安装 Vant 3：npm i vant@next -S2引入组件根据官方文档给出的三种方法安装自动按需引入这种方法是最为推荐的使用方法安装插件npm i babel-plugin-impo
2021-06-03 16:18:45
247
原创 axios拦截，api统一管理
1首先新建两个文件 用来封装我们的axios拦截和api分别使用 npm i下载我们需要用到的axios router qs vuex 和vant2在request文件中将我们需要使用的工具引入因为我们是移动端开发，所以将toast动画按需引入进来，3创建axios实例设置baseURL还有超时时间4设置我们的请求拦截在请求拦截里边做一些操作开启loding动画的效果判断vuex有没有token 有的话将他存进请求头最后将config返回出去后边再协商请求失败执行的方法
2021-06-03 15:38:52
103
原创 多环境变量配置
vuecli3.0搭建的vue项目。配置多个环境变量新建两个或多个文件，和package.json同级；例如：.env.dev，.env.prod文件内容：在网络请求的地方设置接口环境，也可以在页面中输出console.log(process.env.VUE_APP_API_URL);最后在package.json中配置（名字要相同）：打包命令：npm run build:dev(就是.env.dev文件中设置的接口域名)npm run build:prod(.env.prod
2021-06-02 20:50:05
106
原创 去哪里项目开发流程
1.确定自己开发项目所需要的技术栈vue2.0vue-cli3/4vue-routeraxiosvuexvantremsasswebpack2.开始搭建项目yarn，npm 包管理工具 yarn add axios -S 或者 cnpm install axios -S-S: --save-dev 生产环境的依赖 （dependencies）-D: --dev 开发环境的依赖 （devDependencies）2.1 从0搭建指令vue create project
2021-06-02 20:43:23
76
原创 transition
一、语法transition: property duration timing-function delaytransition属性是个复合属性，她包括以下几个子属性：transition-property ：规定设置过渡效果的css属性名称transition-duration ：规定完成过渡效果需要多少秒或毫秒transition-timing-function ：指定过渡函数，规定速度效果的速度曲线transition-delay ：指定开始出现的延迟时间默认值分别为：all 0 e
2021-06-01 18:49:03
345
原创 keep-alive
keep-alive是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，keep-alive是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。属性include: 字符串或正则表达式。只有匹配的组件会被缓存。exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。几种常见用法<keep-alive include="te
2021-06-01 18:37:56
113
原创 事件委托（事件代理）
为什么使用事件委托一般来说，dom需要有事件处理程序，我们都会直接给它设事件处理程序就好了，那如果是很多的dom需要添加事件处理呢？比如我们有100个li，每个li都有相同的click点击事件，可能我们会用for循环的方法，来遍历所有的li，然后给它们添加事件，那这么做会存在什么影响呢？在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间，这就是
2021-05-30 19:30:12
118
原创 Myeee闭包
闭包是JavaScript的一大谜团，关于这个问题有很多文章进行讲述，然而依然有相当数量的程序员对这个概念理解不透彻。闭包的官方定义为：一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。一句话概括就是：闭包就是一个函数，捕获作用域内的外部绑定。这些绑定是为之后使用而被绑定，即使作用域已经销毁。闭包只是JavaScript中最正常的现象,JavaScript中的闭包就像现实世界中的虫洞一样是一个充满神秘色彩的东西,实际上闭包只是一个巧妙的JS的语法事实做
2021-05-30 18:41:47
142
1
原创 var let const的区别
什么是变量提升？先解释一下变量提升JavaScript 中，函数及变量的声明都将被提升到函数的最顶部。JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明下边说他们的区别var一）var声明变量存在变量提升，let和const不存在变量提升console.log(a); // undefined ===> a已声明还没赋值，默认得到undefined值var a = 100;console.log(b); // 报错：b is not defined ==
2021-05-30 18:34:40
48
原创 this指向问题、new的过程
this的指向问题使用 JavaScript 开发的时候，很多开发者多多少少会被 this 的指向搞蒙圈，但是实际上，关于 this 的指向，记住最核心的一句话：哪个对象调用函数，函数里面的this指向哪个对象。一、普通函数调用这个情况没特殊意外，就是指向全局对象-window。/*普通函数调用*///使用let let username = "123";function fn(){ console.log(this.username); //undefined}fn();
2021-05-27 19:16:48
119
原创 原型、原型链
我们创建的每个函数都有一个 prototype （原型）属性，这个属性是一个指针，指向一个原型对象，而这个原型对象中拥有的属性和方法可以被所以实例共享。function Person(){}Person.prototype.name = "Nicholas";Person.prototype.age = 29;Person.prototype.sayName = function(){alert(this.name);};var person1 = new Person();person1
2021-05-26 19:49:20
68
原创 call、apply、bind
众所周知 call、apply、bind 的作用都是‘改变’作用域，但是网上对这这‘改变’说得含糊其辞，并未做详细说明，‘改变’是直接替换作用域？谁替换谁？怎么产生效果？这些问题如果不理解清楚，就算看过手写实现，估计也记不长久，基于此，这里做简单记录，以免时间过长遗忘，方便回顾。call使用 call() 方法，您可以编写能够在不同对象上使用的方法。函数是对象方法在 JavaScript 中，函数是对象的方法。如果一个函数不是 JavaScript 对象的方法，那么它就是全局对象的函数（参见前一章
2021-05-26 19:34:06
49
原创 ES4,ES5,ES6数组方法
es4数组方法数组方法版本功能是否改变原数组参数pop()ES4删除最后一位，并返回删除的数据是无push()ES4在最后一位新增一或多个数据，返回长度是push(newData1, newData2, …)shift()ES4删除第一位，并返回删除的数据是无unshift()ES4在开头新增一或多个数据，返回长度是unshift(newData1, newData2, …)reverse()ES4反转数组，返回结果是
2021-05-25 18:31:46
150
原创 vue生命周期
vue实例的生命周期1 什么是生命周期（每个实例的一辈子）概念：每一个Vue实例创建、运行、销毁的过程，就是生命周期；在实例的生命周期中，总是伴随着各种事件，这些事件就是生命周期函数；生命周期：实例的生命周期，就是一个阶段，从创建到运行，再到销毁的阶段；生命周期函数：在实例的生命周期中，在特定阶段执行的一些特定的事件，这些事件，叫做 生命周期函数；生命周期钩子：就是生命周期事件的别名而已；生命周期钩子 = 生命周期函数 = 生命周期事件2 主要的生命周期函数分类创建期间的生命周期函数：(特点
2021-05-25 09:04:35
75
原创 数据类型
JavaScript数据类型详解 在对js的数据类型有一定的了解之后，我们还有一些对各类数据类型有一些要注意的点。对于不知道是什么类型的数据，我们可以利用关键字 typeof查看数据原型可以利用.proto 查看最后一个属性 __proto__可以得知数据类型地原型一、字符串var str='123456'方法描述str.length获得数组长度。str.replace(‘被替换字符’，‘替换上的字符’) 获得数组长度。替换字符串中的某个字符，该方法执行后不改
2021-05-24 19:28:29
50
原创 js数据类型判断
判断数据类型的四种方法在 ECMAScript 规范中，共定义了 7 种数据类型，分为 基本类型 和 引用类型 两大类，如下所示：基本类型：String、Number、Boolean、Symbol、Undefined、Null引用类型：Object object又分为(Function 、Array、RegExp、Date)基本类型也称为简单类型，由于其占据空间固定，是简单的数据段，为了便于提升变量查询速度，将其存储在栈中，即按值访问。引用类型也称为复杂类型，由于其值的大小会改变，所以不能将其存
2021-05-24 19:15:37
66
原创 argument
arguments是什么 它是一个对象，是一个长的很像数组的对象arguments包含什么内容呢？ 它是函数运行时的实参列表。我们来实际操作一下看arguments里到底有什么(functions(a){console.log(arguments)})(1)打印出来的(functions(a,b,c){console.log(arguments)console.log(arguments[0])console.log(arguments[1])})(1,2,3,4)我们
2021-05-24 18:43:46
40
原创 深拷贝&浅拷贝
深拷贝将一个对象从内存中完整的拷贝一份出来，从堆内存中开辟一个新的区域存放新对象，且修改新对象不会影响原对象浅拷贝创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，假如属性是引用类型，则拷贝的是内存地址。因此如果其中一个对象改变了这个地址，就会影响到另一个对象。处。浅拷贝let target = {};let sources = {a:{b:2}};Object.assign(target,sources);target.a === so
2021-05-23 18:42:19
56
原创 vue-router
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向，就是我在页面上点击一个按钮需要跳转到对应的页面，这就是路由跳转；先说一下两种模式默认是hash模式 ，也就是会出现如下的URL：，URL中带有#号，我们可以用如下代码修改成history模式：import Vue from 'vue'import Router from 'vue-router'import Main from '@/compo
2021-05-21 19:37:25
126
原创 vuex详解
现在我用的最多最熟练的就是vuex了 ， 当然我还是很菜 ， 我现在整理了一些vuex的概念，包括数据持久化，高级语法先说vuex的基本概念组成Vuex是专门为Vuejs应用程序设计的状态管理工具。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。vuex的组成上图看出，vuex分为5部分1）statestate是存储的单一状态，是存储的基本数据。2）Gettersgetters是store的计算属性，对state的加工，是派生出来的数据。
2021-05-21 19:09:27
252
原创 Vue组件传值
我来分享我对vue组件传值的理解，这东西用多了真的挺简单得，就是随手一敲，就出来了，用的最多得就是父子组件的传值，如果用得到兄弟组件传值，我一般喜欢用vuex，下边我们来说一下传值的方法1父传子在父组件上的自组件标签上绑定一个自定义属性，挂载需要传递的值，在子组件使用props:[]来接受，下边是代码//这个是父组件，name就是传递的值 myName是自定义属性<user-detail :myName="name" /> export default { compon
2021-05-19 21:46:17
119
原创 Promise封装uni.request
1.在根目录新建一个http文件夹，里边放一个js文件，(名字自取，最好要语义化)2.在js文件里写上以下代码，跟在微信小程序里封装的wx.request都大同小异，封装然后导出module.exports = { request(url,method,data){ return new Promise((reslove,reject)=>{ uni.request({ url:"http://api.intewl.cn/api"+url, data:data,
2021-05-19 07:47:47
168
原创 微信小程序优购商城项目
这篇文章主要就是把我写的优购商城进行简单的说明，希望可以对大家有所帮助1.先配置页面在app.json中设置所需要的页面路径2.然后再封装我们需要的组件和wx.requestwx.request可以不封装，但是封装可以减少重复代码，写起来也比较方便axios就是我封装的http文件，名字叫什么都可以2-1 api.js代码代码是导出需要的接口路径，module.exports={ "swiber":"/home/swiperdata",}2-2 request.js代码封装w
2021-05-17 21:00:25
1121
原创 微信小程序发布流程
发布流程，大概分三个大步骤：1上传代码2提交审核3发布版本注意：发布之前，配置服务器域名白名单开发管理>>>开发设置>>>服务器域名1上传代码点击确认设置版本号和简介 >>>点击发布>>> 上传成功2提交审核点击首页的版本管理，填写小程序的信息填写完成后选择开发者 获取 临时登录凭证code ，并回传到开发者服务器。开发者服务器以code换取 用户唯一标识openid 和 会话密钥session_key。getToken: function () { //调用登录接口 wx.login({ success: function (res) { var code = res.code; wx.request({ url: 商户服务器接口地址,
2021-05-16 19:28:52
31
原创 微信小程序实现授权登录
微信小程序官方API说明：调用 wx.login() 获取 临时登录凭证code ，并回传到开发者服务器。调用 code2Session 接口，换取 用户唯一标识 OpenID 和 会话密钥 session_key。之后开发者服务器可以根据用户标识来生成自定义登录态，用于后续业务逻辑中前后端交互时识别用户身份。注意：会话密钥 session_key 是对用户数据进行 加密签名 的密钥。为了应用自身的数据安全，开发者服务器不应该把会话密钥下发到小程序，也不应该对外提供这个密钥。临时登录凭证 c
2021-05-16 19:26:29
776
原创 微信小程序获取收货地址
是用自带的api即可，直接上代码 add() { //wx.chooseAddress微信小程序自带的api wx.chooseAddress({ success: (result) => { //成功回调返回的就是地址 console.log(result); this.setData({ lists: result }) }, }) },...
2021-05-16 19:18:52
271
原创 小程序实现收藏分享客服
分享和客服我写的都是最简单得哪中，就是用wx自带的api完成的，分享是将button得open-type设置为share客服是将button得open-type设置为contact下边是代码html部分`<view class="cts"> <text class="iconfont icon-kefu"></text> <text>客服</text> <button open-type="contact"
2021-05-16 19:16:45
104
原创 小程序下拉刷新，上拉加载更多
实现功能所用到的API和事件1.wx.request （获取远程服务器的数据，可以理解成$.ajax）2. scroll-view的两个事件3 bindscrolltolower（滑到页面底部时）4 bindscroll (页面滑动时)5 bindscrolltoupper (滑倒页面顶部时)接下来上我得代码// pages/goods_list/goods_list.jsvar app = getApp()Page({ /** * 页面的初始数据 */ data:
2021-05-16 19:02:56
62
原创 Promise封装wx.request
Promise封装wx.request1.创建js文件新建一个文件夹，里边新建三个js文件 用来封装我们的请求接口api,wx.request，和在http.jst，根据当前环境，设置相应的baseUrl, 引入fetch中封装好的promise请求，封装基础的get\post\put\upload等请求方法，设置请求体，带上token和异常处理等；这是我的文件列表(axios 就是 http)## 2.在request.js中写我封装的wx.request代码 module.exports
2021-05-13 20:35:18
101
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人