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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JSがメッセージボード機能を実現
  • jsp メッセージ ボード ソース コード 3: jsp 初心者向け。
  • js で実装された折りたたみ式メッセージボード (ソースコードのダウンロードあり)
  • ReactJS と Python の Flask フレームワークを使用してメッセージ ボードを作成するコード例
  • JSで簡単なメッセージボードを実装する(ノード操作)
  • Web メッセージボード機能を実装する JavaScript
  • メッセージボード機能を実現するJavaScript

<<:  docker compose idea CreateProcess error=2 システムは指定されたファイルを見つけることができません

>>:  Linux statコマンドの使用

推薦する

React 並行関数エクスペリエンス (フロントエンド並行モード)

React は、開発者が Web およびモバイルベースのアプリケーションを作成するために使用するオ...

HTML+CSS+jQuery はスクリーンショットで検索ホットリストタブ効果を模倣します

コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...

ブラウザのURLの前に小さなアイコンを表示する方法

多くのウェブサイトを閲覧すると、ブラウザのアドレスバーの前に小さなアイコンがあり、ブラウザのタブの位...

Vue echarts は棒グラフの動的な表示を実現します

この記事では、棒グラフの動的な表示を実現するためのvue echartsの具体的なコードを参考までに...

Linux で MongoDB のリモート自動バックアップを実装する方法

序文古いプロジェクトを引き継ぐ苦労 - MongoDB クラスターの学習と構築に関する前回の記事を読...

画像拡大鏡効果のJSバージョン

この記事では、画像拡大鏡効果を実現するためのJSの具体的なコードを参考までに紹介します。具体的な内容...

HTML コメント HTML 内のテキストコメントをマークするための記号

HTML コメント。コードの横に HTML コメントを付ける必要があることがよくあります。そうするこ...

Selenium+testng を使用して Docker で Web 自動化を実現する方法

序文長い間さまざまな資料を読んで、ついに selenium+testng のパラメータ化の問題を解決...

ページにスクロールバーが表示されたときに、スクロールバーがページ幅に影響しないようにする方法

本体の幅をウィンドウの幅に設定します(次のスクリプトで制御されます) $("body&qu...

Ubuntuの基本設定: openssh-serverのインストールと使用

Ubuntu 17.10 での openssh-server のインストールと使用を記録します。イン...

トークンの有効期限が切れたときにページを更新するときに繰り返しプロンプトが表示されないようにする Vue について

トークンの有効期限が切れたら、ページを更新します。ページの読み込み時にバックエンドに複数のリクエスト...

MYSQL データベースの基礎 - 結合操作の原理

結合では、ネスト ループ結合アルゴリズムが使用されます。ネスト ループ結合には 3 つの種類がありま...

JavaScript のマクロタスクとマイクロタスクの詳細

目次1. マイクロタスクとは何ですか? 2. マクロタスクとは何ですか? 3. 事例3.1 結論4....

JSはじゃんけんゲームを実装します

この記事の例では、じゃんけんゲームを実装するためのJSの具体的なコードを参考までに共有しています。具...

VMware仮想マシンを使用してUbuntu 20.04をインストールする完全なチュートリアル

Ubuntu は比較的人気のある Linux デスクトップ システムです。最近、Ubuntu 20....