- 博客(108)
- 资源 (3)
- 收藏
- 关注
RSS订阅
原创 模仿网易四字魔咒：PixiJS实现h5一镜到底
目录前言1.代码地址与demo效果图2.项目技术架构分析3. PixiJS3.1 pixi常见概念介绍3.2 创建应用3.3 预加载资源3.4 初始化场景3.5 初始化精灵4. AlloyTouch5. TimelineMax6. 初始化动画7. 舞台的整体缩放与旋转8.添加背景音乐总结后记// 续更 2019-09-08（1...
2019-01-18 18:14:05
15504
44
原创 qiankun微应用加载第三方js、sdk跨域报错
qiankun会把静态资源的加载拦截，改用fetch方式获取资源，所以要求这些资源支持跨域。虽然qiankun也提供了解决方案，但支持跨域的方式也颇为复杂，有没有更简单的方式，纯前端实现？幸在qiankun提供了excludeAssetFilter。
2022-09-02 11:28:49
5005
2
原创 filemanager-webpack-plugin：项目webpack打包后移动dist里的文件夹
某个vue项目打包后，有些静态资源的存放位置不太符合预期，导致访问这些资源的时候404。希望改变打包后这些资源的存放位置，使其能够被正确访问。一开始考虑的是copy-webpack-plugin - npm插件，但这个插件的本质是复制文件，虽然也能实现最终效果，但不符合程序员节能的思想，不想存在两份一模一样的文件，只想做移动操作。最后，选用filemanager-webpack-plugin - npm
2022-09-02 10:55:50
1452
原创 vue-pdf打包产生worker.js文件访问404
问题：组件库内有一个PDF预览功能，引用了vue-pdf，（多个项目均有引用这个组件库）。项目打包build后产生worker文件，发布生产访问404通过伟大的搜索引擎找到各种类似的解决方案：修改node_modules里的打包目录，如，vue使用vue-pdf预览开发正常，打包报错work.js404_波塞冬的博客-CSDN博客_vue-pdfvue中使用vue-pdf打包之后预览报错hash+worker.js路径不对404_茶荼-CSDN博客_vue-pdf 打包报错但是这个解决方案被
2021-12-30 15:17:10
3352
6
原创 如何基于axios封装一个通用的http请求方法？
一个通用的http方法应该有以下功能（1）请求头携带通用数据，例如token、用户名称等（2）对响应结果做统一的过滤处理：①未登录进行登录重定向（有登录要求的系统才需要）；②二进制流数据处理（通常是文件下载）③请求成功判断②请求失败通用处理：弹窗提示错误信息（根据选用的组件做UI通用）实现逻辑：（1）通过请求拦截器和响应拦截器加上通用的逻辑（2）如果使用了vue框架的还可以挂在在vue实例上，方便通过 this 访问完整代码如下：import axio.
2021-11-12 17:55:12
1678
原创 好用的前端开发工具库，让开发事半功倍
JavaScript库Lodash.js：综合工具库，如常见的节流、防抖Numeral.js：格式化和操作数字Moment.js：格式化和操作日期时间UI库vxe-table：基于vue的表格组件，满足绝大部分表格需求
2021-10-09 15:15:07
6717
原创 菜鸟成长记
闲来无事翻了翻以前的博文，不禁有感而发。如今是我毕业的第三年了。----14年高考结束，填报志愿----受推理悬疑小说影响，我对医生行业比较感兴趣，特别是外科医生。理所当然，第一志愿想到了医生。然而我的分数不理想，而好的医学院校都在一本里。医生梦碎。通过搜索引擎，得知互联网是高薪行业，加上自己本身对计算机不排斥，毅然地把所有志愿院校第一志愿都填上了计算机专业。----14年至18年，大学四年----庆幸的是，我还算喜欢计算机，喜欢逻辑，喜欢代码。虽然一开始跟绝大部分刚接触编程的同学一样，一
2021-08-31 19:44:12
170
4
原创 为什么说递归实现斐波那契数列是一个糟糕的实现？
/***斐波那契数列：第n项等于前两项之和:0/1/1/2/3/5/8/13/21/34/....*//***使用递归实现，并不是最好的方法，因为存在大量的重复计算，例如获取第5个元素*f(5)*=f(4)+f(3)*=f(2)+f(3)+f(1)+f(2)*=f(2)+f(1)+f(2)+f(1)+f(2)*=1+0+1+0+1*=3*其中，f(1)/f(2...
2021-06-12 21:24:59
302
原创 详解冒泡排序和快速排序
冒泡排序算法思想：通过两两比较相邻值，如果反序则交换位置，这样较小的元素会冒泡到前面，较大的元素会沉淀至尾部实现思路：（1）设置一个哨兵，默认值为数组长度-1；*（2）通过i++循环两两比较相邻值，反序则交换位置，这样较小的元素会冒泡到前面，较大的元素会沉淀至尾部；一次循环过后，最大的元素会沉淀到尾部，哨兵位置-1*（3）继续i++循环直到哨兵位置为0...
2021-06-12 20:31:41
1216
原创 常用的时间戳格式化的应用场景
/** * * @param {*} date 日期类型字符串或时间戳 * @param {*} formatString 格式化范本，如 yyyy-MM-dd hh:mm:ss * @return 返回符合格式要求的日期字符串 */ function formatDate(date, formatString) { if (!formatString) { // 无值则取默认值 yyyy-MM-dd hh:mm:ss formatString = 'yyyy-M..
2021-06-10 17:30:30
415
原创 本地开发环境：几行代码解决前端跨域问题
const Koa = require('koa');const staticPath = require('koa-static');const path = require('path');const proxy = require('koa2-proxy-middleware'); // 代理/跨域中间件const app = new Koa();const options = { targets: { '/api/(.*)': { target: 'http:/.
2021-06-10 16:26:10
426
4
原创 HTTP缓存机制：强缓存与协商缓存
HTTP缓存分为两种，强缓存与协商缓存，先来看几张HTTP请求的截图：可以发现请求头/响应头里一些有意思的属性：ETag、Last-Modified、Expires、Cache-Control、Pragma、If-None-Match、If-Modified-Since等，这些都与HTTP缓存有关系强缓存Expires / Cache-ControlExpires是HTTP1.0中的强缓存机制，是一个绝对值时间。Cache-Control是HTTP/1.1中出现的强缓存机..
2021-03-22 15:39:20
455
原创 XSS跨站脚本攻击 与 CSRF跨站请求伪造
1.什么是XSS？hacker利用网页漏洞，将恶意代码植入网页中，使用户加载并执行这段恶意代码，达到攻击的目的。2.XSS可以达到什么目的？恶意代码通常是JavaScript，js能做什么事情就代表xss也能做什么事情。①获取用户cookiecookie代表用户的身份令牌，可想而知，一旦cookie被hacker获取，hacker就可以登录网站，假冒用户做他想做的事情，盗取用户信息。②劫持流量进行恶意跳转例如我们在网页中插入一段代码<script> ...
2021-03-15 16:55:03
462
1
原创 js实现前端性能监控与错误监控
前端监控一般包括：1.性能监控；2.错误监控1.前端性能这里引用他人文章对前端性能的描述：通常前端性能可以认为是用户获取所需要页面数据或执行某个页面动作的一个实时性指标，一般以用户希望获取数据的操作到用户实际获得数据的时间间隔来衡量。简单的总结一下，就是一般用时间来衡量前端性能。比如一些耳熟能详的：白屏时间、首屏时间等那么当我们打开一个网页，如果获取跟网页性能相关的时间呢？2.性能数据采集打开控制台，输入window.performance可以看到performan...
2021-03-10 17:11:38
1455
原创 小程序如何做自定义的全局浏览记录上报
现在市面上已经有很多成熟全局埋点的分析系统支持，比如腾讯移动端分析-小程序分析若让我们自己封装一个全局浏览记录上报呢？小程序的页面由Page({})构成，页面的生命周期有onLoad，每次页面加载会调用onLoad。要做浏览记录的上报，可以利用onLoad做文章。onLoad() { pageBrowse() // 上报浏览记录方法 --- 后面再讲这个方法怎么写，可以根据业务需求变动}但是如果在每个页面的onLoad都调用上报方法，未免太低效。若有50个页面，...
2021-03-03 17:22:43
883
3
原创 CSS盒模型
1.CSS盒模型有哪几种，基本概念是什么？所有的HTML元素都可以看做一个盒子，盒模型的概念在设计和布局使用。盒模型由以下几部分组成：①外边距 margin②边框 border③内边距 padding④实质内容 content有两种盒模型：分别是标准盒模型(又名W3C盒模型)、IE盒模型2.标准盒模型和IE盒模型有什么区别？采用标准盒模型，CSS的width实质就是content.width采用IE盒模型，CSS的width实质就是 content.width..
2021-02-03 22:36:46
190
原创 【小程序】踩坑记2
目录1.低版本微信用户不支持订阅消息，会报错2.订阅消息的字段长度限制3.图片懒加载4.小程序客户端缓存storage，切换微信号时未清除，会导致串号5.企业微信小程序不支持获取手机号6.switchTab不支持传参7.小程序不支持长按识别图片二维码原文地址：http://www.chunling.online/#/article/5e1d57472bfd56244...
2020-01-14 13:22:26
574
原创 小程序开通流量主，接入微信广告
原文地址：http://www.chunling.online/#/article/5de869c92bfd56244e44db88目录前言微信广告传送门广告收益注意点前言机缘巧合下，2019-01-02上线了我的个人小程序-“你划我猜出题器”。前不久（2019-11-29），小程序用户量突破两万。零推广、放生式管理、看心情迭代版本的无欲无求小程序，居然能...
2019-12-04 16:22:46
6913
原创 【小程序】websocket实现“谁是卧底”在线随机发牌
目录前言1. 逻辑分析2. websocket3. 小程序端代码实现4.服务端代码实现后记前言有兴趣的同学先扫码体验一下小程序继我的个人小程序（“你划我猜出题器”）上线第二版本（自建词库）后，又有新的想法涌现出来，做一个“谁是卧底”在线随机发牌吧（有时间再写一下第一个版本跟第二个版本的博文）。既然如此，就要思考一下“谁是卧底”的技术实现点。词的来源，可利...
2019-11-21 17:25:35
9389
原创 socket.io实现一对多的在线咨询客服系统
目录前言1.需求场景2.页面效果图3.线上地址4.项目分析前言大三的时候写过一个小demo，socket.io实现在线匿名聊天室博客地址：https://blog.csdn.net/qq_30604453/article/details/64159036demo地址：http://www.chunling.online:2800/（此处请不要计较样式，毕竟...
2019-11-07 14:48:58
2827
2
原创 【微信开发】NodeJS解决微信网页授权获取用户信息
目录前言1.开发前准备工作2.后台开发工作3.前端开发工作4.调试工作前言先回顾一下微信开发中涉及的各种概念以及微信网页授权的流程图【微信开发】常见的openid/unionid/session_key/access_token究竟是个啥？官方API文档：微信网页开发-网页授权1.开发前准备工作开发前的准备工作很简单，登录微信公众号后台...
2019-08-30 10:06:37
2027
1
原创 koa2如何使用https
小程序开发，后台接口一定要https，奈何刚写完的接口的是http，那还等什么，上SSL证书啊！先去阿里云买SSL证书（穷人只能用免费的，土豪随意）买完证书，就是审核验证的时候，绑定自己网站的域名，等待审核通过（一般很快，一天内审核通过）审核通过后就可以下载证书了，选择服务器类型对应的证书，我是nodejs服务器，就选择了“其他”下载完证书，解压，可以看到有两个...
2019-08-27 10:18:55
5062
原创 koa-body与koa-bodyparser一定不要同时使用！会报错！
如何使用koa-body》》》koa2 使用 koa-body 代替 koa-bodyparser 和 koa-multer遇到同样坑的帖子》》》使用koa-body遇到的坑今天做一个上传图片的接口（post），用了koa-body。发现除了get请求，其他请求都一直处于pending状态，N久之后报500错误，服务器端表示：server error { BadRequestErr...
2019-08-08 16:29:14
4885
2
原创 互联网的寒冬【感慨】
从过完年回来就慢慢感觉公司的不景气。渐渐地，福利（下午茶/团建/零食）全部消失，每个人都慢慢地没有工作安排。深深的危机感席卷着我，每天焦虑不安。我清楚地感觉到公司在这个项目上不再投钱。从三月份开始，公司开始陆陆续续有人辞职了，因为他们都被调岗了，90后不开心就裸辞！我佩服裸辞的朋友们。我没有他们的勇气，或者说没有他们的财力。同样作为一个90后（没钱交房租啊）我选择忍辱负重，一边做着离职同事...
2019-06-11 16:18:28
3270
3
原创 微信小程序开发/微信网页开发常见的openid/unionid/session_key/access_token分别是什么？？
微信小程序微信网页1. code 用户登录凭证： 【作用】 ①小程序：用于换取用户的openid和本次登录的会话密钥session_key； ②微信网页：用于换取access_token的票据，每次用户授权带上的code将不一样，code只能使用一次，5分钟未被使用自动过期。 【获取途径】 ① 微信小程序通过wx.logi...
2019-06-06 16:37:01
4403
1
原创 vuex刷新页面是store被更新，如何解决数据备份？
我用的方法很简单，在App.vue中的生命周期函数created中，监听页面刷新，在页面刷新的时候，将store的数据及时存储在sessionStorage中，然后刷新完毕后就可以将sessionStorage中的数据再取出来用created () { //页面刷新store数据备份 if (localStorage.cmstoken) { this.$rout...
2019-05-23 15:37:22
873
转载 es6的编程风格
转至阮一峰的ECMAScript6入门 http://es6.ruanyifeng.com/#docs/stylees6知识点编程风格let代替var全局常量和线程安全在let和const之间优先使用const，尤其是在全局环境下所有函数声明都应该设置为常量const，符合函数式编程思想const声明，阅读代码的人立刻会意识到不应该修改这个值const防止无意间修改变量所...
2019-05-06 17:31:55
288
原创 记录遇到的浏览器兼容问题
1. flex布局下使用绝对定位结果：ios少部分机型的（ios10）和部分安卓机型的样式错乱，比如通过flex布局实现的子元素居中效果会不起作用。鉴于之前也遇到的类似的问题，很快就总结出一套规律：flex布局下不要使用绝对定位(absolute/fixed) .parent { display: flex; flex-direction: row; al...
2019-03-25 16:10:17
210
原创 原生js实现轮播图
原生js实现轮播图，说难不难，说简单不简单。基础套路还是来复习一下吧。先看图。先看html结构！很简单！ <div class="slider"> <div class="slide-item slide-item-1">1</div> <div class="slide-item slide-item-2"
2019-03-01 17:26:21
898
1
原创 收集常用的CSS3动画效果
无限旋转（2D旋转）无限旋转（3D旋转）：只需要将以下代码rotate属性改为rotateY.rotate { animation: rotate 4s linear infinite; -moz-animation: rotate 4s linear infinite; /* Firefox */ -webkit-animation: rotate 4s linear...
2019-01-25 16:59:46
1346
原创 详解html常常被忽略的meta标签
目录（一）charset属性（二）name 属性（三）http-equiv属性（四）viewport属性（五）全屏属性meta标签。meta作为辅助性标签不具有展示作用，往往被忽略的。meta称为元数据，即用来描述数据的数据。html里的<meta>标签则是用来描述html页面的。meta的属性表属性 值 描述 4 5 c...
2019-01-25 11:22:55
2057
原创 koa2项目部署在阿里云服务器
前不久刚做完koa2+mysql实现restful api 。接下来就是部署服务器的工作了去阿里云买了一台最低配置的按量付费服务器。（按量付费需要先往阿里云充值至少100元）买到手了，总得配置一下服务器吧。（服务器本质就是一台电脑），现在买到他是裸机状态，电脑啥配置也没有。项目需要 node + mysql。那服务器总要安装 node + mysql 吧。说...
2019-01-11 09:20:53
5286
2
原创 css旋转div，div位置发生偏移
实现下图的遮罩层loading旋转。 但是旋转的时候却发现旋转块发生了位置偏移。代码如下<div class="mask"> <div class="load-circle"> </div></div>/* 遮罩层 */.mask { width: 100%; height: 100%; pos...
2019-01-10 11:33:48
8607
原创 设置根节点font-size实现rem适配移动端设备
适配前先搞清楚几个像素的概念 像素概念： 1)物理像素：显示器上最小的物理显示单位 2)设备独立像素（也叫逻辑像素）：虚拟概念，一个可以由程序使用的最小虚拟像素点（css像素） 3)设备像素比：也叫dpr，可以通过window.devicePixelRatio获取。 设备像素比 = 物理像素 / 设备独立像素...
2019-01-04 15:18:36
3609
原创 封装 axios+promise通用请求函数
import axios from "axios";import baseUrl from "../../setBaseUrl";axios.defaults.baseURL = baseUrl;import { Loading, Message } from "element-ui";const loadingOptions = { lock: true, text: "拼命加...
2018-12-21 11:47:37
2745
原创 nodeJS中jwt基本用法
官网》https://jwt.io/jwt全称json web token 。jwt.io是用于令牌签名/验证的库，用来生成jwt。简单理解一下，就是 jwt.io这个库，提供了一种方法可以将一些信息加密，形成一串长长的字符串，类似于'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4...
2018-12-18 10:17:48
15172
3
原创 koa2+mysql实现RESTful API
先贴上项目地址：https://gitee.com/wuchunling/koa2-mysql再上postman测试效果图看看最终的项目结构如下-koa2+mysql- model 数据库表设计- routers 路由- static 静态资源 // 现在暂时用不到- utils 封装工具函数- app.js 启动文件- config...
2018-12-10 18:06:56
3950
3
原创 记第一次react-native环境搭建
搭建react-native环境，气到没脾气哦。 首先按照网上教程一步步搭建1.配置 jdk sdk node （这些电脑之前已经配置过）2.安装模拟器，一开始装的是Genymotion，在一次次的bug中崩溃大哭，另装了夜神模拟器3.安装 react-native-cli 和 yarn 环境配置完毕 终于可以开心的 react-native init myap...
2018-12-03 15:45:02
225
原创 【JavaScript】将常用的功能封装成函数
目录1. 常用的正则判断2. 常用的日期格式化3. Dom.js 常用DOM操作4. Bom.js 常用BOM操作5. DataType.js 数据类型判断6. Function.js 常用工具函数7. Http.js 请求函数封装8. WXHttp.js 微信请求函数封装1. 常用的正则判断/** 正则检验 */function isP...
2018-12-03 15:19:33
593
liverload Chrome
2018-12-03
中国所有城市js文件（按首字母排序）
2018-07-17
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人