Expressをちゃんと学ぶ -ミニアプリ編-

こんにちは、なかにしです。

Expressをのまとめとして
ミニアプリ作ったので晒します。

概要
フォルダ構成
主要ファイルたち
動作確認
おわりに

概要

ちゃんとCRUD作ろうかなーと思ったのですが、
Next.jsやりたすぎてミニアプリに留めました。

基本的なMVC＋ミドルウェアでログイン機能をつけました。

Githubにも上げてます

フォルダ構成

こんな感じです。
(windows、treeコマンドでこれ表示できたんですね…知らんかった)

express
│  .gitignore
│  app.js
│  package-lock.json
│  package.json
│
├─middleware
│      login.js
│
├─models
│      User.js
│
├─public
│  └─css
│          styles.css
│
├─routes
│      routes.js
│
└─views
        board.ejs
        index.ejs
        login.ejs

主要ファイルたち

【コントローラ】

const express = require("express");
const logger = require("morgan");
const session = require("express-session");
const routes = require("./routes/routes");
const middleware = require("./middleware/login");
const mongoose = require("mongoose");

// urlの設定
const url = "mongodb://127.0.0.1/test_db";

// mongoDBに接続
mongoose
  .connect(url)
  .then(() => console.log("Connect Success!"))
  .catch((err) => console.log(err));

const app = express();

// View設定
app.set("views", __dirname + "/views");
app.set("view engine", "ejs");

// Log出力
app.use(logger("dev"));

// public配下はstaticで使用
app.use(express.static("public"));

// session設定
app.use(
  session({
    secret: "secret",
    saveUninitialized: false,
  })
);

// bodyの中身をjsonかつPOSTで扱えるようにする
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

// route
app.get("/", routes.index);
app.get("/login", routes.login);
app.post("/board", middleware.loginCheck, routes.show);

// サーバー設定
app.listen(8000, console.log("サーバー起動"));

【ルーティング】

exports.index = (req, res) => {
  res.render("index");
};

exports.show = (req, res) => {
  console.log(res.locals.name);
  res.render("board", { username: res.locals.name });
};

exports.login = (req, res) => {
  res.render("login", { err: "" });
};

【モデル】

const mongoose = require("mongoose");

// スキーマのタイプを設定
const UserSchema = mongoose.Schema({
  id: String,
  email: String,
  password: String,
  name: String,
});

// UserSchemaモデルをUserという名前でexport
module.exports = mongoose.model("User", UserSchema);

【ミドルウェア(ログインのチェック)】

const User = require("../models/User");

exports.loginCheck = async (req, res, next) => {
  // データを取り出す
  const email = req.body.email;
  const pass = req.body.pass;

  // エラーメッセージ
  const err_msg1 = "メールアドレスが未登録です。";
  const err_msg2 = "メールアドレス、またはパスワードが違います。";

  // ユーザ検索
  try {
    await User.findOne({ email: email })
      .then((response) => {
        if (!response) {
          // メアドが見つからない場合
          err = err_msg1;
        } else {
          if (response.password !== pass) {
            // パスワードが違う場合
            err = err_msg2;
          } else {
            // 問題なければ名前を格納して掲示板へ
            res.locals.name = response.name;
            return next();
          }
        }
      })
      .catch((err) => {
        console.log("エラー内容：", err);
      });
  } catch (e) {
    console.log("tryのエラー:", e.err);
  }

  return res.render("login", { err });
};