wltsysterm的博客

tab插件，也是一个比较常用的插件，用来切换不同的页面用的。直接上源码。

表格作为前端最常用的标签之一，自定义插件怎么能少了它。直接上源码。

老样子，直接上源码。

因为后面很多地方都会用到一些通用性的工具类，所以直接封装成一个插件来用。

上一篇已经分享了jQueryToast的自定义插件的封装和应用。这一篇讲解下自己手动二次封装的axios插件，同时整合了jQueryToast插件。直接上源码。

用多了市面上的各种ui框架，各种的消息弹窗类型。我选择其中的一种，我觉得比较好看的，去模仿实现了。

开张第一个插件时缓存插件，有别于localStorage和sessionStorage，插件是spa插件，不能跨页面使用。最近应工作需要，重拾jQuery相关的内容，于是在闲暇之余，输出jQuery自定义插件系列。下一篇，分享消息弹窗插件。第一个插件，很简单。这个插件主要是认识，...

目录背景读取简单单元格的数据读取复杂单元格的数据结论背景前面10篇文章已经详细描述了如何利用node-xlsx来操作excel了。相信大家对node-xlsx已经很熟悉，下面几篇文章讲解下，如何读取excel了。分成两个点来介绍：1、读取简单单元格的数据2、读取复杂单元格的数据（比如合并单元格）读取简单单元格的数据准备测试的excel如下（关注单元格数据和sheet名称）：读取数据的代码如下：const xlsx = require('no.

目录背景设置单元格的列宽背景上一篇文章，费了好大的力气，完成了设置单元格行高的功能，这篇文章介绍下如何设置单元格的列宽，这个功能相对来说会比较简单点。设置单元格的列宽const xlsx = require('node-xlsx');const fs = require('fs')const cols = [{wpx: 30}, {wpx: 200}, {wpx: 200}]const options = {'!cols': cols};let data = [

背景这篇讲解下如何利用node-xlsx设置单元格的行高，这篇文章开篇先透露下，如题，这个功能需要修改源码，这个也算是这个node-xlsx插件本身的缺陷吧！所以本篇分成两个部分内容来分享：1、设置单元格行高（不会产生效果）2、修改源码（重新执行设置单元格行高，就会产生效果了）设置单元格行高正常设置单元格行高的代码如下（执行会没效果的，因为源码还没改）：const xlsx = require('node-xlsx');const fs = require('fs')con

背景上一篇介绍了如何合并单元格，这篇讲解如何1、给合并后的单元格设置值2、给合并后的单元格后面的单元格设置值给合并后的单元格设置值const xlsx = require('node-xlsx');const fs = require('fs')const merges = [{s: {c: 0, r: 0}, e: {c: 9, r: 0}}]; //此处是合并条件 0,0和9,0是坐标 指的是A1单元格 到J1单元合并const options = {'!merges': m

目录背景合并单元格背景前面的文章已经讲解了如何利用node-xlsx设置单元格的样式基础样式。从这篇往后，主要介绍如何合并单元格，设置单元格高度，设置单元格宽度等。合并单元格const xlsx = require('node-xlsx');const fs = require('fs')const merges = [{s: {c: 0, r: 0}, e: {c: 9, r: 0}}]; //此处是合并条件 0,0和9,0是坐标 指的是A1单元格 到J1单元合并con

背景《node操作excel》系列里头第二篇《node操作excel2 利用node_xlsx设置单元格边宽》，我们已经讲解了如何设置单元格的边框，过程我们已经对node-xlsx进行了修改。后续所有的样式设置都依赖已经修改过的node-xlsx来进行操作的！设置单元格背景色const xlsx = require('node-xlsx');const fs = require('fs')let s = { fill: { fgColor: {rgb: "C050

背景《node操作excel》系列里头第二篇《node操作excel2 利用node_xlsx设置单元格边宽》，我们已经讲解了如何设置单元格的边框，过程我们已经对node-xlsx进行了修改。后续所有的样式设置都依赖已经修改过的node-xlsx来进行操作的！设置字体、文字颜色、下划线、斜体const xlsx = require('node-xlsx');const fs = require('fs')let s = { font: { name: '隶书',

目录背景设置文字居中背景《node操作excel》系列里头第二篇《node操作excel2 利用node_xlsx设置单元格边宽》，我们已经讲解了如何设置单元格的边框，过程我们已经对node-xlsx进行了修改。后续所有的样式设置都依赖已经修改过的node-xlsx来进行操作的！设置文字居中如下：const xlsx = require('node-xlsx');const fs = require('fs')let s = { alignment: {

背景上一篇，我们已经讲解了如何设置单元格的边框，过程我们已经对node-xlsx进行了修改。后续所有的样式设置都依赖已经修改过的node-xlsx来进行操作的！设置字号和加粗设置单元格字体大小和加粗与否比较简单，如下：const xlsx = require('node-xlsx');const fs = require('fs')let s = { font: { sz: 19,// 字号大小 单位不是px，会比px大一点的单位，具体是啥还不知道

背景上一篇文章已经讲解了如何利用node_xlsx导出简单的文本数据到excel里头，这篇文章讲解下如何利用node_xlsx设置表格的样式。这块内容也是该系列文章的全部内容，包括可以设置哪些样式，怎么设置，遇到哪些问题，怎么解决等等！设置单元格边框按照官方给的教程，笔者写了如下的设置单元格边框的代码：const xlsx = require('node-xlsx');const fs = require('fs')let s = { border: { top

背景使用过java导出excel的同学，都知道，那工作真是一个字，麻烦。学过node的同学可能都利用过node的excel工具包导出过excel。可选工具比较多哈：node-xlsx、xlsx、xlsx-style等。如果只是普通的数据导出的话，这三个工具都可以直接使用，但是如果要设置样式的话，那么推荐使用nodex-xlsx。因为其他两个能力有限！先说下node-xlsx、xlsx、xlsx-style的关系吧：node-xlsx：基于基本库的封装，底层的库是用的xlsxxlsx-style 基

目录背景服务端-框架工具类效果展示背景前面已经完成了4种上传文件的前端方案。这四种方案都没有分享后台的代码给大家。下面分享下服务端代码。注意下面的服务端代码均适用于前面这四种前端方案。服务端-框架服务端使用koa框架编码，如果没有node编程基础可能会看不懂。app.js的代码：let koa = require('koa')let app = new koa()app.use(require('koa-cors')())let router = requ

背景上篇文章介绍了，el-upload的官方默认的实现方案以及我们改写成一键上传的方案。不过这种一键上传只是表象，实际网络层的活动还是多次的上传动作。这篇文章分享如何改写el-upload的上传事件，实现一次请求，上传多个文件。原理改造的原理其实非常简单，紧紧抓住一条主线，我们要做什么？---一次上传多个文件，所以我们只要确保在我们点击上传的时候可以获取到最新的文件列表即可了。因此查看el-upload,其中有两个监听器非常有用：on-change // 文件状态改变时的钩子，添加文件

目录背景el-upload一键上传-（假象，因为网络层还是多个上传请求）代码实现htmljs背景上一篇文章已经讲解了如何基于ajaxfileupload来实现文件上传。这篇文章讲解下基于elementui的el-upload插件实现文件上传。主要讲解el-upload的流程以及如何实现。el-uploadel-upload是elementui的内容，所以使用了elementui就可以直接使用了。官网已经有成熟的案例了。不过官网的案例是选择一个文件就立马上传一个

背景上一篇文章已经详细解释了如何基于axios来实现多文件上传，这种方式的优点非常明显：易用、支持跨域、灵活性高。但是还是有很多人依赖徘徊在jquery的ajaxfileupload.js插件。这个插件，时至今日，已经有非常多的版本了，基本上都是市面上开发爱好者，根据原理，自己写的，然后流传到市面上的。所以，很多人会反映，为啥我的这个不能用，为啥我的会报错。其实，ajaxfileupload的使用缺点也是非常明显的：难用、不支持跨域，不灵活，但是因为有人用，所以下面还是解释下ajaxfileupload

背景文件上传在实际的项目中用的还是比较频繁的，方式比较多。在未来的三篇文章里头，我们分别介绍下三种方式实现多文件上传。然后服务端都是使用koa作为基础。拖拽上传 + axios前端使用axios进行文件上传。这个过程主要是构建FormData来装载多个文件。然后示例的场景是拖拽（类比qq邮箱里头添加附件）。本篇案例是在vue + elementui的基础上来编写的，大家在普通的h5里头也是同样做法。1） 拖拽物的容器-textarea任意一个标签都可以充当容器，用来装载被拖拽进来文件

目录背景koa跨域处理-方式一（有兼容性问题）koa跨域处理-方式二背景了解或者学习过express框架的同学都知道，express里头处理跨域一般如下即可：app.use(async (req, resp, next)=> { resp.header.set('Access-Control-Allow-Origin', '*'); resp.header.set('Access-Control-Allow-Headers', '*'); resp

目录背景node-schedule安装node-schedule 定时任务定义cron解释常见拓展-支持基于date定义时间node-schedule任务启动背景学过其他编程语言的同学，应该或多或少都有学过或者用过定时任务吧。而使用KOA框架编程同样有这个诉求。下面介绍如何通过node-schedule模块实现KOA的定时任务。node-schedule安装npm install node-schedulenode-schedule 定时任务定义l

背景使用过exrepss框架的同学，是否还记得，我们当时对路由的引用是分层两个步骤的，先定义路由，再在app.js里头引用路由。这个过程koa其实也是这么过来的。但是不同的是，express里头，我们在引用路由的时候都会指定路由的一级uri，用来区分每个路由之间的入口的不一样。比如：user路由，我们会指定/user作为路由前缀class路由，我们会指定/class作为路由前缀这样子，在不同的路由文件里头，我们指定uri就不用当心二级uri相同造成冲突的问题。而在前面KOA的例子里头

目录背景http + https背景前面我们已经讲解过了如何单独使用http或者https来对外提供服务。但是通常，http是对开发环境的手段，而https是生产的手段，而生产环境，为了跳过域名解析等过程，生产环境的多个服务之间的通信也会采用http + localhost域名。因此一个系统http和https服务同时对外提供是很有必要的。http + https通常，不同协议，占据的端口是不一样的。因此我们约定：http占用的端口是3000，https占用的端口是3001。通常

目录背景superagentget类型请求post类型请求响应对象属性背景一个系统，正常的请求流向是从前端（客户端）到服务端。而通常一个系统在没有办法完成全部业务的时候需要多系统协作的时候，那么就需要多系统之间联动，所以就出现请求流向是从服务端到服务端的场景。koa里头实现服务端到服务端的通信，得益于js的功效，所以实现起来也是比较简单的。superagent首先需要认识一个第三方的包superagent，这个包已经封装好了端对端请求的api，包括对请求头的设置，请求

目录背景https通信https证书编程背景前面已经讲解过了KOA的基础编程技巧。但是都是基于http的通信，现在讲究安全，而最简单的安全手段就是https。KOA如何实现呢？https通信KOA实现https通信需要依赖几个包：https koa-sslify fs分别安装。https证书证书是这个环节里头最麻烦的动作，企业开发的话，公司都会提供给你企业的证书。需要注意的是，证书类型有很多，比如java通常使用的是.keystore类型的证书，而n

目录背景sequelize-auto安装自动生成model背景之前我们讲解了sequelize实现koa编程的orm。但是呢，对一个稍微大一点的项目而言，表结构肯定不会少，这个时候，如果手工根据表结构生成model，相信会让很多程序员叫苦不迭。因此，本篇文章引入了sequelize-auto来解决model生成的问题。sequelize-auto基于node的一个自动化生成所有Models，或指定数据表安装因为这是一个通用的工具，所以建议是全局安装。npm

背景上一篇已经完成了sequelize的所以讲解了。但是难免会遇到一个问题，那就是随着业务的壮大。系统的model会变的非常多。这个时候，如何引用也是一件麻烦事。本篇文章分享如何实现自动扫描所有model并导入。自动扫描并导入在存放model的文件夹里头新建一个文件module.js。输入：const fs = require('fs');const path = require('path') let files = fs.readdirSync(__dirname);

背景上一篇文章已经讲解了基于模型的数据库单表增删改查。这节课就来分享一下多表查询和事务。Sequelize支持两种事务使用方式：托管(Managed) - 一种将基Pomise链的结果自动提交或回滚事务，并且（如果启用了CLS）将事务传递给回调中的所有调用非托管(Unmanaged) - 不会自动提交、回滚并将事务交由用户控制这边只分享托管的方式。托管事务（auto-callback）类比mybatis里头的@transition(callback=Exception.clas

目录背景find - 搜索数据库中一个特定元素findOrCreate - 搜索一个特定元素不存在时则新建findAndCountAll - 搜索数据库中多个元素，同时返回数据和总数findAll - 搜索数据库中多个元素复合过滤 / OR / NOT 查询对数据集使用limit、offset、order和group原始查询count - 统计数据库中元素数max - 获取表中特定属性的最大值min - 获取表中特定属性的最小值sum - 对特定属性的值求

目录背景sequelize概念安装建立连接测试连接关闭对表建模修改默认模型选项模型与数据库同步查询Promise与async/await方言(Dialects)数据类型(Datatypes)Model背景注意：本篇文章要求具备node开发经验，同时对orm有一定了解的同学看，不然会很吃力。默认情况下，我们使用开源mysql提供的包来操作数据库，但是这种方式编写的代码就比较底层、原始。如：connection.query('SELE

目录背景安装sequelize定义配置文件创建一个sequelize对象实例定义模型User，告诉Sequelize如何映射数据库表通过模型操作数据库测试背景这块内容，其实并非是KOA所特有的，而是在地方也可以使用，比如express框架里头我们也可以这么来用。这部分内容的提出，主要是针对基于node的编程，操作数据库是比较繁琐的，一般我们都是基于开源的mysql包来操作的，为了对标java里头的orm框架，比如mybatis，hibernate等，所以提出来基于se

目录背景ctx的使用概念APIctx.requestctx.responsectx.throw([status], [msg], [properties])Request 别名Response 别名背景上一篇文章，我们讲解了路由的基本使用，但是大家肯定非常疑惑，为啥没有演示参数的获取，以及更多的其他的跟路由相关的内容。其实这块内容非常多，而且都是跟ctx强相关，所以笔者单独起一篇文章来写。ctx的使用概念上下文(Context)就是ctx。Ko

目录背景创建路由路由中间件注册测试背景上一篇文章已经完成了KOA骨架的搭建。这节课来讲解下如何添加路由。大家都知道，路由其实就是用来标识应用上的唯一的一个接口，所以接口通常又被称为资源。在express的使用过程大家都知道我们可以借用express-router来实现路由编程。那么在KOA里头同样有这么一个包，称为koa-router，这个包在上一节课里头，我已经提前安装。创建路由在项目根目录下新建文件夹routers，所有的路由文件我们都放在这个文件夹里头（沿用ex

目录背景项目初始化npm初始化koa核心包安装koa-入口文件app.js背景学过express框架的同学，一定听过KOA框架，那么再来学习KOA框架，就没什么压力了。因为如初一则，只是部分的语法更高级了。仅此而已。项目初始化项目开发，选用webstorm软件为开发工具。npm初始化新建项目目录比如：race-2020，该目录作为项目根目录打开terminal，输入：npm initkoa核心包安装继续在terminal上顺序执行如下命令：

背景前面我们已经讲解了webpack实现对html里头img标签图片的打包以及实现对css里头的图片的打包。但是动态设置img标签的src值的时候，比如通过绑定的形式，打包成功但是图片访问就失败了。下面分享下怎么来解决这个问题。esModule刚开始以为是file-loader能力不行，所以换成了url-loader，配置两个是一样，但是发现还是不行。找了一下资料，发现是因为缺少了一个配置导致的：esModule: false所以，通过修改file-loader(或者url-loade

背景前面讲解过js，html， css，但是都没有讲解到一个场景，就是图片的场景，这个时候随便往html，插入一个img标签，或者在css里头加个背景图的样式表，打包之后看下会如何。html里头添加img标签打包打包后的html:很显然，img的src的路径是不对的。那么访问肯定会出现404问题css里头添加背景图样式表打包打包直接报错：ERROR in ./1.jpg 1:0Module parse failed: Unexpected character '�'.