깃털 프로젝트를 변환하여 nuxt.js를 설정했습니다. 지금까지는 작동 중입니다. 우체부를 통해 추가 된 항목이 내 브라우저의 웹 페이지에 나타납니다. 차이점이 있습니다. 즉 초기 배열과 일치하지 않는 전체 데이터 배열을 게시 할 때입니다.Feathers.js -> After create hook의 레이아웃 변경
샘플
{ "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 "만 있습니다. 나는 후크에서 함수를 "after create"에 추가하려고 시도했지만 작동하지 않습니다. 클라이언트에 구성된 그래서 클라이언트의 구성 요소 파일을 변경,
이 좋아 해결
는서비스, 모델, 후크 및 서비스의 다른 무엇에 액세스 할 수 있습니다. 'service.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: []
};
이 파일에는 위 섹션이 있습니다. 제거에서 열을 '사용자 정의'열로 변경하면 (모델에 있음) 작동합니다. 이 두 가지가 작동하지 않습니다.
이렇게하면 효과가 있습니다. '안녕하세요'(예 :). 따라서 초기로드와 다른 형식입니다.어떻게 든 그것이 getRelatedInfo()에 정의 된 레이아웃과 동일한 메세지를 리턴하기를 바랬다. 이것은 작은 예제이지만 더 많은 열이있는 서비스가 있으며 응답에 새 열을 추가하려는 경우 한 가지만 변경하면됩니다. 당신이 제안하는 방법은 효과가 있으며 여기에서도 그것을 변경해야합니다. – Edgar
감사. 나는 이것을 이해한다. 나는 프로젝트를 가지고 있지만, 내 '클라이언트'와 '서버'는 같은 '하위 프로젝트'에서 분리되어 있습니다. 그러나 나는 그것이 다시 작동하도록 할 수 있는지를 알게 될 것이다. 내가 지금 아주 명확한 youtube 비디오에서 온이 아이디어를 위해 가능할 지 몰랐다. – Edgar