NodeJS + express訪問html、css、JS等靜態資源文件

時間 2019-11-12

標籤 nodejs express 訪問 html css 靜態資源文件欄目 HTML 简体版

原文原文鏈接

原先作前端開發時都是用XAMPP或LAMP，把HTML、CSS、JS等前端資源放到htdocs下，測試本身的前端代碼，但有些不方便的地方是，在調用Ajax請求後沒法模擬請求返回的數據，最近學了點NodeJS，就用NodeJs來作Web服務器。由於最終與後臺交互的是用Java做開發語言的，因此就不用jade、ejs等模板了，只是單純地做爲一個靜態服務器以及模擬處理Ajax數據請求html

1. 初始化項目

1.1. 環境搭建

先安裝NodeJs、npm(自帶)，國外的鏡像資源訪問慢的話，能夠考慮使用taobao的資源，用npm安裝nrm來管理registry的路徑,比較經常使用的是taobao，也能夠用cnpm或者其餘的前端

1.2. npm初始化項目

npm初始化項目node

npm init

初始化時能夠對package.json進行配置，所有默認便可，如有興趣可看下express的package.json，通常狀況下標準的配置項，express的package.json中都有體現web

1.3. 安裝express

express的安裝很簡單，使用如下命令安裝express

npm i express --save

2. 編寫app.js

app.js代碼以下：npm

const express = require('express')
const path = require('path')
const app = express()

app.use(express.static(path.join(__dirname, 'public')))

app.listen(8080, () => {
  console.log(`App listening at port 8080`)
})

其中最主要的部分是app.use(express.static(path.join(__dirname, 'public')))，該行代碼是在express添加中間件，設置靜態資源路徑爲public，全部的HTML、CSS、JS等文件都放在public下便可，後續代碼遷移直接將public下的代碼copy到Java Web的webRoot中就行json

3. 添加測試頁面

在public中添加測試頁面瀏覽器

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Web管理平臺</title>
</head>
<body>
  <h1>Web管理平臺</h1>
</body>
</html>

## 4. 啓動APP應用 ##
添加完後，啓動APP應用服務器

node app.js

控制檯輸出App listening at port 8080,說明NodeJs的Web應用已經跑起來了

在瀏覽器中輸入127.0.0.1:8080，頁面展現以下：
app

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。