- 博客(36)
- 收藏
- 关注
RSS订阅原创 使用 gulp-cleanwxss 清除小程序无用样式代码
小程序在迭代中，因没有及时清理无用样式，造成包体积越来越大。而通过人工判断清除工作量大，因而使用实现脚本清除。
2024-03-05 09:10:00
397
1
原创 TinyMce-Vue 富文本整合，实现图片、视频上传功能
之前系统富文本编辑器为百度的 UEditor， 但该项目已停止维护多年，存在开发风险，因此使用 TinyMce 来替换和扩展业务功能。一、Demo 演示二、封装步骤1、安装 tinymce-vue注：Vue 2.x 下载 3.x 版本的 tinymce-vue，Vue 3 下载 4.x 版本的 tinymce-vue ，本文为 Vue 2.x 项目yarn add @tinymce/[email protected]、封装字体类型配置const fontFormats = ` .
2021-11-19 19:51:59
7155
22
原创 微信小程序之判断目标元素是否在可视区域内
1、获取可使用窗口高度const { windowHeight } = wx.getSystemInfoSync()2、添加目标元素布局位置查询请求const query = wx.createSelectorQuery()query.select('#myElement').boundingClientRect()3、判断元素是否在可视区域内// windowHeight = top（目标元素刚进入可视区域）// windowHeight - top = height（目标元素完全进入可
2021-11-08 16:24:04
5214
原创 JavaScript 判断目标元素是否在可视区域内
1、获取目标元素const element = document.getElementById('myElement')2、获取目标元素的高度const elementHeight = element.clientHeight3、获取目标元素左上角相对于 Element.offsetParent 节点的垂直位移（本文中即为距离顶部的距离，不随页面滚动变化）const elementOffsetTop = element.offsetTop4、获取浏览器窗口的高度const windowH
2021-10-26 20:40:42
1645
原创 Vue 实现视频循环播放前 3 秒
一、需求说明视频自动播放且循环播放前 3 秒效果如下：二、实现 Demo安装 vue-video-player 依赖yarn add vue-video-player完整代码：<template> <video-player ref="videoPlayer" class="video-player-box" :options="playerOptions" @timeupdate="onPlayerTimeupdate($even
2021-10-24 19:10:15
946
5
原创 微信小程序视频循环播放前 3 秒
一、需求说明视频列表中第一个视频，自动循环播放前 3 秒（如淘宝首页中视频模块）效果如下：二、实现 Demo<video id="productVideo" src="https://qiuzi-resource.oss-cn-shenzhen.aliyuncs.com/video.MP4" autoplay loop muted controls="{{ false }}" object-fit="cover" style="width: 270rpx;
2021-10-13 20:40:39
661
原创 解决 JavaScript 中数组 splice 方法删除元素被跳过或只删除部分元素
一、问题说明对数组遍历，使用 splice 方法移除符合条件的元素。由于 splice 方法改变原数组的长度，但循环中 i 仍然读取原始数组长度，造成跳过或只删除数组中符合条件的部分元素。演示 Democonst studentList = [ { name: 'Tom', grade: 55 }, { name: 'Jane', grade: 59 }, { name: 'Murphy', grade: 80 }]for(let i = 0; i < studentLi
2021-10-11 20:28:25
2302
原创 同源策略之 JSONP（含实践）
JSONP 在过去是服务器与客户端跨域通信的常用方法，接下来简述做法，并使用 Node 进行演示。做法第一步网页添加一个 <script> 元素，向服务器请求一个脚本，这不受同源政策限制，可以跨域请求。<script src="http://localhost:8082/jsonpTest?callback=getJsonpData"></script>注意，请求脚本网址有一个 callback 参数（?callback=getJsonpData），用来告.
2021-07-12 23:00:05
129
原创 解决 ES6 Module 报 Access to script at ‘xx‘ from origin ‘null‘ has been blocked by CORS policy
一、问题说明在学习 JavaScript ES6 中 Module 部分时，使用 script 标签加载 ES6，代码报错。报错信息如下：试验代码如下：二、问题追溯1、本地打开文件，引用模块为 file 协议造成的资源跨域？很多博文中都对这个问题作出如下判定。可是我又想，平时 HTML 文件中引入 file 协议的外部脚本，不也正常执行？查找一番，在 MDN 找到了答案，描述如下：2、那我把引用模块脚本放到服务器，就能正常执行？经过测试，依然报 CORS 相关错误。3、把远程服务器
2021-06-30 17:47:54
9181
5
原创 解决 Jenkins 报 /usr/bin/env: node: 没有那个文件或目录
一、环境说明CentOS 7.6Jenkins 2.164.3Node 14.13.0二、问题说明服务器 Node 版本原为 10.13.0，后因部署新项目需使用 14.13.0 版本。因此全局卸载 Node，安装 NVM 来管理 Node 。当使用 Jenkins 构建时候，发生 /usr/bin/env: node: 没有那个文件或目录，如下图三、问题排查过程1、确定服务器 NVM 和 Node 是否正常（没问题）2、确定 NVM 是否已自动创建 Node 环境变量（没问题）
2021-06-21 10:38:37
5180
原创 Centos 7 安装 Redis
一、环境及软件说明系统： CentOS 7.9安装软件：Redis 6.2.4二、安装 Redis 下载 Redis 并解压软件包1、下载 Rediscd /usr/localwget http://download.redis.io/releases/redis-6.2.4.tar.gz2、解压压缩包tar xzf redis-6.2.4.tar.gz3、yum 安装 gcc 依赖yum install gcc4、编译安装 Rediscd redis-6.2.4
2021-06-19 15:18:13
234
原创 VMware 安装 Centos 7 详细过程
一、环境说明虚拟机：VMware® Workstation 14 Pro系统镜像：Centos 7.9.2009，下载地址：https://mirrors.aliyun.com/centos/，具体文件位置看截图二、虚拟机准备1、创建虚拟机2、选择典型安装3、选择安装镜像方式4、选择客户机操作系统5、命名虚拟机名称和选择安装位置6、指定磁盘容量7、自定义硬件8、根据电脑实际情况自定义以下硬件配置9、点击完成则完成配置三、安装 Centos1、启动虚拟机
2021-06-16 22:39:28
133
原创 Easy Mock 服务器部署教程及项目使用演示
一、环境说明CentOS 7.6Node 14.13.0，镜像源为 taobaoMongoDB 4.2.10Redis 5.0.5Centos 7 安装 MongoDB（偷懒版）关于如何安装 Redis，后续补上，可先参考其他人文章。二、下载并运行 Easy-Mock1、创建项目存放目录mkdir -p /data/node2、下载项目和安装依赖（PS：因 easy-mock 已停止维护和存在部分 Bug，我已 fork 并进行部分 Bug 修复）# 进入目录cd /data/
2021-06-12 21:07:59
1275
2
原创 Centos 7 安装 MongoDB（偷懒版）
一、环境及工具说明系统： CentOS 7.6安装软件：MongoDB 4.2.10协作工具：FileZilla, PuTTY, 360 压缩二、下载 MongoDB 并解压软件包官网地址（注意：若官网没有完全一样版本号软件包，可根据以下图片文件名下载跟它相近版本的 tar 包）百度网盘，提取码 t8r0下载成功后，使用 360 压缩解压软件包三、上传解压文件到服务器对应目录下使用 FileZilla 连接远程服务器，在 /usr/local 路径下建立目录 mongodb，然后将解压后
2021-06-12 15:57:00
318
原创 Element UI 之 Table 树形数据合并行的实现
一、需求说明Table 内容为树形结构，但需要合并收费项目重复列，具有子项的项目可展开和收起。如图：二、遇到问题1、表格数据格式[{ id: 1, name: '篮网', item: '投篮(%)', value: Number.parseInt(Math.random() * 100), children: [{ id: 311, name: '詹姆斯·哈登', item: '投篮(%)', value: N
2021-06-07 22:41:30
6100
4
原创 Git 从某次提交拉取分支
因两个项目基本相同，在新建项目时，想从已完善的项目中拉取基础模板出来复用代码，只需要某次提交记录及之前的代码。git switch -c branchname <commitId>Git 官方文档及文档示例
2021-06-05 12:12:53
1717
原创 egg-oss 上传图片
一、安装 egg-ossnpm install egg-oss --save二、配置 oss1、开启 oss 插件// config/plugin.jsexports.oss = { enable: true, package: 'egg-oss',};2、填写 oss bucket 信息// config/config.default.jsconfig.oss = { client: { bucket: 'your bucket name', region
2021-06-02 15:46:22
1008
原创 Egg 之密码加密
为了安全性，对于用户私密数据都不明文存储在数据库中。本文描述如何在 Egg 项目下，采取 MD5 算法加密用户密码。一、安装具备 MD5 加密功能的 utility 模块npm install utility --save-dev二、在需要的地方引入模块const utility = require('utility')三、测试 MD5 加密效果1、加密前2、加密后...
2021-05-30 22:12:34
848
原创 Nginx 配置二级域名（腾讯云）
根域名已被个人主站占用，想把做过的项目部署到二级域名，特此记录。一、环境说明系统： CentOS7.6应用服务器：Nginx 1.16.1、Tomcat 9.0安全组已开放端口： 22、80、443、3389二、解析二级域名并申请 SSL 证书（腾讯云）1、登录腾讯云，点击控制台下方的个人中心头像。2、点击云产品，搜索域名注册，点击进入。3、解析域名4、申请二级域名 SSL 证书5、待证书审核通过并颁发后，下载 SSL 证书并解压三、Nginx 配置二级域名项目映.
2021-05-28 17:07:34
1338
原创 Eslint 的使用之微信小程序
日常开发 React、Vue 项目时，一般通过官方或社区流行脚手架搭建项目。对于 Eslint 配置，也能在搭建过程中通过脚手架进行配置。而微信小程序搭建都是通过微信开发者工具生成，本文则分享在小程序模板生成后，如何配置 Eslint。1、使用 yarn init -y 初始化项目 package.json2、安装 eslint 及相关依赖包使用 npx eslint --init 初始化，后续步骤可根据自身情况或喜好进行配置选择检查类型：选择模块化规范：选择框架类型：是否选择 T.
2021-04-25 16:56:59
3999
原创 stylelint 使用指南及发布自定义 NPM Package
一、概述stylelint 自 2015 年诞生以来，已被越来越多项目用于规范 CSS 及其预处理语言编写（如 bootstrap，ant-design 等） 。作为一个强大、现代的代码检查工具，在项目中能避免样式代码错误以及强制执行代码约定风格，具体内容可参考印记中文团队维护的 stylelint 中文网。二、在 Vue 项目中使用 Stylelint1、安装 stylelint、stylelint-order、stylelint-config-standard其中，stylelint 是运行工
2021-04-22 09:49:57
970
原创 Element UI 之 Table 悬停光标聚光灯效果的实现
一、需求说明业务需要对数据进行核对，要求 Table 单元格具备悬停光标聚光灯效果，方便用户找到对应项（提高系统逼格）。如图：二、实现思路1、通过 cell-mouse-enter 方法获取悬停单元格坐标，坐标信息来源于 cell-class-name 属性方法补充。cellMouseEnter (row, column) { this.hoverRowIndex = row.rowIndex this.hoverColumnIndex = column.columnIndex}2、
2021-02-22 21:48:41
3037
11
原创 Echarts 实现 hover 状态下，坐标轴文字高亮
一、需求说明Echarts 图中的柱状图和坐标文字皆可点击触发相对于的事件，希望用户鼠标 hover 状态有颜色高亮的效果。如图：二、实现思路Echarts 的柱状图 hover 状态已默认有高亮状态，不作叙述；难点在于坐标轴文字如何实现 hover 高亮。经过查找 Echarts 关于轴线的 hover 状态下的颜色配置，并没有。。。data.textStyle.color 不区分任何状态！！！那就通过监听 Echarts 的 mouseover 和 mouseout 事件来动态更改 data.
2021-01-19 17:32:32
5541
2
原创 解决 Git 报 error unknown switch `e‘ 错误
一、环境说明系统：Windows 10 Home 1909Git 版本：2.30.0二、问题说明在 VS Code 中，使用 git stash pop [<stash>] 语法报错（过去一直使用 VS Code 的图形化操作）三、问题寻找过程1、Git 版本问题？在版本 1.8.3.1 和 2.27.0 进行同样操作，问题重现。查看 Git 几个版本更新记录，语法没有出现不兼容升级，排除 Git 版本问题。2、电脑问题？在版本 2.20.0 同事和好友未知版本的电脑上进行同
2020-12-30 22:12:52
17135
36
原创 查看 PowerShell 版本
一、环境说明系统：Windows 10 Home 1909二、查看演示1、命令$PSversionTable.PSVersion2、执行结果三、相关连接官方教程PowerShell 文档
2020-12-30 14:16:10
553
原创 Linux 下安装 nvm 管理 Node 版本
一、环境说明系统：Deepin 20软件：nvm 0.37.0二、下载 nvm通过 git clone 直接下载（注：本人通过官网 curl 和 wegt 方式一直报 443，估计需要翻墙）三、nvm 安装1、进入 nvm 文件并查看文件内容2、执行 install.sh 脚本3、重启终端，验证是否安装成功四、安装 Node1、安装最新版本 node2、安装对应版本 node3、具体使用 nvm，输入 nvm 命令查看五、安装 nrm 管理镜像源由于众所周知的原因，
2020-11-19 14:07:17
766
2
原创 Linux 下安装 Git 并进行 Github 配置
一、前置说明Linux 系统： Deepin 20托管平台：Github二、安装 Git1、命令安装 ：sudo apt install git（需密码验证进一步确认）2、验证是否成功：git --version三、配置 Git1、配置 Git 账号git config --global user.name "git 用户名"git config --global user.email "git 邮箱"git config -l2、生成公钥（连续三次回车）ssh-keyg
2020-11-18 22:53:32
534
原创 VMware 安装 Deepin 20 详细过程
前排提醒：安装完系统进入应用商店安装软件前，先查看其他用户对该软件的评价再考虑安装，如 QQ一、环境说明虚拟机：VMware® Workstation 14 Pro镜像：Deepin 20二、创建虚拟机1、创建虚拟机2、选择典型安装3、选择安装镜像方式4、选择客户机操作系统Deepin 先前基于 Ubuntu 开发的，这里选择哪里并没多大区别5、命名虚拟机名称和选择安装位置6、指定磁盘容量Deepin 20 最低 64 G，建议 80 或以上7、自定义硬件8、根据电
2020-11-18 08:16:44
12084
4
原创 Vue 实现单选和多选
日常工作中，UI 库中 单选/多选 组件并不一定非常符合业务需求。这时候，不妨自己动手搞一个。单选思路选中标识值与对象标识匹配时（本例使用索引），给所在标签添加选中样式；点击标签时，更改选中标识值。代码：<template> <ul> <li v-for="(city, index) in cityList" :key="index" :class="{ checked: index === checkedIndex
2020-11-08 16:39:08
2965
2
原创 Element UI 之 Tabs 栏下拉菜单的实现
Element UI 之 Tabs 栏下拉菜单的实现产品小姐姐有一个业务需求，Tabs 组件某个 Tab 为 下拉菜单，效果如下：业务代码比较多，这里弄了一个小 Demo，以供参考，效果如下：一、思路通过 el-tab-pane 的 name 值判断为是否指定下拉 tab 栏然后利用组件提供的具名 slot 嵌入 el-dropdown 组件在 el-dropdown 中通过双向绑定，实现单选或多选（PS: 多选实现，需要设置菜单隐藏方式。涉及样式代码较多，本文没有弄这一步）二、完整
2020-08-09 17:01:27
7546
12
原创 JS 获取指定 Cookie 值
JS 获取指定 Cookie 值我们知道在 JS 中，只能通过 document.cookie 获取到当前网页的 Cookie，返回的是以 ; 隔开的 Cookie 键值对字符串。在日常开发中，可以使用 js-cookie 包来操作 Cookie。若想用原生 JS 获取指定的 Cookie 值，可参考以下方法。获取 Cookie 的方法function getCookie(cookieName) { const strCookie = document.cookie const cookieL
2020-08-08 21:16:12
15733
7
原创 Axios 对浏览器环境下 Content-Type 的处理
Axios 对浏览器环境下 Content-Type 的处理写 api 文档时，对于请求协议 Content-Type 的值，纠结了好久，就研究一下。发现团队之前的接口文档，貌似写错了。通过打印 axios 实例对象，发现 Get, Delete, Head 方法默认没有 Content-Type 这一参数，而 Post, Put, Patch 方法，Content-Type 默认值为 application/x-www-form-urlencoded。查看之前项目调用的 Post, Put 方法，发
2020-08-01 22:49:56
1327
1
原创 Nginx 配置 HTTPS（腾讯云）
Nginx 配置 HTTPS（腾讯云）本文简单总结如何在 Nginx 中配置 HTTPS， 并将 HTTP 重定向到 HTTPS。一、环境说明系统： CentOS7.6应用服务器：Nginx 1.16.1、Tomcat 9.0安全组已开放端口： 22、80、443、3389二、下载证书（腾讯云）登录腾讯云，点击控制台下方的个人中心头像。点击云产品，搜索 SSL证书，点击进入。点击证书管理，在域名项点击下载，便可得到各应用服务器类型 SSL 证书，解压后的 SSL 证书文件夹如下。
2020-08-01 22:41:03
2151
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人