フロントエンドnode.jsは、Expressモジュールを使用してWebサーバーをすばやく構築します
前に書かれています：エディター：vscode
準備：
使用するモジュール：
- Expressモジュール：サーバーをすばやく構築するために使用されます
- モーガンモジュール：ログモジュール
- ボディパーサーモジュール：データ処理用
- パスモジュール：アドレス情報処理用の組み込みモジュール
実装プロセス：
- プロジェクトファイルの作成：ここでは、ルートディレクトリとしてexpress-appフォルダーを作成しました
- プロジェクトのディレクトリ構造を作成します。ここでは、必要なディレクトリのみを作成しました。
ディレクトリ構造は次のとおりです。
をクリックしてフォルダに直接作成するか、ターミナルのexpress-appフォルダにアクセスしてコマンドを使用します。 mkdirフォルダー名作成方法 - メインモジュールにコードを書く
//引入 要使用到的模块 express morgan body-parser
const express = require("express");
const logger = require("morgan");
const bodyParser = require("body-parser");
const path = require("path");
const router = require("./routes/index");
//实例化 express
const app = express();
//使用中间件 app.use()
//设置日志以开发环境显示
app.use(logger("dev"));
//设置数据处理方式
app.use(bodyParser.json()); //处理 json 数据
app.use(bodyParser.urlencoded({
extended:false})); //处理 post 提交的数据
//设置静态资源
//express.static(" 地址 ")设置静态资源
//path.join(__dirname , "public") 动态获取服务器地址 与静态资源文件夹进行地址拼接 .join()
app.use(express.static(path.join(__dirname , "public")));
//设置路由
app.use(router);
//端口号监听
app.listen(3000 , () => {
console.log("server is running...")
});
ここでルーティングを設定する方法は2つあります。1つはルーティングモジュールを自分で作成する方法、もう1つはExpressを介してモジュールを生成する方法です。ここでは、routes / index.jsファイルに
ルーティングを記述しました。ルーティングファイル：routes / index.js
//引入 express 模块
//引入 express 模块
const express = require("express");
//实例化路由
const router = express.Router();
//设置路由匹配规则
//访问 home 页面
router.get("/" , (request , response) => {
console.log("获取到的参数",request.url);//打印一下访问路径，控制台查看
response.send("欢迎来到 express 框架");
});
//暴露路由
module.exports = router;
-
静的リソースフォルダーにリソースを追加するここでは、テスト用にいくつかのファイルを追加しました
-
この時点で、コードを記述した後、ターミナルで操作を開始します。
-
現在のプロジェクトのルートディレクトリに、
npm initinitializeを使用してpackage.jsonドキュメントを生成し、プロジェクトに関する情報を記録します。また、転送とコピーの公開に依存します。ターミナルに表示される情報に従って設定します。もちろん、いつでもEnterキーを押すことができます。設定後のmypackage.jsonファイル： -
-
サードパーティのモジュールをインストールするには、Taobao npmミラー（インストール速度が速い）を使用したため、コマンドは次のとおり
cnpm i express morgan body-parser --saveです
。正常なインストール。この時点
でのpackage.jsonファイルは、最後に3つの依存パッケージを生成しました。 -
次のステップは
node app
、ブラウザhttp://127.0.0.1:3000/に入力されたプロジェクトを実行して、パブリックアドレスにアクセスするときにルート
アクセスcssファイルhttp://127.0.0.1:3000/css/base.css
アクセスjsファイルhttp://127.0.0.1:3000/js/common.js
アクセスイメージリソースhttp://127.0.0.1:3000/images/guoqing.jpg
にアクセスすることです。
この時点で、この単純なプロジェクトは完了です。