# 前端
# fancy
npm i fancy-components
# json-server30秒无代码搭建一个完整的REST API服务
# 介绍几款优秀的前端UI框架
- LayUI
- 面向全层次的前后端开发者，低门槛开箱即用的前端 UI 解决方案
- JEUI
- 浏览器兼容非常牛皮，能兼容IE8以上的浏览器
- DWZ
- DWZ富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架. 设计目标是简单实用,快速开发,降低ajax开发成本。
- MDUI
- 只需懂一点 HTML、CSS、JS 的基础知识，就能使用 MDUI。
- ElementUI
- JqueryWeUI
- IViewUI
- iViewui一套基于 Vue.js 的高质量 UI 组件库
- IViewWeapp
- Mint UI
- Mint UI 包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要
- YDUI
- AMaze
# moco
# 下载jar包，编写json文件，并至于同目录
新建 hello.json 文件，写入以下内容
json 文件的最层是一个 [] 数组，里面可以封装多个 API（示例只有一个 API）
因为 json 配置文件不支持注释，所以这个 API 的注释你可以写到 description 里面
[{
"description": "moco 快速开始示例",
"request": {
"uri": "/hello"
},
"response": {
"text": "Hello GitHub"
}
}]
2
3
4
5
6
7
8
9
# 运行项目
java -jar moco-runner-1.1.0-standalone.jar http -p 9999 -c hello.json
http：选择服务类型（有 http、https、socket）-p 9999：设置服务端口 9999-c hello.json：设置配置文件路径（刚刚新建的配置文件）
# 效果展示
# 但是
一个合格的后端 API 应该能包括：请求方法、请求 URL、请求参数、请求头、请求体、返回状态码、返回提示信息、返回头和返回体等内容。
request可以包含请求的所有内容response可以包含返回的所有内容
[{
"description": "模拟一个基本的 RESTful API",
"request": {
"uri": "/hello2",
"method": "post",
"headers": {
"Content-Type": "application/json",
"Accept": "application/json",
"token": "header.playload.signature",
"Accept-Charset": "utf8"
},
"cookies": {
"login": "true"
},
"json": {
"name": "zhangsan",
"age": 13
}
},
"response": {
"json": {
"message": "测试成功"
},
"latency": {
"duration": 2,
"unit": "second"
},
"headers": {
"Content-Type": "application/json",
"token": "new-header.new-playload.new-signature"
},
"cookies": {
"login": {
"value": "true",
"domain": "localhost",
"secure": "true",
"httpOnly": "true",
"path": "/"
}
}
}
}]
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
method：请求方法headers：请求头cookies：请求 Cookiesjson：请求体的一种类型（还有 froms 表单等类型）response返回值的 headers 、json、cookies 也类似latency模拟服务器卡顿（因为模拟的后端 API 返回数据几乎是瞬间的，这里我们让其卡顿 2 秒）
# 附件下载
有时候我们需要模拟文件下载，moco 如何实现呢？【文件都在同一个目录中】
[{
"description": "moco 附件下载",
"request": {
"uri": "/hello"
},
"response": {
"attachment":{
"filename": "demo.txt",
"file": "demo.txt"
}
}
}]
2
3
4
5
6
7
8
9
10
11
12
# 轮询数据
如果我们刷新页面想获得不同的内容 moco 如何实现呢？
[{
"description": "moco 轮询数据",
"request": {
"uri": "/hello"
},
"response": {
"cycle": [{
"text": "hello 1"
},
{
"text": "hello 2"
},
{
"text": "hello 3"
}
]
}
}]
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
访问 localhost:9999/hello 会依次得到如下内容
hello 1
hello 2
hello 3
hello 1
hello 2
...
2
3
4
5
6
# 重定向
有时候我们想重定向页面 moco 如何实现呢？
[{
"description": "moco 重定向",
"request": {
"uri": "/hello"
},
"redirectTo": "https://hellogithub.com"
}]
2
3
4
5
6
7
访问 http://localhost:9999/hello 会自动重定向到 https://hellogithub.com
# 正则表达式
moco 还支持一些运算符，比如正则表达式。
[{
"description": "moco 正则表达式",
"request": {
"uri": {
"match": "/hello/\\w*"
}
},
"response": {
"text": "Hello GitHub"
}
}]
2
3
4
5
6
7
8
9
10
11
可以通过正则表达式匹配的链接访问，比如
- localhost:9999/hello/jarvan
- localhost:9999/hello/bmft
# 使用模板
有的时候我们的返回参数依赖于请求参数（比如编码类型），这个时候我们就可以用 template 模板来实现，我们可以在模板中通过 req 来表示发送的请求 。
{
"description": "moco 使用模板",
"request": {
"uri": "/hello",
"method": "post"
},
"response": {
"text": {
"template": "${req.method}"
}
}
}
2
3
4
5
6
7
8
9
10
11
12
返回的值是
{
"text": "post"
}
2
3
# eadmin
# Tesseract
# For v2版本
npm install tesseract.js
yarn add tesseract.js
# For v1版本
npm install tesseract.js@1
yarn add tesseract.js@1
2
3
4
5
6
7
import Tesseract from 'tesseract.js';
Tesseract.recognize(
'url.png',
'eng',
{ logger: m => console.log(m) }
).then(({ data: { text } }) => {
console.log(text);
})
2
3
4
5
6
7
8
9
import { createWorker } from 'tesseract.js';
const worker = createWorker({
logger: m => console.log(m)
});
(async () => {
await worker.load();
await worker.loadLanguage('eng');
await worker.initialize('eng');
const { data: { text } } = await worker.recognize('url.png');
console.log(text);
await worker.terminate();
})();
2
3
4
5
6
7
8
9
10
11
12
13
14
# Tesseract使用场景
# Moveable
是一款原生零依赖的 javaScript 插件，使用这款插件，可以让指定的 HTML 元素 随意拖拽 、调整大小、缩放、旋转 、变形扭曲、分组，甚至拖拽时显示设计参照线。可谓是一款功能强大的拖拽插件，帮你实现复杂的 WEB 交互应用。
这款插件很方便与现有项目集成，支持原生项目集成、React、 Preact、 Angular、 Vue、 Svelte等前端框架集成。
# fslightbox
- 简单易用，功能强大，
- 支持全屏展示，除了可以展示图片，还可以添加文字和视频，
- 支持缩略图片，同时方便集成到现有项目中，比如react、vue项目。
# indigo_player
- 支持选择不同分辨率的视频
- 支持字幕功能
- 支持倍速播放
- 支持画中画播放
- 支持视频中添加图片和文字
- 支持 MPEG-DASH 流媒体格式（ MPEG-DASH + DRM ）
- 支持 HLS (HTTP Live Streaming) 动态码率自适应技术
- 支持穿插谷歌和自定义广告
- 根据你的网络调整自适应的分辨率
- 自定义视频封面
- 自定义键盘功能键控制播放器
- 支持更改视频容器的长款比例初始
- 自定义视频播放的位置
# Viewer
🔝🔝back | github | jquery_github
# Viewer安装
npm install viewerjs
<link href="/path/to/viewer.css" rel="stylesheet">
<script src="/path/to/viewer.js"></script>
2
# Viewer用法
new Viewer(element[, options])
<div>
<img id="image" src="picture.jpg" alt="Picture">
</div>
<div>
<ul id="images">
<li><img src="picture-1.jpg" alt="Picture 1"></li>
<li><img src="picture-2.jpg" alt="Picture 2"></li>
<li><img src="picture-3.jpg" alt="Picture 3"></li>
</ul>
</div>
2
3
4
5
6
7
8
9
10
11
// import 'viewerjs/dist/viewer.css';
import Viewer from 'viewerjs';
// View an image
const viewer = new Viewer(document.getElementById('image'), {
inline: true,
viewed() {
viewer.zoomTo(1);
},
});
// View a list of images
const gallery = new Viewer(document.getElementById('images'));
2
3
4
5
6
7
8
9
10
11
12
13
# Fabric
Fabric 是一个强大而简单的 JS Canvas 库，我们能通过使用它实现在 Canvas 上创建、填充图形、给图形填充渐变颜色。 组合图形（包括组合图形、图形文字、图片等）等一系列功能。简单来说我们可以通过使用 Fabric 从而以较为简单的方式实现较为复杂的 Canvas 功能
# QRCanvas
# QRCanvas安装和使用
- 安装
npm install qrcanvas
//或者
yarn add qrcanvas
2
3
- 用法
1、es6的模块化用法
import { qrcanvas } from 'qrcanvas';
2、浏览器中使用
<div id="qrcode"></div>
<script src="https://cdn.jsdelivr.net/npm/qrcanvas@3"></script>
const canvas = qrcanvas.qrcanvas({
data: 'hello, world'
});
document.getElementById('qrcode').appendChild(canvas);
2
3
4
5
6
3、在NodeJS中使用
const fs = require('fs');
const { qrcanvas } = require('qrcanvas/lib/qrcanvas.node.js');
const canvas = qrcanvas({
data: 'hello, world'
});
// canvas is an instance of `node-canvas`
canvas.pngStream().pipe(fs.createWriteStream('qrcode.png'));
2
3
4
5
6
7
# QRCanvas_React和Vue版本
npm install qrcanvas-vue
//或者
yarn add qrcanvas-vue
2
3
<template>
<QRCanvas :options="options" @updated="onUpdated" />
</template>
<script>
import { QRCanvas } from 'qrcanvas-vue';
export default {
components: {
QRCanvas,
},
data() {
return {
options: {
data: 'hello',
},
};
},
methods: {
onUpdated() {
console.log('updated');
},
},
};
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
npm install qrcanvas-react
//或者
yarn add qrcanvas-react
2
3
import { QRCanvas } from 'qrcanvas-react';
import ReactDOM from 'react-dom';
const options = { data: 'hello, world' };
ReactDOM.render(<QRCanvas options={options} />, document.getElementById('app'));
2
3
4
# qier_player
一款基于 React 的轻量级在线视频播放器组件，界面简洁、操作流畅具有视频播放器的基础功能。方便你在项目中轻松添加播放器组件，实现视频播放功能。如果你嫌原生 video 功能太少、操作太傻、界面太简陋，那这个播放器就是你的菜。你还能够通过阅读源码学习到关于生命周期执行顺序、父子组件传值的方式、以及如何利用定时器进行一些实时的状态更新的技巧
# loader
loaders.css是Github上一个使用纯粹的css实现的开源loading动画库，完全用CSS编写的加载动画的集合。每个动画仅限于CSS属性的一小部分，以避免复杂的绘画和布局计算。
# loader衍生产物
Loaders.css衍生了很多适用于其它平台或框架的优秀库，这些都是受Loaders.css的启发而产生的
React
Vue
Angular
ember
iOS
Android
# progress
# Notyf
Notyf是一个简单，响应迅速，兼容性强，无依赖，原生的JavaScript Toast库
# flowchart
flowchart.js是在
浏览器和终端中运行的流程图DSL和SVG渲染。节点和连接是分别定义的，因此可以重复使用节点，并可以快速更改连接。也可以在DSL中对节点和连接器样式进行细微的更改。
# drawIO
# sharp
sharp 是 Node.js 平台上相当热门的一个图像处理库，其实际上是基于 C 语言编写 的 libvips 库封装而来，因此高性能也成了 sharp 的一大卖点。sharp 可以方便地实现常见的图片编辑操作，如裁剪、格式转换、旋转变换、滤镜添加等。
# Topology
Topology是开源、易扩展、方便集成的在线绘图（微服务架构图、网络拓扑图、流程图、活动图、时序图、类图等）工具。基于 typescript + canvas 实现的开源在线绘图的引擎 Topology。采用引擎 + 图形库中间件的思路能够方便、快速的扩展、集成到前端项目
# Topology如何快速集成到自己的项目
# ZRender
# Zdog
# kendo
Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四个控件。Kendo UI for jQuery是创建现代Web应用程序的最完整UI库。
Kendo UI Filter小部件是一个统一的控件，用于筛选具有数据源的数据绑定组件
Filter的用户界面对于没有内置UI进行筛选但需要提供筛选器选项的数据绑定组件很有用，例如ListView，Chart和Scheduler
# 初始化Filter
要使用过滤器，请使用一个空的"div"元素，并在初始化脚本中提供其设置。
<div id="filter"></div><ul id="listView"></ul>
<script type="text/x-kendo-template" id="item">
<li>
<strong>#= name #</strong>, aged #= age #, is on vacation: #= isOnLeave #
</li>
</script>
<script>
$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
data: [
{ name: "Jane Doe", age: "25", isOnLeave: false },
{ name: "John Doe", age: "33", isOnLeave: true },
{ name: "John Smith", age: "37", isOnLeave: true },
{ name: "Nathan Doe", age: 42, isOnLeave: false }
],
schema: {
model: {
fields: {
name: { type: "string" },
age: { type: "number" },
isOnLeave: { type: "boolean" }
}
}
}
});
$("#filter").kendoFilter({
dataSource: dataSource,
expressionPreview: true, // Shows a text preview of the filter expression.
applyButton: true, // Shows the built-in Apply button.
fields: [ // Defining the fields is not mandatory. Otherwise, they will be taken from the data source schema.
// If you define the fields, their names and types must match the data source definition.
{ name: "name", type: "string", label: "Name" },
{ name: "age", type: "number", label: "Age" },
{ name: "isOnLeave", type: "boolean", label: "On Vacation" }
],
expression: { // Defining an initial filter expression is not required.
logic: "and",
filters: [
{ field: "age", value: 30, operator: "gte" },
{ field: "name", value: "Doe", operator: "contains" }
]
}
}).data("kendoFilter").applyFilter();
// Chain the method call to immediately apply filtering after the widget initialization because an initial filter is set.
$("#listView").kendoListView({
dataSource: dataSource,
template: kendo.template($("#item").html())
});
});
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
# 功能和特点
- 设置运算符
- 保持状态
- 全球化
- 引用现有实例
要引用现有的Filter实例，请使用jQuery.data（）方法。 建立引用后，请使用Filter API来控制其操作。
var filter = $("#theFilter").data("kendoFilter");
# VvvebJs
VvvebJs是一个
开源的网页拖拽自动生成的JavaScript库，你可以以简单拖拽的方式生成自己需要的网页样式，内置jquery和Bootstrap，你可以拖拽相关的组件进行网页的构建，非常的方便，而且可以实时修改代码，功能丰富，使用简单，界面友好，特别适合一些专注于展示的网页设计
# muuri
# murri特性
- 可定制的布局
Muuri的布局系统允许将网格项目以几乎任何可以想象的方式放置在容器中。
- 拖放
内置支持拖放网格项目。
- 广泛且丰富的API
具有足够方法和事件的扩展API，可以完全控制库的行为。
- 快速的动画
快速定位，显示和隐藏由Web Animations驱动的动画。
- 良好的浏览器支持
在所有现代浏览器和IE9 +（需要用于Web动画的polyfill和请求动画框架）中均可使用。
- 完全开源
Muuri MIT licensed
# Deno 将于 5 月 13 日发布 1.0 版本，Node.js 会逐渐失宠吗
Deno 是 Node.js 之父 Ryan Dahl 在 2018 年 5 月发布的开源项目，其产生的背景在于 Ryan Dahl 认为当下的 Node.js 太难用了。一般人说出这种话可能会被 Diss 你行你上，但这对 Ryan 来说并不是什么难题。虽然 Deno 1.0 的版本发布数次推迟，但 Ryan 近日表示经过详细的讨论后，确认了最终发布的日期：2020 年 5 月 13 日，这也将是 Deno 项目启动的两周年纪念日。
# 不得不佩服，美观小巧的网页内容编辑器——ContentTools
ContentTools是一个美观小巧的网页内容工具（一个JS库），具备所见即所得（WYSIWYG）的编辑器功能，只需几个简单的步骤，即可将ContentTools添加到任何HTML页面。
# 实时输出前端代码，折腾大半年的开源项目 sparrow-js
# 超优秀 HTML5 甘特图类库GanttChart
官网：https://dhtmlx.com/docs/products/dhtmlxGantt/ | https://github.com/DHTMLX/gantt
# 基于 Vue+Openlayer 地图应用类库xdh-Map
内置了百度、高德、OSM，并支持与方正、超图、山海经纬、航天精一等PGIS厂商对接
https://gitee.com/newgateway/xdh-map | 文档
<template>
<my-map
adapter="Baidu"
:zoom="12"
:center="[180, 66]"
:drag-pan="false"
:mouse-wheel-zoom="true"
@click="handleMapClick"
>
</my-map>
</template>
<script>
import {MyMap} from '$ui/map'
export default {
components: {
MyMap
},
methods: {
handleMapClick(e) {
console.log('click', e)
},
}
}
</script>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25