- 博客(41)
- 收藏
- 关注
RSS订阅原创 ifram 优点、缺点
优点iframe能够原封不动的把嵌入的网页展现出来。 如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。 网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。 如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。缺点会产生很多页面，不容易管理。 iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的
2021-06-11 14:46:23
186
1
原创 项目中如何修改element-ui的默认样式 （去除scoped,样式穿透 ＞＞＞ , less/sass : /deep/）
1、在原来的css样式下面，新编写一个不带scoped属性style，里面写需要修改的element-ui默认css样式。——————可以解决问题——————缺点：这样设置的是全局样式，意思就是如果你的项目里面有多个css需要修改，那么这么设置，两个地方都会被改变。2、使用 >>> 箭头穿透父类（或者更高级） >>> 需要修改的类——————博主这边还未成功——————缺点：有时候sass会不识别，从而不起效果。3、使用/deep/穿透父类（或者更
2021-06-11 07:41:11
634
原创 elemeng-ui 中el-form 表单如何校验
ElementUI校验规则ElementUI封装了组件el-form来收集、校验和提交数据，其中的rules属性就是用来做数据校验的。ElementUI提供了一些常用的表单验证规则，我们可以直接使用该规则来实现数据校验。rules根据rules给出的规则会对prop中的值进行校验，当不满足要求时会弹出message相应的提示信息。自定义规则调用ElementUI提供的表单验证规则是有限的，可能无法满足我们项目的需求这时候就需要我们来自定义验证规则。我们在在data() {}中添加自定义的校验规则，然
2021-06-07 20:50:15
335
原创 Nginx
Nginx (engine x) 是一个高性能的HTTP和反向代理服务器，也是一个IMAP/POP3/SMTP服务器。Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru 站 点（俄文：Рамблер）开发的它也是一种轻量级的Web服务器，可以作为独立的服务器部署网站（类似Tomcat）。它高性能和低消耗内存的结构受到很多大公司青睐，如淘宝网站架设。下载Nginx下载地址：http://nginx.org/en/download.html下载之后，解压控制台（.
2021-06-07 10:43:22
202
原创 vue-router 鉴权 守卫
导航守卫使用 在创建router实例的地方全局守卫import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)const router = new VueRouter({ mode:'history', // 路由模式 hash history abstract routes:[ { path:'/index', name...
2021-06-04 10:43:59
416
原创 webpack打包优化
vue-cli3以后，我们修改webpack配置，需要自己在项目根路径下创建vue.config.js文件。配置 proxy 跨域使用vue-cli发开项目，在本地开发环境中，如果遇到跨域的问题。可以通过配置proxy的方式，解决跨域问题：module.exports = { devServer: { open: false, // 自动启动浏览器 host: '0.0.0.0', // localhost port: 6060, // 端口号 hotOnly: ...
2021-06-04 10:39:04
272
原创 vant-ui 按需引入
首先安装npm i vant --save在babel.config.js设置// 对于使用 babel7 的用户，可以在 babel.config.js 中配置const plugins = [ [ 'import', { libraryName: 'vant', libraryDirectory: 'es', style: true }, 'vant' ]]module.exports = { pr...
2021-06-03 19:56:25
173
原创 axios拦截，api统一管理
为什么要进行接口封装？axios的封装和api接口的统一管理，其实主要目的就是在帮助我们简化代码和利于后期的更新维护。每个组件中走一遍axios流程，很多时候在前端需要设置header，保存token，对异常进行统一处理等，所以最好对其进行封装。安装npm i axios --save然后引入在项目的src目录中，新建一个request文件夹，然后在里面新建一个http.js和一个api.js文件。http.js文件用来封装我们的axios，api.js用来统一管理我们的接口。ht
2021-06-03 19:35:45
197
原创 项目的流程（去哪）
1.确定项目开发的技术栈vue2.0 + vue-cli3/4 + vue-router + axios + vuex + vant + rem + sass + webpack2.搭建项目使用 npm(cnpm) yarn 包管理工具 安装依赖文件 或 下载插件全局安装axios 两种方式： 1. cnpm install axios -S2.yarn add axios -S-S 是：–save-dev 生产环境依赖 （dependencies）-D 是 -dev 开发环境依赖
2021-06-02 10:14:14
99
原创 多环境变量配置
首先我们在项目跟目录下找到package.json文件，在scripts中配置"scripts": { "serve": "vue-cli-service serve", // 开发环境 "build": "vue-cli-service build", // 生产环境 "test": "vue-cli-service build --mode testing" // 测试环境 },根据不同的启动方式来启用不同的域。然后我们在根目录下创建3个文件分别是然后...
2021-06-02 08:39:57
135
原创 transition
Transition 简介Transition 可以设置 CSS 属性的过渡效果，它有以下几个属性。transition-property 用于指定应用过渡属性的名称 transition-duration 用于指定这个过渡的持续时间 transition-delay 用于指定延迟过渡的时间 transition-timing-function 用于指定过渡的类型transition-property用于指定应用过渡的属性名称，可以指定多个属性名称，多个属性名称之间用,分隔。默认值为..
2021-06-01 20:11:49
145
原创 keep-alive
vue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的<keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view></keep-alive><router-view v-if="!$route.meta.keepAlive"></router-view>组件,减少性能消耗基本用法，缓存整个页面或组件<
2021-06-01 18:54:50
84
原创 事件委托（事件代理）（传统的，vue , e.target.dataset.index）
事件委托原理**：事件冒泡机制<ul id="myLinks"> <li id="goSomewhere">Go somewhere</li> <li id="doSomething">Do something</li> <li id="sayHi">Say hi</li></ul>var item1 = document.getElementById("goSomewhere");var
2021-05-30 18:19:26
400
原创 闭包
定义： 当一个函数的返回值是另一个函数，而返回的那个函数调用了其父函数的内部变量，且返回的那个函数在外部被执行，就产生了闭包var counter = 10;function add(){ var counter = 0; return function(){ counter+=1; alert(counter); }}var s = add();s();//1s();//2s();//3三个要素： 函数套函数；内部函数访问
2021-05-30 18:17:35
83
原创 var let const 区别
是否存在变量提升？var声明的变量存在变量提升（将变量提升到当前作用域的顶部）。即变量可以在声明之前调用，值为undefined。let和const不存在变量提升。即它们所声明的变量一定要在声明后使用，否则报ReferenceError错。console.log(f) //undefinedvar f = 1 ;console.log(g) //ReferenceError: g is not definedlet g = 2;console.log(h) //ReferenceE
2021-05-28 18:53:48
101
原创 作用域、作用域链、自由变量、变量提升
作用域变量作用域：就是一个变量可以使用的范围。作用域 （种类）s中首先有一个最外层的作用域，全局作用域； js中可以通过函数来创建一个独立作用域称为函数作用域，函数可以嵌套，所以作用域也可以嵌套； es6中新增了块级作用域（大括号，比如：if{},for(){},while(){}…）；如下图所示：es6作用域,只适用于const,let自由变量自由变量的概念：当前作用域没有定义的变量作用域链自由变量的向上级作用域一层一层查找，直到找到为止，最高.
2021-05-27 19:14:31
230
2
原创 this指向问题、new的过程
this指向问题1.浏览器里，在全局范围内的this 指向window对象；2.在函数中，this永远指向最后调用他的那个对象；3.构造函数中，this指向new出来的那个新的对象；4.Call、apply、bind中的this被强绑定在指定的那个对象上；5.箭头函数中this比较特殊,箭头函数this为父作用域的this，不是调用时的this.前四种都是调用时确定,也就是动态的,而箭头函数的this指向是静态的,声明的时候就确定了下来；6.apply、call、bi...
2021-05-27 18:56:45
275
原创 call/apply/bind
this的调用大概分为五种场景： 1.浏览器里，在全局范围内的this 指向window对象； 2.在函数中，this永远指向最后调用他的那个对象； 3.构造函数中，this指向new出来的那个新的对象； 4.Call、apply、bind中的this被强绑定在指定的那个对象上； 5.箭头函数中this比较特殊,箭头函数this为父作用域的this，不是调用时的this.前四种都是调用时确定,也就是动态的,而箭头函数的this指向是静态的,声明的时候就确定了下来；6.a...
2021-05-26 18:58:11
264
原创 原型、原型链
prototype每个函数都有一个prototype属性，被称为显示原型_ _proto_ _ 每个实例对象都会有_ _proto_ _属性,其被称为隐式原型 每一个实例对象的隐式原型_ _proto_ _属性指向自身构造函数的显式原型prototype constructor每个prototype原型都有一个constructor属性，指向它关联的构造函数原型链获取对象属性时，如果对象本身没有这个属性，那就会去他的原型__proto__上去找，如果还查不到，就去找原
2021-05-26 18:38:13
188
原创 arguments
argumentsargument特点arguments只在函数中存在。(箭头函数除外) arguments是一个伪数组。 是一个集合，存储了我们传入的所有形参。 arguments具有length，可以通过下标访问。 伪数组不能使用数组的方法 arguments方法 1、arguments.callee()方法 这个方法可以调用方法本身 补充：伪数组调用数组的方法 1、转换为真正的数组 使用展开运算符 function fn (){ let a
2021-05-25 21:11:59
100
原创 数组常用方法
push():可以接受一个或者多个参数，将参数追加到数组的尾部，返回添加后的数组的长度，原数组会发生改变。pop():从数组尾部删除一个元素，返回这个被删除的元素，原数组发生改变。unshift():可以接受一个或者多个参数，将参数放到数组的头部，返回添加后的数组的长度，原数组会发生改变。shift():从数组头部删除一个元素，返回这个被删除的元素，原数组发生改变。slice()截取类 如果不传参数，会返回原数组；如果一个参数，从该参数表示的索引开始截取，直至数组...
2021-05-25 18:48:37
60
原创 数据类型判断
1.基本数据类型中：Number，String，Boolean，undefined 以及引用数据类型中Function ,可以使用typeof检测数据类型,分别返回对应的数据类型小写字符。另：用typeof检测构造函数创建的Number，String，Boolean都返回object基本数据类型中：null 引用数据类型中的：Array，Object，Date，RegExp。不可以用typeof检测。都会返回小写的objectlet str = ""console.log(typeof st
2021-05-24 20:44:47
146
原创 js数据类型
js数据类型有基本数据类型（值类型）： Number、String、Boolean、Undefined、Null、Symbol（es6新增独一无二的值） 和 BigInt（es10新增）；引用数据类型: Object。包含Object、Array、 function、Date、RegExp。基本数据类型基本数据类型都存储在栈里，且基本数据类型都是深拷贝。2、引用数据类型。引用数据类型都存储在堆里，在栈中有一个id指向堆中的数据。...
2021-05-24 20:40:51
60
原创 深拷贝
为什么要使用深拷贝我们希望在改变新的数组（对象）的时候，不改变原数组（对象）深拷贝数组直接遍历var array = [1, 2, 3, 4];function copy (array) { let newArray = [] for(let item of array) { newArray.push(item); } return newArray;}var copyArray = copy(array);copyArray[0] = 100
2021-05-23 21:43:05
80
原创 Vue-router
路由原理/模式1.hash模式2.history模式hash 就是指 url 尾巴后的 # 号以及后面的字符，history没有底带#，外观上比hash 模式好看些hash 能兼容到IE8， history 只能兼容到 IE10；路由守卫原理：如果没有权限不让进入，有权限才可以进入路由守卫钩子函数里面的三个参数to,from,next 这三个参数：to和from是将要进入和将要离开的路由对象,路由对象指的是平时通过this.$route获取到的路由对象。next:Funct
2021-05-23 21:37:31
114
原创 vuex
5大核心1.state 存储状态（变量）2.mutatis：修改状态，并且是同步的，在组件中使用$store.commit(“事件名”,可以发送参数);来调用，这个和我们组件中的自定义事件类似。3.actions：异步操作，在组件中使用$store.dispath(“事件名”,可以发送参数),来调用actions中定义的异步操作。4.getters：对数据获取之前的再次编译，可以理解为state的计算属性，我们在组件中使用$store.getters.fun()5.modules：可以让每一个模
2021-05-23 21:27:31
56
原创 vue生命周期
1、beforeCreate() 创建我们vue实例创建之前执行的函数。这个时候只有一些实例本身的事件和生命周期函数2、created()vue实例创建之后执行的函数。是最早能使用data中数据和methods中方法的钩子函数。我们可以在这个钩子中请求数据。3、beforeMount() 挂载指令已经解析完毕，内存中已经生成dom树。但是并没有被挂在到网页中。4、mounted()模板代码已经被加载到网页中了。此时创建期间所有事情都已经准备好了，网页开始运行了5、before...
2021-05-20 21:42:15
172
原创 组件传值
父组件是通过props属性给子组件通信的（父传子）在父组件中请求导数据通过注册好的子组件在父组件的data中定义好要传的数据在子组件通过props来接收<template> <div class="parent"> <h2>{{ msg }}</h2> <son :fa-msg="msg"></son> <!-- 子组件绑定faMsg变量,注意驼峰--> </div> &l
2021-05-19 22:00:06
56
原创 Uni-app request()封装
在根目录下创建request文件夹，在里面创建request.js文件进入到request.js文件 在里面进行封装请求接口module.exports={ request(url,method,data){ return new Promise((resolve,reject)=>{ uni.request({ //请求的地址 url:'http://api.intewl.cn/api'+url, method:method, dat
2021-05-19 07:48:01
266
转载 黑马优购
准备工作我们先把wx.request封装好。然后我们去配置路由。把尾部的导航配置出来。就是我们的首页、分类、购物车、还有我的。在全局的app.json中配置。{ "pages": [ // 这个是我们的页面，有点类似我们的vue路由 "pages/index/index", "pages/category/category", "pages/goods_list/goods_list", "pages/goods_detail/goods_detail"
2021-05-17 21:52:23
149
原创 小程序发布流程
发布流程，大概分三个大步骤：上传代码 提交审核 发布版本 发布前配置服务器域名白名单上传代码输入版本号，备注,点击上传上传成后的提示然后去微信小程序平台发布2.提交审核进入【版本管理】找到开发版本，点击‘提交审核首次提交审核，会弹出如下提示，点击前往填写填写小程序基本资料点击填写填写基本信息再次点击提交审核然后输入小程序审核信息然后审核期提交发布弹出二维码，扫描，点击.
2021-05-17 10:47:59
184
原创 小程序获取支付授权
我们想要获取授权呢，需要一个button按钮，这个按钮上个绑定一个属性,然后就是绑定一个事件，这个事件相当于我们的点击事件，这个事件中，有事件对象，这个事件对象中有我们需要的参数，然后我们使用小程序内封装好的方法wx.login()方法，这个方法会返回一个code，然后我们就可以拼装一个对象作为参数去请求登录接口了。这个登录接口登录成功呢会返回一个token。然后使用本地存储保存一下。在让用户返回到支付页面就可以了。因为这里牵扯到地狱回调，所以我自己封装了一个Promise和async/await。首
2021-05-16 21:43:27
173
原创 小程序购物车的逻辑
购物车的复选框状态同步小程序的购物车添加购物车时，我会添加一个属性用于判断我们的商品有没有没选中，如果被选中呢，就会让这个状态呢变为true，没选中的变为false。然后循环渲染数据的时候，我们复选框的checked属性就根据这个状态的true/false来添加/删除。这样做我们在切换不同页面时保证复选框的状态不会发生改变。且当重新更新页面时也会同步我们勾选的商品。比如下边这个wxml// 我是使用了我们的小程序自带的复选框组，传入的是一组选中复选框的id，是一个数组形式。如：['1','.
2021-05-16 21:39:31
118
原创 小程序支付流程
首先我们肯定是判断用户有没登录，一般都是判断本地有没有token。如果没有，让用户取登录。如果有，async add() { try { // 1 判断缓存中有没有token const token = wx.getStorageSync("token"); // 2 判断 if (!token) { wx.navigateTo({ url: '/pages/auth/auth' });
2021-05-16 21:36:40
65
原创 promise加async/await封装小程序的request
为什么要封装wx.requesrt因为我们平常项目中基本每页都需要请求数据，而如果我们每次请求输入据都用小程序本身的request就会造成代码量过多，很难找到相应的方法。所有我们要封装一下，从而减少代码量，这个我们可以做到请求的接口和页面分离，方便我们维护和阅读。我一般是这样封装的，我这里写的是我自己怎么封装的在我们项目的根目录下新建一个http文件,然后里面新建1个js文件,文件名叫http.js把，然后我们这个http.js主要使用promise封装我们的wx.request();le.
2021-05-15 19:37:17
430
原创 小程序中的下拉刷新、上拉加载更多
下拉刷新思路：我们小程序有封装好的下拉动作，开启后，在使用小程序内置的监听用户下拉动作的函数，在里面重新请求第一页的数据首先在我们要使用下拉刷新页面的json配置中写入"enablePullDownRefresh":true, // 开启下拉刷新"backgroundTextStyle":"dark" // 改变刷新时出现的样式，默认是白色。12然后在我们的开启下拉刷新的页面就可以下拉了。onPullDownRefresh:function(){ // onPullDo...
2021-05-15 19:31:36
159
原创 小程序如何写收藏、分享、客服功能
1.收藏：首先给一个点击事件，然后再index.js中的data里面定义一个数为false表示没有已经被收藏，再在点击事件中通过wx.getStorageSync（）获取到被收藏的商品的数组，然后循环一下获取到的数组，判断是否被收藏过，当index!==-1的话就是已经收藏，不然就是没有收藏，没有收藏的话就直接push添加进去到那个获取到的已经收藏的数组(删除的话就是splice)（getStorageSync：给他是作吃singke） //小程序api wx.showToast({.
2021-05-13 19:31:50
154
原创 小程序获取收货地址流程
获取用户对小程序是否授予 获取地址的权限 即scope。只用用户确认允许授权才能获取微信地址wx.getSetting({ success:(result)=>{ console.log(result); //用户点击确定授权时：authSetting 的scope.address为 true； //用户点击取消时为false，且用户再次获取地址则无任何反应，无法再次获取地址，此时必须诱导用户开启权限 //用户从来没有调用过
2021-05-13 19:30:45
143
原创 enerator函数详解
Generator 函数的定义语法上，Generator 函数是一个状态机，封装了多个内部状态。形式上，Generator是一个函数。不同于普通函数，是可以暂停执行的，所以函数名之前要加星号，以示区别。整个Generator函数就是一个封装的异步任务，或者说是异步任务的容器，异步操作需要暂停的地方，都用yield语句什么是Generator函数function 关键字和函数之间有一个星号(*),且内部使用yield表达式，定义不同的内部状态。 调用Generator函数后，该函数并不执行，返
2021-05-08 07:41:36
171
原创 async await
Async 和 await 是一种同步的写法，执行异步的操作1.sayc的用法，它作为一个关键字放到函数前面，这样普通函数就变为了异步函数2.异步async函数调用，跟普通函数的使用方式一样3.异步async函数返回一个promise对象4.async函数配合await关键字使用(阻塞代码往下执行)是异步方法，但是阻塞式的优点：***1.同步代码编写方式： Promise使用then函数进行链式调用，async/await从上到下，顺序执行，就像写同步代码一样，更符合代码编写习惯；
2021-05-08 07:37:41
434
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人