model是指数据层,也就是一个用于向用户展示的数据对象。考虑到前后端分离,其实可以认为展现内容与后端的DTO对象或者DVO对象是一一对应的。同时,model会通过json的形式以http请求的方式与服务器进行交互。但是,model的形式不一定是json的,其他的形式都是可以的。也就是说,model是持久化的。
这种方式下,ember本身提供了许多api,这也就是Ember data做的事情。Ember Data为你提供了更加简便的方式操作数据,统一管理数据的加载,降低程序复杂度。
Ember Data有几个重要的概念,分别为:models
、records
、adapters
、store
、serializer
.
models
个人认为,model这个类,应该和后端的DO或者是DTO对象是一一对应的。
model的定义,可以通过命令行方式:
ember g model <your-model-name>
则会创建一个app/models/<your-model-name>.js
的文件。其中就是model的主体,由若干个属性构成,如:
export default DS.Model.extend({
title: DS.attr('string'), // 字符串类型
flag: DS.attr('boolean'), // 布尔类型
timestamp: DS.attr('number'), // 数字类型
birth: DS.attr('date'), //日期类型
addr: DS.attr(), //json类型,其实就是string
});
这里需要注意,没有id字段,Ember 会默认生成id属性。
如果有对应关系的话,比如一对多或者多对一的情况,那么可以使用Ember Data中的hasMany
以及 belongsTo
方法。belongsTo
为一对一关系,hasMany
为一对多关系。使用方式如下
import DS from 'ember-data';
//app/models/blog-post.js
export default DS.Model.extend({
comments: DS.hasMany('comment')
});
//app/models/commont.js
export default DS.Model.extend({
blogPost: DS.belongsTo('blog-post')
});
如果是多对多的关系,则如下就好:
import DS from 'ember-data';
//app/models/blog-post.js
export default DS.Model.extend({
comments: DS.hasMany('comment')
});
//app/models/commont.js
export default DS.Model.extend({
blogPost: DS.hasMany('blog-post')
});
这个对应关系,可以看做为,实际的逻辑表之间的对应关系。
此外,还可以添加计算属性,因为,model也是一个Ember Object
export default DS.Model.extend({
title: DS.attr('string'), // 字符串类型
flag: DS.attr('boolean'), // 布尔类型
tf: Ember.computed('title', 'flag', function() {
return `${this.get('title')} ${this.get('flag')}`;
})
});
store & record
store这个概念,在Ember Data中十分重要。
store是指所有的从服务端活动的record的数据以及新创建的record数据。即,store为所有数据的缓存,所有关于record的增删改查动作,都需要经过store。
一般情况下,一个应用,只有一个DS.store,它是由Ember.Application初始化的。
record是指一个model的实例,他可能是一个从服务端返回的数据,当然,你自己也可以新建一个record。
假设我们有一个route:
// app/routes/store-route.js
import Ember from 'ember';
export default Ember.Route.extend({
model: function() {
}
});
store 这个概念,可以在route以及controller中使用。形如this.get('store')
或者 this.store
。
查询record
(1)store.findRecord()
通过model的type以及id,发起一个请求,去获取数据,他返回一个promise对象,结果为record。
model(){
return this.store.findRecord('model-example',1).then((data) => {
return data;
});
//get请求为 域名/model-examples/1, 例如 http://localhost:4200/model-examples/1
}
(2)store.peekRecord()
, 通过model的type以及id,不发起一个请求,从store中去获取现有以加载的数据。
model(){
return this.store.peekRecord('model-example',1);
//无请求
}
(3)store.findAll()
, 通过model的type获取所有的数据,发起请求,返回的为,DS.PromiseArray对象,结果为DS.RecordArray
model(){
return this.store.findAll('model-example').then((data)=>{return data});
//get请求为 域名/model-examples, 例如 http://localhost:4200/model-examples
}
(4)store.peekAll()
, 通过model的type获取所有的数据,不发起请求,从store中去获取现有以加载的数据,返回的为DS.RecordArray
model(){
this.store.findAll('model-example');
//无请求
}
这里需要注意,DS.RecordArray,并不是一个[]
它使一个可遍历的对象。这意味着,如果你在模板中,使用了这些reocrd,那么就可以享受到双向绑定的好处,同时,也提供了一些API,能够帮助你更方便的使用。具体可参考:Ember.js DS.Store
(5)store.query()
条件查询,查询条件为type以及自定义条件,同样也是一个get请求,返回结果通store.findAll()
model(){
this.store.query('model-example',{firstName:'James'});
//get 请求,请求为 域名/model-examples?firstName=James,例如,http://localhost:4200/model-examples?firstName=James
}
(6)store.queryRecord()
条件查询,查询条件为type以及自定义条件,同样也是一个get请求,返回结果同store.findRecord()
model(){
this.store.queryRecord('model-example',{firstName:'James'});
//get 请求,请求为 域名/model-examples?firstName=James,例如,http://localhost:4200/model-examples?firstName=James,返回结果为promise,其中为一个record
}
创建record
使用store.createRecord()
来增加一个record。
model(){
let a = this.store.createRecord('model-example',{
firstName:'firstName',
secondName: 'secondName'
});
return a;
}
则返回一个record。
在运用场景上,我们可以设想这样一个场景,比如一个表单:
//route route-example.hbs
<form class="" action="index.html" method="post">
firstName:{{input value=model.firstName}}
secondName:{{input value=model.secondName}}
<button type="submit" name="button" {{action 'submitForm'}}>提交</button>
</form>
//route route-example.js
import Ember from 'ember';
export default Ember.Route.extend({
model(){
return this.store.createRecord('model-example',{
firstName:'',
secondName: ''
});
},
actions:{
actionSubmit(){
let model = this.modelFor('route-example');
model.save();
//这里会发出一个post请求,即 域名/model-example, 这里是localhost:8000/model-example,参数为{"data":{"attributes":{"first-name":"<你填写的内容>","second-name":"<你填写的内容>"},"type":"model-examples"}}
}
}
});
生成的页面如下:
这的数据是一个双向绑定的过程,在页面上的变动会直接变化到model上。
更新record
更新record的操作也是一样的
this.store.findRecord('model-example', 1).then(function(data) {
data.set('firstName', "name1");
});
这样就可以对其进行修改。
持久化record
持久化,也就是说将数据存入数据库,实际上是一个与后端进行交互的过程。
调用sava()
方法就可以。
但是不同于新建的post请求,所有更新操作的请求为PATCH
请求。
this.store.findRecord('model-example', 1).then(function(data) {
data.set('firstName', "name1");
data.save()
//patch 请求:域名/model-examples/1, 在这里为:http://localhost:4200/model-examples/1
//参数 {"data":{"id":"1","attributes":{"firstName":"asdas","secondName":"sn"},"type":"model-examples"}}
});
删除record
使用deleteRecord()
可以删除一个record
this.store.findRecord('model-example', 1).then(function(data) {
data.deleteRecord();
data.get('isDeleted');//true =>表示已经删除
});
如果想要持久化到后端,调用sava()
this.store.findRecord('model-example', 1).then(function(data) {
data.deleteRecord();
data.get('isDeleted');//true =>表示已经删除
data.save();//这会发送一个DELETE请求,为 http://localhost:4200/model-examples/1
});
或者直接调用
this.store.findRecord('model-example', 1).then(function(data) {
data.destroyRecord();//这会发送一个DELETE请求,为 http://localhost:4200/model-examples/1
});
插入record
ember还支持直接向store中插入record,但是这个过程不是与后端交互的过程。是通过push()
方法实现的。
//route route-example.js
export default Ember.Route.extend({
model() {
this.get('store').push({
data: [{
id: 1,
type: 'model-example',
attributes: {
firstName: 'fn1',
secondName: 'sn1',
},
}, {
id: 1,
type: 'model-example',
attributes: {
firstName: 'fn1',
secondName: 'sn1',
},
}]
});
}
});
这样就可以手动向其中插入两条record。例如,当时不想用他提供的方式如post、patch、delete进行增删改数据,那么可以使用ajax先更新或者插入数据,然后在手动push进store。
小结
总结一下增删改查的请求形式:
//TODO
adapters
适配器,决定了数据如何持久化到后端。举例而言,请求的URL、REST API的header等。
创建适配器的命令,同样通过命令行就可以创建:ember g adapter <your-adapter-name>
。这里注意,这里的名字必须和路由的是一致的,关于路由的规则,我们后面独立说。
以application
这个路由为例,其适配器配置可能为:
//app/adapters/application.js
import DS from 'ember-data';
export default DS.JSONAPIAdapter.extend({
host: 'http://xxx.com',
namespace: 'api/v1',
pathForType: function(type) {
return Ember.String.underscore(type);
},
headers: {
'API_KEY': 'secret key',
'ANOTHER_HEADER': 'Some header value'
}
});
下面解释一下这几个常用规则的配置:
host
,指域名namespace
,命名空间,如上述的情况下,model名为model-example
的新建请求为(忽略pathForType
方法):http://xxx.com/api/v1/model-example
pathForType
,修改model的适配方式,如果你希望都是下划线的方式,可以调用Ember.String.underscore()
方法,就可以把驼峰或者中划线改为下划线,那么上述的情况下,新建的请求为:http://xxx.com/api/v1/model_example
headers
,http的heads,这里是支持计算属性的,例如:
export default DS.JSONAPIAdapter.extend({
session: Ember.inject.service('session'),
headers: Ember.computed('session.authToken', function() {
return {
'API_KEY': this.get('session.authToken'),//这里的headers取自session的authToken字段
'ANOTHER_HEADER': 'Some header value'
};
})
});
在适配器中,你还可以重写函数findRecord()
findAll
……等等:
export default DS.JSONAPIAdapter.extend({
findRecord(store, type, id){
return Ember.$.getJson(`${this.get('host')}/${this.get('namespace')}/${type}/${id}`);
}
});
序列化器serializers
序列化器serializers主要负责用来格式化数据。这个在Ember Data中十分重要,因为本身model的数据格式十分蛋疼,用起来非常难受。
创建serializers,也可以是命令行工具:ember g serializer <your-serializer-name>
Ember Data提供了3种serializers的默认实现,分别为:
JSONAPISerializer
,2.0以后版本的默认实现JSONSerializer
针对单个json或者json array的简单实现RESTSerializer
2.0以前版本的默认实现,较为复杂,可以支持边缘加载,即是通过增加数据层级来分步加载(可以理解为先加载第一层次的数据集合,然后按需加载子一级的数据集合)
这意味着,根据自己的需求,继承其中任意一个类就可以。
现在考虑标准格式的record:
//单条record
{
"data": {
"type": "people",
"id": "123",
"attributes": {
"first-name": "Jeff",
"last-name": "Atwood"
}
}
}
//recordArray
{
"data": [{
"type": "model-example",
"id": "1",
"attributes": {
"firstName": "Jeff",
"secondName": "Atwood"
}
}, {
"type": "model-example",
"id": "2",
"attributes": {
"firstName": "Yehuda",
"secondName": "Katz"
}
}]
}
//如果数据除了本身之外还有关系数据,那么关系数据就放在`included`中
{
"data": {
"type": "articles",
"id": "1",
"attributes": {
"title": "JSON API paints my bikeshed!"
},
"links": {
"self": "http://example.com/articles/1"
},
"relationships": {
"comments": {
"data": [
{ "type": "comments", "id": "5" },
{ "type": "comments", "id": "12" }
]
}
}
},
"included": [{
"type": "comments",
"id": "5",
"attributes": {
"body": "First!"
},
"links": {
"self": "http://example.com/comments/5"
}
}, {
"type": "comments",
"id": "12",
"attributes": {
"body": "I like XML better"
},
"links": {
"self": "http://example.com/comments/12"
}
}]
}
我们从简单的情况入手,比如,正常情况下,我们的后端返回的数据格式可能为:
{
"result":[
{
"id": 1,
"firstName": "Jeff",
"secondName": "Atwood"
},
{
"id": 1,
"firstName": "Yehuda",
"secondName": "Katz"
}
]
}
这种情况下,如果返回的话,前端一定会报错,因为格式不匹配,找不到data
。
格式化内容数据
import DS from 'ember-data';
export default DS.JSONAPISerializer.extend({
normalizeResponse(store, primaryModelClass, payload, id, requestType) {
if (payload) {
if (!payload.result){
let documentHash = {included:[]};
if(id)
documentHash.data=null;
else
documentHash.data=[];
return documentHash;
}
return this._super(store, primaryModelClass, payload.result, id, requestType);
}
return this._super(...arguments);
},
});
这样,就可以将返回的result
转化为data
。
反之,如果请求中,后端需要的内容与前端给的不一样,只需要重写serialize
方法:
import DS from 'ember-data';
export default DS.JSONSerializer.extend({
serialize: function(snapshot, options) {
var json = this._super(...arguments); // ??
json.data.attributes.cost = {
amount: json.data.attributes.amount,
currency: json.data.attributes.currency
};
delete json.data.attributes.amount;
delete json.data.attributes.currency;
return json;
}
});
通过上述的方式,可以把前端发送的内容:
{
"data": {
"attributes": {
"id": "1",
"name": "My Product",
"amount": 100,
"currency": "SEK"
},
"type": "product"
}
}
变为:
{
"data": {
"attributes": {
"id": "1",
"name": "My Product",
"cost": {
"amount": 100,
"currency": "SEK"
}
},
"type": "product"
}
}
最后说两句,RESTSerializer
的实现与其他两个不同,他没有规定返回的格式,也就是说可以是任意格式的,而其他的都是json。