【FeathersJS 入门】Hello world

GIS程序媛—椰子

已于 2022-08-24 17:46:27 修改

阅读量259

点赞数 1

文章标签：前端 javascript 开发语言

于 2022-08-24 15:44:07 首次发布

原文链接：https://docs.feathersjs.com/guides/basics/starting.html#our-first-app

版权

创建应用程序

现在，我们可以使用一个简单的消息服务创建一个 Feathers 应用程序，该服务允许创建新消息并查找所有现有消息。

新建 app.js 文件

里面新建了 messages Service，定义了它的 find 和 create 方法，并在 main 中调用了。

const feathers = require('@feathersjs/feathers');
const app = feathers();

// messages service 允许创建新消息以及返回所有现存消息
class MessageService {
  constructor() {
    this.messages = [];
  }

  async find () {
    // 返回所有消息
    return this.messages;
  }

  async create (data) {
    const message = {
      id: this.messages.length,
      text: data.text
    }

    // 把新消息添加到list
    this.messages.push(message);

    return message;
  }
}

// Feathers应用注册message service
app.use('messages', new MessageService());

// 新建message时打印日志
app.service('messages').on('created', message => {
  console.log('A new message has been created', message);
});

const main = async () => {

  await app.service('messages').create({
    text: 'Hello Feathers'
  });

  await app.service('messages').create({
    text: 'Hello again'
  });

  
  const messages = await app.service('messages').find();

  console.log('All messages', messages);
};

main();

运行 app.js

node app.js

可以看到

更新 app.js 文件

但是我们真正想要的是API Web服务器，之前安装的 Express 和 Socket.io 就发挥作用了！

const feathers = require('@feathersjs/feathers');
const express = require('@feathersjs/express');
const socketio = require('@feathersjs/socketio');

class MessageService {
  constructor() {
    this.messages = [];
  }

  async find () {
    return this.messages;
  }

  async create (data) {
    const message = {
      id: this.messages.length,
      text: data.text
    }

    this.messages.push(message);

    return message;
  }
}

// 创建与 ExpressJS 兼容的 Feathers 应用程序
const app = express(feathers());

app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(express.static(__dirname));
app.configure(express.rest());
app.configure(socketio());
app.use('/messages', new MessageService());
app.use(express.errorHandler());

app.on('connection', connection =>
  app.channel('everybody').join(connection)
);

app.publish(data => app.channel('everybody'));

// 起服务
app.listen(3030).on('listening', () =>
  console.log('Feathers server listening on localhost:3030')
);

app.service('messages').create({
  text: 'Hello world from the server'
});

运行 app.js

node app.js

然后访问 localhost:3030/messages，就可以查看在服务器上创建的消息数组。

新建 index.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Feathers Example</title>
  <link rel="stylesheet" href="//unpkg.com/feathers-chat@4.0.0/public/base.css">
  <link rel="stylesheet" href="//unpkg.com/feathers-chat@4.0.0/public/chat.css">
</head>
<body>
  <main id="main" class="container">
    <h1>Welcome to Feathers</h1>
    <form class="form" onsubmit="sendMessage(event.preventDefault())">
      <input type="text" id="message-text" placeholder="Enter message here">
      <button type="submit" class="button button-primary">Send message</button>
    </form>

    <h2>Here are the current messages:</h2>
  </main>

  <script src="//unpkg.com/@feathersjs/client@^4.3.0/dist/feathers.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js"></script>
  <script type="text/javascript">
    
    const socket = io('http://localhost:3030');
    const app = feathers();
    app.configure(feathers.socketio(socket));

    async function sendMessage () {
      const messageInput = document.getElementById('message-text');

      await app.service('messages').create({
        text: messageInput.value
      });

      messageInput.value = '';
    }

    function addMessage (message) {
      document.getElementById('main').innerHTML += `<p>${message.text}</p>`;
    }

    const main = async () => {
      const messages = await app.service('messages').find();

      messages.forEach(addMessage);

      app.service('messages').on('created', addMessage);
    };

    main();
  </script>
</body>
</html>

访问 localhost:3030，可以看到一个允许创建新消息的简单网站。