瀑布流布局是种常见的布局方式，常用于图片相关的样式展示，通过CSS3的多列（Multi-column）属性，可以简单的实现类似效果。具体步骤：1.设置外部容器多列列数（column-count）和列间距（column-gap）2.设置内容条目的break-inside属性为avoid，使条目总体不被打断。 div class="container" //最外层容器
div class="item" //条目
div class="item__content" //条目内容
img src=''
/div
/div
寻找轻量级的验证器，可以看下 https://github.com/node-modules/parameterhttps://javascript.net.cn/article?id=732安装npm install @hapi/joi --savenpm install joi --save
用法示例const Joi = require('@hapi/joi');
const schema = Joi.object({
username: Joi.string()
.alphanum()
.min(3)
.max(30)
.requir
一，简介我们做一个大项目会把项目分解成很多不不同的模块（Module），通常分为 Controller，Service，Model，Dao 和 Utils。有没有其实都可以，叫不叫这些名字也无妨，你要把Service的内容全写在Controller里也没问题，你要把Utils的工具函数分散在所有需要用的文件也Ok。但是久而久之，一堆人做一件事做的多了，就会形成这些约定俗成的部分，就好比形成了人行道，车行道，形成了红绿灯，当然这些终归还没有加进标准里去，所以你遵不遵守，都靠你自己。所以，项目中是否包含这些模块或者单词，和你的项目结构是否完善一毛钱关系没有。但是当你的项目结构相对完善的时候，你会发
安装npm install -g browser-sync
监控静态网站如果您想要监听.css文件, 您需要使用服务器模式。 BrowserSync 将启动一个小型服务器，并提供一个URL来查看您的网站。// --files 路径是相对于运行该命令的项目（目录）
browser-sync start --server --files "css/*.css"
// 监听css和html文件
browser-sync start --server --files "css/*.css, *.html"
//或者
browser-sync start --server --files "**
counter-reset 主要功能是用来标识计数器的作用域的。它只能作用于选择器上，它的值包括两部分：第一部分为计数器的名字；第二部分为计数器的起始值（默认为0），counter-reset还可以同时声明多个计数器比如：counter-reset: count 0 /*标识计数器count从1开始*/
counter-reset: count2 2 /*标识计数器count2 从3开始*/
counter-reset: count1 0 count3 0 count4 0 /*声明了三个计数器，count1，count2，count3*/
counter-increment 表明计数器
Webpack 4.0 开始，为了应对 Parcel 等的挑战，配置越来越简单，甚至可以“零配置”。一个简单的 Webpack.config.js 配置文件 ：const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
};
添加上常用 loader 后的配置文件:const HtmlWebpackPlugin = r
Bundle: Produced from a number of distinct modules, bundles contain the final versions of source files that have already undergone the loading and compilation process.Bundle: bundle通常是由多个不同的模块产生，它是已经加载完毕和被编译后的源代码的最终版本。Bundle Splitting: This process offers one way of optimizing a build, allowing webp
简介：Koa.js 的路由安装：npm i @koa/router
API参考基本用法：const Koa = require('koa');
const Router = require('@koa/router');
const app = new Koa();
const router = new Router();
router.get('/', (ctx, next) = {
// ctx.router available
});
app
.use(router.routes())
.use(router.allowedMethods());
路由
1. 【强制】隶属于用户个人的页面或者功能必须进行权限控制校验。 说明:防止没有做水平权限校验就可随意访问、修改、删除别人的数据，比如查看他人的私信内容。2. 【强制】用户敏感数据禁止直接展示，必须对展示数据进行脱敏。 说明:中国大陆个人手机号码显示为:137****0969，隐藏中间 4 位，防止隐私泄露。3. 【强制】用户输入的SQL参数严格使用参数绑定或者METADATA字段值限定，防止SQL注入， 禁止字符串拼接 SQL 访问数据库。反例:某系统签名大量被恶意修改，即是因为对于危险字符 # --没有进行转义，导致数据库更新时，where 后边的信息被注释掉，对全库进行更新。4. 【强制
诞生50多年之后，函数式编程（functional programming）开始获得越来越多的关注。不仅最古老的函数式语言Lisp重获青春，而且新的函数式语言层出不穷，比如Erlang、clojure、Scala、F#等等。目前最当红的Python、Ruby、Javascript，对函数式编程的支持都很强，就连老牌的面向对象的Java、面向过程的PHP，都忙不迭地加入对匿名函数的支持。越来越多的迹象表明，函数式编程已经不再是学术界的最爱，开始大踏步地在业界投入实用。也许继"面向对象编程"之后，"函数式编程"会成为下一个编程的主流范式（paradigm）。未来的程序员恐怕或多或少都必须懂一点。但
div高度是根据里面内容自适应撑开的，如果没有内容高度则为0；但div里面有内容高度仍是0，多半是因为元素浮动引起，div里面的元素浮动到其它地方，div里实际上没有内容，因而为0；用如下为例： div
a img /a
/div
显示图片后，div高度可能为0，此时可以通过如下3种方式解决掉高度为0：1. 使用overflow属性：为div增加样式：style="overflow:visible"
这样即可撑满div，overflow可以取值：auto 出现滚动条；hidden:超过范围的隐藏（文字会显示不全）2. 增加div清除浮动：在被包含的元素下面，此例中为
(一)建表规约1. 【强制】表达是与否概念的字段，必须使用 is_xxx 的方式命名，数据类型是 unsigned tinyint（ 1 表示是， 0 表示否）。说明： 任何字段如果为非负数，必须是 unsigned。注意： POJO 类中的任何布尔类型的变量，都不要加 is 前缀，所以，需要在 resultMap 设置从 is_xxx 到 Xxx 的映射关系。数据库表示是与否的值，使用 tinyint 类型，坚持 is_xxx 的命名方式是为了明确其取值含义与取值范围。正例： 表达逻辑删除的字段名 is_deleted， 1 表示删除， 0 表示未删除。2. 【强制】表名、字段名必须使用小写
view class="item"
view class="skeleton-image animated-background" /view
view class="skeleton-right"
view class="title animated-background" /view
view class="description animated-background" /view
/view
/view
.item{
width: 700rpx;
height: 100rpx;
margin: 10rpx auto;
di
在使用 flex 布局时，设置 justify-content: space-between，如果一行有三个 div，那最后一行如果不满三个元素，就会出现下面的情况，如何使最后一个 div 向左对齐呢。有两种方法：方法一：这种方法的缺点是，最后一个 div 左外边距是0。div:after {
content: "";
flex: auto;
}
方法二：创建几个空的 div，貌似这种方法最合适了 div
div class="item" /div
div class="item" /div
div class="item" /div
div cl
今天，写篇文章介绍一下 RESTful API 中的动词覆盖吧。在开发各种小程序的时候，总是会遇到不能正常支持 HTTP 请求的平台，比如支付宝小程序只支持 GET 和 POST 请求，这时候充分利用 HTTP 请求方法的 RESTful API 就会遇到问题，不支持 PUT, PATCH, DELETE 请求，该怎么办呢？嗯，使用动词覆盖。什么是动词覆盖我最初遇到不支持全部 HTTP 请求的时候，解决方案是修改 API 路径，比如 DELETE /user/:id 时，我的方案是 POST /user/:id/delete。后来看了阮一峰的《RESTful API 最佳实践实践 》，才明白有
场景1，有些用户很调皮，快速多次点击一个按钮。2，用户不必特地捣乱，他在一个正常的操作中，都有可能在一个短的时间内触发非常多次事件绑定程序。比如页面绑定的 resize 事件。分析怎么解决？函数节流就是一种办法。函数节流，简单地讲，就是让一个函数无法在很短的时间间隔内连续调用，只有当上一次函数执行后过了你规定的时间间隔，才能进行下一次该函数的调用。函数节流的原理挺简单的，估计大家都想到了，那就是定时器。当我触发一个时间时，先 setTimout 让这个事件延迟一会再执行，如果在这个时间间隔内又触发了事件，那我们就 clear 掉原来的定时器，再 setTimeout 一个新的定时器延迟一会执行
遍历目录遍历目录是操作文件时的一个常见需求。比如写一个程序，需要找到并处理指定目录下的所有JS文件时，就需要遍历整个目录。递归算法遍历目录时一般使用递归算法，否则就难以编写出简洁的代码。递归算法与数学归纳法类似，通过不断缩小问题的规模来解决问题。以下示例说明了这种方法。function factorial(n) {
if (n === 1) {
return 1;
} else {
return n * factorial(n - 1);
}
}
上边的函数用于计算 N 的阶乘（N!）。可以看到，当 N 大于 1 时，问题简化为计算 N 乘以 N-1
代码示例：html{
-webkit-filter:grayscale(100%);
-moz-filter:grayscale(100%);
-ms-filter:grayscale(100%);
-o-filter:grayscale(100%);
filter:grayscale(100%);
filter:url("data:image/svg+xml;utf8, svg xmlns=\'http://www.w3.org/2000/svg\' filter id=\'grayscale\' feColorMatrix t
MySQL在5.5.3之后增加了这个utf8mb4的编码，mb4就是most bytes 4的意思。之前 MySQL 的 utf8 只支持最长三个字节的 UTF-8字符，也就是 Unicode 中的基本多文本平面。低版本的MySQL支持的utf8编码，最大字符长度为 3 字节，如果遇到 4 字节的字符就会出现错误了。三个字节的 UTF-8 最大能编码的 Unicode 字符是 0xFFFF，也就是 Unicode 中的基本多文平面（BMP）。任何不在基本多文平面的 Unicode字符，都无法使用MySQL原有的 utf8 字符集存储。比如 Emoji 表情。utf8_unicode_ci比较准
Webpack file-loader 升级后 src= "[object Module]" 的解决方法，当 file-loader 的版本是 4.3.0 及以上，则需要在 webpack.config.js 中手动配置属性 esModule 。{
test: /\.(jpg|jpeg|png|gif|svg)$/,
loader: "file-loader",
options: {
esModule: false, // 默认值是 true，需要手动改成 false
}
}
esModuleType: Boolean Default: trueBy de