メッセージボード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 システムは指定されたファイルを見つけることができません
React は、開発者が Web およびモバイルベースのアプリケーションを作成するために使用するオ...
コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...
多くのウェブサイトを閲覧すると、ブラウザのアドレスバーの前に小さなアイコンがあり、ブラウザのタブの位...
この記事では、棒グラフの動的な表示を実現するためのvue echartsの具体的なコードを参考までに...
序文古いプロジェクトを引き継ぐ苦労 - MongoDB クラスターの学習と構築に関する前回の記事を読...
この記事では、画像拡大鏡効果を実現するためのJSの具体的なコードを参考までに紹介します。具体的な内容...
HTML コメント。コードの横に HTML コメントを付ける必要があることがよくあります。そうするこ...
序文長い間さまざまな資料を読んで、ついに selenium+testng のパラメータ化の問題を解決...
本体の幅をウィンドウの幅に設定します(次のスクリプトで制御されます) $("body&qu...
Ubuntu 17.10 での openssh-server のインストールと使用を記録します。イン...
トークンの有効期限が切れたら、ページを更新します。ページの読み込み時にバックエンドに複数のリクエスト...
結合では、ネスト ループ結合アルゴリズムが使用されます。ネスト ループ結合には 3 つの種類がありま...
目次1. マイクロタスクとは何ですか? 2. マクロタスクとは何ですか? 3. 事例3.1 結論4....
この記事の例では、じゃんけんゲームを実装するためのJSの具体的なコードを参考までに共有しています。具...
Ubuntu は比較的人気のある Linux デスクトップ システムです。最近、Ubuntu 20....