ساخت صفحه لاگین با 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 رو باز کنین و به زیر تغییر بدید .

حالا یک فایل ایجاد کنید داخل view به اسم users.pug با محتوای زیر

حالا بریم روتر ها و درخواست ها رو درست کنیم

برید داخل 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==="[email protected]" && password==="admin"){
        return true;
    }
    else{
        return false;
    }
}

module.exports=login;

تمومه

حالا اگر نام کاربری رو [email protected] وارد کنید با رمز عبور admin ، وارد صفحه users میشید و در غیر این صورت یک خطا بالای صفحه لاگین میاد .

میخواستم یک سری نکته ریز رو توی پروژه بگم . کار حرفه ای نیست .

ارادت

https://github.com/nimahkh/express_login_sample