入门 Node / Express 的前端工程师 – 创建 CRUD API

2 年 ago
科, 雅
4 minutes

最初

我成为了前端工程师已经有7个月了。最近对服务器也产生了兴趣，所以想用与前端兼容性良好的 Node.js 和其框架 Express 来制作API。还有，听说在 Node/Express 的项目中经常使用的 MongoDB，我也想入门一下。请多多包涵，因为我是服务器的新手。

本文章所涉及的内容

    • Node.js / Express を用いたAPI作成しPostmanで動作確認をする

 

    • MVCモデルっぽく作ってみる

 

    MongoDBとの接続

不处理这件事

    • DB設計とかの踏み込んだ部分

 

    • Typescript との連携

 

    • Vue / React などのフレームワークとの繋ぎ込み

 

    EJSなどのテンプレートエンジン

版本

Node 节点
Express 表达式
Mongoose 黄鼠狼

目录结构

node-project
  ├── controllers
  │    └── controller.js
  ├── models
  │    └── model.js
  ├── routes
  │    └── route.js
  ├── node_modules
  ├── .env
  ├── app.js
  ├── package.json
  └── package-lock.json

从项目的创建到服务器的启动

在这个项目中要做的事情是什么?

    • プロジェクトの作成

 

    • 必要なパッケージのインストール

 

    5000番ポートでのサーバーの立ち上げ

创建目录

让我们创建一个文件夹吧，文件夹的名称可以是任意的，没问题。

mkdir node-project
cd node-project

生成package.json文件

npm init -y

package.json会自动创建

顺便提一句，据说加上 -y 可以使用默认设置，不加就可以自定义自己喜欢的设置（参考网站）。

安装所需的软件包。

这次我们将安装以下三个软件包。

    • express

 

    • mongoose

 

    • dotenv

 

    nodemon
npm i express mongoose dotenv nodemon

Paraphrase: 列举仅一种选择性地表达“mongoose”这个词

    • MongoDBを操作するためのnpmモジュール。

 

    • MongoDB用モデリングツールで、Node.jsの非同期環境でうまく動作することを目的として設計されています。

 

    モデルを定義して操作することで、MongoDBのコレクション／ドキュメントを操作できます

官方网站：https://mongoosejs.com/

dotenv是一个用于加载环境变量的Node.js模块。

    • 環境変数を定義するときに使う

 

    mongoDBのURLとかgitにあげたらやばいので、、

参考网站

    • https://www.npmjs.com/package/dotenv

 

    https://maku77.github.io/nodejs/env/dotenv.html

点头的妖怪

如果使用默认设置，每次更改文件都需要执行 “node app.js” 才能更新。这真的很麻烦，因此我们有了 “nodemon” 这个工具，它可以在文件更新时自动重新启动服务器。

参考网站: https://qiita.com/mitsuhiro_K/items/429ca479b4e191bfea4d

设定环境变量

创建.env文件，并设置端口号和MongoDB。

PORT = 5000
DB_URL = MongoDBのURL

请参考以下链接了解MongoDB的配置方法：
https://reffect.co.jp/node-js/mongodb-cloud#MongoDB_Cloud

创建 app.js

请在项目的根目录下创建一个名为 app.js 的文件，并加载安装的包。app.js 将成为服务器的启动点。

// 必要なモジュールのインポート
require("dotenv").config();
const express = require("express");
const mongoose = require("mongoose");

const app = express(); // express のインスタンス化
const port = process.env.PORT || 5000; // ポート番号の指定

// MongoDB接続
mongoose
  .connect(process.env.DB_URL)
  .then(() => console.log('データベース接続に成功しました'))
  .catch((err) => console.log(err));

app.listen(port, () => console.log(`server running at localhost:${port}`)); // サーバー立ち上げ

尝试启动服务器。

如果能做到这一点，让我们尝试启动服务器。
使用刚刚安装的 nodemon，将 package.json 修改为能够启动服务器的形式。

package.json 文件

"scripts": {
　　"dev": "nodemon app.js"
},

通过修改npm脚本，可以使用以下命令启动：!

npm run dev

当访问 localhost:5000 时，会显示如下所示的截图，并在控制台中显示

    • server running at localhost:5000

 

    データベース接続に成功しました！

只要没有出现错误的话，就先不要担心！

スクリーンショット 2022-02-26 9.51.43.png

控制器与路由设置

在本部分中，我们将执行以下任务

    • Controller の作成

 

    • Route の設定

 

    • 設定したAPIのエンドポイントを叩く

 

    ※DBとの接続はまだ行いません！！

路线的设置

创建名为routes的目录，并创建路由文件route.js。

您可以按照以下语法进行编写。

router.HTTPメソッド("エンドポイント", 実行する処理);

我们应该把所有CRUD操作都写好。

路由/route.js

const express = require('express');
const router = express.Router();
const API = require('../controllers/controller.js');

router.get('/', API.fetchAllPost); // 全件取得
router.get('/:id', API.fetchPostDetail); // 詳細取得
router.post('/', API.createPost); // 投稿
router.patch('/:id', API.updatePost); // 更新
router.delete('/:id', API.deletePost); // 削除

module.exports = router;

创建控制器

我刚刚设置了路由，但目前没有对应的方法。创建一个控制器，并定义每个端点对应的方法。

控制器/控制器.js


module.exports = class API {
  static async fetchAllPost(req, res) {
    try {
      res.send('全件取得に成功!!');
    } catch (err) {
      res.status(404).json({ message: err.message });
    }
  }
  static async fetchPostDetail(req, res) {
    try {
      res.send('詳細取得に成功!!');
    } catch (err) {
      res.status(404).json({ message: err.message });
    }
  }
  static async createPost(req, res) {
    try {
      res.send('投稿に成功!!');
    } catch (err) {
      res.status(404).json({ message: err.message });
    }
  }
  static async updatePost(req, res) {
    try {
      res.send('更新に成功!!');
    } catch (err) {
      res.status(404).json({ message: err.message });
    }
  }
  static async deletePost(req, res) {
    try {
      res.send('削除に成功!!');
    } catch (err) {
      res.status(404).json({ message: err.message });
    }
  }
};

将Controller添加到app.js中。

app.js 文件

const posts = require('./routes/route');
app.use('/api/posts', posts);

请参考以下链接：https://expressjs.com/ja/guide/routing.html

使用邮递员进行操作验证。

当你达到这一步时，让我们尝试使用Postman访问指定的端点。

http://本地主机:5000/应用接口/帖子
http://本地主机:5000/应用接口/${id}

スクリーンショット 2022-02-26 12.13.05.png

创建一个模型并连接到MongoDB。

让我们将先前创建的控制器与模型进行连接。
我们将在模型中定义模式。
我们将定义一个帖子具有的属性和类型。

建立模型

模型/模型.js

const mongoose = require('mongoose');

const PostSchema = mongoose.Schema({
  title: { type: String, required: true },
  content: { type: String, required: true },
  created_at: { type: Date, default: Date.now },
});

// スキーマからPostモデルを生成する
module.exports = mongoose.model('Post', PostSchema);

请查阅以下参考资料：https://mongoosejs.com/docs/guide.html和https://mongoosejs.com/docs/models.html。

将控制器和模型连接加入在一起

让我们在控制器中调用之前创建的Model。

由于从模式中生成的模型具有方法，因此让我们调用相应的方法。

例如，当创建新的POST时，我们有一个名为create()的方法，让我们尝试调用它。

控制器/控制器.js

const Post = require('../models/model'); // 追記

module.exports = class API {
  // 省略
  static async createPost(req, res) {
    try {
      const post = req.body;
      try {
        await Post.create(post);
        res.status(201).json({ message: '投稿に成功!!' });
      } catch (err) {
        res.status(400).json({ message: err.message });
      }
    } catch (err) {
      res.status(404).json({ message: err.message });
    }
  }
  // 省略
};
スクリーンショット 2022-02-26 17.57.38.png
スクリーンショット 2022-02-26 18.00.40.png

我会参考Mongoose的官方文档，并将其他处理逐步改写为相应的方法。
官方文档链接：https://mongoosejs.com/docs/api.html#Model

控制器/控制器.js

static async fetchAllPost(req, res) {
    try {
      const posts = await Post.find();
      res.status(200).json(posts);
    } catch (err) {
      res.status(404).json({ message: err.message });
    }
  }
  static async fetchPostDetail(req, res) {
    const id = req.params.id;
    try {
      const post = await Post.findById(id);
      res.status(200).json(post);
    } catch (err) {
      res.status(404).json({ message: err.message });
    }
  }
  static async createPost(req, res) {
    // さっき書いたから省略
  }
  static async updatePost(req, res) {
    const id = req.params.id;
    const newPost = req.body;
    try {
      await Post.findByIdAndUpdate(id, newPost);
      res.status(201).json({ message: 'post updated' });
    } catch (err) {
      res.status(400).json({ message: err.message });
    }
  }
  static async deletePost(req, res) {
    const id = req.params.id;
    try {
      const result = await Post.findByIdAndDelete(id);
      res.status(201).json({ message: 'post deleted' });
    } catch (err) {
      res.status(400).json({ message: err.message });
    }
  }

顺便提一下，”${id}”代表的是在发布时自动生成的id。

请尝试修改其他处理并在Postman中进行操作确认。

最后

我已經寫得很長了，但以上就是全部了！
因為在業務中只接觸到前端，所以對於服務器端的技術感到新鮮。
我很喜歡可以使用JavaScript進行編寫，以及MongoDB可以直觀地進行編寫。

请参考以下网站

https://mongoosejs.com/ -> https://mongoosejs.com/（官方网站）
https://www.npmjs.com/package/dotenv -> https://www.npmjs.com/package/dotenv（npm上的dotenv包）
https://qiita.com/mitsuhiro_K/items/429ca479b4e191bfea4d -> https://qiita.com/mitsuhiro_K/items/429ca479b4e191bfea4d（一篇关于dotenv的文章）
https://maku77.github.io/nodejs/env/dotenv.html -> https://maku77.github.io/nodejs/env/dotenv.html（介绍dotenv的网页）
https://mongoosejs.com/docs/guide.html -> https://mongoosejs.com/docs/guide.html（mongoose官方指南）
https://mongoosejs.com/docs/models.html -> https://mongoosejs.com/docs/models.html（mongoose模型文档）

✖
广告
将在 10 秒后关闭
bannerAds