Node.jsの+エクスプレス+ MongoDBのページ登録アカウントとログインアカウント機能により、
プロジェクト準備:
1:良いプロジェクトページ(ホームページのindex.html)(ログインページのlogin.htmlと)(登録ページregister.html)の予め用意
2:あなたはNode.jsのを使用したいインストールサードパーティのテンプレート
3:デザインのパスのデザイン
4:機能要件を明確化
5:app.js router.js mgdb.js 3つのjsファイルとパブリックフォルダとビューを作成します。
役割:
app.jsファイルは、サーバーの電源をオンにするために使用されます
要求パスにrouter.jsデザインファイル
MongoDBのデータベース接続のためのmgdb.jsファイル
3ページのCSSスタイルファイル:パブリックフォルダは、次のような公共の文書を格納するために使用されます
ビューはページに使用される準備ができて3を格納するために使用されるフォルダー
コードに直接話をします:
app.jsファイルで:
テンプレート組み込ま@ VAR =エクスプレス(「エクスプレス」)を必要とします。
//データのPOSTリクエスト取得するためのサードパーティのモジュールを導入 VAR = bodyParser必要(「bodyParserを」); //ファイル読み込みrouter.jsの =ルータvarが必要です( './router.js '); //アプリケーションの作成 VARのApp =エクスプレスを(); //公開ファイルとnode_modulesが開示され app.use( '/ node_modules'、express.static (' ./ node_modules /')) ; app.use( '/パブリック'、express.static( './パブリック/')); Expressエンジンテンプレートと//使用 app.engine( 'HTML'、必要( '発現技術テンプレートを')); //ボディパーサー構成される app.use(bodyParser.urlencoded({拡張:falseに})); app.use(bodyParser.json()); //ルート・サービス・コンテナは、アプリケーションに取り付け app.use(ルータ) app.listen(3000、関数(){ console.log( 'サーバーが正常に起動し、http://127.0.0.1:3000/によってアクセスすることができます'); });
router.jsファイルで
テンプレートが組み込ま@ VARのFSを=( 'FS')を必要とします。 VAR = Expressは( 'エクスプレス')が必要です //ファイルmgdb.js導入 必要VAR = Mgdb(」./ mgdb.jsを) // 1:ルートを作成します。コンテナ VARルータexpress.Router =() // 2:ルータのルーティングルートを容器に取り付けられている / *ホームページ* / router.get( '/'、機能(REQ、RES){ res.render(「インデックス.htmlの') }) / *ページレジスタ* / router.get(' /レジスタ'関数(REQ、RES){ res.render(' register.html「) }) / *ログインページ* / router.get( '/ログイン'、関数(REQ、RES){ res.render( 'login.htmlと') }) / * *登録ページデータPOST /送信 router.post( '/ログイン'、関数(REQをRES){ //データベースに格納されたデータをMogoDB // req.bodyコンテンツデータが格納されています Mgdb新しい新しい(req.body).SAVE(関数(ERR){ IF(ERR){ 戻りres.status(500).send( 'サーバーエラー') } res.redirect( '/ログイン') }) }) / * *ログインページPOST / router.post( '/'、機能(REQ、RES){ //データ比較に入力データとデータベースのデータを取得する VAR名= req.body.username VAR = req.bodyパスワード。パスワード Mgdb.findOne({ユーザー名:req.body.username、パスワード:req.body.password}、関数(ERR、RET){ IF(ERR){ 戻りres.status(500).send( 'サーバーエラー'。 ) }他{ //口座番号やパスワードが間違っRET NULLの場合 IF(RET === NULL){ res.send(「口座番号やパスワードが間違っています」) }他{ //アカウントのパスワードがデータベースに正しいRETリターン・データ・オブジェクトである場合は 、//ユーザ名がホームページにレンダリング取得 するvar名= ret.username res.render(「index.htmlを」{ 名前:名 }) } } } ) }) // 3.ルータ由来 module.exportsは=ルータ
mgdb.jsファイルで
テンプレート株式会社@ VAR =マングース必要(「マングース」) //スキーマの定義 スキーマVAR = mongoose.Schemaを // 1.接続データベース あなたが最初にデータを挿入する時期//指定したデータベース接続の必要性は、存在していません自動が作成されます :mongoose.connect( '// localhostの/ログインのMongoDB') // 2.設計文書構造(テーブル構造) VAR = userSchema新しい新しいスキーマ({ ユーザー名:{ タイプ:文字列、 必要な:// trueには、持っている必要があります }、 パスワード:{ タイプ:文字列、 必要な:trueに }、 モバイル:{ タイプ:Number、 必要な:に忠実 } }) // 4.当社は、ユーザーのこのコンストラクタのセットを使用することができるモデルのコンストラクタを持っている場合データの操作(CRUD) // 3.モデルとして発表された文書の構造 を直接輸出モデル//コンストラクタ module.exportsは= mongoose.model( 'Mgdb'、 userSchema)
app.js CMDファイルの実装により、三つの主要文書の後に書かれ、ブラウザがテストhttp://127.0.0.1:3000/を介してアクセスすることができます
次のような効果があります
パスワードやユーザー名を入力した場合は間違っている、それは、アカウントやパスワードを応答する不正確であるこの機能は、単にページデザインの下で達成することではありません
これは、小規模なデモを達成するためのアカウント登録やサイト全体のアカウントのログインページの基本的な機能であり、全体的なアイデアは非常に明確であるいただけます。白のフロントエンドの知識を持つポジティブな学習として、全体の小さなデモを実施するために、我々は、書き込みに時間半程度、独自の明確なアイデアを確保するために設計された優れたルートを用意しました。
2019年12月14日夜07時50分47秒