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コマンドの使用

推薦する

Vue.js フロントエンドフレームワークにおけるイベント処理の概要

1. v-onイベント監視DOM イベントをリッスンするには、v-on ディレクティブを使用します。...

Adobe Brackets の簡単な使い方のグラフィックチュートリアル

Adobe Brackets は、HTML、CSS、JavaScript 用のオープンソースでシンプ...

SQL における参照整合性の詳細な説明 (1 対 1、1 対多、多対多)

1. 参照整合性参照整合性とは、主に外部キー制約を使用した複数のテーブル間の設計を指します。複数テ...

mysql 実行プラン ID が空である (UNION キーワード) の詳細な説明

導入作業プロセス中に、遅いクエリが調整されることがあります。 MySQL SQL ステートメントのチ...

VMware Workstation 12 Pro Linux インストール チュートリアル

この記事は、VMware Workstation 12 ProのインストールLinuxチュートリアル...

純粋な HTML ページを送信し、パラメータを渡し、ID を確認する方法

プロジェクトにはアンケートが必要ですが、クライアントはアンケートのタイトルが純粋なHTMLタグでなけ...

Mysql データベース ストアド プロシージャの基本構文の説明

プロシージャ sp_name を削除します//これまで、MYSQL 構文の基礎知識について説明して...

Vueはシンプルなタイマーコンポーネントを実装します

プロジェクトを実行すると、リアルタイム更新、広告アニメーションの連続表示などの要件に遭遇することは避...

JavaScript Alert関数の実行順序の詳細な説明

目次質問分析する解決するAlert() 関数を置き換えるsetTimeOut関数まとめ質問数日前、J...

HTML ハイパーリンク タグ_Powernode Java アカデミー

HTML を学習したり使用したりしたことがある人なら、<a> タグについてよく知っている...

検証コード干渉を実装する js (静的)

この記事では、検証コード干渉を実装するためのjsの具体的なコードを参考までに共有します。具体的な内容...

IE のテキストモード! DOCTYPE の役割の紹介

前の記事で説明したフォームの自動入力の問題を解決した後、新しい問題が発生しました。ページの一部のスタ...

nginx を介してローカルでリバースプロキシを構成するプロセス全体

序文Nginx は、イベント駆動型の非同期非ブロッキング処理フレームワークを使用する軽量 HTTP ...

Dockerfile を使用して Docker でイメージを構築する方法

イメージを構築するこれまで、テストやデモンストレーションにさまざまなイメージを使用しました。多くの場...