メッセージボードnodejs+express+art-template をベースにしたメッセージボード機能。リスト インターフェイス、インターフェイスの追加、およびメッセージ送信機能が含まれています。 必要なライブラリ次の package.json に必要な内容は次のとおりです。 { "名前": "nodejs_message_board", "バージョン": "2021.09", 「プライベート」:true、 「スクリプト」: { 「開始」: 「ノード アプリ」 }, 「依存関係」: { "アートテンプレート": "^4.13.2", "デバッグ": "~2.6.9", "エクスプレス": "~4.16.1", "エクスプレスアートテンプレート": "^1.0.1" } } オープンソースプロジェクトこのプロジェクトは、[Node.js Study] nodejs オープンソース学習プロジェクトの 実行中の効果はローカルホスト、メッセージのホームページ
メッセージページを追加
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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: docker compose idea CreateProcess error=2 システムは指定されたファイルを見つけることができません
1. v-onイベント監視DOM イベントをリッスンするには、v-on ディレクティブを使用します。...
Adobe Brackets は、HTML、CSS、JavaScript 用のオープンソースでシンプ...
1. 参照整合性参照整合性とは、主に外部キー制約を使用した複数のテーブル間の設計を指します。複数テ...
導入作業プロセス中に、遅いクエリが調整されることがあります。 MySQL SQL ステートメントのチ...
この記事は、VMware Workstation 12 ProのインストールLinuxチュートリアル...
プロジェクトにはアンケートが必要ですが、クライアントはアンケートのタイトルが純粋なHTMLタグでなけ...
プロシージャ sp_name を削除します//これまで、MYSQL 構文の基礎知識について説明して...
プロジェクトを実行すると、リアルタイム更新、広告アニメーションの連続表示などの要件に遭遇することは避...
目次質問分析する解決するAlert() 関数を置き換えるsetTimeOut関数まとめ質問数日前、J...
HTML を学習したり使用したりしたことがある人なら、<a> タグについてよく知っている...
この記事では、検証コード干渉を実装するためのjsの具体的なコードを参考までに共有します。具体的な内容...
前の記事で説明したフォームの自動入力の問題を解決した後、新しい問題が発生しました。ページの一部のスタ...
序文Nginx は、イベント駆動型の非同期非ブロッキング処理フレームワークを使用する軽量 HTTP ...
イメージを構築するこれまで、テストやデモンストレーションにさまざまなイメージを使用しました。多くの場...
例えば: <link rel="スタイルシート" href="h...