我已经设置了nuxt.js,转换我的羽毛项目。到目前为止,它正在发挥作用。通过邮递员添加的内容出现在我的浏览器中的网页上。有区别,即当我发布一些东西时,整个数据数组被推送,这与初始数组不匹配。
样本
{ "message_txt": "Hello todays2" }
{ "id": 17, "message_txt": "Hello YESd", "updated_at": "2017-03-25T11:15:44.000Z", "created_at": "2017-03-25T11:15:44.000Z" }
因此,第一行是如何配置数据以返回。这是在我的钩子文件中设置的:
'use strict';
const globalHooks = require('../../../hooks/index');
const hooks = require('feathers-hooks');
exports.before = {
all: [],
find: [
getRelatedInfo()
],
get: [
getRelatedInfo()
],
create: [],
update: [],
patch: [],
remove: []
};
exports.after = {
all: [],
find: [],
get: [],
create: [
getRelatedInfo()
],
update: [],
patch: [],
remove: []
};
function getRelatedInfo() {
return function (hook) {
hook.params.sequelize = {
attributes: [
'message_txt'
],
order: [
['created_at', 'DESC']
]
};
return Promise.resolve(hook);
};
}
目前,我的客户端使用此部分加载数据:
<template>
<div>
idnex.vue
<ul>
<li v-for="message in messages">
{{ message }}
</li>
</ul>
</div>
</template>
<script>
import axios from 'axios';
import feathers from 'feathers/client';
import socketio from 'feathers-socketio/client';
import io from 'socket.io-client';
export default {
data: function() {
return {
messages: []
}
},
mounted: function() {
axios.get('http://localhost:3001/messages')
.then((response) => {
this.messages = response.data.data
});
const app = feathers().configure(socketio(io('http://localhost:3001')));
app.service('messages').on('created', (message) => {
this.messages.push(message);
})
}
}
</script>
问题我需要做什么才能确保"this.messages.push(message)"处于相同的结构中,因此只有"message_txt"。我尝试将钩子中的函数添加到"创建后",但它不起作用。
解决
好的,因此更改客户端的组件文件可以访问服务、模型和钩子以及客户端中配置的服务的其他内容。'service.find()' 只是因为我从一个更复杂的服务中复制了它,其中 find 钩子中有更多的列,我只想要特定的列。
<template>
<div>
idnex.vue
todo: eagle.js slideshow
todo: first info
<ul>
<li v-for="message in listMessages">
{{ message }}
</li>
</ul>
</div>
</template>
<script>
import feathers from 'feathers/client';
import socketio from 'feathers-socketio/client';
import hooks from 'feathers-hooks';
import io from 'socket.io-client';
import * as process from "../nuxt.config";
const vttSocket = io(process.env.backendUrl);
const vttFeathers = feathers()
.configure(socketio(vttSocket))
.configure(hooks());
const serviceMessage = vttFeathers.service('messages');
export default {
layout: 'default',
data: function() {
return {
listMessages: []
}
},
mounted: function() {
//TODO change the message layout to the correct layout
serviceMessage.find({
query: {
$sort: {
created_at: 1
},
$select: [
'message_txt'
]
}
}).then(page => {
this.listMessages = page.data;
});
serviceMessage.on('created', (serviceMessage) => {
this.listMessages.push(serviceMessage);
});
}
}
</script>
使用此代码,页面仍然可以加载,但"this.listMessages"仍然提供类似created_at的内容。此外,当我没有nuxt和客户端/服务器情况(客户端和服务器是一体的)时,我不需要"创建时"即可实时更新显示的列表。我仍然需要实时更新的线路。
重要提示,我刚刚注意到在邮递员中,您还可以看到整个记录信息,而与 GET 的信息不同
如此接近。我想出了在我的钩子文件中该怎么做
exports.after = {
all: [],
find: [],
get: [],
create: [
hooks.remove('createdAt'),
hooks.remove('updatedAt')
],
update: [],
patch: [],
remove: []
};
在这个文件中,我有上面的部分。如果我将删除中的列更改为"自定义"列(在模型中),它将起作用。这两个不起作用
this.messages.push(message.message_txt); ?...
啊,我想我明白你现在真正在问什么了。出于安全原因,只有 params.query 会在客户端和服务器之间传递。如果你想根据查询参数设置 params.sequelize,你必须在钩子中清理和映射它:
app.service('myservice').before(function(hook) {
const query = hook.params.query;
hook.params.sequelize = {};
if(query.someSequelizeParameter) {
hook.params.sequelize.myParameter = sanitize(query.someSequelizeParameter);
delete query.someSequelizeParameter;
}
});
其他选择是只使用羽毛钩。另外,这不是您问题的一部分,但是如果您无论如何都使用套接字,那么您真的不需要Axios和通过方法更新的REST内容,您只需将服务绑定到套接字并使用类似RxJS之类的东西实时流式传输所有更新。您正在做的事情很好并且可以工作,但是需要维护更多的代码。