- 博客(94)
- 资源 (10)
- 收藏
- 关注
RSS订阅
原创 前端--入职准备
最近经常有一些刚入职的小白请教我刚入职需要注意什么，我就写一些当时我刚入职的问题吧。但因年代久远，也忘了一些具体事项。但还是希望能对你们有所收获。1：软件如果你入职的公司会配电脑，一般的都是新电脑，上面什么都没有，咱们需要的东西都是得自己配置，可以提 前把软件准备好，否则你下载就得好长时间，再加上配各种环境又得弄好久，最主要网上直接下载有的软件确实很 容易出问题。 * Vscode 插件（必须...
2021-02-01 17:17:18
2720
原创 前端常用网址总结
开发常用组件网站：参考链接https://www.cnblogs.com/xiaolucky/p/12779039.html前端常用组件库：参考链接https://www.cnblogs.com/lpp-11-15/p/13085602.htmlhttps://www.jianshu.com/p/bdc8c568aeff前端常用学习网站：十个糖果：https://www.tensweets.com/article/?genre=all掘金：https://juejin.cn/简书：https.
2021-02-01 17:16:56
2018
1
原创 immutable讲解
immutable(不可改变的,永恒不变的)引入我们需要什么?需要一个不同内存地址对象,这样视图数据就可以更新对象深拷贝 JSON.parse(JSON.stringify(obj))这样做,无差别攻击所有对象不管是否修改到全部转字符串,开辟新地址,这样项目足够庞大是非常耗费性能的,fackboox 专门开发 immutable对数据进行任何修改或添加删除等操作都会返回新...
2019-11-23 10:55:19
2714
原创 vue h5开发常见兼容问题记录
问题描述：活动产品根据开始时间与结束时间，前端计算，开启倒计时，安卓，及iphone7以上展示正常，iphone7及以下倒计时异常；
2023-11-08 13:47:06
450
原创 前端渲染后端返回的HTML格式的数据
在日常开发中，经常有需要前端渲染后端返回页面的需求，对于不同数据结构，前端的渲染方式也不尽相同，本文旨在对各种情况进行总结。
2023-10-18 13:58:13
6258
1
原创 webpack系列八---vue项目打包发布后源码泄露
在vue项目，打包后，默认会将源码打包上去，以至于用户可以在控制台查看到源代码，为了信息安全，也为了优化加载速度，需要配置相关属性；检查隐藏源码是否泄漏：打开控制台–查看sources/源代码tab–查看包文件，当有webpack文件时，这证明当前源码泄漏状态；当从控制台查看类似如下状态，则源码泄漏已解决；
2023-05-12 18:24:16
3334
原创 谷歌浏览器请求前端常见问题
，这样跳转页面前会卡住，这时去看response是可以看到的。因为访问这个页面 会进行跳转 这个请求是跳转之前请求的，谷歌默认会将请求记录删除。因为访问这个页面 会进行跳转 这个请求是跳转之前请求的，谷歌有这个bug。打开控制台选择network选项卡，选中preserve log选项。控制台里输入window.onbeforeunload =
2023-05-11 13:13:36
551
原创 vue使用keep-alive后从部分页面进入不缓存
需求：1：当前有页面A-B-C三个板块；2：从页面C返回页面B时，B页面数据之前数据不会被清空（keep-alive），且C页面携带到B页面的数据缓存(event-bus/vuex)；3：从A-页面进入B页面时，B页面为初始化状态。实现：1：借用路由钩子函数，在进入B页面时，对当前页面进行兼容处理；
2023-03-22 14:09:11
1389
原创 vue项目权限：数据权限、菜单权限、按钮权限
不管是移动端，还是pc端，可能都会有用户登录操作，不同的用户之间又拥有不同的角色，而不同角色之间势必存在不同的权限；如果按照类型划分，大概可分为三类：菜单权限、按钮权限、数据权限；数据权限：前端在请求头统一封装，携带用户信息，由后端解析返回；菜单权限：通过element菜单组件实现；按钮权限：通过自定义指令实现；菜单权限&按钮权限：本质上也是通过数据权限，由后端返回当前用户所有有权限菜单及按钮，然后由前端处理；} }
2022-10-25 10:39:27
6716
2
原创 webpack优化系列七：首屏加载优化
前端项目打包之后默认情况下的配置文件较大，部署后首次加载反应较慢，甚至会出现几秒白屏的现象，对于用户的体验感不是很好，所以需要进一步优化一下；本文主要记录一下本人自己的理解，如果其他方案可评论指导。
2022-10-24 11:32:58
4044
原创 webpack优化系列六：vue项目配置 terser-webpack-plugin 压缩 JS，去除console
代码打包后，开发中写的很多打印信息或者断点，都会带上去，即影响美观，又影响性能，而生产大多不需要，故而需去除；插件使用来压缩 JavaScript。我们项目主要用来去除生产环境中的console以及debugger等信息。通过查阅后，经测试此方法可行，故记录，以便后续查看。网站推荐：https://www.npmjs.com/package/terser-webpack-pluginwebpack其他相关给、推荐一：webpack优化相关。
2022-10-17 10:17:57
6070
1
原创 webpack优化系列五：vue项目配置 webpack-obfuscator 进行代码加密混淆
项目上线后为了不完全泄露源码，需要对给出的代码进行加密混淆，前端代码虽然无法做到完全加密混淆，但是通过使用 webpack-obfuscator 通过增加随机废代码段、字符编码转义等方法可以使构建代码完全混淆，达到无法恢复源码甚至无法阅读的目的。网站推荐：https://www.npmjs.com/package/webpack-obfuscatorwebpack其他相关给、推荐一：webpack优化相关。
2022-10-14 17:47:39
6368
1
原创 webpack优化系列四：vue打包后生成的chunk-vendors文件过大,利用SplitChunks插件，分离chunk
SplitChunks是Webpack中一个提取或分离代码的插件，主要作用是提取公共代码，防止代码被重复打包，拆分过大的js文件，合并零散的js文件。4:webpack优化系列三：vue打包后生成的chunk-vendors文件过大,利用SplitChunks插件，分离chunk。推荐网址：https://webpack.docschina.org/plugins/split-chunks-plugin/webpack其他相关给、推荐。一：webpack优化相关。............
2022-08-15 16:25:28
5493
原创 position sticky与overflow冲突失效无作用，解决办法
position 可能失效的情况：1、须确定设置sticky元素的参考滚动父级元素2、指定 top, right, bottom 或 left 四个阈值其中之一（且达到设定的阈值），才可使粘性定位生效。否则其行为与相对定位相同；并且 top 和 bottom 同时设置时，top 生效的优先级高，left 和 right 同时设置时，left 的优先级高。...
2022-08-04 16:50:54
4273
原创 路由模式：hash和history模式
当路由模式为history路由时，刷新页面报404We’re sorry but XXX doesn’t work properly without JavaScript enabledUncaught SyntaxError: Unexpected token
2022-07-01 14:37:43
2570
原创 webpack优化系列二：Vue配置compression-webpack-plugin实现Gzip压缩
gzip压缩：HTTP协议上的gzip编码是一种用来改进web应用程序性能的技术，web服务器和客户端（浏览器）必须共同支持gzip。目前主流的浏览器，Chrome,firefox,IE等都支持该协议。简单来说，gzip是一种压缩技术。经过gzip压缩后页面大小可以变为原来的30%甚至更小，这样，用户浏览页面的时候速度会快得多需求实现1.安装依赖cnpm i -D compression-webpack-plugin2.修改vue.config.js配置const Compression.
2022-05-31 17:08:38
19195
5
原创 vue 详情页修改数据返回主页面后修改主页面该条数据且其他数据保留
目标需求：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.
2022-05-31 09:26:40
1374
原创 vue3.0 keep-alive 路由跳转之后保留当前页面数据不变动
需求：1：页面一数据由接口返回，修改部分数据，2：数据仅前端页面调整，暂未提交修改数据库。3：页面一跳转页面二，再由页面二返回页面一4：页面一数据仍为修改后的数据实现：1：借用方式：keep-alive2：keep-alive是vue中的一个内置组件，主要是将组建缓存到内存中，避免切换路由的时候页面刷新从而导致dom的重新渲染3：vue3keep-alive使用vue2的写法，切换路由后当前页面数据依旧改变一：在vue.app中添加keep-alive标签（此处与vue2不同）。&l.
2022-05-27 11:27:42
9371
1
原创 vue2.0 keep-alive 路由跳转之后保留当前页面数据不变动
需求：1：页面一数据由接口返回，修改部分数据，2：数据仅前端页面调整，暂未提交修改数据库。3：页面一跳转页面二，再由页面二返回页面一4：页面一数据仍为修改后的数据实现：1：借用方式：keep-alive2：keep-alive是vue中的一个内置组件，主要是将组建缓存到内存中，避免切换路由的时候页面刷新从而导致dom的重新渲染一：在vue.app中添加keep-alive标签。<template> <div id="app"> <keep-al.
2022-05-27 11:19:19
4468
2
原创 vue3.0借用vue-pdf-embed实现在线预览pdf文件
在需求中，经常遇见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"&.
2022-05-09 13:51:03
13999
12
原创 vue监听页面滚动事件
方法：监听滚动实现通过addEventListener方式监听通过scroll获取到滚动export default { data () { return { topNavBg: { backgroundColor: '' } } }, // 滚动监听 mounted () { window.addEventListener('scroll', this.handleScroll) // 监听页面滚动 }, met
2022-05-07 09:34:59
21136
10
原创 前端项目中常用方法总结
1：获取url参数getParams(url){ //获取？后面第一个字符串的索引 var index = url.indexOf('?')+1; //取得url后面的字符串 var params = url.substr(index); //使用&切割字符串，返回一个数组 var arr = params.split('&'); //定义一个空对象 var o = {};
2022-04-29 17:23:53
246
原创 vue Bus 全局事件实现跨组件通信
vue2方法一在main.js中全局注册----vue Bus总栈new Vue({ el: '#app', router, store, //使用store vuex状态管理 components: { App }, template: '<App/>', data: { // 空的实例放到根组件下，所有的子组件都能调用 Bus: new Vue() }})事件注册及调用// 事件监听---在
2022-03-29 09:53:26
1879
2
原创 vue2.0借用vue-pdf实现在线预览pdf文件
在需求中，经常遇见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 .
2022-03-23 11:21:44
2777
1
原创 less合集（二）：动态修改主题颜色一键换肤
需求背景：1：在需求中，一个平台样式风格基本保持统一；因而需设置一个全局样式配置2：有时需要可以根据后端数据返回，动态修改主题颜色方式一适用技术：css，less，sass等适用场景：颜色种类不固定的场景1：在index.html文件中增加配置<script> window.onload = () => { // 设置主题色 // --buttonColor是自定义的按钮背景样式代号 // 可动态修改，eg:由后端返回接受，可由前端事件修改.
2022-03-21 15:34:31
4903
1
原创 less合集（一）：less设置全局样式----mixin&自定义样式&初始化vant组件
一：新建样式文件文件目录可自定义：我的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
2022-03-18 11:43:56
6645
1
原创 前端随机生成验证码vue&js&vant~element
1.具体实现效果2.创建SIdentify组件，主要用于验证码样式<template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div></template><script> export default{ name: 'S
2022-03-11 08:00:00
2557
1
原创 vue使用百度OCR拍照识别图片信息
原理1、获得access_token（可以前端向百度发送请求获取，也可以后端获取，传token给前端，建议后端获取），本文默认前端已获得access_token。2、调用摄像头或本地文件夹获得证件照片3、将证件照片转化为base64格式4、发送请求，反写证件信息到输入框方法1：新建handlmg.js,做好准备工作/** * * @param {*base64字符串} dataurl * @return {Blob文件类型} */ export function dataU
2022-02-28 14:53:58
4529
1
原创 vue根据银行账号识别银行卡信息
在需求中，经常会遇到需要填写银行卡账号的情况，身为前端，为了用户体验及简化流程，在提交后端前，需要对银行卡账号进行校验。下载插件bankcardinfonpm i bankcardinfocnpm i bankcardinfo在main.js中引入import getBankcardinfo from 'bankcardinfo'Vue.prototype.$getBankcardinfo = getBankcardinfo在需要识别的板块添加代码this.$getBankcardi.
2022-02-28 14:11:54
2318
1
原创 前端指引页方案
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
2022-02-25 16:19:04
556
el-drag-dialog.rar
2021-09-03
WEB前端常见面试技术相关问题
2019-11-22
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人