Node.js+expressメッセージボード機能実装例

メッセージボード

nodejs+express+art-template をベースにしたメッセージボード機能。リストインターフェイス、インターフェイスの追加、およびメッセージ送信機能が含まれています。

必要なライブラリ

次のpackage.jsonをコピーし、 npm またはyarn install npm installだけです。

package.json に必要な内容は次のとおりです。

{
  "名前": "nodejs_message_board",
  "バージョン": "2021.09",
  「プライベート」：true、
  「スクリプト」: {
    「開始」: 「ノード アプリ」
  },
  「依存関係」: {
    "アートテンプレート": "^4.13.2",
    "デバッグ": "~2.6.9",
    "エクスプレス": "~4.16.1",
    "エクスプレスアートテンプレート": "^1.0.1"
  }
}

オープンソースプロジェクト

このプロジェクトは、[Node.js Study] nodejs オープンソース学習プロジェクトのexpress_message_boardに含まれています。皆様の学習とダウンロードを歓迎します。

実行中の効果はローカルホスト、メッセージのホームページ

ここに画像の説明を挿入ローカルホスト/投稿、

メッセージページを追加

ここに画像の説明を挿入ローカルホスト/言う?

name=xxx&message=xxx、メッセージを送信してホームページにリダイレクトします

ここに画像の説明を挿入

プロジェクト構造

インデックス.html

これはメッセージリストであり、ホームページでもあります。渡された値に基づいてリストをレンダリングします。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <title>メッセージボード</title>
  <link rel="スタイルシート" href="/public/css/bootstrap4.css" rel="外部 nofollow" rel="外部 nofollow" >
</head>
<本文>
<div class="ヘッダーコンテナ">
  <div class="ページヘッダー">
    <h1>メッセージボード<small>メッセージリスト</small></h1>
    <a class="btn btn-success" href="/post" rel="external nofollow" >メッセージを残す</a>
  </div>
</div>
<div class="コメントコンテナ">
  <ul class="リストグループ">
    {{各コメント}}
    <li class="リストグループ項目">
      {{$value.name}} はこう言っています: {{$value.message}}
      {{$value.datetime}}
    </li>
    {{/それぞれ}}
  </ul>
</div>
</本文>
</html>

投稿.html

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>メッセージボード</title>
    <link rel="スタイルシート" href="/public/css/bootstrap4.css" rel="外部 nofollow" rel="外部 nofollow" >
</head>
<本文>
<div class="ヘッダーコンテナ">
    <div class="ページヘッダー">
        <h1><a href="/" rel="external nofollow" >メッセージボード<small>メッセージを追加</small></a></h1>
    </div>
</div>
<div class="コメントコンテナ">
    <フォームアクション="/say" メソッド="GET">
        <div class="フォームグループ">
            <label for="name">あなたの名前</label>
            <input type="text" id="name" name="name" class="form-control" placeholder="お名前を入力してください" required minlength="2" maxlength="10">
        </div>
        <div class="フォームグループ">
            <label for="message">メッセージの内容</label>
            <textarea id="message" name="message" class="form-control" placeholder="メッセージを入力してください" cols='30' rows='10' required minlength="5" maxlength="20"></textarea>
        </div>
        <button type="submit" class="btn btn-default">公開</button>
    </フォーム>
</div>
</本文>
</html>

ルート/index.js

ルーターはこちら

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


//ホームページのメッセージリストデータをシミュレートする var comments= {"comments":[
    {name:"AAA",message:"どのエディタを使用していますか? WebStorem または VSCODE",datetime:"2021-1-1"},
    {name:"BBB",message:"今日はいい天気ですね。釣りかコードか",datetime:"2021-1-1"},
    {名前:"Moshow",メッセージ:"zhengkai.blog.csdn.net",日時:"2021-1-1"},
    {name:"DDD",message:"ha、haha、hahahaの違い",datetime:"2021-1-1"},
    {name:"EEE",message:"王守義十三香辛料またはiPhone十三香辛料",datetime:"2021-1-1"}
]}

/* zhengkai.blog.csdn.net - 静的ルーティングホスティング*/
router.get('/', 関数(req, res, next) {
    res.render('index', コメント);
});
router.get('/post', 関数(req, res, next) {
    res.render('投稿', コメント);
});
router.get('/say', 関数(req, res, next) {
    console.log(要求クエリ)
    コンソールログ(req.url)
    const コメント = req.query;
    コメント.datetime='2021-10-01';
    comments.comments.unshift(コメント);
    // URL サフィックス localhost なしでホームページにリダイレクトします
    res.redirect('/');
    // URL サフィックス localhost/say?xxxx=xxx を使用して、ホームページを直接レンダリングします。
    //res.render('index', コメント);
});

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

アプリ

ここでは全体的な制御として

//モジュールをロード const http=require('http');
定数 fs = require('fs');
url を require('url') します。
const テンプレート = require('art-template');
定数パス = require('path');
定数 express = require('express');
定数ルーター = express.Router();
express() は、定数です。


//エンジン設定を表示
app.set('views', path.join(__dirname, 'views'));
app.set('ビューエンジン', 'html');
app.engine('html',require('express-art-template'));

app.use('/public',express.static(path.join(__dirname, 'public')));

const indexRouter = require('./routes/index');
app.use('/', インデックスルーター);


//監視オブジェクトを作成する app.listen(80,function(){
  console.log('zhengkai.blog.csdn.net プロジェクトが正常に開始されました http://localhost')
})

これで、node.js + express メッセージボード機能の実装例に関するこの記事は終了です。関連する node.js express メッセージボードコンテンツの詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: