Node.js หน้าเว็บส่วนที่ 2: 7 ขั้นตอน

2024 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2024-01-30 13:05

ยินดีต้อนรับสู่ภาค2!!

นี่เป็นส่วนที่ 2 ของบทช่วยสอนการใช้งานเว็บไซต์ Node.js ของฉัน ฉันแบ่งบทช่วยสอนนี้ออกเป็นสองส่วน เนื่องจากจะแยกผู้ที่ต้องการคำแนะนำสั้นๆ กับผู้ที่ต้องการบทแนะนำแบบเต็มบนหน้าเว็บ

ฉันจะผ่านการสร้างไซต์ของฉัน ของคุณอาจแตกต่างกัน ดังนั้นทำตามของฉันและเรียนรู้เทคนิคที่ใช้ เมื่อคุณเลือกเทมเพลต HTML อื่น โฟลว์จะแตกต่างกันเล็กน้อย เก็บไว้ในใจ

ขั้นตอนที่ 1: โครงสร้างแอป

ดังนั้นไซต์ของฉันจึงใช้ตัวสร้างแบบด่วน อย่างไรก็ตาม ฉันใช้แฮนด์บาร์มากกว่าหยก ถ้าคุณชอบหยก จัดเลย! Jade เป็น HTML แบบสั้นที่ไม่มีวงเล็บและ div ทั้งหมด หากคุณไม่เข้าใจว่าคุณอาจต้องการไปที่ youtube และดูบทช่วยสอน HTML

ฉันชอบและคุ้นเคยกับ HTML และแฮนด์บาร์มากขึ้น นั่นคือสิ่งที่ฉันใช้ หากต้องการสร้างโครงการด่วนด้วยแฮนด์บาร์ให้เรียกใช้คำสั่งด่วน

ด่วน --hbs nameofmyapp

จากนั้นทำตามขั้นตอนในส่วนที่ 1 เพื่อติดตั้งมิดเดิลแวร์ทั้งหมด

Express สร้างโครงสร้างแอปที่เฉพาะเจาะจงมากและมีประโยชน์อย่างมากกับแอปพลิเคชัน node.js ส่วนใหญ่ตามแบบฟอร์มนี้ด้วยรูปแบบต่างๆ

ในรูปภาพที่แนบมานี้ คุณสามารถดูโฟลเดอร์และไฟล์ต่างๆ ได้ ด้านล่างนี้ ฉันพยายามอธิบายสิ่งเหล่านี้ทั้งหมด

bin

นี่คือโฟลเดอร์ที่ทำงานก่อนเมื่อ node.js เริ่มเซิร์ฟเวอร์ของคุณ จะดูที่ไฟล์ www และติดตามไฟล์นี้เพื่อดำเนินการ ไฟล์ www บอกให้ node.js เริ่มเซิร์ฟเวอร์ที่พอร์ต 3000 (ซึ่งสามารถเปลี่ยนเป็นอะไรก็ได้) และทำสิ่งอื่น ๆ เช่นตัวฟังเหตุการณ์และอื่น ๆ สิ่งสำคัญหลักคือพอร์ตที่แอปของคุณตั้งค่าไว้

node_modules

ในโฟลเดอร์นี้เรียกว่ามิดเดิลแวร์ มิดเดิลแวร์ ฉันชอบอธิบายว่าเป็นซอฟต์แวร์พิเศษที่จะช่วยให้คุณเขียนโค้ดได้ง่ายขึ้น โดยทั่วไปแล้วมันเป็นไลบรารีอื่น ๆ ที่มีฟังก์ชั่นที่สร้างไว้ล่วงหน้าให้คุณใช้ มิดเดิลแวร์เพิ่มเติมบางตัวที่ฉันใช้สำหรับโครงการนี้คือ Nodemailer, Passport, Nodemon, bycrypt และอื่นๆ

สาธารณะ

นี่คือที่ที่รูปภาพ CSS และจาวาสคริปต์ทั้งหมดสำหรับเว็บไซต์ของคุณจะไป สิ่งเหล่านี้ถูกใช้โดยตรงโดยหน้าเว็บ

เส้นทาง

นี่คือการกำหนดเส้นทางสำหรับไซต์ของคุณ เช่น หน้าแรก หน้าเข้าสู่ระบบ และอื่นๆ

มุมมอง

ดังที่คุณเห็นว่ามุมมองต่างๆ เป็นไฟล์.hbs หรือ.handlebars ทั้งสองวิธีก็ใช้งานได้ เพียงแค่จัดการไฟล์ app.js บางส่วนเท่านั้น นี่คือหน้า html ของแฮนด์บาร์ที่จะแสดงบนเบราว์เซอร์ เลย์เอาต์คือไฟล์เลย์เอาต์หลักของคุณ และบางครั้งอาจอยู่ในโฟลเดอร์ย่อยของเลย์เอาต์ของมันเอง ไฟล์เลย์เอาต์หลักเรียกไฟล์แฮนเดิลบาร์อื่นๆ ของคุณและแสดงไฟล์เหล่านี้ ซึ่งจะเหมาะสมกว่าเมื่อเราเจาะลึกโค้ด

app.js

นี่คือไฟล์แอปหลักของคุณ ซึ่งบางครั้งเรียกว่าเซิร์ฟเวอร์ ขึ้นอยู่กับการตั้งค่า ไฟล์นี้มีการกำหนดค่าทั้งหมดสำหรับเซิร์ฟเวอร์และแม้กระทั่งฟังก์ชันพิเศษบางอย่าง นอกจากนี้ยังจะเป็นตัวจัดการข้อผิดพลาด

package.json

ไฟล์นี้สร้างโดย express และบอก npm มิดเดิลแวร์ทั้งหมดที่คุณต้องการใช้ในโครงการของคุณ เมื่อคุณรันการติดตั้ง npm มิดเดิลแวร์ทั้งหมดที่เรียกในไฟล์นี้ จะถูกติดตั้งในโฟลเดอร์ node_modules

ขั้นตอนที่ 2: จัดวางแม่แบบของคุณ

คุณสามารถสร้าง HTML ทั้งหมดของคุณตั้งแต่เริ่มต้นหรือคุณสามารถใช้เทมเพลตได้ ฉันใช้เทมเพลตสำหรับไซต์นี้ ไซต์อื่นๆ ที่ฉันช่วยพัฒนา ฉันได้เขียนโค้ดตั้งแต่เริ่มต้น ตัวเลือกเป็นของคุณ ขั้นตอนนี้อธิบายเค้าโครงเทมเพลต

เว็บแอปพลิเคชันของฉันใช้เทมเพลตบูตสแตรปซึ่งยอดเยี่ยมในการสร้าง CSS ที่น่าทึ่ง หากต้องการค้นหาเทมเพลต โปรดไปที่ไซต์นี้ เช่นเดียวกับที่ระบุไว้ก่อนหน้าในขั้นตอนก่อนหน้าของไฟล์ css, js และ img ที่จำเป็นทั้งหมดอยู่ภายใต้โฟลเดอร์สาธารณะ ไฟล์เหล่านี้ทำให้ไซต์ดูดีกว่าข้อความธรรมดาและวิธีการใช้รูปภาพบนเว็บไซต์

เพื่อให้แฮนด์บาร์เทมเพลทสไตล์ทำงานกับเทมเพลทได้ เพจจะถูกแบ่งออกเป็นสองส่วน สิ่งแรกคือสิ่งที่เรียกว่า "เค้าโครง" เลย์เอาต์คือคุณสมบัติที่คุณต้องการให้แสดงบนทุกหน้าเว็บภายในไซต์ของคุณ ในกรณีของฉันนี่คือส่วนหัวซึ่งมีแถบการนำทางและส่วนท้ายซึ่งมีการนำทางและส่วนแสดงผลเพิ่มเติม

ไฟล์โครงร่างและไฟล์แฮนด์บาร์อื่นๆ อยู่ในโฟลเดอร์มุมมอง ฉันจะดูเลย์เอาต์ที่เรียบง่ายกว่านี้จากตัวสร้างด่วนที่คุณใช้ก่อนหน้านี้เพื่อแสดงวิธีการทำงานของแนวคิด จากนั้นคุณสามารถดูโค้ดของฉันและเปรียบเทียบได้

ไฟล์ Layout.handlebars ที่สร้างขึ้นโดยด่วน

{{ชื่อ}} {{{body}}}

ความมหัศจรรย์ของแฮนด์บาร์ที่แท้จริงนั้นอยู่ที่แฮนด์บาร์ {{title}} และ {{{body}}} ดังนั้นทั้งสองจึงทำหน้าที่ต่างกัน {{title}} เป็นตัวแปรที่ส่งผ่านจากไฟล์ index.js ในเส้นทาง เมื่อส่งผ่านไปยังเทมเพลตแล้ว ระบบจะแสดงขึ้น แท็ก {{{body}}} ใช้สิ่งที่เรียกในฟังก์ชันการแสดงผลในไฟล์เส้นทาง js ของคุณ ในกรณีของเรา index.js มีบรรทัดนี้:

res.render ('index', { title: 'Express', นับ: userCount});

สิ่งนี้เรียกไฟล์ 'ดัชนี' ของสิ่งที่คุณเคยใช้เครื่องยนต์ Jade แฮนด์บาร์ และอื่นๆ ดังนั้นในกรณีของเรา index.handlebars

ด่วนสร้าง index.handlebars

{{ชื่อ}}

ยินดีต้อนรับสู่ {{title}}

ไฟล์ index.handlebars ถูกส่งผ่านเหมือนตัวแปรไปยังแท็ก {{{body}}} และแสดงบนหน้าเว็บของคุณ

วิธีนี้ช่วยให้คุณมีส่วนคงที่ของเว็บไซต์และส่วนตัวแปรได้ สิ่งนี้ทำให้ส่วนหัวและส่วนท้ายสวยงาม เนื่องจากคุณไม่จำเป็นต้องแสดงทั้งหน้าซ้ำ เมื่อโหลดหน้าใหม่ ข้อมูลบางส่วนเท่านั้นที่เปลี่ยนแปลง

ขั้นตอนที่ 3: แบบฟอร์มการติดต่อ

ฉันได้รวมแบบฟอร์มการติดต่อไว้ในหน้าเว็บของฉัน เพื่อให้ทุกคนสามารถส่งอีเมลถึงไซต์ของฉัน พร้อมคำถามหรือความคิดเห็น

แบบฟอร์มการติดต่อนี้ใช้มิดเดิลแวร์ npm ที่เรียกว่า Node Mailer

การตั้งค่า Node Mailer

ในการติดตั้ง node-mailer คุณเพียงแค่เรียกใช้โค้ดด้านล่างในไฟล์ระดับบนสุดของคุณ ในกรณีของเราคือ myapp

sudo npm ติดตั้ง nodemailer

เมื่อติดตั้งแล้ว คุณจะต้องตั้งค่าบางอย่างในไฟล์ app.js ของคุณ

อย่างแรกก็คือการพึ่งพาอาศัยกัน ซึ่งบอกโหนดว่าเราวางแผนที่จะใช้มิดเดิลแวร์นี้

var nodemailer = ต้องการ ('nodemailer');

ประการที่สองคือ Transporter ของเรา Transporter ใช้เพื่อเชื่อมต่อกับเซิร์ฟเวอร์อีเมลของคุณในกรณีของฉันคือ Gmail

//ผู้ขนส่งเคยรับบัญชี gmail

var transporter = nodemailer.createTransport ({ บริการ: 'gmail', auth: { ประเภท: 'OAuth2', ผู้ใช้: '[email protected]', clientId: '139955258255-a3c6ilqu6rtocigde7cbrusicg7j00eh.apps,google clientContent.com': 'Q775xefdHA_BGu3ZnY9-6sP-' refreshToken: 1 / 0HfdzyzW3FmnDPqeYkv19_py6zWgMCOqI9DSZ9kQWfc 'accessToken: 'ya29. GlvDBGA2Z_coEKjQOnXAnBLbTB0wQmS-sARqNGC3V2UATiywNb34IhFq4d7UQvhTobE6pi83-FB2-OvMWjC-MK-EKPMYmwxFe9AOZ7mY6kurYyQ7e1Mu8m8INxg7'}})

หากใช้ nodemailer กับเซิร์ฟเวอร์อีเมลอื่น โปรดดูเอกสารและความช่วยเหลือที่นี่

บางสิ่งจะเปลี่ยนจากคนสู่คน: ผู้ใช้, clientId, clientSecret refreshToken และ accessToken

userId ของคุณคืออีเมลที่คุณต้องการใช้ ฉันสร้างอีเมลใหม่ชื่อเดียวกับไซต์ของฉัน

ต้องพบ clientId, clientSecret, refreshToken และ accessToken ผ่านบัญชี Google ของคุณ

หากคุณต้องการความช่วยเหลือเพิ่มเติม คุณสามารถติดตามวิดีโอนี้ได้ที่นี่

เมื่อกรอกข้อมูลในฟิลด์ทั้งหมดแล้ว เราจะเพิ่มรายละเอียดข้อความของเรา

ต่อไป เราต้องตรวจสอบว่าฟิลด์ทั้งหมดในแบบฟอร์มของเราได้รับการป้อนและเป็นคำตอบที่ถูกต้อง

// Express Validatorapp.use (expressValidator ({ errorFormatter: function (param, msg, value)) { var namespace = param.split ('.'), root = namespace.shift (), formParam = root; while (เนมสเปซ. ความยาว) { formParam += '[' + namespace.shift() + ']'; } return { param: formParam, msg: msg, ค่า: value }; } }));

ตอนนี้เราจำเป็นต้องได้รับข้อมูลจากแบบฟอร์มการติดต่อของเราบนหน้าเว็บของเราและส่งข้อความ

//โพสต์จากปุ่มส่งผู้ติดต่อ ต้องสร้างหน้าแรกพร้อมข้อความแสดงความสำเร็จสำหรับ formapp.post('/contact_Form', function(req, res){ //รับข้อมูลจากแบบฟอร์มการติดต่อ จาก homepage.hbs var name = req.body.name; var email = req.body.email; var phone = req.body.phone; var message = req.body.message; var mailOptions = { //สร้างข้อมูลที่ใช้เมื่อส่งข้อความจาก: ' อีเมลอัตโนมัติ' ถึง: '[email protected]' เรื่อง: 'แบบฟอร์มติดต่อเว็บไซต์: ' + ชื่อ ข้อความ: 'คุณได้รับข้อความใหม่จากแบบฟอร์มติดต่อเว็บไซต์ของคุณ\n\n' + 'ที่นี่ มีรายละเอียดดังนี้\n\nชื่อ: ' + ชื่อ + '\n\nอีเมล: ' + อีเมล + '\n\nโทรศัพท์: ' + โทรศัพท์ + '\n\nข้อความ:\n' + ข้อความ } transporter.sendMail(mailOptions, function (err, res) { if(err){ console.log('Error'); }else { console.log ('Email Sent'); } }) res.render ('index'); //render หน้าแรกใหม่ ดูวิธีการทำสิ่งนี้ด้วยข้อความแสดงความสำเร็จ เช่น หน้าออกจากระบบ })

แฟลช

ใช้แฟลชเพื่อแสดงข้อความหลังจากดำเนินการเสร็จสิ้น คุณสามารถเห็นสิ่งนี้ได้เมื่อคุณส่งแบบฟอร์ม หรือไม่ป้อนฟิลด์อย่างถูกต้อง

ติดตั้งแฟลชเหมือนกับมิดเดิลแวร์ npm อื่น ๆ

sudo npm ติดตั้ง connect-flash

var flash = ต้องการ ('เชื่อมต่อแฟลช'); //มีฟังก์ชันแฟลชแสดงข้อความบนหน้าจอ

// เชื่อมต่อ Flashapp.use (แฟลช ());

เปิดใช้งานแฟลชซึ่งส่งและอัปเดตข้อความบนหน้าเว็บ ข้อความเหล่านี้เป็นข้อความที่ระบุว่าประสบความสำเร็จหรือป้อนข้อมูลไม่ถูกต้อง

// Global Vars

app.use (ฟังก์ชัน (req, res, ถัดไป) { res.locals.success_msg = req.flash ('success_msg'); res.locals.error_msg = req.flash ('error_msg'); res.locals.error = req.flash('error'); res.locals.user = req.user || null; ถัดไป (); });

บางคนต้องการตัวแปรที่เกี่ยวข้องกับแฟลช

มีแบบฟอร์มการติดต่อที่ทำ

ขั้นตอนที่ 4: หน้าเข้าสู่ระบบ

นี่เป็นเพียงบางสิ่งที่ฉันต้องการดูว่าฉันจะทำได้หรือไม่ และบางทีฉันอาจจะใช้มันในอนาคต ฉันแค่อยากจะอธิบายโค้ดตามที่มันอยู่ในที่เก็บ git ของฉัน

ดังนั้นส่วนนี้จึงใช้มิดเดิลแวร์อีกสองสาม npm ติดตั้งสิ่งต่อไปนี้โดยใช้คำสั่งด้านล่าง

npm ติดตั้งหนังสือเดินทาง && npm ติดตั้ง passport-local && npm ติดตั้ง bcryptjs

&& อนุญาตให้คุณเรียกใช้หลายคำสั่งในบรรทัดเดียว

เข้าสู่ระบบและผู้ใช้

คุณจะต้องสร้างไฟล์ login.js และ user.js ใต้โฟลเดอร์เส้นทางของคุณ ข้อมูลนี้จะใช้เพื่ออนุญาตให้สร้างผู้ใช้ ซึ่งจะถูกเก็บไว้ในฐานข้อมูลของเรา และอนุญาตให้ผู้ใช้เข้าสู่ระบบโดยการตรวจสอบฐานข้อมูล

user.js

var express = ต้องการ ('express'); var router = express. Router (); var Passport = ต้องการ ('หนังสือเดินทาง'); var LocalStrategy = ต้องการ ('passport-local'). กลยุทธ์; var User = ต้องการ ('../models/user'); // Register router.get('/register', function(req, res){ res.render('register'); }); //Register User router.post('/register', function(req, res){ var name = req.body.name; var email = req.body.email; var username = req.body.username; var password = req.body.password; var password2 = req.body.password2; // การตรวจสอบความถูกต้อง req.checkBody('name', 'Name is required').notEmpty(); req.checkBody('email', 'Email is required').notEmpty(); req.checkBody('email', 'Email is not valid').isEmail(); req.checkBody('username', 'Username is required').notEmpty(); req.checkBody(') รหัสผ่าน', 'ต้องใช้รหัสผ่าน').notEmpty(); req.checkBody('password2', 'รหัสผ่านไม่ตรงกัน').equals(req.body.password); var error = req.validationErrors(); if(); ข้อผิดพลาด) { res.render ('ลงทะเบียน', { ข้อผิดพลาด: ข้อผิดพลาด }); } อื่น { var newUser = ผู้ใช้ใหม่ ({ ชื่อ: ชื่อ อีเมล: อีเมล ชื่อผู้ใช้: ชื่อผู้ใช้ รหัสผ่าน: รหัสผ่าน }); User.createUser (newUser, function(err, user){ if(err) throw err; console.log(user); }); req.flash('success_msg', 'You are registered and now canล็อกอิน'); res.redirect(' /เข้าสู่ระบบ'); } });

แบ่งส่วนนี้ทีละส่วน

ขั้นแรก เรารวมมิดเดิลแวร์ที่จำเป็นทั้งหมด จากนั้นเรารวมไฟล์โมเดลของเราซึ่งอธิบายไว้ด้านล่าง เรากำหนดเส้นทางจากแท็กรีจิสเตอร์และแสดงข้อความแฮนด์บาร์รีจิสเตอร์ของเรา แล้วหน้าที่ที่สำคัญก็มาถึง สิ่งเหล่านี้ทำให้เราสามารถลงทะเบียนผู้ใช้ใหม่ในฐานข้อมูลของเรา ฟังก์ชันจะตรวจสอบเพื่อให้แน่ใจว่าฟิลด์ทั้งหมดถูกต้องและรวมอยู่ในแบบฟอร์ม หากไม่ใช่ ระบบจะแจ้งให้คุณทราบ ถัดไปจะตรวจสอบข้อผิดพลาด และหากไม่มีข้อผิดพลาดเกิดขึ้น ระบบจะสร้างผู้ใช้ใหม่พร้อมข้อมูลที่ได้รับ จากนั้นจะกำหนดเส้นทางไปยังหน้าเข้าสู่ระบบอีกครั้ง เพื่อให้คุณเข้าสู่ระบบได้

เข้าสู่ระบบ.js

var express = ต้องการ ('ด่วน');

var router = express. Router (); var Passport = ต้องการ ('หนังสือเดินทาง'); var LocalStrategy = ต้องการ ('passport-local'). กลยุทธ์; var User = ต้องการ ('../models/user'); /* รับรายชื่อผู้ใช้ */ //โฮมเพจ router.get('/', function(req, res){ res.render('login'); }); Passport.use (ใหม่ LocalStrategy (ฟังก์ชัน (ชื่อผู้ใช้, รหัสผ่าน, เสร็จสิ้น)) { User.getUserByUsername (ชื่อผู้ใช้, ฟังก์ชัน (err, ผู้ใช้) { if (err) throw err; if (!user) { return done (null, false, { ข้อความ: 'Unknown User'}); } User.comparePassword(password, user.password, function(err, isMatch){ if(err) throw err; if(isMatch){ return done(null, user); } else { ส่งคืนเสร็จสิ้น (null, false, {ข้อความ: 'รหัสผ่านไม่ถูกต้อง'}); } }); }); })); Passport.serializeUser (ฟังก์ชัน (ผู้ใช้, เสร็จสิ้น) { เสร็จสิ้น (null, user.id); }); Passport.deserializeUser (ฟังก์ชัน (id, เสร็จสิ้น) { User.getUserById (id, ฟังก์ชัน (err, ผู้ใช้) { เสร็จสิ้น (err, ผู้ใช้); }); }); router.post ('/login', passport.authenticate ('local', {successRedirect:'/', failureRedirect:'/login', failureFlash: true}), ฟังก์ชัน (req, res) { res.redirect ('/ แผงควบคุม'); }); router.get('/logout', function(req, res){ req.logout(); req.flash('success_msg', 'You are logo out'); res.redirect('/homepage'); });

module.exports = เราเตอร์;

ขั้นแรก เรารวมมิดเดิลแวร์ที่จำเป็นทั้งหมด จากนั้นเรารวมไฟล์โมเดลของเราซึ่งอธิบายไว้ด้านล่าง เรากำหนดเส้นทางจากแท็กเข้าสู่ระบบและแสดงข้อความของแถบควบคุมการเข้าสู่ระบบ จากนั้นเราใช้ฟังก์ชันหนังสือเดินทางเพื่อนำชื่อผู้ใช้และรหัสผ่านที่ป้อนมา และตรวจสอบกับฐานข้อมูลของเรา เราจะใช้รหัสผ่านที่เข้ารหัสซึ่งทำให้การเข้าสู่ระบบราสเบอร์รี่ pi ช้าลงเล็กน้อย ฉันจะอธิบายเพิ่มเติมต่อไป หลังจากตรวจสอบชื่อผู้ใช้และรหัสผ่านแล้ว คุณจะถูกเปลี่ยนเส้นทางไปยังหน้าแรกซึ่งจะแสดงแดชบอร์ดเมื่อเราตั้งค่านี้ในไฟล์ดัชนีของเรา นอกจากนี้เรายังเพิ่มความสามารถในการออกจากระบบที่นี่

อย่างที่ฉันได้กล่าวไปก่อนหน้านี้ เราจะต้องสร้างแบบจำลองเพื่อตรวจสอบฐานข้อมูลด้วย

ทำได้โดยการสร้างโฟลเดอร์ภายใต้โฟลเดอร์แอปพลิเคชันหลักที่เรียกว่ารุ่น ในโฟลเดอร์นี้จำเป็นต้องมีไฟล์ user.js ด้วย

model/user.js

var mongoose = ต้องการ ('พังพอน');

var bcrypt = ต้องการ ('bcryptjs'); // User Schema var UserSchema = mongoose. Schema ({ username: { type: String, index:true }, password: { type: String } อีเมล: { type: String } ชื่อ: { type: String } }); var User = module.exports = mongoose.model ('ผู้ใช้', UserSchema);

module.exports.createUser = ฟังก์ชัน (newUser, โทรกลับ){

bcrypt.genSalt (10, ฟังก์ชั่น (ผิดพลาด, เกลือ) { bcrypt.hash (newUser.password, เกลือ, ฟังก์ชัน (err, แฮช) { newUser.password = แฮช; newUser.save (โทรกลับ); }); }); } module.exports.getUserByUsername = function (ชื่อผู้ใช้, โทรกลับ) { var query = {ชื่อผู้ใช้: username}; User.findOne (แบบสอบถาม โทรกลับ); } module.exports.getUserById = ฟังก์ชั่น (id, โทรกลับ) { User.findById (id, โทรกลับ); } module.exports.comparePassword = function (candidatePassword, hash, callback){ bcrypt.compare(candidatePassword, hash, function(err, isMatch) { if(err) throw err; callback (null, isMatch); }); } โมดูล }

โมเดลนี้สรุปว่าพารามิเตอร์ผู้ใช้ของเราจะมีลักษณะอย่างไร เช่นเดียวกับวิธีที่เราจะเข้าถึงพารามิเตอร์เหล่านี้ ฉันได้กล่าวไว้ก่อนหน้านี้ว่าเราจะเข้ารหัสรหัสผ่านของเรา เพื่อไม่ให้มีการจัดเก็บรหัสผ่านไว้ในฐานข้อมูลในกรณีที่มีการละเมิด รหัสผ่านถูกแฮชโดยใช้ bcrypt มิดเดิลแวร์

ขั้นตอนที่ 5: เคาน์เตอร์จราจร

ฉันต้องการดูจำนวนผู้ใช้ที่ไม่ซ้ำที่เข้าชมหน้าเว็บของฉันและนับจำนวน "การเข้าชม" มีหลายวิธีในการทำเช่นนี้ ฉันจะอธิบายวิธีที่ฉันทำ

สิ่งนี้ใช้คอลเล็กชัน mongodb เพื่อติดตามจำนวนผู้ใช้ที่เข้าชมหน้าของฉัน และจำนวนครั้งที่ผู้เยี่ยมชมที่ไม่ซ้ำแต่ละรายเข้าชม

เนื่องจากเราได้พูดคุยกันเกี่ยวกับการตั้งค่า mongoDB แล้ว ฉันจะไม่ทำมันอีก

คุณอาจต้องเพิ่มสองคอลเลกชันในฐานข้อมูลของคุณเพื่อคอมไพล์ ในการดำเนินการนี้ คุณสามารถติดตั้ง RoboMongo ได้หากใช้ UI อย่างไรก็ตาม หากคุณใช้ Raspberry Pi แบบไม่มีหัวเหมือนฉัน คุณจะสนุกกับคำสั่งต่อไปนี้

เปลือกมองโก

ในการแก้ไขฐานข้อมูล รับข้อมูล หรือสร้างคอลเลกชั่น คุณจะต้องใช้ mongo shell บนยูนิตหัวขาด

วิ่ง

มองโก

นี่จะเป็นการเปิดเปลือก

เพิ่มคอลเลกชัน

ในกรณีของฉัน ฐานข้อมูลเรียกว่า loginapp คุณสามารถตั้งชื่ออะไรก็ได้ที่คุณต้องการ

ใช้ชื่อของคุณdb

เราจำเป็นต้องมีคอลเลกชันเพื่อเก็บที่อยู่ IP ทั้งหมดของผู้ใช้ที่เข้าชมไซต์ของเรา

db.creatCollection("ไอพี")

ต่อไป เราสร้างคอลเล็กชันเพื่อนับจำนวนเพลงฮิตที่ไม่ซ้ำกับไซต์ของเรา สิ่งนี้เริ่มต้นด้วย id และนับเริ่มต้นที่ 0

db.createCollection("นับ", {id: "ตัวนับการตี", นับ:0})

ติดตามที่อยู่ IP

ในการทำเช่นนี้ เราจะดึงผู้ใช้ Ip เมื่อพวกเขาเยี่ยมชมโฮมเพจของเรา เพิ่มจำนวนของเรา และจัดเก็บไว้เพื่อเปรียบเทียบในภายหลัง

เราจำเป็นต้องสร้างโมเดลเพื่อจัดเก็บ mongoose schema และเพิ่มโค้ดลงในไฟล์ homepage.js ของเรา

เราสร้าง count.js และ ip.js และจัดเก็บไว้ในโฟลเดอร์รุ่นของเรา

ไฟล์ ip.js เป็นเพียงสคีมาสำหรับที่อยู่ IP ของเรา

var mongoose = ต้องการ ('พังพอน'); //ตัวจัดการแพ็คเกจสำหรับ mongo

// นับ Schema var IpSchema = mongoose. Schema ({ ip: { type: String, }, count: { type: Number, } }); var Ip = module.exports = mongoose.model ('Ip', IpSchema);

หน้าแรกของเราจะเรียก count.js เพื่อเริ่มการติดตามการตี ทำได้ดังรูปข้างล่างนี้

//Homepagerouter.get('/', function(req, res){ publicIp.v4().then(ip => { Public_ip = ip; console.log("ipv4:"+ Public_ip); //=> ' 46.5.21.123' }); publicIp.v6().then(ip => { console.log("ipv6" + ip); Public_ip=ip; //=> 'fe80::200:f8ff:fe21:67cf' });

Count.getCount (คอลเลกชัน, ipc, Public_ip, ฟังก์ชัน (นับ){

}); count = db.collection('count').findOne({id: "hit counter"}, function(err, count){ userCount = count.count; res.render('homepage', {count: userCount}); }); });

สิ่งนี้จะเกิดขึ้นทุกครั้งที่มีคนไปที่หน้าแรกของเรา ในกรณีนี้คือ theinternet.onthewifi.com/homepage

มันตรวจสอบ IP ของผู้ใช้ ip4 หรือ ip6 แล้วเก็บค่านั้นไว้ที่ส่งไปที่ count.get.collection ซึ่งเป็นฟังก์ชั่นที่เก็บไว้ในไฟล์ count.js ของเรา

หลังจากตรวจสอบเอกลักษณ์ของผู้ใช้แล้ว จะส่งคืนและโพสต์ค่าการนับไปยังหน้าแรกเป็นตัวแปรแฮนด์บาร์

ไฟล์ count.js มีดังนี้

//count.jsvar mongo = ต้องการ ('mongodb'); //รองรับฐานข้อมูล var mongoose = require('mongoose'); //ตัวจัดการแพ็คเกจสำหรับ mongo mongoose.connect('mongodb://localhost/loginapp'); var db = พังพอนการเชื่อมต่อ; var Ip = ต้องการ ('../models/ip'); // Count Schema var CountSchema = mongoose. Schema ({ id: { type: String, }, นับ: { type: Number, } }); var Count = module.exports = mongoose.model ('นับ', CountSchema); module.exports.getCount = function(count, ipc, Public_ip, callback){ //count is test, callback isfunction ipc.findOne({ip: Public_ip}, function(err, iptest){ if(!iptest)//add ip ใหม่หากไม่ได้อยู่ในฐานข้อมูล และตัวนับการอัพเดต { var new_ip = new Ip({ ip: Public_ip, count: 1 }); db.collection('ip').save(new_ip);//add new ip to ฐานข้อมูล count.update(//update hit counter { id: "hit counter"}, { $inc: {count: 1} }) } else // อัปเดตตัวนับ ip เฉพาะ เพื่อดูว่าใครเข้าเยี่ยมชมมากที่สุด { ipc.update({ ip: Public_ip }, { $inc: {จำนวน: 1} }) } }); }

สิ่งนี้จะสร้างสคีมาการนับและฟังก์ชัน.getCount ของเรา ฟังก์ชัน.getCount จะตรวจสอบฐานข้อมูลสำหรับ IP ของผู้ใช้ และหากพบ ฟังก์ชันจะเพิ่มจำนวนผู้ใช้นั้น ไม่ใช่ตัวนับ Hit อย่างไรก็ตาม หากไม่พบ ip ของผู้ใช้ จะสร้างวัตถุคอลเลกชันใหม่ด้วย ip ของผู้ใช้ และเพิ่มตัวนับ Hit ขึ้น 1

ข้อมูลนี้จะถูกส่งคืนและแสดงบนหน้าเว็บ

ที่นั่นคุณมีตัวนับการติดตาม IP

ขั้นตอนที่ 6: บล็อก

ขณะนี้ฉันกำลังพยายามพัฒนาบล็อกที่เน้นความสนใจของฉันเกี่ยวกับซอฟต์แวร์ บ้านอัจฉริยะ และโพลารอยด์ ดังนั้นฉันจึงสร้างส่วนบล็อก บล็อกใช้หน้า html แบบคงที่และเฟรมเวิร์กของแฮนด์บาร์ หลังจากที่มองหาเทคโนโลยีที่ดีกว่าเพื่อทำให้บล็อกง่ายขึ้น ฉันได้ออกแบบเว็บไซต์ใหม่โดยใช้ฮิวโก้ Hugo เป็นโปรแกรมสร้าง html แบบคงที่ ฉันพูดเพิ่มเติมเกี่ยวกับเรื่องนี้ในบทช่วยสอนที่กล่าวถึงด้านล่าง

ขั้นตอนที่ 7: เสร็จสิ้น

ไปที่บทช่วยสอนเชิงลึกบนเว็บไซต์ node.js ของฉันที่โฮสต์ในราสเบอร์รี่ pi ของฉัน หากคุณมีคำถามหรือความคิดเห็นโปรดทิ้งไว้ด้านล่าง

ฉันหวังว่านี่จะช่วยผู้อื่นได้

สำหรับแนวทางที่แตกต่างสำหรับไซต์นี้โดยใช้ฮิวโก้ ตัวสร้างหน้าเว็บแบบคงที่ โปรดดูบทแนะนำอื่นๆ ของฉัน (เร็วๆ นี้)