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


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

1. 初始化項目

1.1. 環境搭建

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

1.2. npm初始化項目

npm初始化項目

npm init

初始化時可以對package.json進行配置,全部默認即可,若有興趣可看下express的package.json,一般情況下標准的配置項,express的package.json中都有體現

1.3. 安裝express

express的安裝很簡單,使用以下命令安裝

npm i express --save

2. 編寫app.js

app.js代碼如下:

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中就行

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,頁面展示如下:


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM