iT邦幫忙

2025 iThome 鐵人賽

DAY 29
0
Modern Web

【網頁是什麼,能吃嗎】── 零基礎也能學會網頁製作系列 第 29

【Day 29】解決資料庫的連接問題 ── Vue.js 實作篇

  • 分享至 

  • xImage
  •  

今日筆者將會接續昨天的內容,繼續解決資料庫連接的問題。相較於昨日今日已經有了一些進展,不再總是顯示40x Error。那麼就直接來談談現在的進度吧!


目前若在網頁中送出表單(包含登入Login 或是 註冊Register),不論何時皆會顯示成功的字樣,如下圖:
https://ithelp.ithome.com.tw/upload/images/20251013/20169446avNLELrNWT.png
這是因為筆者為了測試與修復問題而對 src/server/routes/userAuth.js 做了些簡單的修改,使得它不論何時都會回傳成功訊息:

import { Router } from "express";

const router = Router();

Minimal login route to prove the path works
router.post("/login", (req, res) => {
  console.log('Body: ', req.body);
  const { username, password } = req.body || {};
  if (!username || !password) {
    return res.status(400).json({ error: "username and password are required" });
  }
  // Just echo back for now
  return res.json({ ok: true, user: { username: username } });
});

// Add these as you build out:
router.post("/register", (req, res) => res.json({ ok: true, route: "register" }));
router.post("/logout", (req, res) => res.json({ ok: true, route: "logout" }));

export default router;

此時如果我們將此檔案的程式碼改回原本的檔案:

import { Router } from "express";
import { User } from "../models/User.js";

const router = Router();
// const isProduction = process.env.NODE_ENV === "production";

router.post("/register", async (req, res) => {
  try {
    const { username, password } = req.body || {};
    if (!username || !password) {
      return res.status(400).json({ error: "username and password is required" });
    }

    const usernameExists = await User.findOne({ username });
    const passwordExists = await User.findOne({ password });
    if (usernameExists) return res.status(409).json({ error: "Username is already being used" });
    if (passwordExists) return res.status(409).json({ error: "Password is already being used" });

    const user = await User.create({ username, password })
    const { password: _, ...safeUser } = user.toObject();

    return res.status(201).json({ user: safeUser });
  } catch (err) {
    console.error("Register error: ", err);
    return res.status(500).json({ error: "Server error" });
  }
});

router.post("/login", async (req, res) => {
  try {
    const { username, password } = req.body || {};
    if (!username || !password) {
      return res.status(400).json({ error: "username and password is required" });
    }

    const user = await User.findOne({
      $or: [
        { username: username },
        { password: password }
      ]
    })
    if (!user) {
      return res.status(401).json({ error: "This user doesn't exist" });
    }
    else if (user.username != username) {
      return res.status(401).json({ error: `You've entered ${username}'s password, are you perhaps ${username}?` })
    }

    const { password: _, ...safeUser } = user.toObject();
    return res.status(201).json({ user: safeUser });
  } catch (err) {
    console.error("Register error: ", err);
    return res.status(500).json({ error: "Server error" });
  }
})

export default router;

並重新開啟伺服器後,便能夠發現程式可以正常執行,並且查閱 mongodb atlas 的資料庫中也能確實的看到已經新增了一筆資料,實際畫面如下圖:
https://ithelp.ithome.com.tw/upload/images/20251013/20169446BSf4J0Zw4F.png
https://ithelp.ithome.com.tw/upload/images/20251013/20169446i8U9CVErB3.png
https://ithelp.ithome.com.tw/upload/images/20251013/20169446V7S9Ppcl5x.png


上一篇
【Day 28】為昨天的程式 Debug ── Vue.js 實作篇
系列文
【網頁是什麼,能吃嗎】── 零基礎也能學會網頁製作29
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言