- 博客(49)
- 收藏
- 关注
RSS订阅原创 前端解决后端返回的图片二进制文件
写后台管理登录的时候有个验证码我发送 获取验证码的请求 返回值是一堆乱码 懵逼… 各种搜找到解决方案首先 你确定返回的是二进制文件流 而不是base64这是我请求的方法下面是获取到的数据解决方法加上请求头打印结果最后在方法中进行转换效果实现...
2022-05-19 10:59:53
612
1
原创 vue3+h5实现手写签名
接上还是同一个后台还是同一个h5页面…先看效果点击签字 跳转路由canvas页面主要实现手写签名部分<template> <div class="canvasPage"> <van-nav-bar title="签名" left-text="返回" left-arrow @click-left="onClickLeft" /> <div class="page sign-page"> <div class="
2022-05-11 21:01:30
1172
2
原创 vue获取浏览器url参数
前段时间写的后台管理 有个需求：订单页面生成二维码图片 扫描二维码跳转至app页面第一次经历哇！！！从扫描二维码跳转过来的时候 url里边携带订单id（参数）例如 http://www.hahaha.com/list?orderId=214285#/home外部进入的url会放在VUE项目编译以后自动加 “#/” ，其中带的参数在#/之前，那么我们只能用JS的方法来获取在methods中定义方法 获取到参数 /* 获取地址栏url参数 */ getUrlKey() {
2022-05-11 20:50:43
4477
1
原创 antdesignvue对话框关闭数据清空
在使用ant对话框的时候 会遇到一种情况打开对话框 选中了几条数据 关闭对话框 再打开的时候 数据信息还是显示刚才的试了加上destroy-on-close="true"不好使也试了ruleForm.reset（）表单重置默认值方法最后解决办法加上cancel 关闭对话框事件...
2022-03-29 09:55:24
1948
1
原创 vue 保留两位数字（含四舍五入 非四舍五入）
这里写自定义目录标题在vue3中已经弃用filters过滤所以，可以使用toFixed（2）在methods中自定义方法在代码中直接调用此方法如果代码提示报错.toFixed is not a function解决办法Number(_this.group_cash).toFixed(2)...
2022-03-29 09:12:30
3426
原创 Promise封装api思路
Promise封装思路：首先创建一个utils文件夹，在文件夹下创建一个request.js文件在此文件中设置baseurl，并实例化一个对象request，让他等于我们封装的请求方法利用wx.request方法，传入参数url,data,dataType,header,method，reponseType以及timeout然后调用请求成功的方法和请求失败的方法，最后导出我们封装的request方法；在创建一个api.js，在文件中引入我们封装的request方法，随意命名一个serve,这个s
2021-06-03 09:56:56
143
原创 js高频面试题
文章目录this关键字（指向）对象和面向对象事件模型：事件委托、代理？如何让事件先冒泡后捕获？window的onload事件和domcontentloaded函数柯里化（卡瑞化、加里化）iframe的优缺点有哪些查找数组重复项数组扁平化垃圾回收机制this关键字（指向）this设计的初衷是在函数内部使用，用来指代当前的运行环境。this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象在浏览器里，在全局范围内thi
2021-05-20 21:58:21
189
3
原创 elementUI如何修改样式
elementUI如何修改样式解决方案：1.新建全局样式表新建 global.css 文件，并在 main.js 中引入。 global.css 文件一般都放在 src->assets 静态资源文件夹下的 style 文件夹下，在 main.js 的引用写法如下：import "./assets/style/global.css";在 global.css 文件中写的样式，无论在哪一个 vue 单页面都会覆盖 ElementUI 默认的样式。2.在当前vue单页面中添加一个新的st
2021-05-16 21:33:50
823
1
原创 http常见的状态码
http状态码分类：1xx：提示信息-表示请求正在处理2xx：成功-表示请求正常处理完毕3xx：重定向-要完成请求必须进行更进一步的处理4xx：客户端错误-请求有语法错误或请求无法实现5xx：服务器端错误-服务器处理请求出错常见的状态码200：请求成功，浏览器会把响应体（通常是html）显示在浏览器中301/302/303：（网站搬家，跳转）重定向304：Not Modified，代表上次的文档已经被缓存了，还可以继续使用。如果不想使用本地缓存可以用Ctrl+F5强制刷新页面400：语
2021-05-12 21:46:51
89
原创 Js异步之宏任务和微任务
什么是宏任务和微任务宏任务setTimeout、setInterval、Ajax、DOM事件微任务Promise、async/await微任务执行时机比宏任务早异步和单线程js是一门单线程脚本语言，需要异步来辅助异步和同步的区别：异步不会阻塞程序的执行同步会阻塞程序的执行使用异步的场景：定时任务：setTimeout、setInterval网络请求：ajax请求、动态 < img> 加载事件绑定ajax请求代码示例：//ajax请求代码示例co
2021-05-11 20:21:59
167
原创 微信小程序（简易版todolist）
效果如下todo.wxml<view class="container"> <view class="search"> <image src="../../img/home.png" bindtap="addtodoshadle"></image> <input type="text" placeholder="Anything here……" value="{{input}}" bindinput="inp
2021-05-09 21:48:13
145
原创 JS高频面试题总结
文章目录js数据类型、堆栈存储js数据类型有哪些堆栈存储常见的值类型常见的引用类型typeof运算符：二、使用步骤1.引入库2.读入数据总结提示：以下是本篇文章正文内容，下面案例可供参考js数据类型、堆栈存储js数据类型有哪些基本数据类型(值类型)：NumberStringBooleanUndefinedNullSymbol（es6新增独一无二的值）BigInt（es10新增）引用数据类型ObjectObjectArrayfunctionDateRegExp
2021-05-09 21:12:35
471
1
原创 Promise常用API
首先new一个Promise其执行过程是：执行了一个异步操作，也就是setTimeout，2秒后，输出“执行完成”，并且调用resolve方法。这里只是new了一个对象，并没有调用它，但是传进去的函数就已经执行了，所以我们用Promise的时候一般是包在一个函数中，在需要的时候去运行这个函数，如：我们包装好的函数最后，会return出Promise对象，也就是说，执行这个函数我们得到了一个Promise对象。接下来就可以用Promise对象上有then、catch方法了，这就是Promise的强大
2021-05-09 21:03:31
1133
原创 Js数组去重
将数组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
2021-05-08 15:09:43
112
原创 面试录音（js基础、vue）面试题
文章目录一、闭包二、作用域链三、作用域对象四、原型链五、ES6有哪些拓展六、Promise七、生命周期八、父子组件传参九、vuex一、闭包内部函数访问外部函数的变量，这种函数嵌套函数的形式，叫做闭包在 JavaScript 中，每当创建一个函数，闭包就会在函数创建的同时被创建出来。全局变量可以重复使用，但是容易造成变量污染，不同的地方定义了相同的全局变量，这样就会产生混乱局部变量仅在局部作用域内有效，不可以重复使用，不会造成变量污染闭包结合了全局变量和局部变量的优点，可以重复使用变量，不会
2021-05-07 07:55:56
325
3
原创 小程序与普通页面的区别
小程序与普通页面的区别小程序的主要开发语言是 JavaScript ，小程序的开发同普通的网页开发相比有很大的相似性。对于前端开发者而言，从网页开发迁移到小程序的开发成本并不高，但是二者还是有些许区别的。一、渲染线程和脚本线程网页开发渲染线程和脚本线程是互斥的，这也是为什么长时间的脚本运行可能会导致页面失去响应，而在小程序中，二者是分开的，分别运行在不同的线程中。二、有关Dom操作网页开发者可以使用到各种浏览器暴露出来的 DOM API，进行 DOM 选中和操作。程序的逻辑层和渲染层是分
2021-05-06 21:45:04
488
原创 小程序的优化方法
文章目录一、启动加载性能优化二、事件通信优化三、渲染机制的优化一、启动加载性能优化启动过程机制资源准备(代码下载)业务代码注入和渲染异步请求数据(部分小程序)控制代码包的大小开启开发者工具中的“上传代码时候自动压缩”及时清除无用代码和资源文件减少代码包中的图片等资源文件的大小和数量分包加载分包加载的局限性和解决方法分包预加载(即将推出的功能)分包加载-----独立分包(即将推出)可以不依赖于主包，独立下载和运行的分包。从独立分包页面启动，只下载和注入分包就可以打开
2021-05-06 20:30:05
686
原创 微信小程序入门（一）
介绍微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验小程序注册注册小程序帐号在微信公众平台官网首页（mp.weixin.qq.com）点击右上角的“立即注册”按钮。信息补充完整后获取AppID申请账号进入小程序注册页根据指引填写信息和提交相应的资料，就可以拥有自己的小程序帐号。安装开发工具前往 开发者工具下载页面 ，根据自己的操作系统下载对应的安装包进行安装，有关开发者工具更详细的介绍可以查看 《开发者工具介绍》 。打开小程序
2021-05-06 16:48:36
937
1
原创 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-06 00:36:48
96
原创 observer源码解析
Observer在MVVM中实现劫持的原理在Observer源码部分主要有三个部分：Observer、Dep、Watcher。实现observer我们将要observe的对象，通过递归，将它所有的属性，包括子属性的属性，都给加上set和get。这样的话，给这个对象的某个属性赋值，就会触发set。export default class Observer{ constructor(value) { this.value = value this.walk(value) } //递归。。让每个
2021-05-06 00:36:34
110
原创 Watcher源码解析
Dep用于依赖收集和派发更新，它收集所有的订阅者，当有数据变动的时候，它会把消息通知到所有的订阅者，同时它也调用Watcher实列中的update方法，用于派发更新。Watcher 用于初始化数据的watcher的实列。它原型上有一个update方法，用于派发更新。比如调用回调函数来更新页面等操作。function Watcher (obj, expOrFn, cb) { this.obj = obj; this.expOrFn = expOrFn; this.cb = cb; // 如
2021-05-06 00:36:14
114
原创 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:12:40
96
原创 梦学谷项目总结(上)
技术栈VueVuexVue-routerElement-UIAxios项目功能模块登录会员管理供应商管理商品管理员工管理修改密码操作整个项目我负责的是商品管理模块 请参考梦学谷商品模块
2021-05-05 20:04:52
84
原创 梦学谷项目总结(下)
本篇主要分析一下梦学谷项目的商品管理模块页面效果其实就是简单的增删改查分页在做这个模块过程中 大的问题没有 就是有个细节要注意再点击编辑 新增弹出对话框后 里边有一个供应商的输入框 当触发这个输入框后 当前弹框隐藏 会显示出来供应商的对话框然后点击这个弹框的内容后 修改对话框里的供应商会对应...
2021-05-05 20:03:59
79
原创 vue高仿小米商城项目总结(下)
上篇文章已经为这个项目简单的做了结构搭建这篇文章呢主要分析的就是购物车模块购物车这块的话是整个项目中比较有逻辑性的操作首先…上代码这块的话 是通过actions去调用mutations里边的方法辅助函数可以把vuex中的数据和方法映射到vue组件中。达到简化操作的目的...
2021-05-05 19:28:06
762
1
原创 vue高仿小米商城项目总结(上)
技术栈VueVuexVue-routerElement-UIAxios项目功能模块登录页面使用了element-ui的Dialog实现弹出蒙版对话框的效果，登录按钮设置在App.vue根组件，通过vuex中的showLogin状态控制登录框是否显示。这样设计是为了既可以通过点击页面中的按钮登录，也可以是用户访问需要登录验证的页面或后端返回需要验证登录的提示后自动弹出登录框，减少了页面的跳转，简化用户操作。用户输入的数据往往是不可靠的，所以本项目前后端都对登录信息进行了校验，前端基于
2021-05-05 18:53:36
2063
4
原创 vue后台管理系统实践方案总结(下)
1.项目初始化安装Vue脚手架通过Vue脚手架创建项目配置Vue路由配置Element-UI组件库配置Axios库初始化git远程仓库将本地项目托管到Github或码云中相关依赖-按需导入2.登录概述1. 登录业务流程在登录页面输入用户名和密码调用后台接口进行验证通过验证之后，根据后台的响应状态跳转到项目主页2. 登陆业务的相关技术点http是无状态的通过cookie在客户端记录状态通过session在服务器端记录状态通过token方式维持状态3.登陆页面
2021-05-03 23:22:05
186
原创 vue后台管理系统实践方案总结(上)
电商项目基于Vue初始化项目一、项目架构、概述Vue.jsVue 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。二、项目所用技术栈前端项目技术栈VueVue-routerElement-UIAxiosEcharts三、项目所有模块...
2021-05-03 21:04:47
691
原创 Vue-router钩子函数和执行顺序
VUE生命周期中的钩子函数及父子组件的执行顺序先附一张官网上的vue实例的生命周期图，每个Vue实例在被创建的时候都需要经过一系列的初始化过程，例如需要设置数据监听，编译模板，将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数(回调函数)，这给了用户在不同阶段添加自己代码的机会。在vue实例的整个生命周期的各个阶段，会提供不同的钩子函数以供我们进行不同的操作。先列出vue官网上对各个钩子函数的详细解析。创建前/后：beforeCreate：在实例初始
2021-04-29 20:25:16
2062
原创 Vue中的$nextTick()
上篇文章大概说了$nextTick()的定义下面给大家举例说明：Html结构<div id="app"> {{ message }} </div>const vm = new Vue({ el: '#app', data: { message: '原始值' }})this.message = '修改后的值1'this.message = '修改后的值2'this.message = '修改后的值3'这时候想获取页面最新的DOM节点，却发
2021-04-29 19:30:53
819
原创 v-if和v-for的优先级
v-if和v-for的优先级v-for和v-if不应该一起使用，必要情况下应该替换成computed属性。原因：v-for比v-if优先，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候。错误写法<li v-for="user in users" v-if="user.isActive" :key="user.id"> {{ user.name }}</li>如上情况，即使100个user中之需要使用一个数据，也会循
2021-04-29 18:58:38
89
原创 Vue常见面试题总结
文章目录1、为何组件的data必须是一个函数2.vue常用的指令3.v-if与v-show的区别4.Vue的双向数据绑定原理（极简版）5.Vue组件通信6.什么是vuex?7.vue监听和深度监听watch8.Vue 中 methods,computed, watch 的区别9.MVVM和MVC10.vue中的修饰符11.vue中如何自定义指令directive12.Vue之filter13.vue路由，路由传参（parmas,query）14.keep-alive15.v-for中为何要使用key16.v
2021-04-29 09:01:51
691
原创 vue中 keep-alive 理解以及使用
概念： keep-alive 是 Vue 的内置组件， 当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。 和 transition 相似，keep-alive 是一个抽象组件： 它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。作用： 在组件切换过程中 把切换出去的组件保留在内存中， 防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性原理： 在 created 函数...
2021-04-22 19:33:57
1521
2
原创 vue-router路由守卫
导航守卫vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察$route对象来应对这些变化，或使用beforeRouteUpdate的组件内守卫。全局前置守卫：你可以使用router.beforeEach注册一个全局前置守卫：const router = new VueRouter({ ... })rout...
2021-04-21 10:10:04
156
原创 从一个数组中删除另一个数组给出的下标值所对应的值
方法一： //1.将arr1在arr2中对应下表元素置为空 (这个下标还能保存在这) arr2.forEach(i => delete arr1[i]) //2.将arr1中的空元素删除 挑出来满足条件的即 i是有值的 不为空的 arr1 = arr1.filter(i => i) console.log(arr1);方法二：方法三：...
2021-04-20 18:56:36
247
1
原创 Vue实现路由懒加载
1.为什么要使用路由懒加载像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时2.使用方法常用的懒加载方式有两种：即使用vue异步组件 和 ES中的import*1.vue异步组件 ==== 异步加载*未使用路由懒加载，vue中路由代码如下：
2021-04-20 15:13:28
139
1
原创 Vue的双向绑定实现方法
Vue实现数据双向绑定原理：采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty() 将它们转为 getter/setter。特点1.比如input被监视，当输入发送改变时，会将数据推送到模型中。2.当模型中
2021-04-18 19:40:35
665
原创 Vue-router报NavigationDuplicated的产生原因和解决方案
当你的Vue项目在当前的路由下企图再次导航到当前路由时就会出现NavigationDuplicated的问题（通俗来讲就是多次进入了同一个path，比如说当前你在/user/user-list页面，这时候你通过点击按钮或其他的方式又进入了/user/user-list页面，那就会抛出下面的问题）这个问题是vue-router3.0版本往上才出现的问题，目前的vue-router@3.1.1 版本官方已经修复了此问题。NavigationDuplicated 产生的时候会抛出一个promise,在3.0版
2021-04-15 21:10:15
534
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人