正文

掌握Express.js MVC，实战案例教你轻松搭建网站

/0 浏览量
0710

在当今的Web开发领域，Express.js 是一个极其流行的Node.js框架，它基于Node.js平台，使用JavaScript编写，可以快速搭建出各种类型的网站。MVC（Model-View-Controller）架构模式是Express.js推荐的开发模式，它将应用程序分为三个核心部分：模型（Model）、视图（View）和控制器（Controller），有助于代码的组织和管理。本文将通过实战案例，带你轻松掌握Express.js MVC，并搭建一个简单的网站。

1. 准备工作

在开始之前，请确保你的电脑上已安装以下软件：

  • Node.js
  • npm（Node.js包管理器）
  • Git（可选，用于版本控制）

2. 创建项目

  1. 打开终端，创建一个新的文件夹作为项目目录，并进入该目录：

    mkdir my-express-app
cd my-express-app

  2. 使用npm初始化项目，并安装Express.js框架：

    npm init -y
npm install express

  3. 创建一个名为 app.js 的文件，这是Express.js应用程序的主入口文件。

3. 构建MVC架构

3.1 模型（Model）

模型负责应用程序的数据逻辑，包括数据的获取、处理和存储。在这个案例中，我们将使用Node.js内置的数据库模块 fs 来模拟数据库操作。

  1. 创建一个名为 models 的文件夹，并在其中创建一个名为 user.js 的文件，用于存储用户数据： “`javascript // models/user.js const fs = require(‘fs’);

class User {

 constructor(id, username, password) {
   this.id = id;
   this.username = username;
   this.password = password;
 }

 static find(id) {
   return new Promise((resolve, reject) => {
     fs.readFile('data/users.json', 'utf8', (err, data) => {
       if (err) {
         reject(err);
         return;
       }
       const users = JSON.parse(data);
       const user = users.find(u => u.id === id);
       resolve(user);
     });
   });
 }

 static findAll() {
   return new Promise((resolve, reject) => {
     fs.readFile('data/users.json', 'utf8', (err, data) => {
       if (err) {
         reject(err);
         return;
       }
       const users = JSON.parse(data);
       resolve(users);
     });
   });
 }

}

module.exports = User;


2. 创建一个名为 `data` 的文件夹，并在其中创建一个名为 `users.json` 的文件，用于存储用户数据：
   ```json
   [
     {
       "id": 1,
       "username": "user1",
       "password": "password1"
     },
     {
       "id": 2,
       "username": "user2",
       "password": "password2"
     }
   ]

3.2 视图（View）

视图负责展示数据，它通常由HTML模板和CSS样式组成。在这个案例中，我们将使用Express.js内置的 express.static 中间件来提供静态文件。

  1. 创建一个名为 views 的文件夹，并在其中创建一个名为 index.html 的文件，用于展示用户列表： 
    
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>用户列表</title>
</head>
<body>
 <h1>用户列表</h1>
 <ul>
   <% users.forEach(user => { %>
     <li><%= user.username %></li>
   <% }) %>
 </ul>
</body>
</html>

3.3 控制器（Controller）

控制器负责处理用户请求，并根据请求调用模型和视图。在这个案例中，我们将创建一个名为 controllers 的文件夹，并在其中创建一个名为 userController.js 的文件。

  1. 创建 controllers/userController.js 文件，并编写以下代码： “`javascript // controllers/userController.js const User = require(‘../models/user’);

module.exports = {

 index(req, res) {
   User.findAll()
     .then(users => {
       res.render('index', { users });
     })
     .catch(err => {
       res.status(500).send(err);
     });
 }

};


### 3.4 路由配置

在 `app.js` 文件中，我们需要配置路由，将请求映射到相应的控制器方法。

1. 修改 `app.js` 文件，添加以下代码：
   ```javascript
   // app.js
   const express = require('express');
   const path = require('path');
   const app = express();

   // 设置静态文件目录
   app.use(express.static(path.join(__dirname, 'public')));

   // 设置模板引擎
   app.set('views', path.join(__dirname, 'views'));
   app.set('view engine', 'ejs');

   // 路由配置
   app.get('/', (req, res) => {
     res.render('index');
   });

   // 用户相关路由
   const userController = require('./controllers/userController');
   app.get('/users', userController.index);

   // 启动服务器
   const PORT = process.env.PORT || 3000;
   app.listen(PORT, () => {
     console.log(`Server is running on http://localhost:${PORT}`);
   });

4. 运行项目

  1. 在终端中，运行以下命令启动服务器：

    node app.js

  2. 打开浏览器，访问 http://localhost:3000，你将看到一个包含用户列表的页面。

5. 总结

通过以上实战案例，我们学习了如何使用Express.js MVC架构搭建一个简单的网站。在实际开发中，你可以根据需求添加更多功能，如用户注册、登录、权限控制等。希望这篇文章能帮助你快速掌握Express.js MVC，祝你开发愉快！

-- 展开阅读全文 --