使用 Express.js 和 MongoDB 构建 Web 应用程序

阅读时长 9 分钟读完

前言

现在的 Web 应用程序开发中,前端和后端的分离已经成为了一种趋势。前端主要用来呈现数据和交互,后端主要用来处理数据和业务逻辑。Express.js 是一个基于 Node.js 平台的 Web 应用程序框架,它可以轻松地构建一个 RESTful API 网站或 Web 应用程序。MongoDB 是一个开源的 NoSQL 数据库,它具有高性能,高可扩展性,开发成本低等优点。本文将介绍如何使用 Express.js 和 MongoDB 构建 Web 应用程序,提供了详细的代码实现。

准备工作

在开始建设 Web 应用程序之前,我们需要安装 Express.js 和 MongoDB。

安装 Express.js 环境

在 Node.js 官网 下载 Node.js,选择对应操作系统的版本。安装好后,使用以下命令检查是否安装成功:

如果成功安装,将会输出对应的版本号。

在命令行中使用以下命令安装 Express.js:

安装 MongoDB 环境

在 MongoDB 官网 下载 MongoDB,选择对应操作系统的版本。安装好后,启动 MongoDB 服务。在 Windows 操作系统中,可以使用以下命令启动 MongoDB:

创建 Web 应用程序

创建 Express.js 应用程序

使用以下命令创建一个名为 express-mongodb-app 的 Express.js 应用程序:

运行以下命令切换到应用程序的目录:

在操作系统中运行以下命令安装所需要的依赖包:

连接 MongoDB 数据库

在 Express.js 的 app.js 文件中,引入 mongoose 模块和创建连接:

这里的 'mongodb://localhost/my_database' 是 MongoDB 数据库的连接地址。 mongoose.connect() 方法将建立与数据库的连接,如果连接失败,将抛出异常。

创建数据库集合

在 Express.js 应用程序中,可以使用 mongoose.Schema 定义数据集合的结构,并使用 mongoose.model 创建数据集合。

例如,我们定义一个名为 User 的数据集合,其中包含 name 和 email 字段:

这里首先引入 mongoose,然后使用 mongoose.Schema 创建用户集合的结构,再使用 mongoose.model 创建用户模型,并将模型赋给 User。模型名称字符串的首字母应该是大写的,单数形式。

插入数据

使用以下代码可以向数据库中插入一条数据:

-- -------------------- ---- -------
--- -------- - --------------------
--- ---- - -----------------------
--- ---- - --- ------ ----- ------- ------ ------------------ ---
------------------ ----- -
  -- ----- -
    ------------------- - - -------------
  - ---- -
    ----------------- ---------
  -
--

这里首先引入 mongoose,然后获取在前一步定义的模型。使用一个新的用户对象初始化模型,然后调用 save() 来将其保存到数据库中。

查询数据

使用以下代码可以查询 user 集合的所有数据:

-- -------------------- ---- -------
--- -------- - --------------------
--- ---- - -----------------------
------------- -------- ----- ------ -
  -- ----- -
    ------------------- - - -------------
  - ---- -
    -------------------
  -
--

实战

下面将详细介绍一个使用 Express.js 和 MongoDB 构建 Web 应用程序的示例代码,实现用户注册和登录的功能。

安装所需的依赖包

在项目根目录运行以下命令安装所有需要的依赖包:

创建用户集合

在 models/user.js 中,将定义一个名为 User 的集合:

这里,我们定义了 name、email、password 三个属性。

创建路由

在 routes/index.js 中,定义两个路由,分别是用户注册和用户登录:

-- -------------------- ---- -------
--- ------- - -------------------
--- ------ - -----------------
--- -------- - --------------------
--- ---- - -----------------------

----------------------- -------- ----- ---- ----- -
  ---------------------- - ------ ---------- ---
---

------------------------ -------- ----- ---- ----- -
  -- --------------
    -- --------------
    -- -----------------
    -- ------------------------- -

    -- ----- -- --------- -----
    -- ------------------ --- ------------------------- -
      --- --- - --- ---------------- -- --- ---------
      ---------- - ----
      ------ ----------
    -

    -- ------ ------ ---- ---- -----
    --- -------- - -
      ----- --------------
      ------ ---------------
      --------- -----------------
    --

    -- --- -------- ------ ------ -- ------ -------- ---- -----
    --------------------- -------- ------- ----- -
      -- ------- -
        ------ ------------
      - ---- -
        ------ ------------------
      -
    ---

  - ---- -
    --- --- - --- ---------- ------ ------------
    ---------- - ----
    ------ ----------
  -
---

-------------------- -------- ----- ---- ----- -
  ------------------- - ------ ---- --- ---
---

--------------------- -------- ----- ---- ----- -
  -- --------------- -- ------------------ -
    --------------------------------- ------------------ -------- ------- ----- -
      -- ------ -- ------ -
        --- --- - --- ------------ ----- -- ------------
        ---------- - ----
        ------ ----------
      - ---- -
        ------------------ - ---------
        ------ ------------------
      -
    ---
  - ---- -
    --- --- - --- ------------ --- -------- ------------
    ---------- - ----
    ------ ----------
  -
---

-------------- - -------

这里引入了 User 模型,包括了对于用户注册、用户登录等操作的路由。

编写视图模板

在 views 文件夹里,新建两个 register.ejs 和 login.ejs 模板文件。它们分别用于用户注册和用户登录页。其中,注册页包括了一个表单,包括了用户名、邮箱和密码,以及验证密码的输入框。登录页包括了一个表单,包括了邮箱和密码。当登录和注册表单提交时,它们将置于 routes/index.js 中定义的路由请求。

测试

运行以下命令启动 Web 服务:

在浏览器上访问 http://localhost:3000/register ,填写表单中的用户名、邮箱和密码,点击提交按钮,即可完成用户注册。接着,在浏览器上访问 http://localhost:3000/login ,输入刚刚注册的邮箱和相应的密码,即可完成用户登录。登录成功后,即可看到用户名和邮箱。

总结

使用 Express.js 和 MongoDB 可以方便地创建 Web 应用程序。本文中介绍了如何连接 MongoDB 数据库,创建数据集合,插入和查询数据,并提供了一个简单示例。通过实战,我们了解了如何使用 Express.js 和 MongoDB 构建具有用户注册、用户登录功能的 Web 应用程序。希望本文能对您有所启示,让您更好地了解和使用这个强大的技术组合。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64e5686ef6b2d6eab30d7448

纠错
反馈