NodeJS ExpressJS: Upload Files [EX-20]

Upload Files

/views/users/create.pug

create.pug

extends ../layouts/common.pug 

block content
    if errors
        each error in errors
             .m-auto.col-6.alert.alert-danger=  error

    h1(class="text-center") Create User
    form(action="/users/create" method="POST" enctype="multipart/form-data")
        div(class="col-6 m-auto")
            div(class="form-group")
                label Name
                input(name="name", type="text", autocomplete="off" class="form-control" placeholder="Enter name")
            div(class="form-group")
                label Address
                input(type="text" name="address" autocomplete="off" class="form-control" placeholder="Enter email")
            div(class="form-group")
                label Phone
                input(type="text" name="phone" autocomplete="off" class="form-control" placeholder="Enter phone")
            div(class="form-group")
                label Email
                input(type="email" name="email" autocomplete="off" class="form-control" placeholder="Enter email")
            div(class="form-group")
                label Password
                input(type="password" name="password" autocomplete="off" class="form-control" placeholder="Enter password")
            div(class="form-group")
                label Avatar
                input(type="file" name="avatar" class="form-control")
            a(href="/users") 
                button(type="button" class="btn btn-info") << back
            button(type="submit" class="btn btn-success float-right") Create User

/controller/user.controller.js

user.controller.js

const db = require('../db/index').lowDB;
const ids = require('short-id');
const md5 = require('md5');

module.exports.index = function (req, res) {
    res.render('users/index', {
        users: db.get('users').value()
    })
}

module.exports.create = function (req, res) {
    res.render('users/create')
}

module.exports.postCreate = function (req, res) {
    // Add a post
    req.body.id = ids.generate();
    req.body.avatar = req.file.path.split('\\').slice(1).join('/');  // path file
    req.body.password = md5(req.body.password);
    db.get('users').push(req.body).write()
    res.redirect('/users');
}

module.exports.get = function (req, res) {
    var id = req.params.id;
    res.render('users/view', {
        user: db.get('users').find({
            id: id
        }).value()
    })
}

module.exports.search = function (req, res) {
    var q = req.query.name;
    var matchUsers = db.get('users').value().filter(f => f.name.toLocaleLowerCase().indexOf(q.toLocaleLowerCase()) !== -1);
    res.render('users/index', {
        users: matchUsers
    })
}

npm install --save multer

Sử dụng multer module xử lý vấn đề gửi form data dạng post enctype="multipart/form-data"
upload.single('avatar') có nghĩa là chỉ có name="avatar" là gửi dạng file

Lưu file dạng binary

/routes/user.route.js

user.route.js

const express = require('express')
const router = express()
var multer  = require('multer')

var upload = multer({ dest: './public/uploads/' })

var controller = require('../controller/user.controller');

var validate = require('../validate/user.validate');

// GET method route
router.get('/', controller.index);

// GET method route
router.get('/create', controller.create);

// GET by id
router.get('/:id', controller.get);

// POST create user
router.post('/create', upload.single('avatar'), validate.postCreate, controller.postCreate);

// GET method route
router.get('/search/name', controller.search);

module.exports = router;

Layout

/views/users/index.pug

index.pug

extends ../layouts/common.pug 

block content
    h1(class="text-center") User Managerment
    a(href='/users/create') 
        Button(class="btn btn-info") Create User

    form(action = "/users/search/name", method="GET")
        div(class="input-group mb-3 col-4 float-right")
            input(name="name", type="text", autocomplete="off" class="form-control" placeholder="Enter search")
            div(class="input-group-append")
                button(class="btn btn-success") Search

    table(class="table table-hover")
        thead
            tr
                th(scope="col") Name
                th(scope="col") Address
                th(scope="col") Phone
                th(scope="col") Email
                th(scope="col") 
        tbody
            each user in users
                tr
                    th(scope="row")= user.name
                    td= user.address 
                    td= user.phone
                    td= user.email
                    td 
                        img(src=user.avatar width="40")
                    td
                        a(class="float-right" href='users/'+ user.id) View

/views/users/view.pug

view.pug

extends ../layouts/common.pug 

block content
    div(class="col-6 m-auto")
        h1(class="text-center") View User Info
        div(class="text-center")
            img(src=`../`+user.avatar width="140")
        div(class="form-group")
            label Name
            input(type="text", value= user.name, autocomplete="off" class="form-control" disabled)
        div(class="form-group")
            label Addres
            input(type="text" value= user.address, autocomplete="off" class="form-control" disabled)
        div(class="form-group")
            label Email
            input(type="text" value= user.email,  autocomplete="off" class="form-control" disabled)
        div(class="form-group")
            label Phone
            input(type="text" value= user.phone, autocomplete="off" class="form-control" disabled)
        a(href="/users") 
            button(type="button" class="btn btn-info") << back

<< back | next >> 

Read More

NodeJS ExpressJS: Debug NodeJS [EX-19]

Debug NodeJS

Thêm --inspect để debug

/package.json

package.json

{
  "name": "example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "nodemon --inspect app.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "cookie-parser": "^1.4.4",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "lowdb": "^1.0.0",
    "md5": "^2.2.1",
    "pug": "^2.0.4",
    "short-id": "0.1.0-1"
  },
  "devDependencies": {
    "nodemon": "^1.19.3"
  }
}

Tắt server và khởi động lại

Thấy xuất hiện dòng Debugger có nghĩa là app đã sẵn sàng cho chúng ta debug

Chúng ta click vào icon màu xanh lá cây để mở cửa sổ debug

Ctrl + P để tìm kiếm file js server cần debug

<< back | next >>

Read More

NodeJS ExpressJS: Environment Variables [EX-18]

Environment Variables

Cách 1: sử dụng module npm i dotenv

/app.js

app.js

require('dotenv').config()
console.log(process.env.SESSION_SECRET);

const express = require('express')
const app = express()
const port = 3000
const cookieParser = require('cookie-parser');

const userRoute = require('./routes').user;
const authRoute = require('./routes').auth;
const middlware = require('./middlwares/auth.middlware');

app.set('view engine', 'pug')
app.set('views', './views');

// https://expressjs.com/en/4x/api.html#req.body
app.use(express.json()) // for parsing application/json
app.use(express.urlencoded({ extended: true })) // for parsing application/x-www-form-urlencoded

app.use(cookieParser(process.env.SESSION_SECRET));
app.use(express.static('public'));

// GET method route
app.get('/', middlware.authorize, function (req, res) {
    res.render('index', {
        title: 'Hey',
        message: "ExpressJS"
    })
})

/.env

.env

SESSION_SECRET=1235456

Cách 2: Sử dụng command line: 
SESSION_SECRET = 123456 npm start

<< back | next >>

Read More

NodeJS ExpressJS: signedCookies [EX-17]

signedCookies

(Giúp server phát hiện sự thay đổi của cookie phía client)

/app.js

app.js

const express = require('express')
const app = express()
const port = 3000
const cookieParser = require('cookie-parser');

const userRoute = require('./routes').user;
const authRoute = require('./routes').auth;
const middlware = require('./middlwares/auth.middlware');

app.set('view engine', 'pug')
app.set('views', './views');

// https://expressjs.com/en/4x/api.html#req.body
app.use(express.json()) // for parsing application/json
app.use(express.urlencoded({ extended: true })) // for parsing application/x-www-form-urlencoded

app.use(cookieParser('abcdefgh123456789')); // random string
app.use(express.static('public'));

// GET method route
app.get('/', middlware.authorize, function (req, res) {
    res.render('index', {
        title: 'Hey',
        message: "ExpressJS"
    })
})

app.use('/users', middlware.authorize, userRoute);
app.use('/auth', authRoute);

app.listen(port, () => console.log(`Example app listening on port ${port}!`))

/controller/auth.controller.js

auth.controller.js

const db = require('../db/index').lowDB;
const md5 = require('md5');

module.exports.login = function (req, res, next) {
    res.render('auth/login');
}

module.exports.postLogin = function (req, res, next) {
    const email = req.body.email;
    const password = req.body.password;

    const user = db.get('users').find({
        email: email
    }).value();

    if (!user) {
        res.render('auth/login', {
            errors: ['User does not exits'],
            values: res.body
        });
    }
    console.log(md5(password));
    if (md5(password) != user.password) {
        res.render('auth/login', {
            errors: ['Wrong password'],
            values: res.body
        });
    }
    res.cookie('userId', user.id, {
        signed: true
    });
    res.redirect('/users');
}

module.exports.postLogout = function (req, res, next) {
    res.clearCookie("userId");
    res.redirect('/');
}

/middlwares/auth.middlware.js

auth.middlware.js

const db = require('../db/index').lowDB;

module.exports.authorize = function(req, res, next) {
    console.log(req.signedCookies); // const cookieParser = require('cookie-parser'); vs app.use(cookieParser());
    if (!req.signedCookies.userId) {
        res.redirect('auth/login')
        return;
    }
    const user = db.get('users').find({
        id: req.signedCookies.userId
    }).value();
    if (!user) {
        res.redirect('auth/login');
        return;
    }
    res.locals.user = user; // Lưu object ở local nó chỉ tồn tại trong phiên làm việc => show tên người đăng nhập
    next();
}

Key name

2018

html
    head
        link(rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css")
        link(rel="stylesheet" href="/css/custom.css")
    body
        div(class="jumbotron text-center m-0 p-0")
            img(src="../../images/banner.jpg" class="w-100")
        nav(class="navbar navbar-expand-sm bg-dark navbar-dark")
            a(class="navbar-brand" href="/") Node JS + Express JS
            div(class="collapse navbar-collapse" id="collapsibleNavbar")
                ul(class="navbar-nav")
                    li(class="nav-item")
                        a(class="nav-link" href='/users') User Management
                    li(class="nav-item")
                        a(class="nav-link" href="/auth/login") Login
                    li(class="nav-item")
                        a(class="nav-link" href="/auth/logout") Logout
            span(class="text-white")= user && user.name
        div(class="container" style="margin-top:30px; min-height: 500px")
            div(class="row")
                div(class="col-sm-12")
                    block content
        div(class="jumbotron text-center p-3")
            h6 Copyright © 2019 Author DaiDH

TEST

Thay đổi id cookie của user đăng nhập hiện tại 62c56a thành id của user khác c908e2
Tiếp theo người dùng vào màn hình User Management phải qua auth.middlware.js res gửi lên sẽ là req.signedCookies.userId = false
Đưa người dùng quay lại màn login.

<< back | next >>

Read More