jsを使用してフロントエンドでAPIインターフェースを作成するにはどうすればよいですか？

一緒に書く習慣を身につけましょう！「ナゲッツデイリーニュープラン・4月アップデートチャレンジ」に参加して11日目です。クリックしてイベントの詳細をご覧ください。

現代のフロントエンド開発者の日常業務の焦点は、ページを作成し、インターフェイスを調整することです。

多くのフロントエンド開発者は、テクノロジースタックを拡張し、バックエンドの知識を学び、Java、Python、さらにはC＃などのバックエンド言語を学びたいと考えています。実際、Nodeを使用してバックエンドサービスを実装するのは非常に簡単であり、次のステップは今日の焦点であるExpressです。

Expressとは

Expressは最も人気のあるNodeフレームワークであり、他の多くの人気のあるNodeフレームワークの基盤となるライブラリです。次のメカニズムを提供します。

さまざまなURLパスでさまざまなHTTP動詞を使用するリクエスト（ルート）のハンドラーを記述します。
「ビュー」レンダリングエンジンは、データをテンプレートに挿入することによって応答を生成するために統合されています。
接続に使用するポートや応答テンプレートをレンダリングする場所など、一般的なWebアプリケーション設定を設定します。
リクエスト処理パイプラインの任意の場所に、リクエスト処理「ミドルウェア」を追加します。

APIインターフェースの作成を開始します

以下で使用される主な手法：

Node.js：サーバー側で実行されているJavaScript

Express：node.jsMVCフレームワーク

MongoDB：NoSQLデータベース

1.プロジェクトを作成し、関連ファイルを作成します

mkdir todoApp
cd todoApp
npm init

touch server.js
mkdir api
mkdir api/controllers api/models api/routes
touch api/controllers/taskController.js api/models/taskModel.js api/routes/taskRoutes.js
复制代码

2.データベースを設定します

npm install mongoose --save
复制代码

api / models / taskModel.jsを変更し、

var mongoose = require("mongoose");
var Schema = mongoose.Schema;

var TaskSchema = new Schema({
  name: {
    type: String,
    required: "Enter the name of the task"
  },
  Created_date: {
    type: Date,
    default: Date.now
  }
});

module.exports = mongoose.model("Tasks", TaskSchema);
复制代码

3.ルーティングを設定します

api / routers/taskRoute.jsを変更します

module.exports = function(app) {
  var taskList = require('../controllers/taskController');

  app.route('/tasks')
    .get(taskList.all_tasks)
    .post(taskList.create_task);


  app.route('/tasks/:taskId')
    .get(taskList.load_task)
    .put(taskList.update_task)
    .delete(taskList.delete_task);
};
复制代码

4.コントローラー

api / controllers/taskController.jsを変更します

var mongoose = require("mongoose"),
  Task = mongoose.model("Tasks");

// 查询所有
exports.all_tasks = function(req, res) {
  Task.find({}, function(err, task) {
    if (err) res.send(err);
    res.json(task);
  });
};

// 新增
exports.create_task = function(req, res) {
  var new_task = new Task(req.body);
  new_task.save(function(err, task) {
    if (err) res.send(err);
    res.json(task);
  });
};

// 根据id查询
exports.load_task = function(req, res) {
  Task.findById(req.params.taskId, function(err, task) {
    if (err) res.send(err);
    res.json(task);
  });
};

// 更新
exports.update_task = function(req, res) {
  Task.findOneAndUpdate(
    { _id: req.params.taskId },
    req.body,
    { new: true },
    function(err, task) {
      if (err) res.send(err);
      res.json(task);
    }
  );
};

// 删除
exports.delete_task = function(req, res) {
  Task.remove(
    {
      _id: req.params.taskId
    },
    function(err, task) {
      if (err) res.send(err);
      res.json({ message: "Task successfully deleted" });
    }
  );
};
复制代码

5.APIを作成します

npm install --save-dev nodemon
npm install express --save
复制代码

server.jsを使用してAPIをビルドします。

server.jsを変更します

var express = require("express"),
  app = express(),
  port = process.env.PORT || 3000,
  mongoose = require("mongoose"),
  Task = require("./api/models/taskModel"), // 加载创建的模型
  bodyParser = require("body-parser");

mongoose.Promise = global.Promise;
mongoose.connect("mongodb://localhost/Tododb");

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

var routes = require("./api/routes/taskRoutes");
routes(app); 

app.listen(port); 

console.log("todo list RESTful API server started on: " + port);
复制代码

6.起動を開始します

//启动数据库
mongod
//启动项目
npm run start
复制代码

7.完全な作成

APIにアクセスします。

新增：POST http：// localhost：3000 / tasks

すべて取得：GET http：// localhost：3000 / tasks

IDによるクエリ：GET http：// localhost：3000 / tasks /：id

更新：PUT http：// localhost：3000 / tasks /：id

删除：DELETE http：// localhost：3000 / tasks /：id