- 博客(46)
- 收藏
- 关注
RSS订阅原创 JS实现关键词高亮：在HTML字符串中匹配“跨标签关键词”
本文发布于个人网站：https://wintc.top/article/59，转载请注明很久之前（好像刚好是一年前）写过一个Vue组件，匹配文本内容中的关键词高亮，类似浏览器ctrl+f搜索结果。实现方案是，将文本字符串中的关键字搜索出来，然后使用特殊的标签（比如font标签）包裹关键词替换匹配内容，最后得到一个HTML字符串，渲染该字符串并在font标签上使用CSS样式即可实现高亮的效果。当时的实现过于简单，没有支持接收HTML字符串作为内容进行关键词匹配。这两天有同学问到，就又思考了这个问题.
2020-11-25 11:26:11
2358
4
原创 文本超过指定行数折叠
多行文本超过指定行数隐藏超出部分并显示“...查看全部”是一个常遇到的需求，网上也有人实现过类似的功能，不过还是想自己写写看，于是就写了一个Vue的组件，本文简单介绍一下实现思路。 组件可以通过npm安装使用，需要的同学可以尝试一下： 组件地址：https://github.com/Lushenggang/vue-overflow-ellipsis 在线体验：https://wintc.top/laboratory/#/ellipsis...
2020-11-18 16:42:39
1215
3
原创 Javascript对象命名风格转换——小驼峰命名和下划线命名相互转换
本文发布于我的个人网站：https://wintc.top/article/22 目前前后端数据交互通常会使用json，如果前后端变量命名风格不一致，就会导致某一端要迁就另一端，这样在自己的代码中就会同时出现两种命名风格。为了避免这种尴尬，我们可以在接口获取数据和发送数据的地方做统一处理，将收到的数据统一转为前端的风格，而将发出的数据转为后端的风格。 这不，项目里后端用了下划线形式的命名风格，而前端用的是小驼峰格式，所以写了两个函数进行转换，主要用到了递归算法和字符串正则替...
2020-11-18 16:35:46
3173
原创 ElementUI表格el-table表头固定自适应高度解决方案
ElementUI表格el-table表头固定自适应高度终极解决方案：https://wintc.top/article/54
2020-10-23 14:58:28
7988
5
原创 JavaScript闭包应用介绍
本文最先发布于我的个人网站：https://wintc.top/article/33。转载请注明出处 本文介绍一下JS中的一个重要概念——闭包。其实即便是最初级的前端开发人员，应该都已经接触过它。一、闭包的概念和特性 首先看个闭包的例子：function makeFab () { let last = 1, current = 1 return function inner() { [current, last] = [current + last, current.
2020-07-05 19:49:49
169
原创 Vue项目打包部署总结
本文发布于我的个人网站：http://wintc.top/article/29，转载请注明。使用Vue做前后端分离项目时，通常前端是单独部署，用户访问的也是前端项目地址，因此前端开发人员很有必要熟悉一下项目部署的流程与各类问题的解决办法了。Vue项目打包部署本身不复杂，不过一些前端同学可能对服务器接触不多，部署过程中还是会遇到这样那样的问题。本文介绍一下使用nginx服务器代理前端项目的方...
2020-01-14 14:12:20
6683
1
原创 前端利用canvas给图片添加水印
本文发布于我的个人网站：http://wintc.top/article/27，转载请注明。 前两天给个人网站添加了一个小功能，就是在文章编辑上传图片的时候自动给图片加上水印。给网页图片添加水印是个常见的功能，也是互联网内容作者保护自己版权的方法之一。本文简单记录一下借助canvas在前端实现图片添加水印的实现方法。 canvas元素其实就是一个画布，我们可以很方便地绘制一些文字、...
2020-01-14 14:10:12
4302
3
原创 JS字符串压缩：使用正则表达式匹配相同连续字符
给定输入为英文字母组成的字符串，对字符串进行压缩，'abbbcc'压缩为‘ab3c2’，即统计连续相同字符个数，将字符连续出现2次及以上的子串压缩为“字母+出现次数”的形式。本文发布在我的个人网站：http://wintc.top/article/25...
2019-12-13 11:34:50
814
原创 JS树结构操作:查找、遍历、树结构和列表结构相互转换
http://wintc.top/article/20本文解读了JS树结构的深度优先遍历、广度优先遍历，树结构查找节点、查找节点路径，树结构和列表结构的相互转换等，实现方法包含了递归、非递归，代码非常简洁。...
2019-12-03 09:50:10
536
原创 nuxt项目使用shell脚本自动发布代码
最近使用nuxt开发了个人博客，不同于平常Vue开发的静态项目将代码打包推到服务器即可。nuxt项目是服务端渲染，需要在服务器安装依赖启动http服务，每次发布到服务器都要远程连接服务器，在服务器执行更新代码，安装依赖，启动服务，很是麻烦。于是想使用shell脚本优化了这一流程，在此记录一下。 受益于shell脚本的强大，可以通过ssh远程执行服务器命令，其实脚本方式和普通发布方式很像，...
2019-10-25 20:56:44
638
原创 已知二叉树先序遍历中序遍历求其后序遍历、重建二叉树
已知二叉树先序遍历中序遍历求其后序遍历 (注：已知中序遍历序列和剩下两种遍历序列中的一种都可以确定二叉树，即可得到另一种遍历序列， 但是已知前序遍历和后序遍历序列并不能唯一确定二叉树，例如：preorder：ABpostorder：BA，我们不能确定B是A的左子还是右子。） 二叉树的先序遍历的第一个元素总是树的根结点，而在中序遍历中，根结点在序列的中间，其左...
2019-09-16 19:54:16
798
原创 JS数组基本操作：数组遍历到底有多少种方式？
源于一次面试，一起面试的同事问面试者的一个问题：数组遍历有哪些方式？想来数组操作是平时开发中的常用技能，面试者吞吞吐吐大概就说出了两种方式吧，最后就淘汰掉啦（面试者是个很认真的妹纸，面试都在简单做一些笔记，不过基础确实有些困难～）。对于＂数组遍历＂这个问题，其实答案很宽泛，关键在于你能不能列举出一定数量的方法以及描述它们之间的区别。本文即介绍一下数组的基本遍历操作和高阶函数。一、数组基本遍历...
2019-08-29 23:37:26
868
原创 开发一个chrome插件：将百度搜索热点屏蔽掉！
每次百度搜索，搜索结果的右边总是出现些乱七八糟的搜索热点（推的都是些什么玩意，高校替课和我有毛关系，几个悲伤的热点我用信号顶掉了）。 强迫症想把它隐藏掉，我用的是chrome浏览器，受adblock（超强屏蔽广告插件）的启发，想到做浏览器插件的方式。 本文简单记录一下插件开发过程，chrome插件开发真的非常简单，只需要一点点前端的知识就可以了，以下是本次插件开发、打包、安装全部过...
2019-07-14 00:50:32
1073
原创 CSS三栏布局：圣杯布局、双飞翼布局
其实三栏布局比较简单，而且方法也有很多。今天了解了一下传统的三栏布局方法：圣杯布局、双飞翼布局，本文简单记录一下。所谓三栏布局，通常是指左右两栏定宽，中间一栏自适应页面宽度填满剩余空间的布局。一、圣杯布局<div class="header">这是页头</div><div class="container"> <div class="cente...
2019-06-13 00:49:48
390
原创 CSS垂直居中，你会多少种写法？
CSS控制居中是前端开发中非常常用的布局技能，本文列出几种CSS控制元素居中的几种方法。 谈及HTML元素居中展示，涉及到水平居中和垂直居中，以及水平垂直居中。由于HTML文档流是水平方向的，所以水平方向上的布局控制比垂直方向要简单很多，居中也是如此。不过（水平）垂直居中还是有很多种写法，至少一只手是数不过来了，本文列出几种，并进行简单比较。一、水平居中 使用CSS控制水平居中很简单...
2019-04-26 00:39:42
1474
原创 前端项目中使用websocket来实现即时通讯-以聊天室为例
介绍websocket可以在用户的浏览器和服务器之间打开交互式通信会话,使用websocket可以向服务器发送消息并接收事件驱动的响应，而无需通过轮询服务器的方式以获得响应。本文通过构建一个简易的websocket聊天室，简单介绍如何使用websocket在服务端和浏览器端进行通信。首先介绍一下前端websocket一些基本接口。Websocket API实例化let socket...
2019-04-11 09:49:47
11075
1
原创 flask 更新数据库命令行卡死 python main.py db upgrade
问题描述flask执行升级数据库命令：python main.py db upgrade然后命令行像往常一样打印以下3行信息，然后一直卡死不动了。INFO [alembic.runtime.migration] Context impl MySQLImpl.INFO [alembic.runtime.migration] Will assume non-transactional...
2019-04-05 09:41:01
1529
原创 Vue项目 chrome页面崩溃:喔唷 崩溃了, 并出现警告Forced reflow while executing JavaScript took <N>ms
一、问题描述这个问题几个月前就曾困扰我，但是因为这个问题的出现看似“很偶然”,所以当时不了了之了。项目开发的时候，测试同事反馈页面会出现“喔唷 崩溃了”，打开控制台进行相同操作后发现控制台会频繁出现一个警告：Forced reflow while executing JavaScript took <N>ms二、问题排查以前也看到过类似警告，不过没有重视。警告内容很明显...
2019-04-01 20:24:22
32899
3
原创 怎样给一个Vue页面添加大纲导航
一、前言前两天项目遇到一个需要给页面添加大纲导航的功能，要求把页面中的特定标签加入到大纲导航中。类似这样：需求本身并不难，不过想把这个东西做得通用一些，也就是以后再有别的页面需要加导航，不用再重新写很复杂的逻辑了。下面说一下具体实现思路，并且文末会给出简便易用的导航生成工具。二、实现思路1、需求分析做之前想到之前接触过的markdown编辑器mavon-editor有一个导航，不过那个...
2018-12-06 16:19:46
1332
1
原创 mysql远程连接失败问题解决
之前一直是在本机登录mysql服务器，偶然试了一下使用mysql远程连接阿里云服务器，连接失败了！解决了以下三个问题以后成功实现连接。原因总结下来无非是以下两个：①阿里云防火墙端口未开放 ②mysql默认设置仅允许本机登录1. 修改阿里云防火墙端口，增加对mysql服务器端口3306的放行：2. 重新连接报错：ERROR 2003 (HY000): Can't connect to M...
2018-10-07 00:48:57
281
原创 Vue 树组件
因为项目中使用比较多树形组件的原因，尝试使用过iview以及element-ui的树组件，两个组件库都非常优秀，但是在用它们的树组件来实现需求时都不甚满意。主要体现在样式的难于控制、以及操作的便捷性上。在阅读element-ui的代码后，结合自己的需求自己写了一个树组件，代码在github上开源，并且发布到了npm上(目前已发布了1.0稳定版本，将会持续维护)。你可以通过npm或者y...
2018-09-29 22:07:01
6362
1
原创 sudo执行命令，xx is not in the sudoers file. This incident will be reported.解决
使用sudo执行root权限才能执行的命令时，输入密码后执行被终止，命令行提示：xx is not in the sudoers file. This incident will be reported.即：xx不在 sudoers 文件中。此事将被报告。这个提示是因为该用户没有执行sudo的权限，因为该用户的权限信息不在sudoers配置文件中。解决方法：①切换root用...
2018-08-11 00:10:09
1686
2
原创 js怎么监听div元素的resize
在实现一个项目需求的时候，需要监听到某个div元素的宽高变化，第一时间想到的是resize事件，但是很不幸运的是，resize事件只能加在window对象上，并不能监听具体某个DOM元素。 多方查阅之后，了解到MutationObserver，这是一个可以用来监听整个DOM中任何变化的东西，可以把它理解为一个类，实例化之后调用类实例的几个简单接口即可完成监听，以下具体介绍。一、Mut...
2018-08-07 06:17:36
33596
9
原创 linux 用户管理
一、用户和用户组 linux是多用户系统，要使用系统资源，必须有一个合法的账号，这就是一个用户。一个账号需要有用户名，需要设置密码，同事在系统里的每一个账号都会有一个唯一的32位整数ID，称为UID(User ID)。 linux还有用户组的概念，系统中的每一个用户都至少属于一个用户组（可以属于多个用户组），用户组也通过不同的ID来区分，称为GID(Group ID)。 系统中有...
2018-08-06 00:32:48
159
1
原创 Vue项目部署到远程服务器 并实现自动远程同步项目
使用Vue开发项目时通常是前后端分离的，这样就前后端各有一个地址，用户访问的是前端的地址，即前端路由，前端再向后端地址请求页面数据然后渲染页面。 本文简单介绍通过Apache2部署前端项目到服务器，以及如何将本地项目自动推送到远程服务。 我的服务器系统版本 ubuntu16.04，如果你的也是ubuntu应该差别就不大。这里我用的服务器是国外的Vultr云服务器 ，平时就随便玩玩(...
2018-07-30 00:06:42
11391
1
原创 mysql密码忘记如何重置root密码
很久没有玩数据库，果然又忘了mysql的root密码，一顿操作重置，啪啪啪一堆报错，记录一下。说明: mysql密码重置其实是修改数据库mysql下的user表中密码字段。 但是没有密码连接都连不上咋个整?一、启动安全+免验证模式①关闭服务：sudo service mysql stop②安全模式+免验证启动服务sudo /usr/bin/mysqld_safe --ski...
2018-07-24 01:03:24
51040
1
原创 CSS中容易忽略的问题
这篇博客用于记录在平时开发的过程中会遇到一些貌似奇奇怪怪的CSS问题。1.为什么span元素设置宽高没有作用？涉及块级元素和内联元素的区别： 块级元素 内联元素 1.可以容纳块级元素、内联元素、文本 1.可以容纳内联元素（尝试容纳块级元素会得到预料之外的结果）、文本 2.总是新起一行 2.不会新起一行 3.高度、宽度、内外边距可控 3....
2018-07-20 00:28:41
170
原创 Vue树形结构操作
树形结构是一种常用的数据结构，使用Vue怎么来渲染呢？要把树结构的每一个节点都渲染成dom，需要对树结构进行递归遍历。Vue组件可以通过name选项的设置来递归的调用自己，因此渲染起来很方便。 本文简单实现了一下树结构的基本增删改等操作，后续还会继续对树结构渲染(比如拖拽操作、大数据量渲染效率等)进行探索。代码比较简单，MyTree组件：<te...
2018-07-09 22:49:21
14863
2
原创 Windows github ssh-key生成方法
git clone [email protected]:xxx.git被拒绝：Warning: Permanently added the RSA host key for IP address '52.74.223.119' to the list of known [email protected]: Permission denied (publickey).fatal: Could n...
2018-07-08 17:21:45
212
原创 Vue.js 自定义指令，实现可以拖动的悬浮框
Vue支持我们自己开发一些使用方法类似内置指令（如v-show、v-for等）的自定义指令，通常用在一些对底层DOM操作的地方。本文简单介绍一下自定义指令的基本用法，并实现一个指令v-drag实现悬浮框拖动功能。一、基本用法1）注册 类似组件，指令的注册也可分为全局注册与局部注册。顾名思义，全局注册即在项目下所有Vue组件中都可使用，局部注册则只能在当前Vue组件中使用。自定义组...
2018-07-02 13:20:01
12657
3
原创 JS调整html元素大小
想在页面上实现拖动两个元素分界位置可以改变元素的大小，基本思路是：在两个元素之间增加一个分界元素，监听该元素的mousedown事件，事件触发时立刻设置监听页面mousemove事件以及mouseup事件，mousemove事件处理元素大小修改，mouseup事件触发时应该移除页面mousemove事件。其中主要是mousemove事件，其实就是计算鼠标在拖动过程中，鼠标相对屏幕的...
2018-04-04 01:32:33
3227
2
原创 ubuntu16.04 设置鼠标滚轮速度
鼠标滚轮速度太慢，在浏览网页或者阅读代码时候简直不能忍受，但是系统设置里找不到设置滚轮速度的地方，网上查到工具imwheel解决了这个问题。1.安装：sudo apt-get install imwheel2.设置滚动速度：sudo vim ~/.imwheelrc, 然后添加配置内容：".*"None, Up, Button4, 5None, Down...
2018-03-13 13:33:51
11466
4
原创 vue插件开发 使用pdf.js实现手机端在线预览pdf文档
目前大多数PC浏览器支持在线预览pdf文件，但大多数手机浏览器还未支持，尝试用手机浏览器打开一个pdf文件会弹出是否下载的提示框。网上查了一些资料，在实现的过程中，还是走了比较多的弯路，最后采用了倍受推荐的pdf.js插件来实现（文末附Demo）。 pdf.js可以从github上clone下来，然后本地gulp生成可用的pdf.js和pdf.worker.js（...
2018-03-13 00:44:01
32012
97
原创 Vue.js 插件开发：透明提示框插件、倒计时返回首页插件
在做项目时开发了两个插件，一个是透明提示框、另一个是长时间不操作自动返回首页的插件，在这里分享一下。 一、网页透明提示框插件1.效果（支持同时弹出多个提示）2.代码以及使用方法代码：Alert.vue + notify.js使用方法： 将两个代码文件放到文件夹notify之下， 在mian.js中加入以下代码：import notify from './notify/no...
2018-03-06 14:58:23
2522
原创 Vue 路由切换时页面内容没有重新加载
第二次进入页面，页面路由参数已经改变，但是页面内容不会刷新。问题原因：在组件mounted钩子中调用的刷新页面内容，但测试发现这个钩子没有被调用。后来发现App.vue中使用了<keep-alive>：<template> <div id="app"> <keep-alive> <router-view></..
2018-03-05 11:09:07
41332
15
原创 Atom 插件安装报错gyp ERR!
Atom编辑器安装 Emmet插件的时候遇到报错：gyp info it worked if it ends with okgyp info using [email protected] info using [email protected] | linux | x64gyp http GET https://atom.io/download/electron/v1.6.15/iojs-v1.6.15...
2018-03-02 16:07:42
2626
原创 Node.js export default 使用require引入报错：SyntaxError: Unexpected token export
问题：在a.js 中使用export default xxx 后，b.js使用require('a') 报错：SyntaxError: Unexpected token export，只能使用import解决办法：a中export default xxx改为 moudle.exports = xxxx另外，如果在webpack中同一个模块下，使用了import xxx, 再使用module.exp...
2018-02-08 16:08:12
15340
原创 vue init webpack my-project 报错Failed to download repo vuejs-templates/webpack
今天在使用vue init webpack xxx 创建前端项目时，出现如下报错：vue-cli · Failed to download repo vuejs-templates/webpack: tunneling socket could not be established, cause=connect ECONNREFUSED 127.0.0.1:41379为什么我们下载官方模板竟然试图...
2018-01-25 11:00:13
27739
14
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人