1。オープニング分析
みなさん、こんにちは、ビッグベアはまたここにいます。昨日、私は個人的な何かのためにブログを書いていなかったので、今日また出てきました。この記事は、主にメモ帳の小さなアプリケーション、前の記事を書くことについてです。
また、「Connect」ミドルウェアの使用と「MongoDB」の使用も導入しました。今日、私はこれら2つのミドルウェアを組み合わせて実用的な例を書き、常に改善し、リファクタリングし、「誠実」の目標を達成しました。
完全な学習の目的。わかりました、ナンセンスについて話すのをやめましょう。トピックに直行してください。
2。要件分析
（1）ユーザーの登録とログイン関数（複雑な相互作用シナリオは関係ありません。ユーザーは、登録時に既に存在するかどうかを判断します）。
（2）ユーザーが正常にログインし、ノート管理システムの背景（Noteモジュールの追加、削除、変更、チェックの機能）を入力しました。
（3）ユーザーは、簡単な許可部門（管理者、登録ユーザー）を持つことができます。
（4）インターフェイスは比較的単純で、学習に焦点を当てています。
3。設計とアプリケーションを開始します（パート1）
（1）、ユーザーログインページを作成します。コードは次のとおりです。
コードコピーは次のとおりです。
<！doctype html>
<html>
<head>
<Title> BigBear NotePadアプリケーションログイン</title>
<Meta content = "ie = 8" http-equiv = "x-ua互換"/>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<style type = "text/css">
.note-title {
マージンボトム：45px;
背景：＃6699cc;
フォントサイズ：14px;
font-weight：bold;
色：#ffff;
フォントファミリー：arial;
高さ：24px;
ラインハイト：24px;
}
{
色：＃336699;
フォントファミリー：arial;
フォントサイズ：14px;
font-weight：bold;
}
</style>
<スクリプトsrc = "js/index.js"> </script>
</head>
<body>
<div> BigBear NotePadアプリケーションログイン</div>
<form action = "/login" method = "post">
<span> username：</span> <入力型= "text" name = "name"/> <br/> <br/>
<span>パスワード：< /span> <入力タイプ= "パスワード" name = "password" />
<入力型= "submit" value = "login" />
<a href = "reg.html">登録したい</a>
</form>
</body>
</html>
複製画像：
（2）ユーザー登録ページを作成します。コードは次のとおりです。
コードコピーは次のとおりです。
<！doctype html>
<html>
<head>
<Title> BigBear NotePadアプリケーション登録</title>
<Meta content = "ie = 8" http-equiv = "x-ua互換"/>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<style type = "text/css">
.note-title {
マージンボトム：45px;
背景：＃ff3300;
フォントサイズ：14px;
font-weight：bold;
色：#ffff;
フォントファミリー：arial;
高さ：24px;
ラインハイト：24px;
}
</style>
<スクリプトsrc = "js/index.js"> </script>
</head>
<body>
<div> Bigbear Notepadアプリケーション登録</div>
<form action = "/reg" method = "post">
<span> username：</span> <入力型= "text" name = "name"/> <br/> <br/>
<span>パスワード：</span> <入力タイプ= "パスワード" name = "password"/> <br/> <br/>
<入力型= "submit" value = "Register" />
</form>
</body>
</html>
複製画像：
（3）次のように、「mongodb」接続コードを確立します。
コードコピーは次のとおりです。
var mongodb = require（ "mongodb"）;
var server = new mongodb.server（ "localhost"、27017、{
auto_reconnect：true
}）;
var conn = new mongodb.db（ "bb"、server、{
安全：本当
}）;
conn.open（function（error、db）{
if（エラー）スローエラー。
console.info（ "mongodb connected！"）;
}）;
exports = module.exports = conn;
（4）次のように、モデルエンティティクラス「ユーザー」を作成します。
コードコピーは次のとおりです。
var conn = require（ "../ conn"）;
function user（user）{
this.name = user ["name"];
this.password = user ["password"];
};
user.prototype.save = function（callback）{
var that = this;
conn.collection（ "users"、{
安全：本当
}、function（error、collection）{
if（error）return conn.close（）;
collection.findone（{//このユーザーが存在するかどうかを決定します
名前：that.name
}、function（error、user）{
if（error）return conn.close（）;
if（！user）{
collection.insert（{
名前：that.name + ""、
パスワード：that.password + ""
}、{
安全：本当
}、function（error、user）{
if（error）return conn.close（）;
callback && callback（user）;
conn.close（）;
}）;
}
それ以外{
callback（ "ユーザーが登録しました！"）;
}
}）;
}）;
};
user.login = function（name、password、callback）{
conn.collection（ "users"、{
安全：本当
}、function（error、collection）{
if（error）return conn.close（）;
collection.findone（{
名前：名前、
パスワード：パスワード
}、function（error、user）{
if（error）return conn.close（）;
callback && callback（user）;
conn.close（）;
}）;
}）;
};
exports = module.exports = user;
複製画像：
（5）、次のようにアプリケーション「アプリ」を作成します。
コードコピーは次のとおりです。
// app.js
var connect = require（ "./ lib/connect"）;
var user = require（ "./ models/user"）;
var app = connect.createserver（）;
app.use（connect.logger（ "dev"））
.use（connect.query（））
.use（connect.bodyparser（））
.use（connect.cookieparser（））
.use（connect.static（__ dirname + "/views"）））
.use（connect.static（__ dirname + "/public"）））
.use（ "/login"、function（request、response、next）{
var name = request.body ["name"];
var password = request.body ["password"];
user.login（名前、パスワード、function（user）{
if（user）{
Response.End（ "Welcome to：" + user ["name"] + " ^ _ ^ ... ..."）;
}
それ以外{
Response.End（ "user：" + name + "Not Register！"）;
}
}）;
}）
.use（ "/reg"、function（request、response、next）{
var name = request.body ["name"];
var password = request.body ["password"];
新しいユーザー（{
名前：名前、
パスワード：パスワード
}）。save（function（user）{
if（user && user ["name"]）{
Response.End（ "user：" + name + "register done！"）;
}
それ以外{
Response.End（ "user：" + name + "が登録されています！"）;
}
}）;
}）
.listen（8888、function（）{
console.log（ "ポートで実行されているWebサーバー---> 8888。"）;
}）;
説明させてください：
（1）「connect.query（）」-------「get」要求の解析を処理します。
（2） "Connect.BodyParser（）" ------「ポスト」要求の解析を処理します。
（3）「connect.static（__ dirname + "/views"）、connect.static（__ dirname + "/public"） "
「JS、CSS、JPG、GIF」などの静的なリソースが「HTML」と「HTML」ビューとリソースディレクトリを表します。
以下は、このアプリケーションのディレクトリ構造です。
4つ、要約しましょう
（1）nodejs操作データベースの基本的な操作ステートメントをマスターします。
（2）、モデル、ビュー、ルートなどの階層を分割します。
（3）この記事の例を継続的に最適化して変更します（たとえば、ユーザーが存在するかどうかを確認するために登録すると、ユーザーの検証と保存アクションを完了するために「UserManager」を個別に作成できます）。
（4）明日その後の機能を完了し続けるには、楽しみにしてください。