Expressを使用してプロジェクトを自動的にビルドするNode.jsのプロセス全体

Expressを使用してプロジェクトを自動的にビルドするNode.jsのプロセス全体

1. Expressライブラリとジェネレータをインストールする

cmdを開いて、次のコマンドを入力します: yarn global add express express-generator

説明する:
上記の 2 つのモジュールは、それぞれライブラリとジェネレーターを表しています。express3 では、express をインストールするとジェネレーター express-generator が自動的にインストールされますが、express4 ではそれらが分離されているため、個別にインストールする必要があります。

インストール後、コマンド express --version を使用してインストールが成功したかどうかを確認できます。

バージョン番号が表示されたらインストールは成功です(下の図を参照)。

2.エクスプレスジェネレーターはエクスプレスプロジェクトを自動的に作成します

コマンドを入力します: express nodejs (以下のように成功します)

成功後のディレクトリ:

3. package.jsonディレクトリに移動して関連パッケージをインストールします。

コマンドを入力します: yarn または cnpm i または npm i

4. プロジェクトを開始する

コマンドを入力してください: npm run start

ブラウザを開いて127.0.0.1:3000にアクセスし、プロジェクトにアクセスします。

V. プロジェクトカタログの説明

bin: 実行可能ファイルを保存する
public: js、css、img などのファイルを保存します
ルーター: ルーティングファイルを保存します
ビュー: ビューファイルまたはテンプレートファイルを保存する
app.js: 起動ファイル(エントリファイル)
package.json: プロジェクト情報とモジュールの依存関係を保存します。依存関係に依存モジュールを追加して npm install を実行すると、npm は現在のディレクトリの package.json をチェックし、指定されたすべてのモジュールを自動的にインストールします。
node_modules: package.json にインストールされたモジュールを保存します。依存モジュールを package.json に追加してインストールすると、このフォルダーに保存されます。

参考リンク: https://www.jb51.net/article/209247.htm

6. このプロジェクトでの開発方法

まず、ルートに新しいtest.jsファイルを作成します。

var express = require('express');
var ルーター = express.Router();

router.get('/', 関数(req, res, next) {
	res.send('私はインターフェースの戻り値です');
});

モジュール.exports = ルーター;

次にapp.jsに次のコードを追加します。

var testRouter = require('./routes/test');
app.use('/test', testRouter);

次にブラウザコンソールを開き、fetchを使用して先ほど作成したインターフェースをリクエストします。

フェッチ('http:localhost:3000/test')
.then(res=>{
  res.text() を返す
}).then(res=>{
  コンソール.log(res)
})

クロスドメインの問題があることがわかりました。これは、Node.js にクロスドメインを追加しなかったために発生しました。

app.jsに次のクロスドメインコードを追加します。

//クロスドメインアクセスを設定する(すべてのリクエストの前に設定する)
app.all("*", 関数(req, res, next) {
	// ドメイン間を移動できるドメイン名を設定します。* は、任意のドメイン名がドメイン間を移動できることを表します。res.header("Access-Control-Allow-Origin", "*");
	// 許可されるヘッダー タイプ res.header("Access-Control-Allow-Headers", "content-type");
	//クロスドメインで許可されるリクエストメソッド res.header("Access-Control-Allow-Methods", "DELETE,PUT,POST,GET,OPTIONS");
	if (req.method == 'OPTIONS')
		res.sendStatus(200); //オプションでクイック終了を要求します。
		次();
});

その後、プロジェクトを再起動して通常通りアクセスできるようにします。

プロジェクトの内容を変更すると、プロジェクトを手動で再起動する必要があり、少し面倒です。この問題は、プラグインをインストールすることで解決できます。

7. nodemonを使用してサービスを自動的に再起動する

nodemonモジュールをインストールする

コマンドを入力します: npm i nodemon -S

nodemon.jsonファイルを作成する

プロジェクトのルート ディレクトリに nodemon.json ファイルを作成します。

{
	"再起動可能": "rs",
	"無視": [".git", ".svn", "node_modules/**/node_modules"],
	「詳細」:true、
	"実行マップ": {
		"js": "ノード --harmony"
	},
	"時計": []、
	"env": {
		"NODE_ENV": "開発"
	},
	"ext": "js json njk css js"
}

nodemonモジュールの使用

package.jsonファイルにスクリプトコードの行を追加します

"dev": "nodemon ./bin/www"

コードは私の github リポジトリに配置されています。リンクは github.com/wuguanfei/n… に添付されています。

要約する

これで、node.js と express を使用してプロジェクトを自動的にビルドする方法についての記事は終了です。node.js express を使用してプロジェクトを自動的にビルドする方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Node koa2 ssr プロジェクト構築手順
  • Alibaba Cloud での Node.js プロジェクトの簡単なデプロイ
  • クラウド サーバーに Node.js プロジェクトをデプロイする方法 (初心者向けシリーズ)
  • ノードでVueプロジェクトを作成する詳細な手順
  • プロジェクトエンジニアリングの自動初期化の標準プロセスを実現するノードコマンドラインツール
  • Node.js プロジェクト内のすべての空のフォルダーに gitkeep を作成する方法
  • vueSSR プロジェクトを 0 から 1 にビルドする: ノードと vue-cli3 の構成
  • PHPStormでNode.jsプロジェクトをユニットテストする方法
  • pm2 を使用してノード プロジェクトを自動的にデプロイする方法
  • node.js が大規模プロジェクトに適さない理由

<<:  MySqlは、外部ネットワーク接続クライアントの低速問題を解決するためにskip-name-resolveを使用します。

>>:  Dockerコンテナのログ処理の詳細な説明

推薦する

MySQL 8.0.22 winx64 のインストールと設定方法のグラフィックチュートリアル

MySQL-8.0.22-winx64のデータベースインストールチュートリアルは参考になります。具体...

Vueはプラグインを使用して画像を比例してカットします

この記事では、プラグインを使用して画像の比例カットを実現するVueの具体的なコードを参考までに共有し...

Linux ディスクのシーケンシャル書き込みとランダム書き込みの方法

1. はじめに● ランダム書き込みではヘッドがトラックを頻繁に変更するため、効率が大幅に低下します。...

vue+el-element でファイル名に応じてダイアログを動的に作成する実践

目次背景成し遂げる1. カプセル化された /utils/dialogControl.js 2.ダイア...

MySQL データベースは XA 仕様をどのように実装しますか?

MySQL 一貫性ログMySQL データベースの電源が切れた場合、コミットされていないトランザクシ...

Echarts は 1 つのグラフ内で異なる X 軸を切り替える機能を実装します (サンプル コード)

レンダリング下の画像のような効果を実現したい場合は、読み続けてアニメーション画像に直接進んでください...

Bootstrapグリッドの垂直および水平配置の詳細な説明

目次1. Bootstrap グリッドレイアウト2. 垂直方向の配置2.1 行タグの垂直方向の配置を...

Mysql の 2 つのテーブル間の結合クエリの 4 つの状況の概要

一般的に言えば、より完全な結果を得るためには、2 つ以上のテーブルから結果を取得する必要があります。...

MySQL データ型の選択原則

目次小さいけれど美しいシンプルにNULL値を避けるデータタイプを選択する手順データ型の紹介1. 文字...

JavaScript を使用したコマンドライン アプリケーションの構築

目次1. ノードをインストールする2. Commander.jsをインストールする3. JavaSc...

Web プロジェクト開発 VUE の混合と継承の原則

目次ミキシンMixin ノート (重複名)ローカルミックスイングローバル ミックスイン定義とグローバ...

子要素の margin-top によって親要素が移動する問題の解決方法

問題の説明今日、ページ スタイルを変更していたときに、子要素にmargin-top設定したのに、子要...

CSS で垂直方向の中央揃えを実装するいくつかの方法の概要

フロントエンドのレイアウト プロセスでは、水平方向の中央揃えを実現するのは比較的簡単で、通常は ma...

HTMLの表のtbodyは上下左右にスライドできます

テーブル ヘッダーが固定されている場合は、それを 2 つのテーブルに分割する必要があります。1 つの...

HTMLコードに基づく画像断片化読み込み機能の実装

今日は断片化された画像の読み込み効果を実装します。効果は次のとおりです。 これを 3 つのステップで...