如何使用 Node.js 构建 CMS 系统-JavaScript中文网-JavaScript教程资源分享门户

前言

一般情况下，建立一个内容管理系统(CMS)需要使用后端语言，如PHP、Java、Python等，但是用Node.js同样可以做到。Node.js是一个非常强大的Javascript运行环境，它可以使前端工程师不仅仅关注前端技术，也可以掌握后端技术。本文将会详细介绍如何使用Node.js来构建CMS系统。

准备工作

安装Node.js: 如果还没有安装Node.js，可以从node.js官网下载安装文件：https://nodejs.org/en/
安装MongoDB: MongoDB是我们将要使用的数据库，可以从官网下载MongoDB安装文件：https://www.mongodb.com/download-center
安装Express.js: Express.js是Node.js的一个灵活而又简洁的web应用程序开发框架，它可以在Node.js的基础上，帮助我们更快速地开发web应用程序。可以通过npm( node.js的包管理器)安装Express，命令如下：
```
npm install express --save
```
运行以上命令后npm会将Express.js包安装到你当前的项目目录下，并且会自动将Express.js的依赖项也安装好。
安装Multer.js: Multer.js是一个处理文件上传的Node.js中间件，可以使用它读取上传的文件。通过npm安装Multer.js，命令如下：
```
npm install multer --save
```

创建CMS系统所需的文件夹和文件

首先，在项目文件夹中创建以下文件夹和文件:

- app.js          // 应用程序的入口文件
- public          // 静态资源文件夹，如样式表和图片
- uploads         // 用于存储上传的文件
- routes          // 存放路由文件
- views           // 存放页面模板
- models          // 存放数据库模型

创建Express应用程序

在app.js中创建一个Express应用程序，代码如下：

// www.javascriptcn.com code example
const express = require('express');
const bodyParser = require('body-parser');
const app = express();

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

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

以上代码，我们使用了Body-Parser中间件来解析（JSON，RAW，文本，URL-encoded）格式的请求体，而后我们用listen方法启动应用程序并监听端口3000。

连接MongoDB数据库

在app.js文件中引入Mongoose（一个MongoDB的对象模型工具），并且连接到MongoDB数据库，代码如下：

const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/cms', { useNewUrlParser: true });

以上代码会在mongodb本地启动名为cms的数据库，此处的{ useNewUrlParser: true }是一个mongoose的警告，用于告知它我们使用数据库的新URL解析器，现在我们的环境准备好与mongoDB建立连接了。

创建模型和Schema以便可以操作数据库

在models文件夹下创建一个post.js文件，代码如下：

// www.javascriptcn.com code example
const mongoose = require('mongoose');
const schema = mongoose.Schema({
  title: String,
  content: String,
  createTime: Date,
});

const Post = mongoose.model('Post', schema);

module.exports = Post;

以上代码创建了一个名为“Post”的模型。模型是我们与MongoDB的数据操作接口，由Schema定义所提供，在此代码中，我们使用了Mongoose API来定义了title, content和createTime。

编写CMS系统的路由

在routes文件夹下创建index.js文件，我们目前需要定义增加，删除和查询系统中Post(entity)的路由。代码如下：

// www.javascriptcn.com code example
const express = require('express');
const router = express.Router();
const Post = require('../models/post');
const multer  = require('multer');
const path = require('path');

router.post('/add', (req, res, next) => {
  const post = new Post({
    title: req.body.title,
    content: req.body.content,
    createTime: new Date()
  });
  post.save((err, rows) => {
    if (err) {
      console.log(err);
      return;
    }
      res.redirect('/');
  });
});

router.get('/', (req, res, next) => {
  Post.find((err, posts) => {
    if (err) {
      console.log(err);
      return;
    }
    res.render('index', { title: 'Home', posts: posts });
  });
});

router.get('/delete/:id', (req, res, next) => {
  Post.findByIdAndRemove(req.params.id, (err, post) => {
    if (err) {
      console.log(err);
      return;
    }
    res.redirect('/');
  });
});

const storage = multer.diskStorage({
  destination: './uploads/', filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname));
  }
});
const upload = multer({ storage: storage });
router.post('/upload', upload.single('file'), (req, res) => {
  const file = req.file;
  console.log(file.filename);
  res.send(file);
});

module.exports = router;

创建Express和Handlebars视图引擎

我们在views文件夹创建一个index.handlebars文本文件，代码如下：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
  <title>{{title}}</title>
</head>
<body>
  <h1>Posts</h1>

  <form action="/add" method="post">
    <input type="text" name="title" placeholder="Title">
    <br><br>
    <textarea name="content" placeholder="Content"></textarea>
    <br><br>
    <button type="submit">Add New Post</button>
  </form>

  <ul>
    {{#each posts}}
    <li>
      <h3>{{this.title}}</h3>
      <p>{{this.content}}</p>
      <small>{{this.createTime}}</small>
      <form action="/delete/{{this._id}}" method="get">
        <button type="submit">Delete</button>
      </form>
    </li>
    {{/each}}
  </ul>
  
  <form action="/upload" method="POST" enctype="multipart/form-data">
    <input type="file" name="file" />
    <br /><br />
    <button type="submit">Upload</button>
  </form>
</body>
</html>

接下来，在app.js中，设置Express与Handlebars的视图引擎，代码如下：

// www.javascriptcn.com code example
const path = require('path');
const exphbs = require('express-handlebars');
const hbs = exphbs.create({
  extname: '.handlebars',
  layoutsDir: path.join(__dirname, 'views/layouts'),
  defaultLayout: 'main'
});

app.engine('handlebars', hbs.engine);
app.set('view engine', 'handlebars');
app.set('views', path.join(__dirname, 'views'));

app.use(express.static(path.join(__dirname, 'public')));

const routes = require('./routes');
app.use('/', routes);

app.use((req, res, next) => {
  res.status(404);
  res.render('404', { title: '404: File not found' });
});

app.use((err, req, res, next) => {
  console.error(err.stack);
  res.status(500).render('500', { title: '500: Internal Server Error' });
})

运行和测试CMS系统

我们将能够运行和测试我们的CMS系统。打开终端进入我们的项目文件夹，输入以下命令：

node app.js

然后你可以在本地的浏览器中访问：http://localhost:3000，您应该会看到一个空的页面，现在您可以开始添加想增加到CMS系统中的Post呢！

这是您应该可以看到的最终结果：

恭喜，您已经构建了一个完善的CMS系统，现在您可以不仅仅关注于前端技术，还可以掌握后端技术，那么最有用的要点是使用Node.js和它的生态良好的开发环境来构建我们的很多东西。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d669a5a941bf7134c2983c

如何使用 Node.js 构建 CMS 系统

前言