开始使用MEVN技术栈开发01 概述

简介

Welcome to Beginning MEVN Stack! This book focuses on the key tasks and concepts to get you started to learn and build MEVN stack applications in a faster pace.

欢迎阅读《MEVN堆栈入门》！本书重点介绍关键任务和概念，帮助您以更快的速度开始学习和构建 MEVN 栈应用程序；

It is designed for readers who don ’ t need all the details about MEVN at this point in the learning curve but concentrate on what you really need to know.

它专为那些在学习阶段不需要了解 MEVN 所有细节，而只想了解真正需要了解的内容的读者而设计。

So what ’ s the MEVN stack? The MEVN stack is a popular stack o ftechnologies for building a modern Single Page Application. MEVN stands for MongoDB, Express, Vue and Node.js:

什么是 MEVN 协议栈？MEVN 协议栈是用于构建现代单页面应用程序的流行协议栈。MEVN 是 MongoDB、Express、Vue 和 Node.js 的缩写：

Node.js is one of the most popular server-side frameworks that allow us to execute JavaScript code in a web server.

Node.js 是最流行的服务器端框架之一，它允许我们在网络服务器中执行 JavaScript 代码。

Express is a web application framework for Node.js which make sapplication development in Node easier and faster. Node and Express together form the middle-tier web server of the stack.

Express 是 Node.js 的网络应用程序框架，它能让 Node 应用程序开发变得更简单、更快速。Node 和 Express 共同构成了堆栈的中间层网络服务器。

MongoDB is a NoSQL database which stores data persistently in the form of collections and documents.

MongoDB 是一种 NoSQL 数据库，以集合和文档的形式持久存储数据。

Vue is a frontend framework to build user interfaces.

Vue 是一个用于构建用户界面的前端框架。

Another popular stack variant is the MERN where we use React as t hefrontend. These frontends make up Single Page Applications (SPAs) which avoid reloading the page entirely and just fetches relevant portions of the page from the server to display new content.

另一种流行的堆栈变体是使用 React 作为前端的 MERN。这些前端构成了单页面应用程序（SPA），可以完全避免重新加载页面，而只是从服务器获取页面的相关部分来显示新内容。

我们将开发的应用程序

We will build a Movie reviews app which lets users view and search for movies. They can also log in and post reviews on the movies (fig. 1a, 1b, 1c).

我们将创建一个电影评论应用程序，让用户查看和搜索电影。他们还可以登录并发表电影评论（图 1a、1b、1c）。

在这里插入图片描述

Figure 1a – Home Page with search functionality

图 1a - 带搜索功能的主页

在这里插入图片描述

Figure 1b – Movie page listing reviews

图 1b - 列出评论的电影页面

在这里插入图片描述

Figure 1c – Create Review

图 1c - 创建评论

Users can see the list of reviews in a Movie ’ s page and post/edit/delete the irown review if they are logged in. They will not be able edit/delete other ’ s reviews though. Through this app, we will learn a lot of concepts and solidify our Node.js, Express, Vue and MongoDB knowledge.

如果用户已登录，则可以查看电影页面中的评论列表，并张贴/编辑/删除自己的评论。但他们不能编辑/删除其他人的评论。通过这个应用程序，我们将学习到很多概念，并巩固我们的 Node.js、Express、Vue 和 MongoDB 知识。

We will first talk about MongoDB and how to host our database in the cloud using MongoDB Atlas. We will then create the backend of the app using Node.js and Express. Our server will interact with the database using the native MongoDB JavaScript library. After that, we will create the frontend with Vue and connect the frontend to the backend to complete our MEVN stack app. In the last chapter, we will deploy our Node, Express backend on Heroku, and Vue frontend on Netlify, to run both backend and frontend in the cloud.

首先，我们将介绍 MongoDB 以及如何使用 MongoDB Atlas 在云中托管我们的数据库。然后，我们将使用 Node.js 和 Express 创建应用程序的后台。我们的服务器将使用本地 MongoDB JavaScript 库与数据库交互。之后，我们将使用 Vue 创建前端，并将前端连接到后端，完成 MEVN 栈应用程序。在最后一章，我们将在 Heroku 上部署 Node、Express 后端，在 Netlify 上部署 Vue 前端，以便在云中运行后端和前端。

So, the overall structure of our app will be:

因此，我们应用程序的总体结构将是：

the ‘ M ’ of the stack, MongoDB will be hosted on MongoDB Atlas.

的 “M”，MongoDB 将托管在 MongoDB Atlas 上。

the ‘ E ’ and ‘ N ’ , Express and Node runs the backend server (Express being part of Node) and exposes an API. Hosted on Heroku.

E "和 “N”，Express 和 Node 运行后端服务器（Express 是 Node 的一部分）并公开 API。托管在 Heroku 上。

the ‘ V ’ , Vue frontend calls the API and renders the user interface on the client ’ s browser. Hosted on Netlify.

V"，Vue 前端调用 API 并在客户端浏览器上渲染用户界面。由 Netlify 托管。