正文

从零开始：轻松搭建Node.js Express MVC项目教程

/0 浏览量
0709

在当今的Web开发领域中，Node.js凭借其高效的异步处理能力和轻量级的特性，成为了构建服务器端应用程序的热门选择。Express作为Node.js的一个流行的Web框架，可以帮助我们快速搭建出MVC（Model-View-Controller）架构的项目。本文将带领大家从零开始，轻松搭建一个Node.js Express MVC项目。

1. 环境准备

在开始之前，请确保您的电脑上已经安装了Node.js和npm（Node.js包管理器）。您可以通过以下命令检查是否已经安装：

node -v
npm -v

2. 创建项目目录

使用命令行工具，在您希望创建项目的目录下，运行以下命令创建项目目录：

mkdir my-express-mvc
cd my-express-mvc

3. 初始化项目

在项目目录下，运行以下命令初始化项目：

npm init -y

这将生成一个package.json文件，用于管理项目依赖和脚本。

4. 安装依赖

接下来，安装Express框架以及其他必要的依赖：

npm install express mongoose ejs

这里我们选择了mongoose来操作MongoDB数据库，以及ejs作为模板引擎。

5. 构建项目结构

为了更好地管理项目，我们需要创建一个合理的目录结构。以下是推荐的目录结构：

my-express-mvc/
├── models/
│   └── user.js
├── views/
│   └── layouts/
│       └── main.ejs
│   └── index.ejs
├── public/
│   └── css/
│       └── style.css
│   └── js/
│       └── app.js
├── routes/
│   └── index.js
├── app.js
├── package.json
└── server.js

6. 创建基础文件

接下来，我们需要创建一些基础文件，例如：

  • server.js：项目入口文件
  • app.js：应用配置文件
  • index.js：路由文件
  • user.js：模型文件

6.1 创建server.js

const express = require('express');
const app = express();
const PORT = process.env.PORT || 3000;

app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

6.2 创建app.js

const express = require('express');
const mongoose = require('mongoose');
const app = express();

// 连接MongoDB
mongoose.connect('mongodb://localhost:27017/my-express-mvc', {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

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

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

// 路由配置
app.use('/', require('./routes/index'));

module.exports = app;

6.3 创建index.js

const express = require('express');
const router = express.Router();

// 首页路由
router.get('/', (req, res) => {
  res.render('index');
});

module.exports = router;

6.4 创建user.js

const mongoose = require('mongoose');
const Schema = mongoose.Schema;

const UserSchema = new Schema({
  name: String,
  age: Number,
});

module.exports = mongoose.model('User', UserSchema);

7. 配置路由

现在，我们将路由文件index.js中的路由添加到app.js中：

const express = require('express');
const mongoose = require('mongoose');
const app = express();

// 连接MongoDB
mongoose.connect('mongodb://localhost:27017/my-express-mvc', {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

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

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

// 路由配置
app.use('/', require('./routes/index'));

module.exports = app;

8. 添加视图

现在，我们需要添加一些视图文件来展示数据。首先，在views目录下创建一个名为index.ejs的文件：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>我的Node.js Express MVC项目</title>
  <link rel="stylesheet" href="/css/style.css">
</head>
<body>
  <h1>欢迎来到我的Node.js Express MVC项目</h1>
</body>
</html>

然后，在public/css目录下创建一个名为style.css的文件，用于美化页面：

body {
  font-family: Arial, sans-serif;
  margin: 20px;
}
h1 {
  color: #333;
}

9. 运行项目

现在，您可以通过以下命令启动项目：

node server.js

打开浏览器，访问http://localhost:3000，您应该能看到一个简单的欢迎页面。

总结

通过本文的教程，您已经成功搭建了一个Node.js Express MVC项目。在实际开发过程中，您可以根据需要添加更多功能和路由。希望这个教程对您有所帮助！

-- 展开阅读全文 --