2017-03-25 7 views
0

깃털 프로젝트를 변환하여 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: [] 
}; 

이 파일에는 위 섹션이 있습니다. 제거에서 열을 '사용자 정의'열로 변경하면 (모델에 있음) 작동합니다. 이 두 가지가 작동하지 않습니다.

답변

0

this.messages.push (message.message_txt); ? ...

아하 지금 내가 정말로 묻고있는 것을 보았습니다. 보안상의 이유로 params.query 만 클라이언트와 서버간에 전달됩니다.

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; 
    } 
}); 

다른 옵션 대신 단지 깃털 후크를 사용하는 것입니다 : 당신은 쿼리 매개 변수를 기반으로 params.sequelize을 설정하고 싶은 경우에 당신은 살균과 후크에 매핑해야합니다. 또한, 질문의 일부가 아니지만 어쨌든 소켓을 사용하는 경우 실제로 Axios 및 REST 물건을 메소드를 통해 업데이트 할 필요가 없습니다. 서비스를 소켓에 연결하고 RxJS와 같은 것을 사용하여 모든 것을 스트리밍 할 수 있습니다 실시간으로 업데이트합니다. 당신이하고있는 일은 잘되고 일할 것이지만, 더 많은 코드를 유지해야합니다.

+0

이렇게하면 효과가 있습니다. '안녕하세요'(예 :). 따라서 초기로드와 다른 형식입니다.어떻게 든 그것이 getRelatedInfo()에 정의 된 레이아웃과 동일한 메세지를 리턴하기를 바랬다. 이것은 작은 예제이지만 더 많은 열이있는 서비스가 있으며 응답에 새 열을 추가하려는 경우 한 가지만 변경하면됩니다. 당신이 제안하는 방법은 효과가 있으며 여기에서도 그것을 변경해야합니다. – Edgar

+0

감사. 나는 이것을 이해한다. 나는 프로젝트를 가지고 있지만, 내 '클라이언트'와 '서버'는 같은 '하위 프로젝트'에서 분리되어 있습니다. 그러나 나는 그것이 다시 작동하도록 할 수 있는지를 알게 될 것이다. 내가 지금 아주 명확한 youtube 비디오에서 온이 아이디어를 위해 가능할 지 몰랐다. – Edgar