Ember.js

Ember SerializerEmberjs 默认使用 JSONAPISerializer ，在我们的项目中也是使用JSONAPISerializer.所以只是涉及关于 JSONAPISerializer 的相关内容。 @[TOC] 前后端通信协议在目前的版本中，后端我们使用 大驼峰法命名，但是前端基本使用都是 驼峰法，导致有所差异，在数据获取展示过程中，需要统一 key 的名称。这时就可以使用 keyForAttribute 这个方法来实现我们的需求，比如： // 后端数据{ 'data': [{ 'type': 'people', 'id': '123', 'attributes': { 'FirstName': 'Jeff', 'LastName': 'Atwood', 'Birthday': new Date().getTime() } }, { 'type': 'people', 'id': '124', 'attributes': { 'FirstName': 'Yehuda', 'LastName': 'Katz', 'Birthday': new Date('2011-11-11 11:11:11').getTime() } }]};而在前端 我们定义的属性名为: // person/model.jsimport DS from 'ember-data';export default DS.Model.extend({ firstName: DS.attr('string'), lastName: DS.attr('string'), birthday: DS.attr('date')});前端使用的是 常用的驼峰命名法，在这样的情形下(前后端属性名字不一致)，我们就需要修改向后端申请的属性名称来将后端数据合理的传递到我们前端定义的属性名上来： ...

Emberjs 通过 axios 下载文件摘要： 目前项目中需要与后端合作，通过发送 GET 请求，后端返回文件流，前端进行文件的下载。使用到的技术有： Emberjsaxios思路接到这个需求的话，想着使用创建 a 链接，然后模拟点击 a 链接来完成下载，但是情况不是这样的。后端有多于一个的下载接口，首先是生成下载文件的接口， 这个接口主要是返回 需要下载的文件的name 以及相应的接口地址。而下载的文件可能不止一个，同时，对文件接口地址发送 GET 请求，会返回文件流，但是我们需要的是 CSV 格式的文件，所以想到通过 axios 来实现这个需求。 具体做法既然方向确定了，那就是去做了。 在项目中安装插件/导入 axios现在 Emberjs 封装好的 axios 插件 - ember-axios ，使用 ember install axios。这个插件没有文档，所以只能看源码，还好源码比较简单，就是简单的将 axios 的一些方法封装成一个 service 内的方法。 在项目文件中引入 axios安装后在 Emberjs 项目中将此 service 引入近来 import { inject as service } from '@ember/service';export default Controller.extend({ // ... axios: service() // ...});这样即可使用这个插件中封装的一些 axios 的方法。 使用之前也说过当前项目需要先发送一个请求，请求文件的接口地址。返回的值的格式为： { "fileNames":[ "filename=downloadFile1.csv", "filename=downloadFile2.csv" ], "status":"ok"}可以看到，如我们所想的那样，返回的并不一定是单个文件的地址，所以我们在接收到这个数据后： ...

Ember JSONAPIAdapter目前 Emberjs 框架中使用 JSONAPIAdapter 为默认的 adapter，遵循 JSONAPI 的通信标准。目前本公司也默认使用的是此 adapter，所以一下 api 均是在此基础上。 另如无特殊说明，文内的文件结构均是在 Pods 目录结构下的。Adapter在 Ember Data 中，adapter 决定了如何向后端传递数据，提供了一些可以设置的接口，如 格式化请求的URL ，设置请求的header 等。 在Emberjs 项目中，你可以设置顶层的 application/adapter.js 也可以在每个对应的 model(pods文件目录)的文件中创建针对单个model的adapter:modelName/adapter.js。其中针对单个的 adapter.js的优先权大于 application/adapter.js。 URL Conventions在 Ember Data 中默认使用的 DS.JSONAPIAdapter 中，如果要请求数据，可以在route.js中： // route.js model() { return this.get('store').findAll('post'); }上面的请求默认发向的 url 为/posts，也就是 JSONAPIAdapter 会默认为请求路径转换为复数。 提供了几个默认的请求： ActionHTTP VerbURLFind 1GET/posts/123Find All 2GET/postsUpdate 3PATCH/posts/123Create 4POST/postsDelete 5DELETE/posts/123请求过程中的复数转换上文也提到了，在使用 JSONAPIAdapter 过程中，会进行复数的转换，包括对 modelName也是，会进行转换，比如说 我们请求: model(){ return this.get('store').findAll('campus'); }在 JSONAPIAdapter 中会发送请求到 /campus 中，而寻找的 modelName 则是campu 这显然不对，所以我们需要对特殊字词进行处理。 在 Ember Data 中使用的是 Ember Inflector 控制的复数转换。同样的，我们也需要对它进行设置(pods目录下)： ...

Ember Guide1. 初始化一个新的项目1.1 生成项目ember new ember-guide --no-welcome --yarn其中--no-welcome 用于跳过ember-cli 初始化项目时自带的 welcome 组件。--yarn 是在初始化完成之后，就进行依赖的安装。 在命令行中运行 ember s之后，打开localhost:4200 之，就能看到 Welcome to Ember这就说明Ember的项目已经成功启动。 1.2 配置为Pods目录目前项采取的是Pods目录，具体的设置为： // ./.ember-cli{ "disableAnalutics": true, "usePods": true}// ./config/environment.jsmodule.exports = function(environment) { let ENV = { modulePrefix: 'ember-guide', podModulePrefix: 'ember-guide/modules', environment, rootURL: '/', locationType: 'auto', }}其中 ember-demo/modules 将在 app 文件夹下生成 modules文件夹，此为 pod 目录中的主文件夹，可自定义名称。 此后使用 ember g 命令即会在 app/modules 文件夹下生成相应的 文件。 删除 app/routes 文件夹;删除 app/controllers 文件夹;删除 app/components 文件夹;删除 app/models 文件夹;删除 app/templates 文件夹;删除 app/templates 文件夹之后，别忘记重新生成 application 路由。 ...