- 博客(31)
- 收藏
- 关注
RSS订阅原创 前端实现token无感刷新
一种前端处理 根据后台返的时间来刷新token（优点： 在请求前拦截，能节省请求。缺点： 需要后端额外提供一个token过期时间的字段；使用了本地时间判断，若本地时间被篡改，特别是本地时间比服务器时间慢时，拦截会失败。不采用）不在请求前拦截，而是拦截返回后的数据。先发起请求，接口返回过期后，先刷新token (优点：不需额外的token过期字段，不需判断时间。缺点 会消耗多一次请求) 采用凡是用前端直接处理的一般都不安全import axios from "axios";import { Mes.
2022-05-25 17:50:54
618
原创 axios + formdata文件上传 formdata 为空
由于之前上传文件一直没出现问题，突然项目中 formdata文件上传 formdata 为空（找了很多原因都没找到，后来看到某个博主说FormData被序列化之后转为空的Object对象，因为另外伙伴一个在封装的全局request中把数据序列化了（qs）），所以用的时候注意在network传入的formData传过去没（正确传入的数据，如果不是请考虑序列化数据了）...
2021-04-07 10:58:54
3008
6
原创 节流与防抖
1.节流的核心思想: 如果在定时器的时间范围内再次触发，则不予理睬，等当前定时器完成。 const throttle = function (fn, interval) { let last = 0; return function (...args) { let context = this; let now = +new Date(); // 还没到时间 if (now - last < interval
2020-09-16 16:28:05
168
原创 Vue fliters(全局使用)
1.首先开始项目的时候，有一些方法我们是需要全局使用的。这些很多页面需要用的、使用频率极高的方法，我们一般会将其封装为全局的方法或者局部需要混入相同的方法，数据等等，（mixins（复用方法）和filters（过滤器））；2.需要独立在untils文件夹里创建一个filters.js文件/** * 过滤方法 * 适用于多个组件需要公用的过滤方法*/const demoFiltersOne = name => { return name+'我只是随便一个过滤方法1'}const
2020-06-29 15:47:11
340
原创 Vue-cli3 移动端适配（字体适配固定px转rem）
1.首先需要安装两个插件postcss-px2rem：将css中 px 编译为 rem，配合js根据不同手机型号计算出dpr的值，修改的viewport 的值和的font-size。lib-flexible：原理是通过js实时的检测屏幕的大小并改变html标签的字体大小，再结合rem的特性来完成页面的自适应。npm install lib-flexible（dependencies项目运行时的依赖，程序上线后仍然需要依赖）npm install postcss-px2rem -D （devDepen
2020-06-19 16:36:27
1094
原创 关于数组里包含对象，对象里面包含对象，而对象里不确定对象的不同属性时的判断
在其开发企业微信接口存在这么个数据展示 let testData = [{ // 可以包含property，当然也可以包含config或者不包含或者多个情况 property: { control: 'Contact', id: 'Contact-1585125229216', ...
2020-03-27 11:01:05
1747
原创 前端企业微信引入jsSdk时的注意事项
1.前言，需求：在其侧边栏增加客户信息录入与其他操作事项（多个h5页面）。2.主要就是员工授权获取token，获取客户的userid，主要这两个参数，来确定员工与客户一一对应。3.一定需要仔细看企业微信的开发文档，不然很多自己意想不到的bug。企业微信jsSdk的说明4.关于 应用注意事项wx.agentConfig调用的说明5.配置问题（下载说明中的文件配置到自己的根目录）6,其实...
2020-03-21 11:49:58
1404
原创 关于vue移动端性能优化需要的插件（图片懒加载，点击穿透）
1.1. 关于移动常见问题 click 有300ms的延迟npm install v-tap --save; // 移动端点击事件 去掉300ms1.2.在其main.js当中注册import vueTap from 'v-tap';Vue.use(vueTap);1.3 在其使用的页面<div v-tap="{ methods : telClick }">移动端点...
2020-03-16 09:36:53
471
原创 关于各系统(统一登录) 前端（vue）
类似于登录淘宝或者天猫跳转到统一登录页面,登录成功携带参数跳转页面需求：多个后台管理系统 => 未登录 => 跳转到统一登录界面 => 登录成功携带token => 需要登录系统截取token添加到请求头 => 请求参数展示页面首先单独开发一个统一登录的功能<template> <div class="login"> ...
2020-02-26 15:00:41
4294
原创 关于vuex使用常量替代 Mutation 事件类型的好处
官方文档有说常量的好处，但是的确没用过，也不怎么懂，就我目前有用的了解来说。在后面项目中使用了常量有如下好处1.常量更容易避免程序出现错误。如果把一个值赋给程序中的一个常量，而该常量已经有一个值，编译器就回报告错误。2.在其多人协作的时候，方便统一管理，而且在其状态管理当中调用方法时一眼就是看出是其mutation里面的方法，有问题直接快速找到。...
2020-02-24 14:53:13
1561
1
原创 js中Array对象方法以及String对象方法
Array对象方法 let arrayOne = [0, 1, 2] // 常用方法push方法 concat方法 splice方法 // 常用 Array push方法 向数组的末尾添加一个或更多元素，并返回新的长度。 arrayOne.push(3) console.log(arrayOne); ...
2020-02-22 15:35:40
170
原创 关于企业微信扫码登陆vue
企业微信扫码登陆官方文档采用的是第一种（构造独立窗口登录二维码）对于前端来说就步骤就是 页面展示二维码 => 用户扫码登陆点击确定 => 确定之后重定向自己配置的路径 => 企业微信会返回一个code => 前端截取code传给后台换取token ，话不多说上代码。在其login页面<template> <div class="lo...
2020-02-21 17:02:24
1955
原创 关于Vscode中vue用户代码配置
在Vscode设置用户代码片段有一个vue.json中配置代码（个人针对于移动端包含vant ui框架配置，可以根据自己代码习惯自己更改） 文件 => 首选项 => 用户代码片段 => 搜索vue.json ，替换即可。（新建 文件 => 首选项 => 用户代码片段 新建全局（配置中有个code是使用在js还是html或者css当中，去掉在任何地方都可以使用快...
2020-02-20 10:42:49
696
原创 关于vue中混入(mixins)个人理解
官方解释:混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。(也就是说组件当中写的代码可以直接引入外部的代码，就和引入js代码大同小异，但是如果有重复数据或者方法以当前组件中的方法为准 )这是混入的JS文件// 简单的举例 导出混入方法或者数据...
2020-01-15 16:42:27
471
原创 css重置代码以及图标
重置代码html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; height: 100%;}body { margin: 0; font-size: 14px; font-...
2020-01-10 18:04:05
52018
原创 前端模拟数据（通常情况下后台接口会比较慢，自己模拟）
前言：之前学习过node，可以搭建简单的服务器并且用过mysql，当时还知道怎样配，到现在真的忘完了，毕竟是主要前端这块(平时自己也可以自己模拟数据测试)，幸好自己当时配置的代码还有，不然又只有去简单重新学习。挂在码云上，里面步骤有nodeJs数据模拟...
2020-01-09 15:05:12
646
原创 vue结合axios登录拦截添加token
1.首先登录之前需要用到全局的前置守卫（防止输入路由直接登录）// 根据自己习惯，可以在main.js也可以import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)const myLogin = () => import('../views/login') // 此类写法懒加载cons...
2020-01-04 13:24:29
396
原创 关于vue-cli3脚手架的安装以及初始化项目
1.首先安装脚手架（vue-cli3）npm install -g @vue/cli2.然后创建自己的项目// 记住my-project不要用驼峰命名vue create my-project3.根据自己项目所需就可快速创建你的项目4.可见官方链接详情...
2020-01-03 11:39:08
517
原创 vue中文件配置以及axios请求的封装
首先，很多的时候项目的文件的布局以及代码的管理真的很重要。（亲身体验，努力改进中）2.其次是axios封装，直接上代码吧。（在其request JS文件里面）import Vue from "vue";import axios from "axios";import qs from "qs"; //序列化字符串import { Toast } from "vant";Vue....
2019-12-28 16:57:25
493
1
原创 微信小程序点赞功能简单模拟
首先是wxml中（登录用户） <!-- 只是模拟小部分数据 --> <block wx:for='{{threeDemo}}' wx:key> <view class="flex imgWidth"> <view> <image src="../../img/indexDetail/false.p...
2019-12-28 15:28:19
2207
1
原创 vuex的使用(模块化管理)
首先，Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。再奉上官方流程图（“单向数据流”理念）也就是说按照这个模式可以结合vue-devtools浏览器插件调试监听数据在哪个位置改变（这就是不建议直接更改，要按照这个流程来写（可能会显得麻烦，但是对于中大型项目是很有用以及易于管理的））。刚开始可能会不熟悉，会觉得麻烦，可能暂时觉得没什么用，再其以后维护就会变得轻松。先给上管...
2019-12-17 10:38:56
767
原创 vue传值方式以及会话储存数据以及新slot的使用
由于很长时间没有使用vue了，版本一直在更新，正好现在有时间再整理一下语法使用。下面直接包括（子传父，父传子，slot，sessionStorage（会话数据储存）），直接给上代码父组件<template> <div class="about"> <h1>This is an about page</h1> ...
2019-12-16 15:46:00
484
原创 关于js模块化管理ES6和commonJS语法的使用
平常习惯记录一下ES6引入模块化管理写法// 这个属于es6的写法 js的模块化开发// 这是我导出的方法一function methodOne() { // 这是我导出的方法一}function methodTwo() { // 这是我导出的方法二}export { methodOne, methodTwo,}expor...
2019-12-16 13:10:52
331
原创 微信小程序分包加载(也就是懒加载（根据所需加载）)
分包加载官方文档以及说得很清楚了,完全可以参考官方文档来看分包加载可以提高打开小程序的速度（避免流失部分客户）（其次需要注意分包的打包原则以及引用原则）。引用原则：packageA 无法 require packageB JS 文件，但可以 require app、自己 package 内的 JS 文件packageA 无法 import packageB 的 template，但可以 ...
2019-12-13 13:53:04
600
原创 微信小程序（关于Component组件中Behavior使用（里面包含了observers的事件监听））
当看微信小程序文档的时候有种朦胧感（之前开发小程序没有使用过）对于Behavior我的理解就是在其Component组件中引入复用性比较高的data（数据），properties（也是数据如果有相同会覆盖data里面的数据（还可以定义数据类型，组件传参也可以用其来接收）），以及methods（方法），也就是所在组件能使用的函数进行一个导出进行复用而已。着重复用（和其我们封装函数导出进行复用一样...
2019-12-12 17:00:07
2690
原创 微信小程序图片懒加载（lazy-load，感觉不生效）
图片懒加载。只针对page与scroll-view下的image有效 （也就是说在其page页面下的组件也是有效的），这些只需要在其img设置：<image wx：for="{{manyImg}}" src='{{item}}' lazy-load="true" bindload="loadLazyImgChange" ></image>在其使用到额时候我们会感...
2019-12-12 11:28:19
5374
原创 微信小程序传值的问题(组件触发事件传参给所用组件的页面)
当遇到这种（也就是通过事件改变组件数据或者状态需要把改变的值传给所在页面时）场景的时候。components为组件，pages为页面第一则需要在components中 （data和properties里面都可以this.data来取到值，如果有相同的值 properties里面的值会覆盖data里面的值）wxml中<button bindtap="clickMe">我...
2019-12-11 13:12:39
1601
原创 常见正则验证汇总（身份证,手机号码，邮箱，密码，用户名）
由于有时可能会用到这些正则（所以整理在js文件当中），也是为了不让自己忘记module.exports = { // 以下四个是身份证最全的正则 checkProv: function(val) { var pattern = /^[1-9][0-9]/; var provs = { 11: "北京", 12: "天津", 13: ...
2019-12-10 10:56:03
308
原创 微信小程序picker选择器
由于平时没有注意picker选择值的问题(value的值问题value="{{pickerOne[indexOne]}}" indexOne是代表选择了下标的第几个) <picker bindchange="PickerChange" range="{{pickerOne}}" data-id='1' value="{{pickerOne[indexOne]}}" na...
2019-12-09 18:01:31
339
原创 微信小程序单选问题，可取消选中问题（当选项为必填项的时候）
1.最近在做小程序端单选框，但是由于不是必选项，所以用户可以在其点击选项当中再点击就可取消选中。直接贴出wxml。 <radio-group class="flex paddingTop block" name="moneyChildrenOne" bindchange='childOnetrue'> <label class="flex al...
2019-12-07 13:52:45
3194
原创 微信小程序自带版本管理器的使用，多人协作开发
微信小程序自带版本管理器的使用首先初始化项目，创建项目创建新项目,输入APPID初始化 git 仓库4.进来页面选择设置，设置之前先到点击右上角的代码管理5. 设置之前先到点击右上角的代码管理创建公司的项目组6. 如果有账号就直接登录选择我的项目组，创建新的项目组7. 创建项目直接输入项目路径以及项目简介8.创建项目组成功以后需要创建项目9.然后创建项目1...
2019-12-02 14:25:37
7358
6
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人