- 博客(41)
- 收藏
- 关注
RSS订阅原创 在项目中加入 husky + lint-staged + eslint，代码检测格式化
由于日常工作的多人协作中，会因为个人代码编写风格导致代码在不同人电脑上，会有异常代码格式的提示，为了解决这个小问题，我们可以使用 husky + lint-staged 来对代码进行一定程度上的格式化，使格式风格统一，方便查看。，然后会在目录下生成 .husky 文件夹，打开 pre-commit 文件，可以在内输入 npx lint-staged。报错的内容，第一条和第三条，是 c 和 df 定义了但未使用，第二个是提示console未定义，这个报错就需要在 eslint.config.js 里面。
2024-07-21 13:06:24
530
原创 koa + http-proxy-middleware 搭建一个带转发的静态服务器
在日常的一般业务中，我们对大小写敏感，所以需要对每个到 koa 的请求，进行头部字段的大小写还原。在根目录下，创建static文件夹，写一个简单的index.html文件夹，然后在控制台输入 node koaServer.mjs 启动服务，然后浏览器输入localhost:3001/index.html 可以看到页面被打开。到目前为止，这个 koa2 搭建的简易服务器就可以使用了，但是在日常工作中，转发的请求可能不止一个，并且想要在控制台打印一些信息（响应结果等），就需要做进一步的修改了。
2024-07-09 16:06:10
1112
1
原创 最近使用过的发布订阅模式
之前写小程序，然后遇到个登录过期的问题，由于小程序页面只要是在栈中，就可以一直运行，所以，通过登录过期这个事件的发布，使所有订阅了这个消息的页面进行一些操作，可以省去一些麻烦 这里写了个简单可用的发布订阅，在项目里面使用也很简单，直接放在 globalData 里面供全局所有页面使用// 发布订阅class MyEvent { constructor () { this.events = {} } // 添加事件监听 on (type, fn) ...
2021-06-30 16:46:26
125
原创 整理一下自己的小程序请求封装
把小程序的请求封装记录一下，自认为这个封装使用起来还是挺顺手的，而且也不难理解，封装之后返回一个 promise 状态请求的封装，request.jsconst app = getApp()let showOneModal = true/** * * 封装wx.request * @param { String } url 接口 * @param { Boolean } requireToken 是否需要token * @param { S...
2021-06-28 17:28:57
122
原创 windows 下 nextcloud 的偏保姆级搭建教程
写这个教程的时候服务的版本是Nextcloud20.0.5，Mysql8.0.23 首先到这里下载 Docker Desktop for Windows:https://hub.docker.com/editions/community/docker-ce-desktop-windows/，然后点击这个下载 docker，下载后就直接安装 不过首先，你的电脑必须安装 Hyper-v，这个在控制面板 -> 程序和功能 -> 启用或关闭 win...
2021-02-02 18:06:40
24719
24
原创 unraid 下 nextcloud 的偏保姆级搭建教程
今晚，决定来写一下 nextcloud 的搭建教程，重新把自己的小服务器上面的相关服务删除掉，重新重头开始，截图纪念一下现在还在运行的 nextcloud 相关服务 我的小主机上面是安装有 unraid 的NAS系统，它可以提供NAS的基本功能，它的特色是自带 docker 以及虚拟机的功能，可以自由安装各种系统，关于这个 unraid 系统可以百度下它的相关内容，这里不再赘述。 nextcloud 可以使用性能更好的mysql，而不使用自带的 sqlLit...
2021-02-02 18:04:50
9313
9
原创 H5在微信内置浏览器下，在右上角菜单的调整字体导致页面显示错乱的问题
问题记录： 20210118，记录一下一个小问题，收到来自同事的bug反馈，说我们的H5页面，在微信内置浏览器下显示有问题，然后丢了个图过来，发现里面文字很大，文字的位置也有点偏移，立刻联想到是用户把字体调大了，变成“老年模式”。如下图这是随便扫的一个页面，调大字体后的显示效果测试案例以及简单的推断： 简单写了个测试页面（rem布局），拿安卓和 ios 分别测了下，如下动图安卓ios从上面两张动图可以发现： 1. 安卓手动调整字体...
2021-01-18 17:23:39
1521
2
原创 小程序将本地代码包中的图片保存到手机本地相册中（信任域名的也可以）
小程序保存代码包中的图片，是不能直接 saveImageToPhotosAlbum 的，需要先使用getImageInfo
2020-09-02 17:11:07
347
原创 自动跳格的验证码输入
wxml<view class="code_area"> <view class="input_area"> <view bindtap="onFocus" id="0" class="{{ idx === 0 ? 'active' : '' }} {{code[0] ? 'hasValue' : ''}}">{{ code[0] }}</view> <view bindtap="onFocus" id="1" c.
2020-07-05 21:18:42
1905
1
原创 aggregate() 查询结果中字段别名设置
需求：在mongodb查询到数据后，将 _id 字段重命名为 id 我一开始的在 $project 是类似这样去配置的，这样做就会导致下面这种类型的刨槽，大概的意思就是就是说不能排除 _id 字段以外的字段，在上图中的 clickCount 的字段不能为 0，如果不要 clickCount的话，就不要写进来，查询后就自动不会有这个 clickCount 字段出现。 所以，综上， $project 的配置应该改为类似这种。虽然，我要解决的问题是字段重命名这个事情，...
2020-05-26 16:01:06
4504
原创 在 create-react-app 创建的项目中使用 less 模块化 （配置webpack）
在create-react-app 脚手架创建的项目中，突然想到要用 less 的模块化，但是 create-react-app 创建的项目只是自带 css 模块化。要使用 less 模块化，需要自行配置首先，创建项目create-react-app test然后，把 react 脚手架的配置弹射出来，并 npm run i安装项目依赖npm run eject找到项目下 config/webpack.config.js，在 file-loader 之前加入这部分代码// l.
2020-05-21 18:13:51
3498
8
原创 一道有关 Javascript 事件循环的题目
在B站看到个视频，讲解了事件循环，里面的题目估计很多人不怎么细心想的话会做错题目内容：有如下代码块，请写出点击了 button 后，控制台的输出内容<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" c...
2020-02-24 18:10:20
497
原创 后端返回数据格式是字符串的问题
前两天接接口，发现后端返回的数据前端不能识别为 JSON，但是返回的数据看起来又没啥问题，如下图Respons 里面的数据没有被着色，说明浏览器把它识别为字符串了，让后端那边改了又改，还是不行。后面发现是后端的 Respon Header里面的 Content-Type 设置错误了。错误返回的时候，它的 Content-Type 是 text/html;chartset=utf-8...
2020-01-09 11:18:04
8830
原创 webpack4 的 vue 打包配置
前言 前端时间写了个多入口的 webpack4 的配置 (multiple_page_webpack )，后面新开了下目录，将其改为打包 vue 的配置 本次 webpack4 的配置源码：https://github.com/VintageLin/webpack4ForVue改造过程 1. 先将上篇文章中的mutiple_page_webpack...
2019-12-12 16:55:36
623
原创 在vue文件的HTML结构里面使用moment方法报错
记录一下之前一个简单的小问题，今天又重新遇到，差点忘记了怎么解决。一开始想使用moment的时候，直接照着思路，先import进来，然后在template里面的使用，但是这样子会报个错误说是未找到moment这个方法，那么问题来了，我都已经import进来了为啥在template里面为啥不可以使用，我个人认为，这个应该类似import组件一样，组件被import进来后，必须在compo...
2019-09-02 16:42:48
5892
4
原创 使用http-middle-ware中间件进行多个接口请求转发
最近遇到公司的一些项目，是纯静态的不用编译的普通项目，由于前端会跨域，这些项目他们原来是使用Nginx做服务器，然后进行请求的代理转发。但是由于我之前没有怎么接触过Nginx，一些配置基本上都不是很懂，每次都要去搜一下配置方法。所以我自己就是用express框架去做一个服务器，然后进行请求的代理转发。 首先需要准备的是，express框架，然后就是http-pro...
2019-07-07 16:35:37
2255
原创 启动vue项目报异常错误
项目启动后，控制台报错：打开网页后，控制台报错提示寻找不到\node_modules\_webpack-dev-server@2.11.5@webpack-dev-server\client\index.js这个文件。 一开始使用npm和cnpm重装了下项目依赖，但是依旧启动不了，后面在cnpm的安装后，到node_modules目录下寻找提示丢失的文件，能够找到该文件，...
2019-06-12 15:58:30
3987
原创 整理最近面试的一些前端面试题
最近换工作，面试了好多公司，遇到了挺多的面试题的，将自己最近的面试题统一一下，做个记录，最近一个月内有空就更新。方便自己学习，以及基础知识的补充。顺便吐槽一下，前端知识跟宇宙一样宽广啊~1. gpu加速的原理16ms 优化：大多数设备的刷新频率是 60 次/秒，（1000/60 = 16.6ms）也就说是浏览器对每一帧画面的渲染工作要在 16ms 内完成，超出这个时间，页面...
2019-05-08 15:36:54
1528
原创 vuex 多模块时 模块内部的mutation和action的调用方式
vue在做大型项目时，会用到多状态管理，vuex允许我们将store分割成多个模块，每个模块内都有自己的state、mutation、action、getter。模块内还可以继续嵌套相对应的子模块。为了巩固我自己对store多模块的一些基本认识，写了个简单的多模块实例，下图为我自己创建的store的目录结构，modules文件夹内的模块，在实际项目中还可以继续分开类似store目录下的多文件结...
2019-03-31 22:56:45
18914
1
原创 vue中 computed和watch的一些简单理解（区别）
今天看到一个问题，就是vue的computed和watch要在哪些场景下使用，其实也就是在问他们的区别。computed也就是计算属性，它可以帮助我们将在模板中的一些稍微复杂的逻辑计算放回到js代码中，方便理解与修改维护；就拿官网给的例子，如下代码片段。<div id="example"> {{ message.split('').reverse().join(...
2019-03-19 16:51:53
26037
7
原创 webpack打包并压缩css报错
最近跟着视频学习webpack4.x，视频内容算是比较新的了，不过在跟着视频敲代码的时候，还是遇到了报错，报错截图如下：截图中黄色标记出来的部分是报错的主要信息，当前主要的webpack配置代码如下：const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin')...
2019-03-07 16:27:42
2539
原创 自己对csrf和xss的一些简单理解
虽然自己没有遇到过csrf和xss这两种安全问题，项目中也基本上不会考虑到这些，可能是项目里面涉及安全信息的东西基本较少吧。最近是闲着没事看看一些题目，才想起来把这两个给稍微理解下，不过没有遇到过，也只是属于知道有这回事。CSRF CSRF(Cross-site request forgery) 意思就是跨站请求伪造；举个大家都用例子，用户在当前信任且已保存登录...
2019-03-03 22:07:57
302
原创 改造一下上次vue的loading插件
上一次我们将loading组件封装成了插件，基本上使用起来并没有多大问题，刚好足够使用。我们现在来稍微改造一些这个loading插件，实现一个简单的功能，使之能够延迟关闭loading这个浮层。 目前这个插件我们只能够this.$vLoading.show()和this.$vLoading.hide()这两个方法，若是想要其实现延迟关闭，我们需要在hide这个方法...
2019-01-12 22:56:45
935
原创 动手造一个vue的loading插件
在一般的vue项目中，都会用到Loading或者Alert之类的弹窗浮层，而他们是一种比较高频率出现的组件。 一般情况下，我们都会去直接import该组件，然后直接以标签的形式引用进去当前页面组件中，如下图： 这种是我们比较常用的一种方法，它的好处就是让我们比较直观地对组件进行调用， 方便地通过标签上的属性动态地传给该组件，或者去获取子组件e...
2019-01-05 15:34:30
6748
1
原创 vue swiper 滑动切换slide时，导致setInterval卡顿，附带解决方法
具体现象如下图，可以看到，每次滑动slide或者通过导航箭头切换slide的时候，上方的倒计时总是在slide结束后卡顿0.3s左右的时间。 在导航箭头上，在每次执行slide滑动后，都有一个v-show的判断是否到达slide的尽头，然后分别决定他们是否显示。我的部分代码如下图，我会将一些相关的圈出来：在图中，红框部分是用来判断导航箭头是否显示的 ，我发现在这里他们会导致动图中...
2018-12-26 11:21:24
4673
原创 vue开发中遇到Forced reflow while executing JavaScript took
在vue的开发过程中，遇到了如图所示的警告提示，我页面中包含有一个毫秒倒计时，swiper插件等，还有有一个答题卡组件，组件是通过来控制显示的，但是这里每次在页面点击改变isAnswerCardOpen的值是，就会出现上图的警告，而且也感觉页面会稍微卡一下，影响到了倒计时。 这个问题我暂时想不出来时啥原因引起的，猜测可能是因为毫秒倒计时不断调用回调函数引起的，然后影响到了其他组件。后面...
2018-12-25 11:14:16
16560
原创 vue axios 使用表单形式进行数据提交
axios 默认使用的是json字符串形式去提交数据，但后端极力要求使用表单形式提交数据(说是json字符串还需要转，会消耗性能)。 由于需要使用表单的数据形式，在前端的项目里面，则需要对数据进行转换，使之成为后端能够接收的表单数据。 为了方便对请求进行控制，我将axios进行了封装，方便请求（响应）的拦截，这里就只贴部分代码。 首先...
2018-12-20 11:52:15
2970
原创 vue下，setInterval会影响swiper
在做项目中，由于使用了setInterval 函数来进行倒计时，导致vue-awsome-swiper（version: 3.1.3）组件出现了异常。具体异常如下图所示： 在.vue文件中，我倒计时的计时器没有拆分成组件，直接在当前页面进行倒计时相关逻辑操作，直接导致swiper异常，影响到了swiper组件，具体原因尚不清楚。我自己的解决办法是，直接把倒计时拆分成一个组件，并引用...
2018-12-18 15:45:00
973
3
原创 点击a标签下载当前链接的图片
若想点击a标签就下载当前链接的图片，首先必须文件是同源的，在a标签上增加download属性，才能触发点击下载的效果，若不同源的话则变成在当前页面打开该图片了。若想要下载不同源的文件，有一种思路是将图片转为base64再赋值给a标签，这样点击后应该就能够下载了...
2018-12-05 10:28:35
7092
原创 websocket 心跳重连 （通信检测）
最近做项目，用到websocket来做消息的实时推送。在做这个项目之前，websocket的相关内容没有接触过，只限于知道有这个东西。对于这个websocket，一切都是从零开始。所以做这个项目前有去搜索了一些关于websocket的技术知识。 websocket的基本事件有onopen、onmessage、onerror、onclose这四个事件，onopen是...
2018-09-18 21:43:59
25390
11
原创 小程序webview内网页跳转问题
近期项目中，因为业务需要，遇到了个问题，具体现象在小程序的webview内，当前a页面，跳转到b页面，然后再从b页面返回当前a页面，再从a页面，跳转到b页面。第二次跳转回去a页面的时候，在安卓下，会跳转失败，点了按钮，页面上方只是有绿色进度条跑了一下，页面并没有跳转到a页面。经过多次修改，发现这个可能是小程序的锅，第二次跳转回去原来的a页面时，必须在a页面的链接上增加个随机参数，方可随意跳转。...
2018-09-13 09:39:22
9054
原创 ios9版本的iphone，不执行网页js
最近做的项目中，出现了个比较奇怪的现象，具体现象：就是ios机型下，ios9相关版本的机子打开我的网页后，js代码不执行，将我自身写的代码注释掉后，可以执行其他的js。此问题暂时找不到原因，但初步认为是js里面某些api不支持导致的报错。使用window.onerror函数也捕捉不到全局报错。找到原因：原来是swiper.min.js引用了swiper.min.js.map， 而一般来说我...
2018-09-10 16:50:59
6892
原创 一种序列帧在rem布局下的消抖方法
最近在项目中遇到了个问题，由于要在移动端使用一个等待的动画，但是我本人是菜鸟，canvas不是很懂，所以只能让UI做了个序列帧动画来替换。我页面是使用rem布局的，所以在使用序列帧中，出现了序列帧动画抖动的问题，可查看如图可从图中明显看到，此动画会有明显的左右抖动问题。当前的的css如下图：html结构如下图：抖动的原因是因为rem布局中，根元素的字体大小含有小数，也就...
2018-09-04 10:23:23
967
原创 使用canvas制作一个圆环倒计时
最近项目中使用到了圆环倒计时，由于我自己不是很喜欢canvas总觉得这个不适合我，但是我还是边看api边看别人的写法，还是写出来了。放张效果图，如下：大概的效果就是这样子，文字数字都是外部文本，本来想写到canvas里面，但是觉得麻烦就还是直接放外面了。先贴上主要代码，里面有几个我觉得是需要一开始注意下的。// 倒计时 countdown () { $('...
2018-07-31 23:31:20
4043
原创 一种稍微解决ios下fixed定位因为呼出软键盘而出现的位置偏移的bug
先放一下代码，大家可以复制到本地去试试，需要引用jq。我的想法就是，ios在唤起软键盘时，会将整个可视窗口上移，而且并不会改变窗口的大小，这也是onresize事件没有被触发的原因。所以我在这边每次点击或者聚焦到input的时候，让body滚动整个窗口的高度，达到使窗口底部在视野中。<!DOCTYPE html><html> <head> ...
2018-07-25 22:34:23
4250
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人