ホームページ > ウェブフロントエンド > jsチュートリアル > Nodejs を使用して html、css、JS などの静的リソース ファイルにアクセスするサーバーを構築する方法

Nodejs を使用して html、css、JS などの静的リソース ファイルにアクセスするサーバーを構築する方法

不言
リリース: 2018-06-12 14:08:26
オリジナル
3932 人が閲覧しました

この記事では主に、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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート