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 请求的响应结果。

阅读更多

起因

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

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

思路

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

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

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

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

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

阅读更多