数据库 · 14 10 月, 2024

MongoDB學習筆記(三) 在MVC模式下通過Jqgrid表格操作MongoDB數據

MongoDB學習筆記(三) 在MVC模式下通過Jqgrid表格操作MongoDB數據

在現代Web開發中，MVC（Model-View-Controller）模式是一種廣泛使用的架構設計模式。它將應用程序分為三個主要部分：模型、視圖和控制器。這種分離使得開發和維護變得更加高效。在這篇文章中，我們將探討如何在MVC模式下使用JqGrid來操作MongoDB數據。

1. 環境準備

在開始之前，您需要確保已經安裝了以下環境：

  • Node.js
  • Express.js
  • MongoDB
  • JqGrid

您可以使用npm來安裝Express和MongoDB的相關包：

npm install express mongoose body-parser

2. 設置MongoDB連接

首先，我們需要設置MongoDB的連接。以下是連接MongoDB的基本代碼：

const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost:27017/your_database', {
    useNewUrlParser: true,
    useUnifiedTopology: true
}).then(() => {
    console.log('MongoDB connected');
}).catch(err => {
    console.error('MongoDB connection error:', err);
});

3. 定義數據模型

接下來，我們需要定義一個數據模型。假設我們要管理一個用戶的數據模型：

const userSchema = new mongoose.Schema({
    name: String,
    email: String,
    age: Number
});

const User = mongoose.model('User', userSchema);

4. 創建API接口

在MVC模式中，控制器負責處理請求並返回響應。我們將創建一個簡單的API來處理用戶數據的CRUD操作：

const express = require('express');
const bodyParser = require('body-parser');
const app = express();

app.use(bodyParser.json());

// 獲取所有用戶
app.get('/api/users', async (req, res) => {
    const users = await User.find();
    res.json(users);
});

// 創建新用戶
app.post('/api/users', async (req, res) => {
    const newUser = new User(req.body);
    await newUser.save();
    res.json(newUser);
});

// 更新用戶
app.put('/api/users/:id', async (req, res) => {
    const updatedUser = await User.findByIdAndUpdate(req.params.id, req.body, { new: true });
    res.json(updatedUser);
});

// 刪除用戶
app.delete('/api/users/:id', async (req, res) => {
    await User.findByIdAndDelete(req.params.id);
    res.json({ message: 'User deleted' });
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

5. 使用JqGrid顯示數據

現在我們已經有了API接口，接下來我們將使用JqGrid來顯示用戶數據。以下是基本的HTML和JavaScript代碼：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/css/ui.jqgrid.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/jquery.jqgrid.min.js"></script>
</head>
<body>

<table id="grid"></table>
<div id="pager"></div>

<script>
$(function () {
    $("#grid").jqGrid({
        url: '/api/users',
        datatype: "json",
        colModel: [
            { label: 'ID', name: '_id', key: true, width: 75 },
            { label: '姓名', name: 'name', width: 150 },
            { label: '電子郵件', name: 'email', width: 200 },
            { label: '年齡', name: 'age', width: 100 }
        ],
        viewrecords: true,
        height: 250,
        rowNum: 20,
        pager: "#pager"
    });
});
</script>

</body>
</html>

6. 總結

在這篇文章中，我們探討了如何在MVC模式下通過JqGrid操作MongoDB數據。我們從環境準備開始，設置了MongoDB連接，定義了數據模型，創建了API接口，並最終使用JqGrid顯示數據。這種方法不僅提高了開發效率，還使得代碼的可維護性大大增強。

如果您正在尋找高效的 VPS 解決方案來部署您的應用程序，Server.HK 提供了多種選擇，滿足不同需求的客戶。無論是 香港VPS 還是其他類型的 伺服器，我們都能為您提供穩定的支持。

You may also like...