ساخت صفحه لاگین با ExpressJs + pug

خیلی تخصصی و حرفه ای نیست . چند مورد کوچیک و جالب رو دیدم و گفتم به اشتراک بزارم .آخر همین پست به صفحه github من برید و پروژه رو از اونجا دریافت کنین . با دوتا جستجو معمولی به همه این چیزایی که مینویسم میرسید . میخوام یک صفحه لاگین و یک صفحه خوشامد در صورت لاگین موفقیت آمیز با داده های استاتیک ، داخل express Js و موتور قالب قدرمتند و جذاب pug بنویسیم . اول از همه ترمینال رو باز کنین و دستور زیر رو بزنید تا express generator رو نصب کنیم . npm install express-generator -gحالا باید برنامه رو ایجاد کنیم cd /var/www/html mkdir expressLogin cd expressLogin npm initچند تا سوال میپرسه و جواب بدید و در آخر yes . حالا express رو ایجاد کنیم . express --view=pug expressLoginاین دستور عالیه . براتون روتر و ویو یک سری چیز های باحال رو میسازه و میریم جلو . حالا بریم داخل bin/www و فایل رو ویرایش کنین . پورت 3000 رو میتونین اینجا تغییر بدید به 8080 یا هر چیز دیگه . حالا بریم bootstrap رو نصب کنیم روی pug . فایل view/layout.pug رو باز کنین و به این شکل تغییر بدید . doctype html html head title= title link(rel='stylesheet', href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css') link(rel='stylesheet', href='../stylesheets/style.css') body block content script(src='https://code.jquery.com/jquery-3.3.1.slim.min.js') script(src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js') script(src='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js')حالا بریم صفحه لاگین و صفحه خوشامد رو بسازیم من صفحه لاگین رو دقیقا از روی این لینک ساختم : https://getbootstrap.com/docs/4.1/examples/sign-in/ برای اینکه استایلمون کامل بشه ، به public/stylesheets/style.css برید . کل فایل رو به زیر تغییر بدید . html, body { height: 100%; } body { padding-top: 40px; padding-bottom: 40px; background-color: #f5f5f5; } .form-signin { width: 100%; max-width: 330px; padding: 15px; margin: auto; } .form-signin .checkbox { font-weight: 400; } .form-signin .form-control { position: relative; box-sizing: border-box; height: auto; padding: 10px; font-size: 16px; } .form-signin .form-control:focus { z-index: 2; } .form-signin input[type="email"] { margin-bottom: -1px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .form-signin input[type="password"] { margin-bottom: 10px; border-top-left-radius: 0; border-top-right-radius: 0; }حالا صفحه view/index.pug رو باز کنین و به زیر تغییر بدید . extends layout block content div.text-center form(class="form-signin" method="POST" action="/users/login") #error if error p.text-danger Error!!! - var h1Classes = ['h3', 'mb-3', 'font-weight-normal'] h1(class=h1Classes) Please sign in //-input email label( for="inputEmail" class="sr-only") Email address input(type="email" name="username" id="inputEmail" class="form-control" placeholder="Email address" required autofocus) //-input password label(for="inputPassword" class="sr-only") Password input(type="password" name="password" id="inputPassword" class="form-control" placeholder="Password" required) //-remember Checkbox - var divClasses=['checkbox', 'mb-3']; div(class=divClasses) label input(type="checkbox" value="remember-me") span Remember me //-signIn button - var buttonClass=['btn', 'btn-lg', 'btn-primary', 'btn-block']; button(class=buttonClass type="submit") Sign in - var pClasses=['mt-5', 'mb-3', 'text-muted']; p(class=pClasses) © 2017-2018حالا یک فایل ایجاد کنید داخل view به اسم users.pug با محتوای زیرextends layout block content div.text-center div(class="form-signin") div.text-center p wellCome Dear #{username}!حالا بریم روتر ها و درخواست ها رو درست کنیمبرید داخل app.js تا میدلور اضافه کنیم تا درخواست ها رو بتونیم پارس کنیم . زیر var app .... کد زیر رو وارد کنین ://parse requests app.use(bodyParser.urlencoded({ extended: true }));و بالای همین فایل بالای cookieParser کد زیر رو جایگزین کنید :var bodyParser = require('body-parser');خوب حالا بریم داخل routes/index.jsو کد زیر رو جایگزین کنین :/* GET home page. */ router.get('/', function(req, res, next) { res.render('index', { error: false }); });اینجا متغیر error رو false گذاشتیم . حالا شما میتونین سرور رو اجرا کنین . و روی پورت 8080 (یا اگر تغییر ندادین ، روی 3000) ببینید . برای این کار دستور زیر رو بزنید :npm run startخوب میبینید که صفحه لاگین بدون خطا دقیقا مشابه نمونه که گذاشتم ایجاد شد . حالا بریم سراغ ساختن روتر users/login و authorize کردن کاربر با داده های استاتیک . برید داخل routes/users.js و کد زیر رو به جای محتوای فایل بزارید . var express = require('express'); var router = express.Router(); var login = require('../controller/authenticate/login'); /* GET users listing. */ router.get('/', function (req, res, next) { res.send('respond with a resource'); }); /* Login user */ router.post('/login', function (req, res, next) { const username = req.body.username; let loginResult = login(username, req.body.password); if (loginResult) { res.render('users', {username: username}); } else { res.render('index', {error: true}); } }); module.exports = router;اینجا داریم داخل بخش login میگیم اگر خروجی login برابر با true بود ، بریم به صفحه کاربر. در غیر این صورت بریم به index و error رو بزاریم true . خوب همه چیز عالیه جز یک چیز . این که ما متود login رو نساختیم .پس داخل روت پروژه برید و پوشه controller/authenticate رو بسازید و داخل پوشه authenticate فایل login.js رو با محتوای زیر ایجاد کنین :var login =function(user,password){ console.log(user,password) if(user==="admin@admin.com" && password==="admin"){ return true; } else{ return false; } } module.exports=login;تمومه حالا اگر نام کاربری رو admin@admin.com وارد کنید با رمز عبور admin ، وارد صفحه users میشید و در غیر این صورت یک خطا بالای صفحه لاگین میاد . میخواستم یک سری نکته ریز رو توی پروژه بگم . کار حرفه ای نیست . ارادت https://github.com/nimahkh/express_login_sample