- 博客(43)
- 收藏
- 关注
RSS订阅
原创 ES6学习总结目录
本文用来记录自己ES6学习的总结目录，是自己通过在 CODECASTS的ES6视频所学习进行的总结以及自己的一些理解ES6:let&constES6:箭头函数(Arrow Function)ES6:函数参数默认值ES6:字符串模版( `` )ES6:字符串函数 startsWith() endsWith() includes() repeat()ES6:对象解构ES6...
2020-01-24 16:45:11
1524
原创 Vue3：naive-ui组件自动引入后ts定义类型丢失解决方案
使用naive-ui按需引入时经常单页面引入过多组件，并且有时漏掉一个引入，也不回报错，排查起来很麻烦，就改成了官方的自动引入方法：使用一段时间后发现不对劲，怎么naive最爽的ts定义怎么崩了，所有的组件类型都改成any了：在网上找相关内容也没有类似解决方案，心情瞬间不爽了最终自己摸索，完美解决：在查找定义类型时，发现有两处类型定义：目录均为naive包下的volar定义，因为一个any定义导致全局的组件定义均覆盖成了any，删除这个定义就可以恢复，但是这个毕竟是node_modules包内
2022-06-15 15:20:41
2819
1
原创 微信jssdk ios下config invalid signature签名错误问题，Android成功ios失败
问题出现背景： 常见错误及解决方法 相关官方文档vue等单页面spa应用config调用处不在启动页Android及开发者工具浏览器正常，ios下debug invalid signature失败wx.config 基本流程：前端传递当前页面url给后端换取签名参数 ==> 签名参数带入 wx.config问题排查后端出现问题的可能性不大，官方有示例文件，后端如果有问题大概率是appid等相关参数没有对应正确1️⃣ 首先确定debug返回的错误是 invalid signa.
2022-05-13 14:40:52
2050
原创 NaiveUI对话框dialog和信息message全局挂载配置
vue3版本全局挂载方法不再绑定在vue实例上，这里我们将全局方法绑定在window实例上首先定义一个组件用来挂载全局方法，名字根据个人喜好定义即可，这里以global.vue为例：// global.vue// 挂载window下方法组件// 我是全局用路由控制页面，如果有其他嵌套组件布局等，引入相应的替换即可<template> <router-view /></template><script lang="ts" setup>.
2022-04-24 11:13:58
10976
8
原创 2022 高德地图JSAPI、插件等使用不报错也不正常返回问题
今天使用高德地图时，如下使用了 AMap.DistrictSearch 插件进行省市区的查询： AMap.plugin("AMap.DistrictSearch", function() { var districtSearch = new AMap.DistrictSearch({ // 关键字对应的行政区级别，country表示国家 level: "country",
2022-01-21 16:01:18
4046
7
原创 vue-cli4 scss安装使用
今天新建一个cli4的项目，安装scss时总是报错，百度各种也没有解决，最终clone了一个成型的项目install了一下，发现竟然能正常使用scss，一步步拍错最终完成了安装，分享一下我遇到的错误。项目版本"devDependencies": { "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-eslint": "~4.5.0", "@vue/cli-service": "~4.5.0", "babel-eslin
2021-04-21 17:55:31
2516
3
原创 微信：网站应用第三方微信扫码登录实现
官方文档：微信开放平台网站应用文档项目框架：VUE1. 流程大体流程如下：2. 平台申请首先要在官方微信开放平台申请创建网站应用：微信开放平台-网站应用开发审核通过后，就可以在：管理中心-网站应用 下查看创建的网站应用其中需要的用到的参数如下所示：AppID、AppSecret、授权回调域：3. 前端代码实现（VUE为例）首先要引入 wxLogin 的js文件，在 /public/index.html 中，添加引入：<body> <noscript>.
2020-08-22 10:57:15
2278
原创 webpack：Code Splitting 打包项目分割文件，优化页面加载
参考文章：知乎：Webpack 大法之 Code Splitting来源项目：vue-element-adminRuoYi下图左侧为为分割的打包，右侧为分割的打包，很明显的看出，右侧将element和echarts这两个比较大的包从其中分离出来：而这种做最直接明显的优势就是，像element及echarts这种很大的文件，在很大的情况下是不会改变内容的，比如我们在一个页面的功能修改了一下，打包上传，如果未分割的打包，浏览器会发现这个js文件有变动了，就会重新加载很大的几百KB甚至上M的js.
2020-08-20 10:58:50
1864
原创 Vue：首屏加载页实现
众所周知vue项目通常首屏加载会非常慢，在浏览器加载资源时，可以在首屏加入一个loading页面。首先找到在根目录下的 /pulic/index.html：在 index.html 中找到我们的id为app的div元素：示例修改如下：<!-- public/index.html --><!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <me
2020-08-19 15:44:31
2348
1
原创 高德地图JSAPI Loader使用攻略
高德地图api文档：https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare安装安装推荐使用 JSAPI Loader 进行加载，使用npm安装，引入包的大小非常小。按 NPM 方式使用 Loader安装：npm i @amap/amap-jsapi-loader --save// 官方文档中加了-dev字段，加了-dev字段就只能在本地的时候使用，部署到服务器后将不引入包使用：import AMapLoader from '@amap/a.
2020-06-19 10:43:17
13303
13
原创 vue mockjs使用方法
大部分内容参照简书文章：https://www.jianshu.com/p/1f6a3180051b安装开发依赖npm install mockjs -D安装mockjs在你的开发依赖上，因为你生产环境用的是正式的接口，安装在开发依赖上可以减少你包的大小。main.js：import './mock' //引用mock建立mock目录在 src目录 中，建立一个mock的文件夹:index.js样例index文件用于来合并mock拦截相应请求接口，并使用mock的方法模拟后端.
2020-05-27 14:29:05
407
原创 Postman:携带token测试后端接口使用方法
首先运行项目，打开浏览器的开发者工具，转到 Application 选项，找到项目的token存储位置，这里我存储在cookies中，点开后就找到token值了：打开postman，新建一个页面，输入请求的url，点击 Authorization 选项卡，在 TYPE 中选择 Bearer Token ，右侧复制粘贴我们浏览器中的token，点击send就能正常获取数据了：...
2020-05-22 11:00:52
1408
原创 CSS:纯css样式实现左右两侧文字中间填充点或线（仿账单报表样式），自适应
效果图：实现原理很简单，使用flex布局，中间的填充使用border属性，看似是很多点，其实是一个盒子的border。并且flex特性可以自动适应填充的长短。html代码：<div class="text-container"> <p>交通出行</p> <p class="fill"></p> ...
2020-04-12 19:24:42
1033
原创 element-ui：dialog表单类型弹窗提交表单及关闭自动重置表单
今天在使用element做弹窗类型的表单时，发现提交或者关闭弹窗，表单中的v-model数据及验证的rules都不会重置，dialog写法是这样的：<el-dialog title="标题" :visible.sync="dialog.show"> <el-form ref="form" :model="formData" :rules="...
2020-03-26 17:40:02
5360
原创 element-ui：el-popconfirm弹出框组件确认按钮触发方法绑定
在使用element-ui时，发现弹出框要触发click事件文档与例子中也没有说明：我原本的button组件是这样的：<el-button @click="del()">删除</el-button>// del()del(){ console.log('del')}加入气泡框后：<el-popconfirm title="这是一段内容确定删除...
2020-02-28 15:32:41
33608
16
转载 （转）爬虫，其实本就是这么简单
本文转载自：爬虫，其实本就是这么简单-掘金作者：吸取我无，分享我有时至今日，大前端思想已经深入人心，很多知识都要涉及到。所以对于现在的前端儿来说也是来着不拒的，练就吸星大法的时候，尽量多的吸收知识，最后达到物尽其用的效果最近，我也是一直在学习关于爬虫方面的知识，源于之前项目中需要用到的地铁信息数据并不是用爬虫爬下来的数据，而是直接copy的尽管这些数据一时半会确实不会有太大的变化，不过...
2020-02-27 16:43:54
169
原创 2020 豆瓣API使用（代理方法） 解决无key方法 code 104解决方法
最近想要使用豆瓣的API，却发现网上使用https://api.douban.com/v2/的方法无法使用了：查询过后发现是官方关闭了无key的使用权限，继续查询后发现网络上有一些公开的key，通过公开的key，添加 apikey 关键字后确实能够正常使用了：毕竟key是别人申请的，继续搜索后发现有一个代理的豆瓣API文档：豆瓣API代理 GitHub网址通过代理的API，可以不适用key...
2020-02-03 13:40:36
8779
7
原创 ES6：Map() 与 WeakMap()
Map() 、 WeakMap() 其实与 Set() 、 WeakSet() 的方法与特性大致相同，这里只是来说一下他们的不同关于Set() 与 WeakSet() ：ES6：Set() 与 WeakSet()新建一个Map()const people = new Map([['Tom', 18], [ 'Jerry', 21], ['Mario', 25]]);可以明显看出来M...
2020-01-24 16:31:32
2599
原创 ES6：Set() 与 WeakSet()
Set() 是ES6新增的一种类似Array的集合类型，它最标志的特性就是所有元素都是唯一的不重复的新建一个Set()const people = new Set(['Tom', 'Jerry', 'Mario']);在控制台上打印可以看到它的属性和可以使用的一些方法：sizeSet计算长度的单位是size而不是lengthadd() 与 delete() 方法从名字上可以明确...
2020-01-24 16:01:31
361
2
原创 ES6：Proxy
Proxy用于重写对象上的默认的方法语法const p = new Proxy(target, handler);target：需要代理的对象handler：一个对象，包含想要重写的操作所有的方法可以在MDN中查询：MDN处理器对象简单例子先定义一个对象：const person = { name: 'Tom', age: 20 };再定义一个Proxy实例来代理这个对象...
2020-01-23 21:25:52
199
原创 ES6：Generator 生成器
关于迭代器的信息，可以查看：ES6：迭代器 Iterator关于生成器，个人的理解就是一个迭代器的函数，你可以控制它每次的return内容，并且可以想迭代器一样使用 next() 方法按步进行，通过这种特性也可以达到实现可以暂停和继续运行的函数书写方式function* peoples() { yield 'Tom'; yield 'Jerry'; yield 'Mario'; ...
2020-01-23 16:53:35
185
原创 ES6：迭代器 Iterator
迭代器是一个统一的接口，也可以叫遍历器它的作用是使各种数据结构可被便捷的访问，它是通过一个键为Symbol.iterator 的方法来实现定义一个数组：const people = ['Tom', 'Jerry', 'Mario', 'Yoshi'];在控制台打印它，会发现它具有这样一个属性：可以进行这样的操作：const people = ['Tom', 'Jerry', 'Ma...
2020-01-23 16:17:51
417
原创 ES6：类 class
ES6引入了class，其跟其它语言的class大致相同，JS中的class本质是function它可以看做是语法糖1.类的声明class name { //...}2.类的定义//匿名类const a = class { //...}//命名类const b = class name { //...}3.实例化class name { //...}c...
2020-01-23 15:19:48
217
原创 ES6: Symbol
Symbol是新增的一种数据类型，它用于生成唯一的标志Symbol实例实例一个Symbol：const Tom = Symbol('Tom');其中括号内写的是对这个变量的描述简单应用比如你在班级里，可能有两个人都叫李狗蛋，用一个对象来记录他们的分数：const students = { '王建国' : { Chinese: 78, English: 65, math: 82 }...
2020-01-17 16:35:11
117
原创 ES6: Promise的AJAX应用(同步、异步理解)
为方便理解，大部分代码由省略号代替JS是单线程的语言，它所处理任务只能一个一个排着队来，而使用AJAX时，如果也要排队做任务，那么处理信息时，之前一个请求没有完成，后面的只能排着队等待，属实影响用户体验，因此设计AJAX时就想到这个问题，所以AJAX并不由JS控制而由浏览器控制，它是异步请求，...
2020-01-16 23:07:32
888
原创 ES6:拓展运算符(...)
es6新增拓展运算符，它主要有两种作用：合并和拆分合并比如我们定义这么一个数组：const player1 = ['Tom', '020123', 15, 23, 18, 43];用这个数组来存储Tom玩家与他的姓名，id和他的分数，我们定义三个变量来获取这三个值：const [name, id, scores] = player1;console.log(name, id, sco...
2020-01-15 17:03:28
165
原创 ES6:数组方法(二) find() findIndex() some() every()
先声明一个测试变量：const peoples = [ {name: 'Tom', age: 20}, {name: 'Jerry', age: 16}, {name: 'Mario', age: 19}, {name: 'Yoshi', age: 23}];1.find()find() 方法可以找到数组中符合条件的元素并返回它：const findMa...
2020-01-15 16:03:16
1463
原创 ES6:数组方法(一) Array.from() Array.of()
Array.form() 将可迭代对象转化为数组以数组和字符串为例，他们的原型( __proto__ )有所不同：其所能使用的方法（仅截取部分）也各不同：而通过 Array.form() 方法，则可以将 可迭代对象 转化为数组，可以使用数组的丰富强大的各种方法了：//以字符串为例const arr=[1,2,3,4,5];const str = '123456';console....
2020-01-15 15:29:18
2244
2
原创 ES6:for of 循环
先定义一个测试用的数组：const peoples = [ 'Tom', 'Jerry', 'Mario', 'Yoshi'];最基本的for循环通过定义一个索引值 i 来循环：for(let i = 0; i < peoples.length; i++) { console.log(peoples[i]); //Tom Jerry Mario Yoshi}数组forEac...
2020-01-15 14:45:09
168
原创 ES6:数组解构
当获取数组元素时，会通过索引获取：const users = ['Tom', 'Jarry', 'Mario'];const user1 = users[0]; //Tomconst user2 = users[1]; //Jarryconst user3 = users[2]; //Marioes6中通过数组解构可以这么改写：const users = ['Tom', 'Jarr...
2020-01-14 22:26:47
449
原创 ES6:对象解构
当从一个对象中获取属性时，会进行这样操作：const p1 = { name: 'Tom Shmith', age: 20, familly: { father: 'Jack Shmith', mother: 'Mary Shmith' }}const name = p1.name;//Tom Shmithconst age = p1.age;//20const fat...
2020-01-14 14:23:42
374
1
原创 ES6:字符串函数 startsWith() endsWith() includes() repeat()
1.startsWith()startsWith() 方法可以检测字符串开头，有两个参数，第一个为匹配的字符串，第二个为起始位置（以0为开始），省略则为0开始：const str = '12345abcdEF!$%';console.log(str.startsWith('123')); //trueconsole.log(str.startsWith('abc', 5)); //tru...
2020-01-14 13:53:26
521
原创 ES6:字符串模版( `` )
在ES6之前，要在字符串中加入变量，需要这么写：var name = 'Tom';console.log('hello ' + name + ',how are you');//hello Tom,how are you而使用字符串模版，可以极大方便的书写：console.log(`hello ${name},how are you`);//hello Tom,how are you...
2020-01-14 13:25:00
201
原创 ES6:函数参数默认值
1. 逻辑或( || )实现默认值在es6之前，逻辑或可以做到函数的参数设置默认值：function showName(name) { var n = name || 'Tom'; console.log(n);}showName();//Tom逻辑或具有一个隐藏的特性，它能够找到第一个真值表达式（即不为false）并返回它var name = null || 'Tom' || ...
2020-01-13 17:20:22
3783
原创 ES6:箭头函数(Arrow Function)
1.语法通常书写匿名函数是这样的：function (){ //...}改写为箭头函数：() => { //...}带参数的改写：//单个参数(x) => { //...}//单个参数可省略()x => { //...}//多个参数(x, y, z) => { //...}总结起来就是：function去掉，()后加=&g...
2020-01-11 16:20:21
354
原创 ES6:let&const
与var对应，ES6新增两种声明变量的关键字let和const，本篇用来记录其特性1.块级作用域var声明的变量作用域为函数作用域，如下所示：function getNum(){ var num = 10; console.log(num);//10}getNum();console.log(num);//referenceErrorlet和const声明的变量作用域为块级作...
2020-01-11 14:08:14
152
原创 JS：数组的filter()方法实现简单的搜索功能
直接上效果图和代码<body> <!-- 搜索组件 --> <input type="text" id="searchBox"> <button id="searchBtn">搜索</button> <!-- 搜索结果展示区域 --> <ul id="searchResult"...
2019-12-19 15:16:26
3850
原创 JS：array数组增、删方法
栈方法 push() pop()js中数组有出栈入栈的方法，也就是向“数组栈”中入栈、出栈，"栈"简单来说就是添加与删除都会从后面一个一个来push() 方法会返回入栈后的数组长度，并将内容添加到数组后var students=["Tom","Gary","Lucy"];alert(students.push("Jack","Mario"));//5alert(students);//T...
2019-12-17 21:39:47
222
原创 css:憨憨也能学会的CSS3渐变（Gradients）
渐变这个东西看起来很炫酷，高大上，但对于小白的我，一看到代码，瞬间。。。菜鸟教程对渐变的使用是这样的：好像还看得懂，我觉得我可以！然后找一找大佬们的小Demo（https://blog.csdn.net/huantuo4908/article/details/70209224）这是什么东西？渐变怎么还能搞成条纹背景用了？然后再看看更复杂点的代码（https://leaverou.g...
2019-11-24 17:47:50
194
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人