この記事では主に、Nodejs を使用して html、css、JS などの静的リソース ファイルにアクセスするサーバーを構築するための関連知識を紹介します。非常に良い基準値を持っています。以下のエディタで見てみましょう
近くの店舗の機能をテストするには、テスト用のサーバーを設定する必要があります。当初は Apache を使用する予定でしたが、長い間 Nodejs を使用していなかったため、フロントエンドの作業を行っていると考えました。そこで、学んだ知識を使用して自分で設定してみてはいかがでしょうか。
ことわざにあるように、労働者が仕事をうまくやりたいなら、まず道具を研ぐ必要があります。 Node+Express を使用してサーバーを構成したいので、コンピューターに Node+Express がない場合は、当然のことながら、最初にこれら 2 つの大きな宝物をインストールする必要があります。
1. ノードをインストールします。 Node 公式 Web サイトにアクセスしてダウンロードしてインストールし、次のステップに進むだけで完了です。
2.npm プロジェクトを初期化します。ターミナルを開き、「npm init -y」と入力します。注: -y を入力しない場合は、いくつかの構成を自分で記述する必要があります。 -y を入力すると、デフォルトで package.json ファイルが直接生成されます。
3. Express をインストールします。ターミナルに npm i S Express と入力して Enter を押します
2 番目のステップは、Express 構成ファイルを作成することです。新しい app.js ファイルを作成します (ファイル名は任意ですが、キーワードは使用しないでください)
var express = require('express'); var path = require('path'); var app = express(); [color=#ff0000]app.use(express.static(path.join(__dirname, 'public')));[/color] app.listen(4444, function() { console.log('App listening at port 8080;'); });
最も重要な部分は app.use(express.static(path.join(__dirname, 'public')))
です。このコード行は、express にミドルウェアを追加し、静的ファイルを設定することです。リソース パスを public に設定すると、すべての HTML、CSS、JS、その他のファイルを public に配置できます
3 番目のステップは、パブリック フォルダーにテスト ページを追加することです。ここで書いているのは、changeColor.html という名前のページです。 携帯電話で表示すると、携帯電話の画面が縦横に変化し、本体の背景色が異なります。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>testExpress</title> <style type="text/css"> body{background-color: yellow;} @media screen and (orientation:landscape){ body{background-color: orange;} } </style> </head> <body> </body> </html>
ステップ 4. 追加後、サービスを開始します。
ここでは sublime を使用しています。ctrl+r を 2 回押して、コンソールに「App listen at port 4444;」と出力された場合、サービスが正常に開始されたことを意味します。ブラウザを開き、アドレス バーに http://localhost/4444/changeColor.html
と入力して、テスト Web ページを表示します。 localhost をマシンの IP に置き換えると、置き換えられたアドレスが携帯電話に表示されます。
上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。
関連する推奨事項:
グラデーション背景効果を実装するための JS および CSS コード
以上がNodejs を使用して html、css、JS などの静的リソース ファイルにアクセスするサーバーを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。