Đầu tiên mình cũng xin nói là mình cũng là 1 thằng tân binh trong cái khoản nodejs này nên bài viết này mục đích chỉ là chia sẻ kinh nghiệm cho mọi người là chính, chứ học hỏi vẫn là chủ yếu :) Nên nếu có sai sót mong mọi người để lại cmt chỉ giáo.

Mục tiêu của series này của mình là sẽ là tạo ra 1 trang admin quản lý blog, còn bạn định làm cái khỉ gì thì mình không biết cũng chẳng quan tâm đâu =))

Nếu bạn còn muốn hỏi nodejs là gì thì lên đây đọc ngay và luôn nhé https://viblo.asia/p/mot-cai-nhin-tong-quan-nhat-ve-nodejs-Ljy5VeJ3lra

Để tạo ứng dụng hello word đầu tiên của nodejs thì các bạn có thể coppy lại đoạn vừa rồi rồi dán lên thanh input của chrome nhé, còn mình thì mình sẽ đi thẳng vào vấn đề chính luôn. Les't go nào!

1. Install Nodejs

Tất nhiên muốn học nodejs thì bạn phải cài đặt nodejs rồi =)) https://nodejs.org/en/

Cách cài đặt thì bạn tự search nhé, tại liệu đầy.

Mình thích câu nói : nodejs là 1 hệ sinh thái và ở đó bạn phải tự làm tất cả

Sau khi cài gói nodejs sẽ tặng free cho bạn luôn cái npm, bạn chỉ cần hiểu thằng npm là thằng quản lý quản lý các thư viện lập trình Javascript cho Node.js. Còn mình thì mình chuyển qua xài thằng yarn, đơn giản vì nó install nhanh voãi :)) Nếu bạn cũng thích yarn giống mình thì link đây https://www.codehub.vn/Huong-Dan-Cai-Dat-va-Su-Dung-Yarn-Package-Manager

Quên nữa, để học nodejs thì bạn nên biết 1 chút cơ bản về sử dụng terminal nhé, còn mình xài window nên mình sẽ chỉ bạn cài gistbash nhé : https://git-scm.com/downloads

2. Install pakage cần thiết

Bạn tạo 1 thư mục project-nodejs ngoài desktop, sau đó click vào thư mục, chuột phải chọn gitbash here.

Tiếp theo npm init và làm theo hướng dẫn.

Ok, giờ thì bạn sẽ thấy trong thư mục xuất hiện thêm 1 file pakage.json, thằng bỏ mẹ này là thằng quản lý 1 đống mudule mà bạn cài đặt để sau đó bạn có xóa hết thư mục node_modules (thư mục chứa module mà bạn cài đặt).

Đây là điều rất tiện lợi vì bạn chỉ cần cài đặt project, sau đó push lên git, người khác tải về chỉ cần chạy npm install là ok, không phải mất công cài lại từ đầu. Muốn gỡ thư viện nào thì chỉ cần chạy npm uninstall,  mà thôi bạn cứ kệ nó đi :)) Muốn tìm hiểu sâu thì search nhé.

Giờ bạn cài vài cái module này cho mình với câu lệnh:

yarn add --save-dev babel-cli babel-preset-es2015 babel-preset-stage-2 nodemon

Để mà phân tích câu lệnh trên thì nó tương đương với:

npm i --save-dev babel-cli babel-preset-es2015 babel-preset-stage-2 nodemon

--save-dev : Là lưu vào phần devDependencies của file pakage.json, phần này là module của dev trong quá trình phát triển app.

babel-cli, babel-preset-es2015, babel-preset-stage-2 : 3 thằng này thì mình tìm hiểu ít nên cứ cài bừa, đại khái theo như người ta bảo là hỗ trợ cú pháp es6 nhưng giờ viết es6 bình thường nó cũng chạy ầm ầm roài, nên mình thấy nó được mỗi cái hỗ trợ cú pháp import :)) Bạn nào biết nhiều về nó thì chỉ cmt cho mình biết thêm nhé

nodemon : Thằng này hỗ trợ bạn running liên tọi mỗi khi bạn sửa code, bình thường bạn chạy bằng cú pháp node thường thì cứ sửa code là lại phải load lại nhé khá là ngon mỗi tội lâu lâu chập cheng lại đơ đơ tí.

Sau đó bạn vào file pakege.json  ở phần scripts thêm cho mình cái dòng này :

 

"start": "nodemon app.js --exec babel-node --presets es2015,stage-2"

 Dòng này để viết tắt, thay vì gõ 1 đống dài ngoằng bên trên thì giờ bạn chỉ cần gõ: npm start 

Giờ bạn cài cho mình 2 module cần thiết tiếp theo là express và body-parser.

yarn add body-parser express

 

Để làm gì thì tí nữa code mình nói sau, giờ băt đầu dự án cái đã nhể!

3. Code chứ làm gì nữa!

 

Bạn tạo cho mình 1 file app.js ngang cấp với các file pakage.json, file app.js sẽ là file để chạy project của bạn, nó sẽ định nghĩa các đường dẫn, link trong dự án của bạn, bạn chỉ việc coppy đoạn code này vào.

 

import express from "express"
import bodyParser from "body-parser"
const app = express()
// CẤU HÌNH BODY PARSER
//cấu hình bodyParser ra dạng json
app.use(bodyParser.json())  
//để nhận được dữ liệu từ form data post lên và xử lý nó
app.use(bodyParser.urlencoded({ extended: true }))
// Import thư mục routes
const routes = require(__dirname + "/apps/routes")
// Include routes
app.use(routes)

const PORT = 8000
const server = app.listen(PORT, () => {
	console.log(`Server is running: ${PORT}`)
})

 

 Mình sẽ giải thích 1 chút về đoạn code trên, 3 dòng đầu thì bỏ qua vì bạn đã muốn sử dụng tất nhiên bạn phải import nó vô dự án của bạn roài.

 

app.use(bodyParser.json());

 

Dòng này để cấu hình body-parser, docs nó bảo thế mình cũng chịu :))

 

app.use(bodyParser.urlencoded({extended: true }))

 

 Dòng này để tẹo nữa khi bạn post dữ liệu từ form lên nó sẽ nó sẽ dễ dàng bắt được và xử lý. Thiếu là hơi mệt luôn.

 

// Import thư mục routes
const routes = require(__dirname + "/apps/routes")
// Include routes
app.use(routes)

 

Bạn tìm đến thư mục routes mà mình sẽ tạo bên dưới, rồi sử dụng nó để tạo các đường dẫn. Biến __dirname là biến global đường dẫn chỉ đến thư mục hiện tại bạn đang sử dụng nó. Bạn thử console.log nó trong file app rồi chạy sẽ hiểu.

 

 console.log(__dirname)
const PORT = 6969
let server = app.listen(PORT, () => {
	console.log(`Server is running: ${PORT}`)
})

 

Sử dụng express để tạo cổng kết nối, biến port là số nào mà bạn thích :)). Cũng như mình thích số 6969 vì nó có ý nghĩa riêng :)

 

Ok. Sau đó bạn tạo cho mình thư mục apps, bên trong đó tạo thư mục routes, bên trong routes tạo file index.js, admin.js. Cấu trúc thư mục sẽ là:

 

 

Ok. Trong file index.js bạn vứt đoạn code này vào:

 

import express from "express"

// Khởi tạo router
const router = express.Router()

router.get("/",  (req, res) => {
    res.send("Mẹ ơi con được lên tivi")
})

// Exports nó ra
module.exports = router

 

Đoạn code trên bạn import express, Router trong express framwork là một bộ định tuyến giúp cho chúng ta định danh ra các url và hành động kèm theo nó.

- Và để sử dụng router trong express framwork thì các bạn sử dụng cú pháp:

 

app.method(path, handle);

 

Trong đó:

  • app là biến mà khi chúng ta khởi tạo express framwork, bạn đã định nghĩa nó là sử dụng router ở trên 
  • // Import thư mục routes
const routes = require(__dirname + "/apps/routes")
// Include routes
app.use(routes)

     

  • method là một trong các dạng http method sau: get,post,put,delete,head,path
  • path là thành phần phía sau domain mà chúng ta muốn xác định.
  • handle là hành động sẽ thực thi khi danh path được gọi. handle ở đây là callback function Với req là biến chứa tất cả các thông số request mà người dùng gửi lên và res là biến chứa tất cả các thông số mà server trả về cho client.

 

Ok giờ thì bạn chỉ việc bật cửa sổ gitbash lên và gõ lệnh dưới: 

 

npm start

 

Ấn vào đường link phía dưới và hưởng thụ thành quả http://localhost:6969