29、Ember 数据处理：适配器、序列化器与转换

Ember 数据处理：适配器、序列化器与转换

概述

在开发应用程序时，数据的输入和输出至关重要。连接到数据源是开发应用的重要环节，否则应用将只是一个没有数据展示的复杂表单、事件和列表系统。本文将介绍在 Ember 中连接数据源的基础知识，包括适配器、序列化器和转换的使用，还会涉及内容安全策略和 Ember CLI Mirage 的相关内容。

适配器

适配器的作用

适配器是应用程序与数据源之间的翻译器，负责处理数据的请求和响应。Ember Data 提供了内置的适配器对象，如 JSONAPIAdapter 和 RESTAdapter，以处理常见的数据场景。

JSONAPIAdapter 的使用

JSONAPIAdapter 用于与 REST API 进行通信，它会将模型名称和属性数据添加到域名的相对路径中。为了生成 Ajax 请求的特定 URL，适配器需要 host 和 namespace 属性。

以下是创建应用程序适配器的步骤：
1. 生成应用程序适配器：

ember g adapter application

2. 打开 app/adapters/application.js 文件，声明 host 和 namespace：

import JSONAPIAdapter from 'ember-data/adapters/json-api';
export default DS.JSONAPIAdapter.extend({
  host: 'https://bnr-tracker-api.herokuapp.com',
  namespace: 'api'
});

从 API 检索数据

接下来，需要通过 store 从 API 检索数据。以检索证人数据为例，步骤如下：
1. 打开 app/routes/witnesses.js 文件，删除虚拟数据，替换为对检索方法的调用：

model(){
  return this.store.findAll('witness');
}

2. 从终端重新启动应用程序：

ember server

3. 在浏览器中访问 http://localhost:4200/witnesses 。

适配器的定制

适配器有许多方法，可以将数据从 API 传输到 store，并传递到路由、控制器和模板。可以根据需要定制适配器，处理额外的数据，如身份验证或请求头。一些需要注意的方法和属性包括： ajaxOptions 、 ajaxError 、 handleResponse 和 headers 。

其他数据场景的适配器

Ember 以前有用于其他数据源场景的内置适配器，如 localStorage 和 fixture 数据。现在这些适配器成为了插件，可以通过 Ember CLI 添加。

适配器工作流程

graph LR
    A[API] --> B[适配器]
    B --> C[store]
    C --> D[路由、控制器、模板]

内容安全策略

Ember 使用 JavaScript 中的新安全层 Content Security Policy 来检测跨源请求。Ember CLI 有一个 contentSecurityPolicy 对象，可以添加相应的信息。

以下是一个 contentSecurityPolicy 对象的示例：

module.exports = function(environment) {
  // config/environment.js
  ENV.contentSecurityPolicy = {
    'default-src': "",
    'script-src': "",
    'font-src': "",
    'connect-src': "",
    'img-src': "",
    'style-src': "",
    'media-src': null
  }
}

每个安全策略行都会为每种类型的请求创建一个白名单。 default-src 是一个通用设置，最初设置为 null，以强制程序员对所需的设置进行白名单处理。

安全策略设置说明

设置项	说明
default-src	通用设置，最初为 null，需手动白名单
script-src	用于应用程序域外部的脚本请求
connect-src	用于与外部数据源的连接请求
img-src	用于图片请求
style-src	用于样式请求
media-src	用于媒体请求

序列化器

序列化器的作用

当数据进出时，JSON 结构会被序列化和反序列化。适配器使用序列化器将数据进出 store，以构建和解析请求/响应数据。

创建序列化器

可以使用以下命令创建序列化器：

ember g serializer [application or model name]

这将创建一个包含样板代码的序列化器文件，例如：

import DS from 'ember-data';
export default DS.JSONAPISerializer.extend({
});

序列化器的定制

如果 API 不符合 JSONAPI 规范或存在特殊情况，可以定制序列化器。一些需要研究的方法包括： keyForAttribute 、 keyForRelationship 、 modelNameFromPayloadKey 和 serialize 。

keyForAttribute 方法示例

import Ember from 'ember';
import DS from 'ember-data';
var underscore = Ember.String.underscore;
export default DS.JSONAPISerializer.extend({
  keyForAttribute(attr) {
    return underscore(attr);
  },
  keyForRelationship(rawKey) {
    return underscore(rawKey);
  }
});

序列化器调试

可以在代码中添加 debugger 语句来检查数据请求的回调流程。

序列化器工作流程

graph LR
    A[数据输入/输出] --> B[序列化器]
    B --> C[适配器]
    C --> D[store]

转换

转换的作用

Ember Data 允许将 API 中的数据转换为应用程序所需的类型。Ember Data 有内置的转换方法，如 DS.attr('string') 、 DS.attr('boolean') 、 DS.attr('number') 和 DS.attr('date') 。

创建自定义转换

以下是一个基本的 DS.attr('object') 转换示例：

export default DS.Transform.extend({
  deserialize(value) {
    if (!Ember.$.isPlainObject(value)) {
      return {};
    } else {
      return value;
    }
  },
  serialize(value) {
    if (!Ember.$.isPlainObject(value)) {
      return {};
    } else {
      return value;
    }
  }
});

转换有两个方法： deserialize 和 serialize ，用于确保数据的类型符合模型的定义。

Ember CLI Mirage

解决 API 问题

在前端应用程序开发中，API 可能存在未创建、正在开发或受防火墙限制等问题。Ember CLI Mirage 是一个插件，可以代理对特定 API 路由的请求。

使用 Ember CLI Mirage

1. 安装插件：

ember install ember-cli-mirage

2. 在 config/environment.js 文件中添加环境变量以开启或关闭 Mirage：

if (environment === 'development') {
  ENV['ember-cli-mirage'] = {
    enabled: true
  }
}

3. 为证人（witness）和神秘生物（cryptid）端点添加工厂形式的假数据。可以从提供的示例资产中获取配置好的 app/mirage 目录。

挑战

• 内容安全挑战 ：安装插件并遵循控制台错误，确保应用程序的外部请求端点添加到安全策略中。
• Mirage 挑战 ：使用 Ember CLI Mirage 开发应用程序的 API 需求，在后端团队完成堆栈之前进行开发。

总结

通过本文的介绍，我们了解了 Ember 中适配器、序列化器、转换的使用，以及内容安全策略和 Ember CLI Mirage 的相关内容。这些工具和技术可以帮助我们更好地处理数据，开发出更安全、高效的应用程序。

视图和模板

视图和模板的概念

在应用开发中，视图在 MVC 架构里扮演着重要角色。这里的视图以模板形式呈现，模板借助 JavaScript 处理生成 HTML 元素，这样就能在不向服务器发起新请求的情况下对 DOM 进行更改。

创建模板文件并添加数据

要创建模板文件并添加从路由模型钩子中获取的数据，利用 Ember 内置的模板语言和辅助函数，只需在常规 HTML 语法基础上稍作操作就能创建模板。

操作步骤

1. 创建模板文件 ：按照应用需求创建对应的模板文件。
2. 添加数据 ：将从路由模型钩子获取的数据添加到模板中。

示例效果

完成上述操作后，能创建出类似如下的列表：

视图和模板工作流程

graph LR
    A[路由模型钩子数据] --> B[模板]
    B --> C[生成 HTML 元素]
    C --> D[更新 DOM]

模板开发注意事项

在开发模板时，要注意以下几点：
| 注意事项 | 说明 |
| ---- | ---- |
| 数据绑定 | 确保模板能正确绑定从路由模型钩子获取的数据 |
| 语法规范 | 遵循 Ember 模板语言的语法规范 |
| 性能优化 | 避免不必要的 DOM 操作，提高模板渲染性能 |

综合应用与实践

整体架构回顾

在整个应用开发过程中，适配器、序列化器、转换、内容安全策略、视图和模板等各个部分相互协作，共同构建出一个完整的应用。其整体架构如下：

graph LR
    A[API] --> B[适配器]
    B --> C[序列化器]
    C --> D[转换]
    D --> E[store]
    E --> F[路由、控制器]
    F --> G[模板]
    G --> H[视图]
    I[内容安全策略] --> B
    I --> C
    I --> D

实践步骤总结

1. 适配器配置 ：
   • 生成应用程序适配器： ember g adapter application
   • 配置 host 和 namespace：

import JSONAPIAdapter from 'ember-data/adapters/json-api';
export default DS.JSONAPIAdapter.extend({
  host: 'https://bnr-tracker-api.herokuapp.com',
  namespace: 'api'
});

2. 数据检索 ：在路由文件中使用 this.store.findAll 方法从 API 检索数据，如：

model(){
  return this.store.findAll('witness');
}

3. 内容安全策略设置 ：在 config/environment.js 文件中配置 contentSecurityPolicy 对象：

module.exports = function(environment) {
  // config/environment.js
  ENV.contentSecurityPolicy = {
    'default-src': "",
    'script-src': "",
    'font-src': "",
    'connect-src': "",
    'img-src': "",
    'style-src': "",
    'media-src': null
  }
}

4. 序列化器定制 ：根据 API 情况定制序列化器，如使用 keyForAttribute 和 keyForRelationship 方法：

import Ember from 'ember';
import DS from 'ember-data';
var underscore = Ember.String.underscore;
export default DS.JSONAPISerializer.extend({
  keyForAttribute(attr) {
    return underscore(attr);
  },
  keyForRelationship(rawKey) {
    return underscore(rawKey);
  }
});

5. 转换创建 ：创建自定义转换，如 DS.attr('object') 转换：

export default DS.Transform.extend({
  deserialize(value) {
    if (!Ember.$.isPlainObject(value)) {
      return {};
    } else {
      return value;
    }
  },
  serialize(value) {
    if (!Ember.$.isPlainObject(value)) {
      return {};
    } else {
      return value;
    }
  }
});

6. Ember CLI Mirage 使用 ：
   • 安装插件： ember install ember-cli-mirage
   • 配置环境变量：

if (environment === 'development') {
  ENV['ember-cli-mirage'] = {
    enabled: true
  }
}

7. 视图和模板开发 ：创建模板文件并添加数据，利用 Ember 模板语言和辅助函数生成视图。

未来展望

掌握这些技术后，我们可以进一步开发出功能更强大、性能更优越的应用程序。例如，可以实现数据的创建、编辑和删除功能，充分发挥 Ember Data、适配器和序列化器的优势，让数据在应用和 API 之间流畅交互。同时，持续关注 Ember 框架的更新和发展，不断优化应用的开发和性能。

总结

通过对适配器、序列化器、转换、内容安全策略、视图和模板等方面的学习和实践，我们能够构建出一个完整的 Ember 应用程序。在开发过程中，要根据实际需求灵活运用这些技术，不断优化和完善应用，以满足用户的各种需求。同时，积极参与社区交流和学习，获取更多的经验和资源，提升自己的开发水平。