- 博客(42)
- 收藏
- 关注
RSS订阅原创 token令牌常用的四种加密方式
1.base64 ‘防君子不防小人’方法作用参数返回值b64encode将输入的参数转化为base64规则的串预加密的明文，类型为bytes；例：b‘guoxiaonao’base64对应编码的密文，类型为bytes；例:b’Z3VveGlhb25hbw==’b64decode将base64串 解密回 明文base64密文,类型为bytes;例：b’Z3VveGlhb25hbw==’参数对应的明文，类型为bytes；例：b’guoxiaonao’urlsaf
2021-07-05 08:49:24
5876
原创 ifram 优点、缺点
iframe用于标记一个内联框架：iframe的优点：可以跨域请求其他网站，并将网站完整展示出来典型系统结构可以提高代码的复用性创建一个全新的独立的宿主环境，可以隔离或者访问原生接口及对象模块分离，若多个页面引用同一个iframe，则便于修改操作实现广告展示的一个解决方案若需要刷新iframe则只需要刷新框架内，不需要刷新整个页面iframe的缺点：iframes阻塞页面加载，影响网页加载速度，iframe加载完毕后才会触发window.onload事件，
2021-06-15 08:03:33
907
原创 项目中如何修改element-ui的默认样式
element ui 修改默认样式1.修改element ui默认的样式如果要组件内全局修改首先在浏览器里F12找到element默认的UI类名找到要修改的默认类名以后在文件中修改代码，重写属性<style>.el-form-item__label{ //你要修改的CSS属性}</style>但是如果已经在全局内修改了默认样式，但又想在某一个标签内再次重写样式，则可以给要修改的标签加一个父类，在父类里重写样式，这样可以避免代码污染，也可以叫做局部修改
2021-06-10 19:38:45
1182
原创 vue 中 Element-UI 表单验证的几种方法
在开始之前需要把element-ui在vue中引入好，如果没有引入好的话，需要先跟着element-ui的文档进行操作，接下来就可以进行学习了。第一种：在el-form-item单个添加验证这种方式适用于需要个别检验的字段，或者表单字段有变动的校验；做法：需要在el-form-item标签中加入 :rules=’'直接是验证的条件 ''下面举个例子（验证用户名 不能为空）<el-form-item label="用户名" :prop="userName" :rules="[{ re.
2021-06-07 22:51:28
1358
6
原创 Windows 下安装 Nginx
nginx官网下载安装包，http://nginx.org/en/download.html；下载进行解压，将解压后的文件放到自己心仪的目录下，我的解压文件放在了d盘根目录下，如下图所示：进入window的cmd窗口，输入如下图所示的命令，进入到nginx目录（D:/nginx-1.20.1），使用start nginx 进行nginx启动，如下图所示：在浏览器地址栏输入：http://localhost 会看到如下图所示的nginx欢迎界面nginx命令介绍（start ng
2021-06-07 21:53:35
114
原创 webpack打包与优化
项目结束后打包前webpack配置优点:提高打包速度 、 减小项目体积、提高首屏加载速度 、 提高用户体验 、打包前要做的事情：运行npm run build进行打包操作，打包前对webpack配置module.exports = { publicPath: './', // 静态资源路径（默认/，打包后会白屏） outputDir: 'dist', // 打包后文件的目录 （默认为dist） assetsDir: 'static', // outputDir的静
2021-06-07 21:23:30
228
原创 vue-router 鉴权 守卫
vue项目前端鉴权方式常用的有以下三种：1、渲染菜单时控制模块按钮的显示隐藏（不足：直接输入链接仍然可以访问模块）2、在路由导航守卫中拦截，针对没有权限的模块进行重定向（不足：每次访问模块都需要鉴定权限，模块数量过多时会影响系统性能）3、借助vue-router 2.x版本新加的API addRouters动态添加路由信息（不足：首次加载需要解析和添加，多跳转一次路由）综上所述，权衡之后选择了addRoutes动态添加，首屏加载时间可能会多出0.5s左右，加载一次之后后续就不需要再进行处理，可以提升
2021-06-04 11:53:51
304
转载 webpack打包性能优化之路
路由懒加载（1）vue-router文件中的router使用懒加载方式。如下图所示（2）在vue文件中，也采用类似方式引入其他vue组件const showImage = () => import('@/components/common/showImage');启用gzip压缩和关闭sourcemap所有现代浏览器都支持 gzip 压缩并会为所有 HTTP 请求自动协商此类压缩。启用 gzip 压缩可大幅缩减所传输的响应的大小（最多可缩减90%），从而显著缩短下载相应资源所需的时间、
2021-06-04 11:44:06
213
原创 Vant-UI 按需引入
第1步，下包// 通过 npm 安装npm install vant -S// -S: --save-dev 生产环境的依赖 （dependencies）// -D: --dev 开发环境的依赖 （devDependencies）第2步，下需要的插件// babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式npm i babel-plugin-import -D第3步，配置在src目录下配置 .b
2021-06-03 20:02:41
206
1
原创 axios拦截，api统一管理
在vue项目中，每次和后台交互的时候，经常用到的就是axios请求数据，它是基于promise的http库，可运行在浏览器端和node.js中。当项目越来越大的时候，接口的请求也会越来越多，怎么去管理这些接口?多人合作怎么处理?只有合理的规划，才能方便往后的维护以及修改。安装安装axios依赖包cnpm install axios --save引入一般会我会在项目src中新建一个untils目录,其中base用于管理接口域名，http处理请求拦截和响应拦截，user.js负责接口文件(接口文件可
2021-06-03 19:34:18
91
1
原创 vue多环境变量配置
vue-cli4环境变量配置和代理跨域配置环境变量配置跨域代理配置总结参考内容环境变量配置官方文档 https://cli.vuejs.org/zh/guide/mode-and-env.html#模式在项目根目录中新建.env, .env.production, .env.pre 等文件NODE_ENV 和 BASE_URL 是两个特殊变量，在代码中始终可用一个环境文件只包含环境变量的“键=值”对: .env # 在所有的环境中被载入 .en
2021-06-02 20:52:51
702
原创 项目开发流程
1. 确定项目技术栈vue2.0 + vue-cli3/4 + vue-router + axios + vuex + vant + rem + sass + webpack2. 搭建项目yarn，npm(cnpm) 包管理工具 yarn add axios -S cnpm install axios -S-S: --save-dev 生产环境的依赖 （dependencies）-D: --dev 开发环境的依赖 （devDependencies）2.1 从0搭建，指令vue creat
2021-06-02 20:44:24
81
原创 CSS3动画效果-transition
1.transition的浏览器支持情况IE10+支持，IE6\7\8\9都不支持！目前，其他浏览器最新版本都支持，不需要再加前缀 -webkit- 之类的了2.还是一步一步说说怎么用transition吧页面只有一个div，其css如下：<style type="text/css"> 2 div { 3 width:100px; 4 height:30px; 5
2021-06-01 20:10:55
2842
原创 Vue keep-alive实践总结
keep-alive是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。prop:include: 字符串或正则表达式。只有匹配的组件会被缓存。exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。在2.1.0版本Vue中常见用法：// 组件exp
2021-06-01 18:51:54
93
原创 js中的事件委托
1，什么是事件委托：通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。也就是：利用冒泡的原理，把事件加到父级上，触发执行效果。好处呢：1，提高性能。我们可以看一个例子：需要触发每个li来改变他们的背景颜色。<ul id="ul"> <li>aaaaaaaa</li> <li>bbbbbbbb</li&g
2021-05-30 20:35:28
154
原创 JS的闭包
闭包什么是闭包？闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。一、变量的作用域要理解闭包，首先必须理解Javascript特殊的变量作用域。变量的作用域无非就是两种：全局变量和局部变量。Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。Js代码：var n=999; function f1(){ alert(n); } f1(); // 999 另一方面，在函数外部自然无法读
2021-05-30 20:28:30
149
原创 var let const 区别
var let const 区别var:如果使用关键字var声明一个变量，那么这个变量就属于当前的函数作用域，如果声明是发生在任何函数外的定成声明，那么这个表变量就书属于全局作用域。例：var a = 1;function foo(){ var a =2; console.log(a); //2}foo();console.log(a): //1如果在生命变量时，省略var的话，该变量就会成全局变量，如全局作用域中存在该变量，就会更新其值。例：var a = 1 ； //此处声
2021-05-28 21:34:07
69
转载 JS变量提升
1. 变量提升ES6之前我们一般使用var来声明变量，提升简单来说就是把我们所写的类似于var a = 123;这样的代码，声明提升到它所在作用域的顶端去执行，到我们代码所在的位置来赋值。上述代码a的结果是undefined，它的实际执行顺序如下：再看一个：第一眼看到的时候是不是会认为undefined, 记住声明会提升到作用域顶端。下面来看一道经典面试题：2. 函数提升javascript中不仅仅是变量声明有提升的现象，函数的声明也是一样；具名函数的声明有两种方式：1. 函数声明式
2021-05-27 19:27:17
74
转载 JS自由变量
自由变量一.作用域和自由变量作用域代表了一个变量的合法范围，一个变量的作用域是程序源代码中定义的这个变量的区域1.全局作用域不在任何函数内声明的变量（函数内省略var的也算全局）称作全局变量就是在最外层定义的变量就被称为全局变量，全局都可以使用，所以是全局作用域。2.局部作用域在函数内声明的变量具有函数作用域，属于局部变量，就是在函数内部定义的变量，只在函数内部有用，所以是局部作用域。3.ES6的定义的块级作用域声明变量的方法 有var let constvar 声明的变量可以变量提
2021-05-27 19:10:48
763
原创 Js作用域与作用域链详解
一：函数作用域先看一小段代码：var scope="global";function t(){ console.log(scope); var scope="local" console.log(scope);}t();(PS: console.log()是firebug提供的调试工具，很好用，有兴趣的童鞋可以用下，比浏览器+alert好用多了）第一句输出的是： “undefined”，而不是 “global”第二讲输出的是：“local”你可能会认为第一句会输出
2021-05-27 19:04:14
105
原创 JS中this指向问题，new的过程
this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象这里调用方法f1的是window对象，也就是说this指向window对象，所以会出现this.user 为undefined这里调用方法f1的是对象a，就是说this指向a对象，所以this.user为a对象里面的“二狗子” 接下来朝深处看看这段代码跟例2 比就是多了个window. 结果还是一样的，想说明什么问题呢，看下段代码结果变成“.
2021-05-27 18:45:02
375
原创 call、apply、bind
call,apply,bind都是为了改变函数体内this的指向，但三者都有所不同。call，apply，bind的第一个参数都是this要指向的对象，bind是返回对应函数，便于稍后调用，call与apply是立即调用call传递参数是按顺序传入，apply是把参数放入数组中call(this指向的对象,参数1,参数2,参数3…);apply(this指向的对象，[参数1,参数2,参数3…]);...
2021-05-26 21:54:59
49
原创 javascript原型与原型链
javascript原型与原型链1. prototype每个函数都有一个prototype属性，被称为显示原型2._ proto _每个实例对象都会有_ _proto_ _属性,其被称为隐式原型每一个实例对象的隐式原型_ _proto_ _属性指向自身构造函数的显式原型prototype3. constructor每个prototype原型都有一个constructor属性，指向它关联的构造函数。4. 原型链获取对象属性时，如果对象本身没有这个属性，那就会去他的原型__pro
2021-05-26 18:47:16
36
转载 argument
JS—arguments对象什么是 arguments百度说：arguments 是一个类数组对象。代表传给一个function的参数列表。（读不懂，看下面代码）先看一段代码：function printArgs() {console.log(arguments);}printArgs(“A”, “a”, 0, { foo: “Hello, arguments” })；执行结果是：[“A”, “a”, 0, Object]控制台打印出来的是一个数组，但并不是真正的数组，所以说arg
2021-05-25 21:31:56
91
原创 js数据类型判断
js数据类型分两种基本数据类型：String（字符串）、Number(数字) 、Boolean(布尔值)、Null（空）、Undefined（未定义）引用数据类型：Object(对象)、Array(数组)、Function(函数)1.typeof（基本数据类型）但是：typeof null ==object typeof function == function2.instanceof （主要用于引用数据类型的判断）判断两个对象是否属于实例对象，一般用法为 A instanceo
2021-05-24 22:37:55
48
原创 JS数据类型
js数据类型分两种基本数据类型：String（字符串）、Number(数字) 、Boolean(布尔值)、Null（空）、Undefined（未定义）引用数据类型：Object(对象)、Array(数组)、Function(函数)String 字符串类型特点：1.字符串的单引号和双引号作用效果一样 。2.字符串有length属性，能获取字符串的长度。3.字符串的值是不可变的，所以很多的字符串的api不会改变原字符串值。字符串转换：1.String()：适用于任何的数据类型。2.
2021-05-24 22:32:07
178
原创 vue-router
路由简介路由（routing）就是通过互联的网络把信息从源地址传输到目的地址的活动。 — 维基百科前端路由的核心改变URL，但是页面不进行整体的刷新。vue-Router两种模式hash模式：浏览器url中#后面的内容，包含#。hash是URL中的锚点，代表的是网页中的一个位置，单单改变#后的部分，浏览器只会加载相应位置的内容，不会重新加载页面。history模式 ：HTML5，History interface提供了两个新的方法： pushState(),浏览器不会向服务端请求
2021-05-23 20:41:28
49
原创 深拷贝与浅拷贝
在学习深拷贝之前，我们要先搞明白什么是深拷贝？在JS中，数据类型分为基本数据类型和引用数据类型两种，对于基本数据类型来说，它的值直接存储在栈内存中，而对于引用类型来说，它在栈内存中仅仅存储了一个引用，而真正的数据存储在堆内存中一、 浅拷贝对于浅拷贝而言，就是只拷贝对象的引用，而不深层次的拷贝对象的值，多个对象指向堆内存中的同一对象，任何一个修改都会使得所有对象的值修改，因为它们公用一条数据二、深拷贝我们在实际的项目中，肯定不能让每个对象的值都指向同一个堆内存，这样的话不便于我们做操作，所
2021-05-23 20:30:35
69
原创 浅谈 Vuex中的一些功能
Vuex 是什么？概念：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。这是官网给出的回答????这是我对vuex的简单的了解????vuex 是一个状态集中管理工具，主要解决大中型复杂项目的数据共享问题。 Vuex背后的基本思想，就是前面所说的单向数据流。下图就是Vuex实现单向数据流的示意图。...
2021-05-23 19:27:58
101
原创 小程序优购商城项目讲解
小程序优购商城项目讲解首页页面：pages/home/home.wxml首页代码：search:点击跳转到搜索页面，然后判断。根据输入框中的value和给的接口中的数据（数组）进行对比，如果相同进行渲染// 发送请求获取搜索建议 数据 async qsearch(query){ const res=await request({url:"/goods/qsearch",data:{query}}); console.log(res); this.setData({
2021-05-23 18:53:32
636
原创 Vue 的 生命周期
Vue的生命周期beforeCreate(创建前)：在此生命周期函数执行的时候，data和methods中的数据都还没有初始化。created(创建后)：在此生命周期函数中，data和methods都已经被初始化好了，如果要调用 methods中的方法，或者操作data中的数据，最早只能在created中操作。beforeMount(载入前)：在此生命周期函数执行的时候，模板已经在内存中编译好了，但是尚未挂载到页面中去，此时页面还是旧的。mounted(载入后)：此时页面和内存中都是最新的数据
2021-05-21 08:02:00
78
原创 组件通信的几种方式
vue中有多种组件，父组件、子组件、兄弟组件等，这些组件之间的传值方式也是不同得1. 父传子这种传值方式比较简单，子组件只需用props将父组件传递过来的数据接收，即可使用//父组件代码：<p>这是父组件</p><input type="text" v-model="parentData"><Childrenfrt :parentData="parentData" ></Childrenfrt>//子组件代码：props: {
2021-05-20 08:02:17
522
原创 uni-app开发(Promise封装)
uni-app开发(Promise封装)1.创建文件夹在根目录里创建promise文件夹在promise文件夹里面创建promise.js文件2.封装promise在promise.js文件中写入const baseUrl='http://api.intewl.cn/api'//共有路径export const myRequest = (url,method,data) => { return new Promise((resolve, reject) => { uni.
2021-05-19 01:08:07
763
原创 小程序发布流程
小程序发布流程发布流程，大概分三个大步骤：1. 上传代码2. 提交审核3. 发布版本注意：发布之前，配置服务器域名白名单1、上传代码在代码编写完毕后，在他顶部的导航条上找到【上传】输入版本号，项目备注,点击上传上传成后的提示到这里我们开发代码这块就完工了，剩下的就是去微信小程序平台发布了。2、提交审核进入微信小程序的官网:https://mp.weixin.qq.com2.1.进入【版本管理】找到开发版本，点击‘提交审核’首次提交审核，会弹出如下提示，点击前往填写填
2021-05-17 11:25:20
177
原创 小程序支付流程
小程序支付流程当我们把自己喜欢的商品添加到购物车,想要去支付的时候,我们点击去结账,没有收货地址也是不可以的这时候我们点去结账的时候,我们判断是否有地址,是否有商品 我们给去结账绑定一个事件去结账下面是js代码,逻辑代码 data() { address: {} // 数量 totalNum: 0 }, // 结算 js(e) { // 判断收货地址 const { address, totalNum } =
2021-05-16 22:01:21
118
原创 小程序授权登陆流程
小程序授权登陆流程思路：登录按钮注册点击事件，在事件中用微信中的wx.login的方法来获取code，创建一个对象来收需要的值 ，然后把这个对象作为参数去请求登录接口，如果登录成功就会返回一个token的值，储存到本地缓存中并跳转到支付页面。代码： handleUserInfo(e){console.log(e); new Promise((resolve, reject) => { wx.login({ success: (r
2021-05-16 20:53:05
231
原创 小程序收货地址的获取
小程序收货地址的获取小程序收货地址的获取流程1.点击事件触发函数，获取用户当前设置2.根据用户当前设置中的用户授权结果，判断是否包含收货地址授权3.如果包含收货地址授权并且没有取消过收货地址授权，直接调用wx.chooseAddress（），获取用户收货地址。4.取消过收货地址授权，调用wx.openSetting（），调起客户端小程序设置界面让用户去打开授权4.1 用户当前设置包含收货地址授权但是用户点击取消授权，调用wx.openSetting（），调起客户端小程序设置界面让用户去打开授权
2021-05-16 20:35:22
305
原创 小程序如何写收藏、分享、客服功能
小程序如何写收藏、分享、客服功能收藏：首先需要两个不同颜色相同图案的收藏icon-font图标，来显示是否加入收藏，然后声明一个变量来判断状态true或者false然后再给收藏设置一个点击事件，获取本地存储中的商品的数组shouc(){ let iscollect=false //获取本地存储中的商品收藏数组 let shopca=wx.getStorageSync('shopca')||[] //用findIndex方法来判断是否有被收藏过 let ind
2021-05-16 19:01:39
57
原创 JS中一些常见数组方法
JS中一些常见数组方法了解JS这门语言的同学都知道，js中有很多简单便捷的方法，今天给大家分享一部分js中数组里面的方法。ES5数组方法1. push() ：接受多个参数,并将这些参数放置于数组尾部,返回新数组的长度,原始数组发生改变。2. pop() ：不接收参数,从数组尾部删除一个元素,并返回这个删除的元素,原数组发生改变。3. unshift()：接受多个参数并将这些参数放置于数组头部,返回新数组的长度,原数组发生改变。4. shift() ：不接受参数,从数组的头部删除一个元
2021-05-14 11:56:29
115
原创 微信小程序上拉加载更多
微信小程序上拉加载更多无论是微信小程序还是其他前端框架，都会遇到上拉加载（懒加载）和下拉刷新这种问题。其实理清楚什么时候请求数据、请求返回的几种情况，那么做这个懒加载就很简单了。一、首先，固定一个包含列表数据的view高度，让它里面列表的数据溢出可以滚动 <scroll-view scroll-y lower-threshold="100" bindscrolltolower="scrollToLower" style="height: 100vh;"> <view wx
2021-05-13 19:39:11
943
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人