API 正变得越发的标准化，因此，Mirage 引入了 路由缩写 shoorthands 的概念来替代许多自定义路由处理器的编写，从而可以更轻松的编写，也极大地简化了路由处理器的定义。

例如，这个非常标准的函数式路由，它将返回一个与路径同名的数据集合：

1
2
3

this.get('/movies', (schema, request) => {
  return schema.movies.all()
})

同时，也可以使用路由缩写来完成相同的工作：

1

this.get('/movies')

这是一个完整的路由。它能从路径的最后一部分推断模型名称，并返回同名的数据集合。

如果通过查询 ID 得到单条数据，也是非常简单的：

1

this.get('/movies/:id')

使用路由缩写同样可以完成新建或者编辑数据。这也是一个标准的路由，它使用请求体中的一个属性 movie 来创建一条新的数据：

1
2
3
4
5

this.post('/movies', (schema, request) => {
  let attrs = JSON.parse(request.requestBody).movie

  return schema.movies.create(attrs)
})

同样的工作也可以使用缩写来完成：

1

this.post('/movies')

路由缩写使用基于 HTTP 动词的默认状态码:

• GET, PATCH/PUT, DEL 200
• POST 201

阅读更多

路由处理器（Route handlers）

前一章节已经快速了解过路由处理器的工作模式，这一节着重了解路由处理器中一些参数的意义。先从路由的两个定义方法开始。

路由处理器的定义（Define route handlers）

最简单的方法是直接在路由的第二个参数返回一个对象作为响应的数据，为了便于记忆，可以称之为对象式：

1

this.get("/movies", { movies: ["Interstellar", "Inception", "Dunkirk"] })

接下来是平时比较常用的函数式路由：

1
2
3

this.get("/movies", (schema, request) => {
  return ["Interstellar", "Inception", "Dunkirk"]
})

函数式路由可以灵活方便的访问 Mirage 的数据层和请求对象。大多数时候都使用函数式路由。

你可以使用任何 HTTP 动词来定义路由，它们的定义方法都是一样的，第一个参数表示 API URL，第二个参数通常是一个用来返回响应数据的函数。

1
2
3
4
5
6
7

// this.[HTTP verbs].(API_URL, () => {})
this.get('/movies', () => { ... });
this.post('/movies', () => { ... });
this.patch('/movies/:id', () => { ... });
this.put('/movies/:id', () => { ... });
this.del('/movies/:id', () => { ... });
this.options('/movies', () => { ... });

阅读更多

最近在项目中使用了 Mirage ,看着官方文档，做了一些笔记。文中的内容都来自于官方文档，包括例子，并没有完整翻译官方文档，结合自己的使用体会做了增删，就是翻译了又没完全翻译。

简介

Mirage 是一个让前端开发人员模拟后端 API 的 JavaScript 库。用人话说就是：Mirage 是一个 Mock 服务器。

Mirage 在浏览器中运行。它能拦截 Javascript 应用程序发出的任何 XMLHttpRequest 或 fetch 请求，并允许模拟这些请求所对应的响应结果。

Mirage 除了拦截 HTTP 请求外，还提供了一个模拟数据库和一系列辅助函数，可以轻松模拟后端服务。

Mirage 借鉴了典型的 API 服务端框架的概念，拥有例如：

• 处理 HTTP 请求的路由（routes）
• 数据库（database）和数据模型（models），用于存储数据和定义数据之间的关系
• factories(模型工厂) and fixtures for stubbing data(数据填充)
• 用于格式化 HTTP 响应的序列化函数（serializers）

安装

Mirage 很容易可以集成到现有项目中。

1
2
3

npm install --save-dev miragejs
# or
yarn add --dev miragejs

概览

Mirage 可以通过 路由处理器（route handlers）轻易的模拟一个 API 请求的响应结果。

阅读更多

最近因为沉迷游戏，长期在游戏本上出生入死，手里那台用来聊天的 Mac 就晾在边上好久没掀开过了。想着手里几个小项目换电脑搞来搞去也挺麻烦的，所以决定在 windows 本上还原一下在 Mac 上的工作环境。

在 Mac 上或者远程服务器上，我们的开发、部署环境基本都是类 Unix 的，所以接下来我们需要把 WSL2 安装上，并且给系统安装一个不太拉胯的终端，以及配置 wsl 中系统的使用环境。

选择在 wsl 中开发，还有一个重要的原因，就是 windows 和 Unix 的换行符是不一样的，可能会带来一些编码方面的问题，比如 git 冲突。

安装 WSL

微软把 WSL 叫做 适用于 Linux 的 Windows 子系统 ，我们只要知道这是一个跨操作系统的 linux 环境就好了，详细的说法还是看 wsl 的文档。从 windows 10 开始，系统提供了 WSL 集成，发展到现在的 windows 版本，已经有了 WSL 2 ，推荐升级到 WSL 2，现在能与系统更好的结合工作并且提供了完整的 Linux 内核，docker desktop 现在也与 WSL2 高度适配。

安装 WSL 2 需要满足 windows 10 的系统版本要求，X64 系统需要版本 1903 或更高版本，采用 内部版本 18362.1049 或更高版本。

为了避免一些麻烦，以下命令均在管理员身份的 PowerShell 中运行。

阅读更多

起因

事情是这样的，项目里需要对路由和按钮配置权限，所以会涉及到动态输出路由的问题，然后前端用的是 vue-element-admin ，看项目里是支持动态加载的，但是官方文档里对这块说得…算是语焉不详吧。

然后我翻了翻 issue 挺多人在问的，也有不少人给出了解决方案。嗯，我权当整理一下，怕年纪大容易忘。

思路

因为 vue-element-admin 主要是用于后台管理的框架，所以访问流程大致是这样子的：

1. 发送登录请求
2. 验证成功，返回 token
3. 根据 token 返回当前用户信息，其中包括当前用户的角色，以及所属角色能访问的路由
4. 前端创建一个路由组件映射表，主要作用是将后端返回的 component 的值替换为可执行的对象
5. 将清洗过的路由表和前端存在的路由表合并
6. 重载路由表，完成

其实核心在上面的第 4 条。根据项目 issue 里作者和其他人提供的方法，有两种映射表的创建方式：

1. 前端创建创建一份静态的路由组件映射表
2. 根据后端返回的路由表动态替换

我个人倾向于向后端录入一份路由表，然后再动态匹配。这样子只需要维护一份路由表，而不是一份路由表和一份路由组件映射表。

阅读更多

起因

最近在学 scrapy 爬虫，顺手从微博上爬了张子枫和谭松韵的微博相片。然后就想，要不就顺手用爬的相片做个视频出来？

需求＆思路

我的思路是这样子的：

1. 这个视频是 1080p 30fps；
2. 我要给这个视频选一首好听的 BGM，然后每一幅相片都按 BGM 的节拍来显示；
3. 视频长度和 BGM 长度匹配；
4. 获取相片并将相片分辨率处理成和视频一样；
5. 按节拍创建剪辑片段；
6. 合并剪辑，生成视频

准备工作

1. 由于我机器上使用的是 python 3 的环境，所以需要有 python 3。
2. 建议在 python 的虚拟环境中运行这个项目。
3. 在虚拟环境中安装 moviepy librosa click三个包。
4. 如果要加字幕，还需要安装 imagemagick。
5. 如果需要对字幕做分词处理，再安装一个 jieba。

阅读更多