1. การวิเคราะห์เปิด
สวัสดีทุกคน Big Bear มาที่นี่อีกครั้ง เมื่อวานนี้ฉันไม่ได้เขียนบล็อกเพราะมีบางอย่างที่เป็นส่วนตัวดังนั้นฉันจึงออกมาอีกครั้งในวันนี้ บทความนี้ส่วนใหญ่เกี่ยวกับการเขียนแอปพลิเคชันขนาดเล็กสำหรับ Notepad บทความก่อนหน้า
ฉันยังได้แนะนำการใช้มิดเดิลแวร์ "เชื่อมต่อ" และการใช้ "MongoDB" วันนี้ฉันจะรวมมิดเดิลแวร์สองคนนี้เข้าด้วยกันเพื่อเขียนตัวอย่างที่เป็นประโยชน์ปรับปรุงและปรับปรุงใหม่อย่างต่อเนื่องและบรรลุเป้าหมายของ "จริงใจ"
จุดประสงค์ของการเรียนรู้อย่างเต็มที่ ตกลงหยุดพูดเรื่องไร้สาระเพียงแค่ตรงไปที่หัวข้อ
2. การวิเคราะห์ความต้องการ
(1) ฟังก์ชั่นการลงทะเบียนผู้ใช้และการเข้าสู่ระบบ (ไม่มีสถานการณ์การโต้ตอบที่ซับซ้อนเกี่ยวข้องและผู้ใช้จะพิจารณาว่ามีอยู่แล้วเมื่อลงทะเบียน)
(2) ผู้ใช้เข้าสู่ระบบได้สำเร็จและป้อนพื้นหลังของระบบการจัดการโน้ต (ฟังก์ชั่นของการเพิ่มการลบการแก้ไขและการตรวจสอบโมดูลโน้ต)
(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: ตัวหนา;
สี: #FFFF;
Font-Family: Arial;
ความสูง: 24px;
ความสูงของสาย: 24px;
-
A {
สี: #336699;
Font-Family: Arial;
ขนาดตัวอักษร: 14px;
Font-Weight: ตัวหนา;
-
</style>
<script src = "js/index.js"> </script>
</head>
<body>
<div> แอปพลิเคชันแอปพลิเคชัน Bigbear Notepad </div>
<form action = "/login" method = "post">
<span> ชื่อผู้ใช้: </span> <อินพุต type = "text" name = "name"/> <br/> <br/>
<span> รหัสผ่าน: </span> <อินพุต type = "รหัสผ่าน" ชื่อ = "รหัสผ่าน" />>
<อินพุตประเภท = "ส่ง" value = "เข้าสู่ระบบ" />
<a href = "reg.html"> ฉันต้องการลงทะเบียน </a>
</form>
</body>
</html>
ภาพการทำซ้ำ:
(2) สร้างหน้าการลงทะเบียนผู้ใช้รหัสมีดังนี้:
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html>
<head>
<title> การลงทะเบียนแอปพลิเคชัน Bigbeare 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: ตัวหนา;
สี: #FFFF;
Font-Family: Arial;
ความสูง: 24px;
ความสูงของสาย: 24px;
-
</style>
<script src = "js/index.js"> </script>
</head>
<body>
<div> การลงทะเบียนแอปพลิเคชัน BigBear Notepad </div>
<form action = "/reg" method = "post">
<span> ชื่อผู้ใช้: </span> <อินพุต type = "text" name = "name"/> <br/> <br/>
<span> รหัสผ่าน: </span> <อินพุต type = "รหัสผ่าน" ชื่อ = "รหัสผ่าน"/> <br/> <br/>
<อินพุตประเภท = "ส่ง" value = "ลงทะเบียน" />
</form>
</body>
</html>
ภาพการทำซ้ำ:
(3) สร้างรหัสการเชื่อมต่อ "MongoDB" ดังนี้:
การคัดลอกรหัสมีดังนี้:
var mongoDb = ต้องการ ("mongoDb");
var server = new MongoDb.server ("localhost", 27017, {
auto_reconnect: จริง
-
var conn = new mongoDb.db ("bb", เซิร์ฟเวอร์, {
ปลอดภัย: จริง
-
conn.open (ฟังก์ชั่น (ข้อผิดพลาด, db) {
ถ้า (ข้อผิดพลาด) โยนข้อผิดพลาด;
console.info ("MongoDB เชื่อมต่อ!");
-
การส่งออก = module.exports = conn;
(4) สร้าง "ผู้ใช้" รุ่นเอนทิตีโมเดลดังต่อไปนี้:
การคัดลอกรหัสมีดังนี้:
var conn = ต้องการ ("../ conn");
ฟังก์ชั่นผู้ใช้ (ผู้ใช้) {
this.name = ผู้ใช้ ["ชื่อ"];
this.password = ผู้ใช้ ["รหัสผ่าน"];
-
user.prototype.save = function (callback) {
var that = this;
conn.collection ("ผู้ใช้", {
ปลอดภัย: จริง
}, ฟังก์ชัน (ข้อผิดพลาด, คอลเลกชัน) {
ถ้า (ข้อผิดพลาด) ส่งคืน conn.close ();
collections.findone ({// พิจารณาว่าผู้ใช้นี้มีอยู่จริงหรือไม่
ชื่อ: that.name
}, ฟังก์ชัน (ข้อผิดพลาด, ผู้ใช้) {
ถ้า (ข้อผิดพลาด) ส่งคืน conn.close ();
ถ้า (! ผู้ใช้) {
collection.insert ({
ชื่อ: That.name + ""
รหัสผ่าน: that.password + ""
-
ปลอดภัย: จริง
}, ฟังก์ชัน (ข้อผิดพลาด, ผู้ใช้) {
ถ้า (ข้อผิดพลาด) ส่งคืน conn.close ();
การโทรกลับ && การโทรกลับ (ผู้ใช้);
conn.close ();
-
-
อื่น{
การโทรกลับ ("ผู้ใช้ลงทะเบียนแล้ว!");
-
-
-
-
user.login = function (ชื่อ, รหัสผ่าน, การโทรกลับ) {
conn.collection ("ผู้ใช้", {
ปลอดภัย: จริง
}, ฟังก์ชัน (ข้อผิดพลาด, คอลเลกชัน) {
ถ้า (ข้อผิดพลาด) ส่งคืน conn.close ();
collection.findone ({
ชื่อ: ชื่อ,
รหัสผ่าน: รหัสผ่าน
}, ฟังก์ชัน (ข้อผิดพลาด, ผู้ใช้) {
ถ้า (ข้อผิดพลาด) ส่งคืน conn.close ();
การโทรกลับ && การโทรกลับ (ผู้ใช้);
conn.close ();
-
-
-
การส่งออก = module.exports = ผู้ใช้;
ภาพการทำซ้ำ:
(5) สร้างแอปพลิเคชัน "แอป" ดังนี้:
การคัดลอกรหัสมีดังนี้:
// app.js
var connect = ต้องการ ("./ lib/connect");
VAR user = ต้องการ ("./ รุ่น/ผู้ใช้");
var app = connect.createServer ();
แอป. ใช้ (connect.logger ("dev")))
. ใช้ (connect.query ())
. ใช้ (connect.bodyparser ())
. ใช้ (connect.cookieparser ())
. ใช้ (connect.static (__ dirname + "/views"))))))))))))))))
. ใช้ (connect.static (__ dirname + "/public"))))))))))))))))))
. ใช้ ("/เข้าสู่ระบบ", ฟังก์ชั่น (คำขอ, การตอบสนอง, ถัดไป) {
var name = request.body ["name"];
รหัสผ่าน var = request.body ["รหัสผ่าน"];
user.login (ชื่อ, รหัสผ่าน, ฟังก์ชั่น (ผู้ใช้) {
ถ้า (ผู้ใช้) {
Response.end ("ยินดีต้อนรับสู่:" + ผู้ใช้ ["ชื่อ"] + " ^ _ ^ ... ... ");
-
อื่น{
response.end ("ผู้ใช้:" + ชื่อ + "ไม่ลงทะเบียน!");
-
-
-
.use ("/reg", ฟังก์ชั่น (คำขอ, การตอบสนอง, ถัดไป) {
var name = request.body ["name"];
รหัสผ่าน var = request.body ["รหัสผ่าน"];
ผู้ใช้ใหม่ ({
ชื่อ: ชื่อ,
รหัสผ่าน: รหัสผ่าน
}). บันทึก (ฟังก์ชั่น (ผู้ใช้) {
if (user && user ["name"]) {
response.end ("ผู้ใช้:" + ชื่อ + "ลงทะเบียนเสร็จแล้ว!");
-
อื่น{
response.end ("ผู้ใช้:" + ชื่อ + "ได้ลงทะเบียนแล้ว!");
-
-
-
.Listen (8888, function () {
console.log ("เว็บเซิร์ฟเวอร์ทำงานบนพอร์ต ---> 8888.");
-
ให้ฉันอธิบาย:
(1) "Connect.query ()" ------- ประมวลผลการแยกวิเคราะห์ของคำขอ "Get"
(2) "Connect.bodyparser ()" ------ ประมวลผลการแยกวิเคราะห์ของคำขอ "โพสต์"
(3) "Connect.static (__ dirname +"/views "), connect.static (__ dirname +"/public ")"
แสดงถึงมุมมองเทมเพลต "HTML" และไดเรกทอรีทรัพยากรที่ทรัพยากรคงที่เช่น "JS, CSS, JPG, GIF"
ต่อไปนี้เป็นโครงสร้างไดเรกทอรีของแอปพลิเคชันนี้:
สี่มาสรุปกันเถอะ
(1) หลักคำสั่งการดำเนินการพื้นฐานของฐานข้อมูลการทำงานของ NODEJS
(2) แบ่งลำดับชั้นเช่นแบบจำลองมุมมองและเส้นทาง
(3) เพิ่มประสิทธิภาพและแก้ไขตัวอย่างในบทความนี้อย่างต่อเนื่อง (ตัวอย่างเช่นการลงทะเบียนเพื่อตรวจสอบว่าผู้ใช้มีอยู่หรือไม่คุณสามารถสร้าง "UserManager" ได้อย่างอิสระเพื่อดำเนินการตรวจสอบผู้ใช้และการออมการกระทำให้เสร็จสมบูรณ์)
(4) เพื่อดำเนินการต่อเพื่อทำฟังก์ชั่นที่ตามมาในวันพรุ่งนี้โปรดหวังว่าจะได้