MEAN.JS - MEAN 專案設定

本章包括建立和設定 MEAN 應用程式。我們使用 NodeJS 和 ExpressJS 結合起來建立專案。

先決條件

在開始建立 MEAN 應用程式之前，我們需要安裝必要的先決條件。

您可以訪問 Node.js 網站 Node.js 安裝最新版本的 Node.js（適用於 Windows 使用者）。下載 Node.js 時，npm 將自動安裝到您的系統中。Linux 使用者可以使用此連結安裝 Node 和 npm。

使用以下命令檢查 Node 和 npm 的版本：

$ node --version
$ npm --version

命令將顯示如下所示的版本：

建立 Express 專案

使用 mkdir 命令建立專案目錄，如下所示：

$ mkdir mean-demo //this is name of repository

以上目錄是 Node 應用程式的根目錄。現在，要建立 package.json 檔案，請執行以下命令：

$ cd webapp-demo
$ npm init

init 命令將引導您完成建立 package.json 檔案的過程：

此實用程式將引導您完成建立 package.json 檔案的過程。它只涵蓋最常見的專案，並嘗試猜測合理的預設值。

See `npm help json` for definitive documentation on these fields and exactly what they do.
Use `npm install --save` afterwards to install a package and save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (mean-demo) mean_tutorial
version: (1.0.0)
description: this is basic tutorial example for MEAN stack
entry point: (index.js) server.js
test command: test
git repository:
keywords: MEAN,Mongo,Express,Angular,Nodejs
author: Manisha
license: (ISC)
About to write to /home/mani/work/rnd/mean-demo/package.json:

{
   "name": "mean_tutorial",
   "version": "1.0.0",
   "description": "this is basic tutorial example for MEAN stack",
   "main": "server.js",
   "scripts": {
      "test": "test"
   },
   "keywords": [
      "MEAN",
      "Mongo",
      "Express",
      "Angular",
      "Nodejs"
   ],
   "author": "Manisha",
   "license": "ISC"
}

Is this ok? (yes) yes

點選“是”，將生成如下所示的資料夾結構：

-mean-demo
   -package.json

package.json 檔案將包含以下資訊：

{
   "name": "mean_tutorial",
   "version": "1.0.0",
   "description": "this is basic tutorial example for MEAN stack",
   "main": "server.js",
   "scripts": {
      "test": "test"
   },
   "keywords": [
      "MEAN",
      "Mongo",
      "Express",
      "Angular",
      "Nodejs"
   ],
   "author": "Manisha",
   "license": "ISC"
}

現在，要將 Express 專案配置到當前資料夾並安裝框架的配置選項，請使用以下命令：

npm install express --save

轉到您的專案目錄並開啟 package.json 檔案，您將看到以下資訊：

{
   "name": "mean_tutorial",
   "version": "1.0.0",
   "description": "this is basic tutorial example for MEAN stack",
   "main": "server.js",
   "scripts": {
      "test": "test"
   },
   "keywords": [
      "MEAN",
      "Mongo",
      "Express",
      "Angular",
      "Nodejs"
   ],
   "author": "Manisha",
   "license": "ISC",
   "dependencies": {
      "express": "^4.17.1"
   }
}

在這裡您可以看到 express 依賴項已新增到檔案中。現在，專案結構如下所示：

-mean-demo
   --node_modules created by npm install
   --package.json tells npm which packages we need
   --server.js set up our node application

執行應用程式

導航到您新建立的專案目錄，並建立一個包含以下內容的 server.js 檔案。

// modules =================================================
const express = require('express');
const app = express();
// set our port
const port = 3000;
app.get('/', (req, res) ⇒ res.send('Welcome to Tutorialspoint!'));

// startup our app at https://:3000
app.listen(port, () ⇒ console.log(`Example app listening on port ${port}!`));

接下來，使用以下命令執行應用程式：

$ npm start

您將獲得如下所示的確認資訊：

它提示 Express 應用程式正在執行。開啟任何瀏覽器，並使用 **https://:3000** 訪問應用程式。您將看到如下所示的“歡迎來到 Tutorialspoint！”文字：

列印頁面