rest 微服务构建_使用FeathersJS构建轻量级REST和实时应用

rest 微服务构建

In the barest of definitions, Feathers is a simple minimalistic realtime framework for web applications built over Express. What this means is that with Feathers, you can keep using middlewares but in addition, you get realtime, RESTful services and ORM support out of the box. In this post, we’ll explain the basics and features of FeathersJS as well as build a small realtime messaging application to demonstrate a few of the features.

用最严格的定义来说,Feathers是一个简单的极简实时框架,用于基于Express构建的Web应用程序。 这意味着通过Feathers,您可以继续使用中间件,但除此之外,您还可以立即获得实时,RESTful服务和ORM支持。 在本文中,我们将说明FeathersJS的基本知识和功能,并构建一个小型实时消息传递应用程序以演示其中的一些功能。

为什么选择FeathersJS? ( Why FeathersJS? )

You could be one of the very few that prefers to challenge concepts and dig deeper into why should i use this framework?

您可能是少数愿意挑战概念并更深入研究为什么要使用此框架的人之一?

Well, here’s a few reasons:

好吧,这有几个原因:

  1. Unlike a few others, Feathers easily integrates with any client-side framework.

    与其他几个不同,Feathers可以轻松地与任何客户端框架集成。
  2. Feathers is universal by design. It works on the browser (JavaScript), on mobile (React Native, Ionic) and on the server with Node.js.

    羽毛在设计上是通用的。 它可以在浏览器(JavaScript),移动设备(React Native,Ionic)和具有Node.js的服务器上工作。
  3. Feathers is a modern framework built with promises and ES6, you get all the best and modern coding conventions by default.

    Feathers是一个使用Promise和ES6构建的现代框架,默认情况下您会获得所有最佳的现代编码约定。
  4. Feathers is structured to build service-oriented apps making it comfortable for you to split your application into microservices and scale with ease.

    Feathers的结构是构建面向服务的应用程序,使您轻松地将应用程序拆分为微服务并轻松扩展。
  5. Feathers is data agnostic. It has adapters for over 15 data sources including MongoDB, PostgreSQL, etc.

    羽毛与数据无关。 它具有适用于15个以上数据源的适配器,包括MongoDB,PostgreSQL等。
  6. Feathers ships with external plugin that allows you to implement authentications, SMS and email messaging.

    Feathers附带了外部插件,使您可以实施身份验证,SMS和电子邮件。

其他特性 ( Other features )

Before we proceed to build a realtime app with Feathers, here are a few of its core features i thought you’d want to know:

在我们继续使用Feathers构建实时应用程序之前,我想您需要了解以下一些核心功能:

  • Feathers put realtime on the forefront of your applications, not at the back.

    Feathers将实时性放在应用程序的最前端,而不是后端。
  • You can build robust lightweight web applications really quickly

    您可以真正快速地构建强大的轻量级Web应用程序
  • Build API’s with authentications

    使用身份验证构建API
  • Interface with existing technologies like React, Angular etc.

    与现有技术(例如React,Angular等)的接口
  • It is fully customizable, you can use the tools provided by Feathers or mix-match them with your own tools.

    它是完全可定制的,您可以使用Feathers提供的工具,也可以将它们与自己的工具混合搭配。
  • ORM support for databases.

    ORM对数据库的支持。

Now that we are familiar with the few things we can do with Feathers, let’s go ahead and build our app.

既然我们熟悉了Feathers可以做的几件事,那么让我们继续构建我们的应用程序。

先决条件 ( Prerequisites )

All you need to get started with FeathersJS is a working computer system with NodeJS and any preferred generator installed. However, to build specific projects, you may occasionally need to install more packages as your project requires.

FeathersJS入门所需的全部是具有NodeJS和已安装的任何首选生成器的可运行的计算机系统。 但是,要构建特定项目,有时可能需要根据项目需要安装更多软件包。

入门 ( Getting started )

The best way to quickly get started with Feathers is through the command line interface tool. With NodeJS open a terminal window and run this commands:

快速开始使用Feathers的最佳方法是通过命令行界面工具。 使用NodeJS打开终端窗口并运行以下命令:

## install feathers cli globally
$ npm install -g @feathersjs/cli

## Install Yeoman generator for feathers
$ npm install -g  yo generate-feathers

## create a new project directory "feathers-demo"
$ mkdir feathers-demo

## navigate into the new project directory "feathers-demo"
$ cd feathers-demo

## create a new application "feathers-app"
$ yo feathers

## start the development server
$ npm start

This will prompt for the project config details like project name, description, API type, database etc. After that, your project will be generated and live on localhost:3030. If you navigate to that port on your browser, you should see your app live:

这将提示您输入项目配置的详细信息,例如项目名称,描述,API类型,数据库等。此后,将生成您的项目并在localhost:3030 。 如果您在浏览器上导航到该端口,则应该可以实时看到您的应用程序:

Great, you have a brand new FeathersJS application. But at the moment it doesn’t really do much so we’ll go ahead and add a service to get things going. Since we are building a demo realtime app, let's create a message service. Go back to the terminal and run the command below:

太好了,您有了一个全新的FeathersJS应用程序。 但是此刻并没有真正做很多事情,因此我们将继续并添加一项服务以使事情顺利进行。 由于我们正在构建演示实时应用程序,因此我们创建一个message服务。 返回终端并运行以下命令:

$ yo feathers:service

This will throw a bunch of prompts to get more information about the service you want to create, answer the prompts and proceed:

这将引发一堆提示,以获取有关您要创建的服务的更多信息,回答提示并继续:

At this point, if we restart the development server and navigate to the new path on the browser localhost:3030/message we will get the database displayed like so:

此时,如果我们重新启动开发服务器并浏览到浏览器localhost:3030/message上的新路径,我们将得到显示的数据库,如下所示:

Great, now our database is showing up as expected!. However, it is empty, let's do something about that, back in your terminal, run this curl command:

太好了,现在我们的数据库正在按预期显示! 但是,它是空的,让我们对此做些什么,回到终端,运行以下curl命令:

curl 'http://localhost:3030/message/' -H 'Content-Type: application/json' --data-binary '{"text": "Hello world"}'

This will send a post request to our /message endpoint and the post data should reflect in our database like so:

这将向我们的/message端点发送一个发布请求,并且发布数据应反映在我们的数据库中,如下所示:

Great our data is posted!. What happened here is, Feathers automatically made an API for us, we didn’t have to create any of the /get() or /post() methods. You may have also noticed that we have an automatically generated unique ID for each message.

伟大的我们的数据发布! 这里发生的是,Feathers自动为我们创建了一个API,我们不必创建任何/get()/post()方法。 您可能还注意到,我们为每条消息都有一个自动生成的唯一ID。

It was cool but that's not all the functionality we want, we want to allow users post data to this database and render it on the client in realtime. To do this, open the public/index.html file and update the code with the one below:

太酷了,但这还不是我们想要的全部功能,我们希望允许用户将数据发布到此数据库并实时在客户端上呈现。 为此,请打开public/index.html文件,并使用以下代码更新代码:

<!-- public/index.html -->
    <html>
      <head>
        <title>Welcome to Feathers</title>
        <link
          rel="stylesheet"
          href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css"
          integrity="sha384-PDle/QlgIONtM1aqA2Qemk5gPOE7wFq8+Em+G/hmo5Iq0CCmYZLv3fVRDJ4MMwEA"
          crossorigin="anonymous"
        />
      </head>
      <body>
        <main class="container">
          <img
            class="logo"
            src="svg"
            alt="Feathers Logo"
          />
        </main>
        <div class="card mt-5">
            <div class="card-header">
              Messages
            </div>
            <div class="card-body">
              <h5 class="card-title">Send Message</h5>
              <input class="form-control" type="text" placeholder="message" id="message"/>
              <button onclick="sendMessage()" type="button" class="btn btn-primary mt-2">
                  Send Message
                </button>
            </div>
          </div>
      <div>

    </div>

        <script src="//cdn.rawgit.com/feathersjs/feathers-client/v1.0.0/dist/feathers.js"></script>
        <script src="socket.io/socket.io.js"></script>
        <script type="text/javascript">
          var socket = io()
          var app = feathers()
          app.configure(feathers.socketio(socket))
          var messages = app.service('message')

          messages.on('created', function(message){
            console.log('Message created on client', message)
          } )
          function sendMessage(){
            var messageText = document.getElementById('message').value;
            messages.create({text: messageText})
          }
        </script>
      </body>
    </html>

Great, now when you check back at our Feathers app on localhost:3030 you will get an updated user interface from where we can update our database like so:

太好了,现在,当您在localhost:3030上查看我们的Feathers应用程序时,您将获得一个更新的用户界面,可以从中更新数据库,如下所示:

Here, we type the message in the input field on the left and click the Send Message button. This adds the text to our database and we then navigate to localhost:3030/message on the right and we see the message added to our database.

在这里,我们在左侧的输入字段中键入消息,然后单击“ Send Message按钮。 这将文本添加到我们的数据库中,然后我们导航到右侧的localhost:3030/message ,我们看到消息已添加到我们的数据库中。

Lastly, let’s update the app to render our messages on the UI in realtime. Update the index.html file again with the code below:

最后,让我们更新应用程序以在UI上实时呈现我们的消息。 使用以下代码再次更新index.html文件:

<!-- public/index.html -->
    <html>
      <head>
       ...
      </head>
      <body>
      .... 
     +   <div class="card">
     +       <div class="card-body">
     +         <p id="messageList" class="card-text"></p>
     +       </div>
     +   </div>
      ....

        <script src="//cdn.rawgit.com/feathersjs/feathers-client/v1.0.0/dist/feathers.js"></script>
        <script src="socket.io/socket.io.js"></script>
        <script type="text/javascript">
      ....
          messages.on('created', function(message){
     +      var newMessage = document.getElementById("messageList");
     +      newMessage.innerHTML += "<h4>" + message + "</h4>"
            console.log('Message created on client', message)
          } )
          function sendMessage(){
            ...
           }
        </script>
      </body>
    </html>

And now app renders messages on both our database and our UI in realtime across all clients like shown in the image below:

现在,应用程序在所有客户端上实时在数据库和UI上呈现消息,如下图所示:

结论 ( Conclusion )

In this post, We have looked at the basics and features of FeathersJS. We have also demonstrated how to get started with FeathersJS to build realtime scalable web applications. You can find out more about Feathers in the official documentation page.

在这篇文章中,我们研究了FeathersJS的基础和功能。 我们还演示了如何开始使用FeathersJS来构建实时可伸缩Web应用程序。 您可以在官方文档页面中找到有关羽毛的更多信息

翻译自: https://scotch.io/tutorials/build-light-weight-rest-and-realtime-apps-with-feathersjs

rest 微服务构建

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值