1. 程式人生 > >Express框架的安裝&&通訊測試 - 講解篇

Express框架的安裝&&通訊測試 - 講解篇

文章目錄


一、 Express框架的安裝:

通過cmd命令配置package.json ,cmd命令,依次如下:
  • 開啟cmd面板,cd到你自定義的資料夾(以我的自定義檔案和路徑為例 C:\Users\Administrator\JavaScript\vue_book\5-2-1
  • 然後,cmd命令:npm init
  • 接著是一些基礎資訊的配置
    (有的可直接回車預設或跳過,如頁尾的cmd演示結果圖所示)
  • 配置完畢之後。
    接著就是引入安裝Express框架,cmd命令如下:
    npm install express --save
    [全域性安裝請新增引數 -g]

檔案目錄詳解 - 圖解,如下:
在這裡插入圖片描述

在自定義路徑下通過cmd命令npm init配置package.json檔案:

package.json 檔案的程式碼更新後如下:
{
  "dependencies": {
    "express": "^4.16.4",
    "ij-rpc-client": "^0.3.2",
    "vue-resource": "^1.5.1"
  },
  "name": "5-2-1",
  "version": "1.0.0",
  "description": "helloworld",
  "main": "index.js",
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

index.js 程式碼如下:
//定義Express例項
var express = require('express');
var app = express();
//定義路由
app.get('/', function (req, res) {
	res.send('Hello World !!!');
});
//設定啟動地址埠資訊
var server = app.listen(3000, function () {
	var host = server.address().address;
	var port = server.address().port;
//列印相關的內容提示
	console.log('Example app listening at http://%s:%s', host, port);
});



簡單的基礎資訊配置 · 截圖參考如下:(順序有點亂

因為發現再別的磁碟下,無法實現正常cd到路徑,所以臨時改為cd到C盤的Administrator下相關檔案內:
在這裡插入圖片描述

二、 模擬Express框架的通訊測試 :通訊是否正常OK?

cmd命令npm index.js 驅動之後,效果圖如上圖末尾的效果:http://:::3000

此時瀏覽器輸入:http://localhost:3000

若瀏覽器輸出如下圖所示,則說明通訊正常OK, EXpress安裝成功!

三、通訊正常OK · 瀏覽器效果圖


以上就是關於“ Express框架的安裝&&通訊測試 - 講解篇 ” 的全部內容。