零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门

本文将介绍如何搭建一个基于 Node.js、Express、Ejs、Mongodb 的服务器，以及如何开发应用。如果您还没有 Node.js 的基础，可以先学习一下，并确保已经在您的计算机上安装了 Node.js 环境。

安装

1. 安装 Node.js 以及 npm。可以在 Node.js 官网上下载对应平台的安装包进行安装。

2. 安装 Express 和 Ejs。打开命令行工具，输入以下命令安装。

npm install express ejs --save

上述命令会自动下载和安装 Express 和 Ejs 以及其依赖项。

1. 安装 Mongodb。可以在 Mongodb 官网上下载对应平台的安装包进行安装。

建立Express应用

在安装好 Mongodb 和 Express 之后，我们来建立一个 Express 应用。

1. 打开命令行工具，进入要建立应用的目录位置，创建一个空目录，比如 "myapp"，并进入该目录。

mkdir myapp
cd myapp

1. 安装 body-parser 和 Mongodb 的官方驱动程序。

npm install body-parser mongodb --save

1. 在 myapp 目录下创建一个名为 "app.js" 的文件，并写入以下代码:

// 引入依赖
var express = require('express');
var bodyParser = require('body-parser');
var MongoClient = require('mongodb').MongoClient;

// 创建应用
var app = express();

// 设置静态文件夹
app.use(express.static(__dirname + '/public'));

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

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

// 处理根路径请求
app.get('/', function(req, res) {
  res.render('index');
});

// 连接 Mongodb
MongoClient.connect('mongodb://localhost:27017/myapp', function(err, db) {
  // 处理连接错误
  if (err) throw err;

  console.log('MongoDB connected!');

  // 处理表单提交请求
  app.post('/submit', function(req, res) {
    // 插入数据
    db.collection('mycollection').insertOne(req.body, function(err, result) {
      if (err) throw err;

      console.log('Data inserted!');
      res.redirect('/');
    });
  });

  // 获取数据列表
  app.get('/data', function(req, res) {
    db.collection('mycollection').find().toArray(function(err, results) {
      if (err) throw err;

      res.json(results);
    });
  });
});

// 启动应用
app.listen(3000, function() {
  console.log('App listening on port 3000!');
});

上述代码完成以下操作：

• 引入必须的依赖项。
• 创建一个新的 Express 应用。
• 设置静态文件夹和视图引擎。
• 配置 bodyParser。
• 处理根路径请求并渲染 index.ejs 模板。
• 连接 Mongodb 并添加 "/submit" 和 "/data" 路由。

• 启动服务器监听 3000 端口。

• 创建 "public" 目录和一个新的名为 "index.ejs" 的文件，用于展示我们的表单和数据列表。

示例说明

示例 1：添加数据

我们可以通过填写一个表单提交数据到后端，并将其保存到 Mongodb 中。

1. 启动服务。在 myapp 目录下，运行以下命令启动服务器。

node app.js

1. 打开浏览器，输入 "http://localhost:3000" 访问应用。

2. 添加数据。提交一个带有以下信息的表单：

<form action="/submit" method="POST">
  <input type="text" name="name" placeholder="Name">
  <input type="text" name="email" placeholder="Email">
  <button type="submit">Submit</button>
</form>

1. 查看数据。可以通过访问 "http://localhost:3000/data" 查看刚才添加的数据。

示例 2：更改显示列表

我们可以修改 "index.ejs" 文件，使其显示数据库中的数据。

1. 打开 "index.ejs" 文件，并替换其中的内容。

<h1>Form</h1>

<form action="/submit" method="POST">
  <input type="text" name="name" placeholder="Name">
  <input type="text" name="email" placeholder="Email">
  <button type="submit">Submit</button>
</form>

<h1>Data</h1>

<% if (data.length) { %>
  <ul>
    <% data.forEach(function(item) { %>
      <li><%= item.name %> - <%= item.email %></li>
    <% }); %>
  </ul>
<% } else { %>
  <p>No data found.</p>
<% } %>

上述代码完成以下操作：

• 显示表单，用来提交数据。

• 显示数据列表。如果数据列表不为空，则显示一个带有列表项的无序列表。

• 重新启动服务器，并提交一些数据。

• 查看列表。现在，当我们访问 "http://localhost:3000"，可以看到页面已经显示了添加的数据。

结论

通过上述步骤，我们已经搭建了一个完整的 Node.js、Express、Ejs、Mongodb 服务器，并开发了一个简单的应用。您可以通过不断学习来增强该应用的功能，甚至可以结合其他库和技术来构建新的应用。