「Node.js实战」打造MVC架构项目 |21xrx.com

「Node.js实战」打造MVC架构项目

2023-07-03 11:53:31 深夜i -- --

Node js MVC 架构实战项目

《Node.js实战》是一本关于使用Node.js构建Web应用的书籍，其中包含了很多实践案例。本文将以书中实现一个MVC架构的项目为例，介绍如何使用Node.js打造一个高效、可维护、易扩展的Web应用。

MVC架构一般包含三个部分：模型（Model）、视图（View）和控制器（Controller），其中，模型用于处理数据逻辑，视图用于展示数据，控制器则是连接模型和视图的桥梁。

首先，我们需要创建一个空项目，在终端中输入以下命令：

mkdir mvc-project cd mvc-project npm init -y

接着，我们需要安装一些必要的依赖：

npm install express ejs body-parser nodemon --save

以上四个依赖分别是：

- Express：一个流行的Node.js的Web框架，可以简化Web应用开发。

- EJS：用于渲染HTML的模板库。

- Body-parser：处理HTTP请求的请求体。

- Nodemon：可以用来监视源文件改动并自动重启应用程序。

现在，我们来考虑项目的文件结构：

在根目录下，新建一个`src`目录用于存放源代码，然后在`src`目录下再新建一个`app`目录作为我们的项目主目录。接着，我们在`app`目录下新建以下文件和目录：


app
|-controllers
|-models
|-public
| |-css
| |-img
| |-js
|-views
| |-partials

以上各目录对应MVC架构中的控制器、模型、视图和静态资源。

- Controllers目录用于存放控制器相关的代码。

- Models目录用于存放模型相关的代码。

- Public目录用于存放静态文件，如CSS、JS、图片等。

- Views目录用于存放视图相关的代码，其中Partials目录用于存放模板片段，以便在视图中引用。

现在，我们可以开始实现MVC架构了。我们的项目是一个简单的博客应用，包含两个页面：一个是博客文章列表页面，另一个是博客文章详情页面。

首先，我们需要创建一个Express应用，并配置一些基本设置，如下：


const express = require('express');
const app = express();
app.set('view engine', 'ejs');
app.set('views', __dirname + '/views');
app.use(express.static(__dirname + '/public'));
app.listen(3000, () => {
 console.log('Server is listening on port 3000.');
});

以上代码首先使用`app.set()`方法设置了视图引擎为EJS，视图文件的目录为`/views`，然后使用`app.use()`方法设置了静态文件的目录为`/public`。最后，使用`app.listen()`方法启动了服务器并监听了3000端口。

接下来，我们可以创建一个文章模型，用于处理所有与文章相关的数据：


const articles = [
  body: 'This is article one.' ,
  body: 'This is article two.' ,
  body: 'This is article three.' ,
];
class Article {
 static all()
  return articles;
 
 static find(id) {
  return articles.find(article => article.id === id);
 }
}
module.exports = Article;

以上代码中，我们创建了一个模拟数据，包含三篇文章，并创建了一个`Article`类，包含两个静态方法：`all()`方法用于获取所有文章，`find()`方法接受一个ID作为参数，用于查找指定ID的文章。

接下来，我们可以创建一个控制器，用于处理所有与文章相关的逻辑：


const express = require('express');
const router = express.Router();
const Article = require('../models/article');
router.get('/', (req, res) => {
 const articles = Article.all();
 res.render('articles/index', { articles });
});
router.get('/:id', (req, res) => {
 const article = Article.find(parseInt(req.params.id));
 res.render('articles/show', { article });
});
module.exports = router;

以上代码中，我们创建了一个Express路由实例，包含两个路由处理函数：

- `router.get('/', ...)`处理文章列表页面的请求，调用`Article.all()`方法获取所有文章，并将其渲染到`/views/articles/index.ejs`视图中。

- `router.get('/:id', ...)`处理文章详情页面的请求，调用`Article.find()`方法查找指定ID的文章，并将其渲染到`/views/articles/show.ejs`视图中。

最后，我们可以创建两个视图文件：`/views/articles/index.ejs`和`/views/articles/show.ejs`，用于渲染文章列表页面和文章详情页面。在视图文件中，我们可以使用EJS的语法来引用控制器传递的数据，例如：


<!-- /views/articles/index.ejs -->
<h1>Articles</h1>
<ul>
 <% articles.forEach(article => %>
  <li><a href="/articles/<%= article.id %>"><%= article.title %></a></li>
 <% ) %>
</ul>


<!-- /views/articles/show.ejs -->
<h1><%= article.title %></h1>
<p><%= article.body %></p>

以上代码中，我们使用了EJS的模板渲染语法`<%= ... %>`和循环语法`<% ... %>`来渲染文章列表和文章详情页面。

现在，我们已经完成了一个简单的MVC架构的博客应用。在终端中运行`npm start`命令启动应用程序，在浏览器中打开`http://localhost:3000/articles`就可以看到文章列表页面，点击文章链接可以查看文章详情页面。

总结：

本文介绍了如何使用Node.js创建一个简单的MVC架构的博客应用。在应用中，模型负责处理数据逻辑，视图负责展示数据，控制器负责连接模型和视图。通过遵循MVC架构，我们可以将应用程序的各层分离开来，便于我们进行开发、维护和扩展。

上一篇: idea打包java可执行jar包

下一篇: C语言、C++和C#：哪个更难？

评论区

()

相似文章