使用 Express.js 部署一个基础的 MEAN Stack 应用

本文将基于 Express.js 框架,介绍如何部署一个基础的 MEAN Stack 应用。MEAN Stack 指的是 MongoDB、Express.js、AngularJS 和 Node.js,是一种全栈式开发框架。通过本文的学习,你将能够掌握使用 Express.js 搭建 MEAN Stack 应用的基本方法。

准备工作

在开始之前,需要先安装 MongoDB、Node.js 和 Express.js。MongoDB 是一个开源、跨平台的 NoSQL 数据库,具有高效的数据存储和查询。Node.js 是一个基于 JavaScript 运行的服务器端平台,可用于构建高性能、可扩展的 Web 应用程序。Express.js 是 Node.js 应用程序的 Web 框架,它提供了一系列功能强大且易于使用的工具,例如路由、模板引擎和中间件。

安装 MongoDB 和 Node.js 的方法可以在官网上查看。安装 Express.js 需要在命令行中执行以下命令:

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

创建 Express.js 应用

  1. 使用命令行工具创建一个新的 Express.js 应用,并进入到该应用的根目录:
------- -------
-- -------
  1. 安装应用所需的模块:
--- -------
  1. 启动应用:
--- -----

此时,你在浏览器中打开 http://localhost:3000,应该就能够看到 Express.js 应用的欢迎页面了。

连接 MongoDB

需要在 Express.js 应用中使用 Mongoose 模块连接 MongoDB。Mongoose 是一个将 Node.js 和 MongoDB 结合在一起使用的工具,它提供了强大的数据建模和查询功能。

  1. 安装 Mongoose 模块:
--- ------- -------- ------
  1. 创建一个新的连接:

app.js 文件中添加以下代码,并将 <user><password><database> 替换为你自己的 MongoDB 用户名、密码和数据库名称:

----- -------- - --------------------
---------------------------------------------------------------------
  1. 测试连接:

app.js 文件中添加以下代码,用于测试连接是否成功:

----- -- - --------------------
-------------- --------------------------- ----------- ----------
--------------- ---------- -
  ---------------------- -- -----------
---
  1. 创建数据模型:

models/ 目录下创建一个新的文件,例如 user.js,并添加以下代码,用于定义数据模型:

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

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

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

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

创建 RESTful API

在 Express.js 应用中,可以通过创建 RESTful API 来处理客户端发来的请求,并将数据存储到 MongoDB 中。RESTful API 是一种基于 HTTP 协议的 API 设计模式,它将资源(例如用户、文章等)映射到 URL 上,通过 HTTP 方法(例如 GET、POST、PUT、DELETE)来实现对资源的操作(例如获取、创建、更新、删除)。

  1. 创建 API 路由:

routes/ 目录下创建一个新的文件,例如 api.js,并添加以下代码,用于创建 API 路由:

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

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

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

-------------- - -------
  1. 在主应用中使用 API 路由:

app.js 文件中添加以下代码,用于将 API 路由挂载到主应用上:

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

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

创建 AngularJS 前端

public/ 目录下创建一个新的文件,例如 index.html,并添加以下代码,用于创建 AngularJS 前端:

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

运行 MEAN Stack 应用

启动 MongoDB:

------

启动 Express.js 应用:

--- -----

在浏览器中打开 http://localhost:3000,应该就能够看到 MEAN Stack 应用的主页面了。你可以通过表单添加新的用户,表格中的用户数据将实时更新。

总结

本文介绍了如何使用 Express.js 部署一个基础的 MEAN Stack 应用。我们学习了如何使用 Mongoose 模块连接 MongoDB,如何创建 RESTful API 路由,以及如何使用 AngularJS 创建前端界面。通过本文的学习,你应该能够掌握使用 Express.js 搭建 MEAN Stack 应用的基本方法,同时也能够了解到 MEAN Stack 的一些基本概念和思想。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/664861c3d3423812e46ff37f