hyduan_h5的博客

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

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

sm2、sm3加密

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

vue子目录路径更改

前端常见面试题总结~

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：有时需要可以根据后端数据返回，动态修改主题颜色方式一适用技术：css，less，sass等适用场景：颜色种类不固定的场景1：在index.html文件中增加配置<script> window.onload = () => { // 设置主题色 // --buttonColor是自定义的按钮背景样式代号 // 可动态修改，eg:由后端返回接受，可由前端事件修改.

一：新建样式文件文件目录可自定义：我的demo如下图，styles主要用于对于样式的全局设置，比如vant样式，样式变量等；index.less只要用于对文件的引入index.less文件中@import './var';var.less文件中@theme-color: #eb0029;@theme-color-disabled: #fabfc9;@margin-large: 32px;@margin-middle: 24px;@margin-small: 16px;@margi

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',.

前言在前端开发过程中，时常遇到移动端需求。若是每次部署完成后再查看开发效果，可能过于费时费力，因而需要可直接完成真机测试的配置方法一：查询电脑本地IP地址1：ctrl/window+r输入cmd回车，打开命令提示符;2：输入ipconfig,查看本地ip，具体如下二：修改config修改config中的配置，将host改为本地ip，具体如下：三：手机访问链接1：将手机与电脑连接同一无线2：重启项目，生成链接，具体如下图：3：至此即可完成所有配置，手机端访问networ

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

html5默认允许用户缩放页面，如果需要禁止缩放，需要将user-scalabel=0设置。解决办法：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。其中：maximum-scale为允许用户的最大缩放值，user-scala.

前言：在需求开发中，尤其移动端，ui设计经常使用一些特殊字体，作为前端开发为了将设计稿完美还原自然也需要将字体样式统一字体库推荐http://fonts.mobanwang.com/下载需要字体在上述链接中搜索你需要的字体，点击下载，例如迷你简雪君字体下载完成内容如下图，重点为ttf文件在工程中新建fonts文件夹,并将刚下载的ttf文件放入(文件最好改为英文命名)在fonts文件夹中新建font.css文件进行配置 @font-face { font-family: "H.

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

因node版本修改导致vue项目无法启动报错：原因：依赖包不适应当前node环境解决方法：1.npm rebuild node-sass2.npm updatecnpm下载成功无法使用报错：如果出现无法加载文件 C:\Users\hp\AppData\Roaming\npm\cnpm.ps1，原因：因为在此系统上禁止运行脚本，需要以管理员身份允许此脚本解决方法：1、在系统中搜索框 输入 Windos PowerShell2、点击“管理员身份运行”3、输入“ set-Executi

方法一代码清楚法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..

在项目中导出表格的需求一般由后端完成，尤其涉及到分页的情况，但不可避免的有特殊情况的发生，故而整理了记录了一下当初实现的方法新建文件Export2Excel，放入以下代码/* eslint-disable */require('script-loader!file-saver');require('./Blob.js'); //改成相对路径require('script-loader!xlsx/dist/xlsx.core.min');function generateArray(tab.

在项目中经常有这样的需求，同一页面路由根据不同参数，渲染不同数据、不同效果、甚至重新刷新整个页面。但由于路由的强缓存原因，同一路由跳转往往不会进行刷新，故而总结了几种解决办法。方法1：实现原理：点击当前菜单，先跳转过渡空白页面，再跳转原页面；实现优点简单方便快速统一实现缺点所有页面都将进行刷新，且因跳转其他页面故反应时间较长实现代码新建empty.vue<template></template><script>export d.

实现效果实现代码vue文件中 <div class="itxst"> <div class="col"> <!-- <div class="title">主体（可模糊查询）</div> --> <el-input v-model="inputValue1" size=