javascript
文章平均质量分 59
项目中遇到的问题
sleeppingfrog
一抹斜阳,一手江湖
展开
-
vue3多页面配置你一定会遇到的问题,踩坑指南
就能正常访问page1,和page2了,展示的内容分别是page1项目和page2项目的app.vue的内容。但是我们的page1和page2项目可不止一个app.vue,我们要通过路由配置不同的路由访问不同的页面。这是我们配置的最原始的一个结构,如图,带+的是新增的文件(文件夹)特别注意新增的page1.html和page2.html,这两个模版文件是一定不能忘记的。我们在page1和page2这两个项目下分别新增了一个views文件夹,用来存放页面,同时新增了一个home和list页面,用来测试。原创 2023-08-11 10:46:40 · 391 阅读 · 0 评论 -
react18+react-router-dom v6实现路由鉴权
react-router-dom v6实现路由鉴权原创 2022-10-24 16:32:30 · 2305 阅读 · 0 评论 -
eslint与prettier,到底是咋回事,怎么用?
elsint与prettier到底怎么用?如何实现保存vscode自动格式化原创 2022-10-15 15:23:33 · 1485 阅读 · 0 评论 -
tree数组改造实现多层结构并列展示
树形数组平铺展示实现多层嵌套数据并列展示原创 2022-10-13 16:26:50 · 635 阅读 · 0 评论 -
http缓存浅析:协商缓存与强缓存
http缓存网上的文章很多了,最近看了一些,结合自己的理解,作一点总结。1 强缓存所谓强缓存,可以简单的理解为强制缓存,它规定在一定的时间内客户端如果再次发送请求,则直接走缓存资源。同时服务端返回200状态码。(强缓存只发生在至少第二次请求中)那问题来了?我客户端向你服务端发送请求,你为啥要强制我走缓存呢?那浏览器和服务端肯定有一些约定。在很早之前,http1.0时代,浏览器和服务器之间就约定了一个规则:服务器:"老哥,你以后如果再http请求头里带上了expires,那我就计算一个时间原创 2021-12-24 14:51:42 · 346 阅读 · 1 评论 -
uniapp中安装uview-ui踩坑记录
uniapp--开发原创 2021-12-03 16:23:06 · 15265 阅读 · 2 评论 -
手写new的实现,说一说new过程中都发生里什么?
在回答这个问他之前,我们需要思考这些问题:1 new 关键词是用来干什么的?什么场景下会用到new?2 new 出来的对象和之前的对象有什么关系?3new出来的对象有什么特点?只有彻底缕清这些关系,才能让我们了解new的过程中到底发生了什么?首先我们思考第一个问题:1 new 关键词是用来干什么的?new关键词是用来实例化一个对象的。new出来的对象,也就是实例化的对象,继承了构造函数的属性和方法,也就是new出来的对象,一出生就继承了父级对象(构造函数)的某些特征。那问题来了.原创 2021-11-25 17:08:29 · 363 阅读 · 0 评论 -
js基础系列之-------call,apply的实现
我们都知道call与apply能实现this指向的改变,而且该函数执行时立刻返回结果。 let Person = { name: 'Tom', say() { console.log(this.name) } } let person1= { name: 'Tom1' }Person.say.call(person1) //原创 2021-11-25 12:34:24 · 210 阅读 · 0 评论 -
记一次高德地图引入 AMap is not defined 血坑
步骤:1 在pubic文件夹下的index.html中引入高德地图的js文件<scripttype="text/javascript"src="https://webapi.amap.com/maps?v=2.0&key=自己申请的key&plugin=AMap.CitySearch"></script>2 在methods中写一个获取位置的方法getLngLatLocation() { AMap.plugin('AMap....原创 2021-09-24 11:01:22 · 8492 阅读 · 10 评论 -
vue 实践中的一些小技巧
1 数据过滤:经常会在项目中用到数据过滤,如何让代码更优雅?以下是在项目中使用到的一些小技巧:场景。codeArr:[{projectNum:'123123123312',name:'coco',age:20,gender:'formale',applayNum:'24124126417'},{projectNum:'123123123345',name:'joco',age:...原创 2019-07-27 16:17:23 · 267 阅读 · 0 评论 -
vue中封装axios请求
importaxiosfrom'axios'import{Loading,Message}from'element-ui';importrouterfrom"../router/index"importqsfrom'qs'import{db}from"../utils/utils"importErrorMessagefrom"@/common/restMessage"importstorefrom"@/vuex"conster...原创 2020-08-26 22:59:03 · 519 阅读 · 0 评论 -
手机号自动补空格
pc端通过keyup事件做处理:注意添加maxlength="13"<divclass="m-input-wapper"id="m-input-wapper"><inputtype="text"class="m-input"id="m-input"maxlength="13"><inputtype="button"class="m-search-btn"id="m-search-btn"value="获取手机号">...原创 2020-06-20 15:58:16 · 212 阅读 · 0 评论 -
syntax-dynamic-import插件实现懒加载
syntax-dynamic-import实现懒加载1 npm install --save-dev @babel/plugin-syntax-dynamic-import2 在根目录新建一个babel.config.js文件 (注意:本实例采用vuecli3)module.exports = {"presets": ["@vue/app"],"plugins": [...原创 2020-02-08 22:09:54 · 8196 阅读 · 1 评论 -
关于弹出层里获取dom元素的一个小思考
最近遇到一个小场景。进入首页以后,需要有一个弹窗。弹窗的内容可能是一个图片。可能是一个视频。也可能是html字符串。所以想到封装成一个组件。对于视频。则有一个需求。如果用户不看完该视频是不允许关闭弹窗的。代码如下:(注contentType://弹窗内容类型1图片2视频3其他)结果发现videoObj 报错 null???说好的mounted 中获取do...原创 2020-01-14 18:00:06 · 922 阅读 · 0 评论 -
关于在循环发请求中如何正确对应返回值问题
今天遇到了这样一个需求。后端返给你一个数组。类似如下:letarr=[{name:'one',dataUrl:'/api/one',age:20},{name:'two',dataUrl:"/api/two",age:30},{name:'three',dat...原创 2019-12-12 17:16:35 · 641 阅读 · 0 评论 -
vue-lazyLoad遇到的一些问题
Vue.use(VueLazyLoad,{preLoad:1,error:'./static/error.png',loading:‘./static/img/a.jpg’})1 图片高度设置问题:如果直接使用,没有设置任何参数。你可能会遇到图片无法展示的问题。你可以试着给图片设置一个高度。然后就会出现惊喜。2 loading 图片如何设置大小?如果你想在图片未加载...原创 2019-10-26 20:37:34 · 2446 阅读 · 0 评论 -
crypto-js实现前端加密与记住密码功能
实现步骤:1 安装:cnpm icrypto-js2 封装cookie操作utils.js文件中import Crypto from 'crypto-js'const Cookie={setCookie(username,psd,exdays){var username=Crypto.AES.encrypt(username+"",'secret...原创 2019-10-26 15:49:05 · 610 阅读 · 0 评论 -
qs插件参数序列化
qs插件在开发中用的很多。用来做参数序列化很方便。但是最近发现自己项目在通过cdn方式引入的时候遇到了一些小坑。在cli所在的node环境中,我们直接通过npm install qs --save 安装以后通过import qs from “qs”就可以方便使用,但是在cdn引入的情况下qs是不起作用的。查了很久发现。原来应该是Qs...比如:<script src="https:/...原创 2018-09-30 21:26:12 · 3156 阅读 · 0 评论 -
webpack实例打包中遇到的问题
实例效果:一个简单的demo项目结构参考vue-cli文件目录这里我们需要在打包以后出现两个页面。分别是index.html和linsence.html。所以在根目录下新建了这两个页面。(他们实际上模板页面)这个demo,我们把src下的main和linsence这两个js文件作为入口文件。main.js中我们需要引入temp组件中的内容。temp中集成了css样式和htm...原创 2018-09-28 17:37:39 · 1665 阅读 · 0 评论 -
fetch函数以及在vue中的应用
fetch是新一代XMLHttpRequest的一种替代方案。无需安装其他库。可以在浏览器中直接提供其提供的api轻松与后台进行数据交互。基本用法:1 fetch(url,{parmas}).then(res=> return res.json() //返回promise对象).then(data=>{ return data //返回真正数...原创 2018-10-26 14:34:47 · 11576 阅读 · 0 评论 -
一个实例浅析webWroker
Web Worker 的作用,就是为 JavaScript 创造多线程环境,允许主线程创建 Worker 线程,将一些任务分配给后者运行。在主线程运行的同时,Worker 线程在后台运行,两者互不干扰。等到 Worker 线程完成计算任务,再把结果返回给主线程。这样的好处是,一些计算密集型或高延迟的任务,被 Worker 线程负担了,主线程(通常负责 UI 交互)就会很流畅,不会被阻塞或拖慢。...原创 2018-12-02 08:05:38 · 358 阅读 · 0 评论 -
html5 FileReader 实现本地图片上传并预览应用实例
1、FileReader接口的方法FileReader接口有4个方法,其中3个用来读取文件,另一个用来中断读取。无论读取成功或失败,方法并不会返回读取结果,这一结果存储在result属性中。 FileReader接口的方法 方法名 参数 描述 readAsBinaryString file 将文件读取为二进制编码 readAsText file,...原创 2018-01-07 20:59:34 · 16396 阅读 · 1 评论 -
react-redux 异步请求实例解析
首先我们需要用node搭建一个后台。模拟真实接口。我们采用koa2作为后台,建立web服务器代码如下:---------------------------------------------------------------------------------------------react脚手架中,我们需要在package.json中设置proxy我们请求的接口会以...原创 2019-09-01 10:20:06 · 3005 阅读 · 0 评论 -
vue 定制主题与切换皮肤二篇
之前一篇文章介绍过如何通过less定制主题。今天我们将实现如何实现动态皮肤切换的第二种方法:秘密武器就是less.modifyVars({l@color:'#fff'})其中@color就是全局定义的变量。后面就是你想要更改的值。其实less.modifyVars这个方法是less-loader提供的一个方法。我们可以在module rules 中的less-loader 下配置opt...原创 2019-09-16 22:14:48 · 1755 阅读 · 0 评论 -
浅析js面向对象的继承
以下只列举三种常见方式1:拷贝继承首先我们要知道子类究竟要继承父类的哪些特征?答案是属性和方法。继承父类的属性。我们采用call通过对象冒充的方式。让子类具有父类的属性。那么接下来我们所说的三种方式,都是针对父类的方法。更直接一点,就是父类prototype上的方法。那么我们就好理解。所谓拷贝继承。就是通过拷贝的方式,把父类prototype上的方法统统赋值给 子类原创 2018-01-07 20:56:42 · 1824 阅读 · 0 评论