本文将基于 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 应用
- 使用命令行工具创建一个新的 Express.js 应用,并进入到该应用的根目录:
------- ------- -- -------
- 安装应用所需的模块:
--- -------
- 启动应用:
--- -----
此时,你在浏览器中打开 http://localhost:3000
,应该就能够看到 Express.js 应用的欢迎页面了。
连接 MongoDB
需要在 Express.js 应用中使用 Mongoose 模块连接 MongoDB。Mongoose 是一个将 Node.js 和 MongoDB 结合在一起使用的工具,它提供了强大的数据建模和查询功能。
- 安装 Mongoose 模块:
--- ------- -------- ------
- 创建一个新的连接:
在 app.js
文件中添加以下代码,并将 <user>
、<password>
和 <database>
替换为你自己的 MongoDB 用户名、密码和数据库名称:
----- -------- - -------------------- ---------------------------------------------------------------------
- 测试连接:
在 app.js
文件中添加以下代码,用于测试连接是否成功:
----- -- - -------------------- -------------- --------------------------- ----------- ---------- --------------- ---------- - ---------------------- -- ----------- ---
- 创建数据模型:
在 models/
目录下创建一个新的文件,例如 user.js
,并添加以下代码,用于定义数据模型:
----- -------- - -------------------- ----- ------ - ---------------- ----- ---------- - --- -------- ----- ------- ------ ------- --------- ------ --- ----- ---- - ---------------------- ------------ -------------- - -----
创建 RESTful API
在 Express.js 应用中,可以通过创建 RESTful API 来处理客户端发来的请求,并将数据存储到 MongoDB 中。RESTful API 是一种基于 HTTP 协议的 API 设计模式,它将资源(例如用户、文章等)映射到 URL 上,通过 HTTP 方法(例如 GET、POST、PUT、DELETE)来实现对资源的操作(例如获取、创建、更新、删除)。
- 创建 API 路由:
在 routes/
目录下创建一个新的文件,例如 api.js
,并添加以下代码,用于创建 API 路由:
----- ------- - ------------------- ----- ------ - ----------------- ----- ---- - -------------------------- -------------------- ------------- ---- ----- - ------------- ------------- ------ - -- ----- ------ ---------- ---------------- --- --- --------------------- ------------- ---- ----- - ----- ---- - --- --------------- ----------------------- - -- ----- ------ ---------- --------------------------- --- --- -------------- - -------
- 在主应用中使用 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