1. التحليل الافتتاحي
مرحبًا بالجميع ، Big Bear هنا مرة أخرى. بالأمس ، لم أكتب مدونة بسبب شيء شخصي ، لذلك خرجت مرة أخرى اليوم. تدور هذه المقالة بشكل أساسي حول كتابة طلب صغير لـ Notepad ، المقال السابق ،
لقد قدمت أيضًا استخدام الوسيطة "Connect" واستخدام "MongoDB". اليوم ، سأجمع بين هذين البرامج الوسيطة لكتابة مثال عملي ، وتحسينه باستمرار وإعادة تشكيله ، وحقق هدف "صادق"
الغرض من التعلم الكامل. حسنًا ، دعنا نتوقف عن الحديث عن هراء ، فقط انتقل مباشرة إلى الموضوع.
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-compatible"/>
<meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8">
<type type = "text/css">
.note-title {
القاع الهامش: 45 بكسل ؛
الخلفية: #6699cc ؛
حجم الخط: 14px ؛
خط الرصيف: جريئة ؛
اللون: #ffff ؛
Font-Family: Arial ؛
الارتفاع: 24 بكسل ؛
Line-Leight: 24px ؛
}
أ {
اللون: #336699 ؛
Font-Family: Arial ؛
حجم الخط: 14px ؛
خط الرصيف: جريئة ؛
}
</style>
<script src = "js/index.js"> </script>
</head>
<body>
<div> تسجيل الدخول إلى تطبيق BigBear Notepad </div>
<form action = "/login" method = "post">
<span> اسم المستخدم: </span> <input type = "text" name = "name"/> <br/> <br/>
<span> كلمة المرور: < /span> <input type = "password" name = "password" />
<type type = "إرسال" value = "تسجيل الدخول" />
<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-compatible"/>
<meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8">
<type type = "text/css">
.note-title {
القاع الهامش: 45 بكسل ؛
الخلفية: #ff3300 ؛
حجم الخط: 14px ؛
خط الرصيف: جريئة ؛
اللون: #ffff ؛
Font-Family: Arial ؛
الارتفاع: 24 بكسل ؛
Line-Leight: 24px ؛
}
</style>
<script src = "js/index.js"> </script>
</head>
<body>
<Div> تسجيل تطبيق BigBear Notepad </iv>
<form action = "/reg" method = "post">
<span> اسم المستخدم: </span> <input type = "text" name = "name"/> <br/> <br/>
<span> كلمة المرور: </span> <input type = "password" name = "password"/> <br/> <br/>
<type type = "إرسال" value = "سجل" />
</form>
</body>
</html>
صورة التكاثر:
(3) إنشاء رمز الاتصال "mongodb" ، على النحو التالي:
نسخة الكود كما يلي:
var mongodb = require ("mongodb") ؛
var server = new mongodb.server ("LocalHost" ، 27017 ، {
Auto_reconnect: صحيح
}) ؛
var conn = new mongodb.db ("bb" ، server ، {
آمن: صحيح
}) ؛
conn.open (وظيفة (خطأ ، db) {
إذا (خطأ) رمي الخطأ ؛
console.info ("MongoDB Connection!") ؛
}) ؛
الصادرات = module.exports = conn ؛
(4) إنشاء فئة كيان النموذج "مستخدم" ، على النحو التالي:
نسخة الكود كما يلي:
var conn = require ("../ conn") ؛
مستخدم الوظيفة (المستخدم) {
this.name = user ["name"] ؛
this.password = user ["password"] ؛
} ؛
user.prototype.save = function (callback) {
var that = هذا ؛
Conn.Collection ("المستخدمون" ، {
آمن: صحيح
} ، وظيفة (خطأ ، مجموعة) {
إذا (خطأ) return conn.close () ؛
collection.findone ({// حدد ما إذا كان هذا المستخدم موجودًا
الاسم: that.name
} ، وظيفة (خطأ ، مستخدم) {
إذا (خطأ) return conn.close () ؛
إذا (! المستخدم) {
collection.insert ({
الاسم: that.name + "" ،
كلمة المرور: that.password + ""
} ، {
آمن: صحيح
} ، وظيفة (خطأ ، مستخدم) {
إذا (خطأ) return conn.close () ؛
Callback && callback (user) ؛
conn.close () ؛
}) ؛
}
آخر{
رد الاتصال ("المستخدم سجل!") ؛
}
}) ؛
}) ؛
} ؛
user.login = function (الاسم ، كلمة المرور ، رد الاتصال) {
Conn.Collection ("المستخدمون" ، {
آمن: صحيح
} ، وظيفة (خطأ ، مجموعة) {
إذا (خطأ) return conn.close () ؛
collection.findone ({
الاسم: الاسم ،
كلمة المرور: كلمة المرور
} ، وظيفة (خطأ ، مستخدم) {
إذا (خطأ) return conn.close () ؛
Callback && callback (user) ؛
conn.close () ؛
}) ؛
}) ؛
} ؛
الصادرات = module.exports = user ؛
صورة التكاثر:
(5) ، قم بإنشاء التطبيق "التطبيق" ، على النحو التالي:
نسخة الكود كما يلي:
// app.js
var connect = required ("./ lib/connect") ؛
var user = required ("./ models/user") ؛
var app = connect.createserver () ؛
App .use (connect.logger ("dev"))
.use (connect.query ())
.use (connect.bodyparser ())
.use (connect.cookieparser ())
.
.use (connect.static (__ dirname + "/public")
.
var name = request.body ["name"] ؛
var password = request.body ["password"] ؛
user.login (الاسم ، كلمة المرور ، الدالة (المستخدم) {
إذا (المستخدم) {
Response.end ("مرحبًا بك في:" + user ["name"] + " ^ _ ^ ...") ؛
}
آخر{
respons.end ("user:" + name + "لا تسجل!") ؛
}
}) ؛
})
.
var name = request.body ["name"] ؛
var password = request.body ["password"] ؛
مستخدم جديد ({
الاسم: الاسم ،
كلمة المرور: كلمة المرور
}). حفظ (دالة (المستخدم) {
if (user && user ["name"]) {
reponse.end ("user:" + name + "register done!") ؛
}
آخر{
استجابة.
}
}) ؛
})
.listen (8888 ، function () {
console.log ("خادم الويب الذي يعمل على المنفذ ---> 8888.") ؛
}) ؛
اسمحوا لي أن أشرح:
(1) "connect.query ()" ------- معالجة تحليل طلب "الحصول على".
(2) "connect.bodyParser ()" ----- معالجة تحليل طلب "post".
(3) "connect.static (__ dirname +"/views ") ، connect.static (__ dirname +"/public ")"
يمثل عرض القالب "HTML" وأدلة الموارد التي توارد موارد ثابتة مثل "JS ، CSS ، JPG ، GIF".
فيما يلي هيكل الدليل لهذا التطبيق:
أربعة ، دعونا نلخص
(1) إتقان بيانات التشغيل الأساسية لقاعدة بيانات تشغيل NodeJS.
(2) ، قسّم التسلسلات الهرمية ، مثل النماذج والآراء والطرق.
(3) تحسين وتعديل الأمثلة في هذه المقالة بشكل مستمر (على سبيل المثال ، التسجيل للتحقق مما إذا كان المستخدم موجودًا ، يمكنك إنشاء "Usermanager" بشكل مستقل لإكمال التحقق من المستخدم وحفظه).
(4) لمواصلة إكمال الوظائف اللاحقة غدًا ، يرجى التطلع إليها.