hyduan_h5的博客

不管是移动端，还是pc端，可能都会有用户登录操作，不同的用户之间又拥有不同的角色，而不同角色之间势必存在不同的权限；如果按照类型划分，大概可分为三类：菜单权限、按钮权限、数据权限；数据权限：前端在请求头统一封装，携带用户信息，由后端解析返回；菜单权限：通过element菜单组件实现；按钮权限：通过自定义指令实现；菜单权限&按钮权限：本质上也是通过数据权限，由后端返回当前用户所有有权限菜单及按钮，然后由前端处理；} }

代码打包后，开发中写的很多打印信息或者断点，都会带上去，即影响美观，又影响性能，而生产大多不需要，故而需去除；插件使用来压缩 JavaScript。我们项目主要用来去除生产环境中的console以及debugger等信息。通过查阅后，经测试此方法可行，故记录，以便后续查看。网站推荐：https://www.npmjs.com/package/terser-webpack-pluginwebpack其他相关给、推荐一：webpack优化相关。

项目上线后为了不完全泄露源码，需要对给出的代码进行加密混淆，前端代码虽然无法做到完全加密混淆，但是通过使用 webpack-obfuscator 通过增加随机废代码段、字符编码转义等方法可以使构建代码完全混淆，达到无法恢复源码甚至无法阅读的目的。网站推荐：https://www.npmjs.com/package/webpack-obfuscatorwebpack其他相关给、推荐一：webpack优化相关。

sm2、sm3加密

SplitChunks是Webpack中一个提取或分离代码的插件，主要作用是提取公共代码，防止代码被重复打包，拆分过大的js文件，合并零散的js文件。4:webpack优化系列三：vue打包后生成的chunk-vendors文件过大,利用SplitChunks插件，分离chunk。推荐网址：https://webpack.docschina.org/plugins/split-chunks-plugin/webpack其他相关给、推荐。一：webpack优化相关。............

position 可能失效的情况：1、须确定设置sticky元素的参考滚动父级元素2、指定 top, right, bottom 或 left 四个阈值其中之一（且达到设定的阈值），才可使粘性定位生效。否则其行为与相对定位相同；并且 top 和 bottom 同时设置时，top 生效的优先级高，left 和 right 同时设置时，left 的优先级高。...

当路由模式为history路由时，刷新页面报404We’re sorry but XXX doesn’t work properly without JavaScript enabledUncaught SyntaxError: Unexpected token

highcharts设置柱状图宽度、渐变色、圆角、柱子上方数据

vue原生实现日历组件

gzip压缩：HTTP协议上的gzip编码是一种用来改进web应用程序性能的技术，web服务器和客户端（浏览器）必须共同支持gzip。目前主流的浏览器，Chrome,firefox,IE等都支持该协议。简单来说，gzip是一种压缩技术。经过gzip压缩后页面大小可以变为原来的30%甚至更小，这样，用户浏览页面的时候速度会快得多需求实现1.安装依赖cnpm i -D compression-webpack-plugin2.修改vue.config.js配置const Compression.

目标需求：1：从a页面（例如表格、表单等）某行数据跳转到b页面，2：b页面不调用后端接口，只是前端页面的数据修改，3：修改b页面数据后，返回a页面，此时a页面该行数据修改，且其他数据保持不变；实现原理：1：a页面跳转b页面，数据可由路由带过去；2：b页面跳转a页面，b页面修改a页面的数据，通过eventBus修改；3：b页面跳转a页面，a页面数据保留的数据，通过keep-alive方式；相关文档：1：eventBus：链接2：keep-alive vue2.0: 链接3：keep.

需求：1：页面一数据由接口返回，修改部分数据，2：数据仅前端页面调整，暂未提交修改数据库。3：页面一跳转页面二，再由页面二返回页面一4：页面一数据仍为修改后的数据实现：1：借用方式：keep-alive2：keep-alive是vue中的一个内置组件，主要是将组建缓存到内存中，避免切换路由的时候页面刷新从而导致dom的重新渲染3：vue3keep-alive使用vue2的写法，切换路由后当前页面数据依旧改变一：在vue.app中添加keep-alive标签（此处与vue2不同）。&l.

需求：1：页面一数据由接口返回，修改部分数据，2：数据仅前端页面调整，暂未提交修改数据库。3：页面一跳转页面二，再由页面二返回页面一4：页面一数据仍为修改后的数据实现：1：借用方式：keep-alive2：keep-alive是vue中的一个内置组件，主要是将组建缓存到内存中，避免切换路由的时候页面刷新从而导致dom的重新渲染一：在vue.app中添加keep-alive标签。<template> <div id="app"> <keep-al.

在需求中，经常遇见pdf的在线预览效果很多pdf插件不支持vue3，或者是没有集成翻页放大缩小功能，比如vue-pdf。实现原理：借用依赖vue-pdf-embed(pdf预览),pdfjs-dist（获取pdf总页数）实现效果实现步骤一：安装依赖npm i vue-pdf-embed -Snpm install --save pdfjs-dist二：页面使用vue文件中<template> <div> <div class="div"&.

方法：监听滚动实现通过addEventListener方式监听通过scroll获取到滚动export default { data () { return { topNavBg: { backgroundColor: '' } } }, // 滚动监听 mounted () { window.addEventListener('scroll', this.handleScroll) // 监听页面滚动 }, met

1：获取url参数getParams(url){ //获取？后面第一个字符串的索引 var index = url.indexOf('?')+1; //取得url后面的字符串 var params = url.substr(index); //使用&切割字符串，返回一个数组 var arr = params.split('&'); //定义一个空对象 var o = {};

vue2方法一在main.js中全局注册----vue Bus总栈new Vue({ el: '#app', router, store, //使用store vuex状态管理 components: { App }, template: '<App/>', data: { // 空的实例放到根组件下，所有的子组件都能调用 Bus: new Vue() }})事件注册及调用// 事件监听---在

在需求中，经常遇见pdf的在线预览效果实现原理：借用依赖vue-pdfvue-pdf推荐网址：https://www.npmjs.com/package/vue-pdf实现效果pdf文件样式实现步骤一：安装依赖npm i --save vue-pdf二：页面使用vue文件中<template> <div class="read"> <van-nav-bar title="预览" left-arrow .

1.具体实现效果2.创建SIdentify组件，主要用于验证码样式<template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div></template><script> export default{ name: 'S

原理1、获得access_token（可以前端向百度发送请求获取，也可以后端获取，传token给前端，建议后端获取），本文默认前端已获得access_token。2、调用摄像头或本地文件夹获得证件照片3、将证件照片转化为base64格式4、发送请求，反写证件信息到输入框方法1：新建handlmg.js,做好准备工作/** * * @param {*base64字符串} dataurl * @return {Blob文件类型} */ export function dataU

在需求中，经常会遇到需要填写银行卡账号的情况，身为前端，为了用户体验及简化流程，在提交后端前，需要对银行卡账号进行校验。下载插件bankcardinfonpm i bankcardinfocnpm i bankcardinfo在main.js中引入import getBankcardinfo from 'bankcardinfo'Vue.prototype.$getBankcardinfo = getBankcardinfo在需要识别的板块添加代码this.$getBankcardi.

1. vue-tour推荐文档：https://pulsardev.github.io/vue-tour/?from=madewith.cn2. driver.js推荐文档github：https://github.com/kamranahmedse/driver.js用法和用例介绍：https://kamranahmed.info/driver.js/简单的安装使用介绍（中文，非官方）：http://f2ex.cn/driver-js/3. intro.js推荐文档：http

日常开发中，经常会遇到一个页面运用多个组件，或者多个页面运用同一组件的需求，对于这种，每个页面都进行引用，就有些过于繁琐，对此，我们会针对此类情况进行统一封装，本篇文章主要实现效果如下图，对于需要使用tabbar的页面增加配置：一：新建组件TabBar此处引用了vant组件import { Tabbar, TabbarItem } from 'vant';import styles from './index.css'export default { name: 'tabBar',.

前言webpack的env一般分为develop、test以及production，每个环境可能所需配置都不一样，比如请求的后端服务器等等若每次打包单独修改，那可能太过繁琐，最重要可能打包时忘记，造成不必要的损失故而，建议将webpack区分不同环境单独配置好，打包时使用不同命令即可一：环境配置新建.env.dev文件NODE_ENV = 'dev'VUE_APP_BASE_UPL='开发环境api'// 其他所需配置都可在此定义新建.env.test文件NODE_ENV = 't

前言：个别需求会要求禁止swiper的左滑或者右滑功能，虽然原生swiper可支持，但因版本问题，个别引用有问题；或者此时功能已开发完成，再换组件开发成本较大，所以需要再vant的基础上进行兼容。具体实现如下<van-swipe class="my-swipe" style="height: 200px;" vertical :touchable='touchable' @change='changeSwipe'> <van-swipe-item @touchstart.

1.下载vuexnpm i vuex@next2.在util文件夹中新建Storagehandle .js文件（防止刷新后数据丢失）const lsa = window.localStorageexport default { getItem(key) { try { return JSON.parse(lsa.getItem(key)) } catch (err) { return null } }, s

方法一一、配置与安装步骤：1、在 Vue 项目的 src 文件夹下创建一个 config 文件夹：2、在 config 文件夹中创建 rem.js：3、将以下代码复制到 rem.js 中：// 基准大小const baseSize = 32// 设置 rem 函数function setRem () { // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。 const scale = document.documentElement.clientWidth / 75

方法一代码清楚法1：每次修改package.json版本号2：在main.js中配置const VUE_APP_VERSION = require('../package.json').versionconst vers = window.localStorage.getItem("appVersion");if (VUE_APP_VERSION != vers) { localStorage.clear() window.localStorage.setItem("appVe

1：vue项目webpack打包后，直接打开，白屏问题原因文件引用路径不对问题解决根目录下新建 vue.config.js，在此处配置publicPath,具体如下：module.exports = { ... runtimeCompiler: true, publicPath: './' ...}问题注意依赖路由模式为hash，否则还会出现白屏的问题。（如果使用history模式上线，必须要服务端在服务器上有对应的模式才能使用history（看上面链接），

一：ES6对es6 了解新增模板字符串（为JavaScript 提供了简单的字符串插值功能）、箭头函数（ 操作符左边为输入的参数， 而右边则是进行的操作以及返回的值Inputs=>outputs 。）、for-of （用来遍历数据—例如数组中的值。）arguments 对象可被不定参数和默认参数完美代替。ES6 将promise 对象纳入规范，提供了原生的Promise 对象。增加了let 和const 命令，用来声明变量。增加了块级作用域。let 命令实际上就增加了块级作用域。E

<div id="talk-online"> <img src="@/assets/images/talk.jpg" /> </div> let box = document.getElementById("talk-online") //鼠标按下的函数 box.onmousedown = function (ev) { var oEvent ...

在vue中动态给src赋值绑定图片会显示不出来 动态添加src被当做静态资源处理了，没有进行编译解决方法：1、用网络地址 把图片放在cdn或自己的服务器上，把网络地址存在imgUrl里，然后直接2.把图片放在src同级的static文件夹下 此处有坑 如果在部署H5的项目时对路径动了手脚这个有没有用3.require(’…/assets/images/’+imgsrc+’.png’) require里面是字符串4：important引入，在data中赋值，可直接获取，import im.

前端系统经常会出现系统嵌套的情况，参数由别的系统携带的情况，自然参数也是可以正常获取的egg: 路径: // var str = 'http://baidu/#/home?user=aaa&role=bbb' var name, value; var objUrlParams = {} var str = location.href; //取得整个地址路径 var num = str.indexOf("?") str = str..

问题一问题一：需要将对象 data :{’名字‘：’name‘, ‘省份’：’province‘，’性别‘： sex}转为：labelList: [{name: 名字, value: ’ name’}， {name: 省份, value: ’ province’}, {name: 性别, value: ’ sex’}]方法let labelList = [] for (let i in data) {​ let item = { name: i , value: data[i]

数据流格式 // 开始处理文件下载 - res.data为文件流 let blobUrl = window.URL.createObjectURL(new Blob([res.data], { // 后台传递的文件类型 - 此处我是直接写死的 // 也可以从后台获取的 type: 'application/vnd.ms-excel'

Object.assign()Object.assign():将所有可枚举的自身属性的值从一个或多个源对象复制到目标对象。const target = { a: 1, b: 2 };const source = { b: 4, c: 5 };const returnedTarget = Object.assign(target, source);console.log(target);// expected output: Object { a: 1, b: 4, c: 5 }con

字符串字符串就是一个或多个排列在一起的字符，放在单引号或双引号之中。'abc'"abc"length属性js里的字符串类似于数组，都是一个一个字符拼凑在一起组成的，因此可以用length属性取得字符串的长度var str = "hello"str.length; // 5字符串常用的一些方法charAt()str.charAt(n)＝> 返回字符串的第 n 个字符，如果不在 0~str.length-1之间，则返回一个空字符串。var str = "java

js中创建数组有两种方式（一）使用 Array 构造函数：var arr1 = new Array(); //创建一个空数组var arr2 = new Array(20); // 创建一个包含20项的数组var arr3 = new Array("lily","lucy","Tom"); // 创建一个包含3个字符串的数组（二）使用数组字面量表示法：var arr4 = []; //创建一个空数组var arr5 = [20]; // 创建一个包含1项的数组var arr6 = ["li

一个优雅的命名必定是严格遵循一定的规范的，不符合规范的命名对于代码可读性的破坏力是巨大的。一、变量命名方法: 小驼峰式命名法命名规范：前缀为形容词 （函数前缀为动词, 以此来区分函数和变量）说明：命名具体一点 一目了然 好的命名是不需要注释的# 好的命名方式let maxCount = 10let tableTitle = '表格标题'let convertStandardTermToDate // 采用小驼峰命名let addTableTitle = '添加表格标题' // 如果有.

1.1 动态类型语言和鸭子类型编程语言类型编程语言按照数据类型可分为：静态类型语言、动态类型语言；动静态定义动静态优缺点对比鸭子类型（duck typing）通俗说法指导我们只关注对象的行为，而不关注对象本身利用鸭子类型的思想，不必借助超类，就能轻松在动态类型语言中实现“面向接口编程，而不是面向实现编程”超类 面向接口编程1.2 多态多态的实际含义是：同一操作作用于不同对象上面，可以产生不同的解释和执行结果。换句话说，给不同的对象发送同一个消息的时候，这些对象会根据这个消