NodeJS+express html、css、JSなどの静的リソースファイルへのアクセス

1520 ワード

元々フロントエンド開発をする時はtomcatを使って、自分のフロントエンドコードをテストしていましたが、
NodeJSでWebサーバを作ります.最終的にバックグラウンドと対話するのはJavaを開発言語として使用するため、1つの静的サーバーとして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にテストページを追加する



  
  Web    


  

Web


## 4. アプリアプリを起動##追加後、アプリを起動
node app.js

コンソール出力App listening at port 8080は、NodeJsのWebアプリケーションがブラウザに127.0.0.1:8080を入力したことを示しています.ページは以下のように表示されます.