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初期化プロジェクト
初期化時にpackage.jsonは構成を行い、すべてデフォルトでよい、興味があればexpressのpackageを見ることができる.json、一般的に標準的な構成項目、expressのpackage.jsonにはすべて体現されています
1.3. インストールexpress
expressのインストールは簡単ですが、以下のコマンドでインストールします.
2.appを作成する.js
app.jsコードは以下の通りです.
その中の最も主要な部分は
3.テストページの追加
publicにテストページを追加する
## 4. アプリアプリを起動##追加後、アプリを起動
コンソール出力
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
を入力したことを示しています.ページは以下のように表示されます.