24/01/2019, 15:23

Tự học nodejs từ đầu

1.Cài đặt Kiểm tra xem đã cài đặt node và npm hay chưa bằng câu lệnh sau: [email protected]  ~/projects  npm -v 5.6.0 [email protected]  ~/projects  node -v v9.11.2 [email protected]  ~/projects  Nếu bạn chưa cài hoặc phiên bản đã cũ thì ta sẽ lên trang chủ https://nodejs.org/e ...

1.Cài đặt

  • Kiểm tra xem đã cài đặt node và npm hay chưa bằng câu lệnh sau:
     [email protected]  ~/projects  npm -v
     5.6.0
     [email protected]  ~/projects  node -v
     v9.11.2
     [email protected]  ~/projects 
    
  • Nếu bạn chưa cài hoặc phiên bản đã cũ thì ta sẽ lên trang chủ https://nodejs.org/en/ để check phiên bản mới nhất và cài đặt.
  • Cài đặt nodejs:
    curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
    sudo apt-get install -y nodejs
    
  • File setup_10.x tương đương với phiên bản 10.15.0 hiện tại đang được Recommended for most users hiện tại
  • Và tương tự cài đặt npm:
    sudo apt install npm
    

2.Tạo server nodejs

  • Để tạo server nodejs ta có thể sử dụng module http
  • Trước tiên ta cần tạo file javascript với tên app.js và nội dung như sau:
    const http = require('http');
    
    const hostname = '127.0.0.1';
    const port = 3000;
    
    const server = http.createServer((req, res) => {
      res.statusCode = 200;
      res.setHeader('Content-Type', 'text/plain');
      res.end('Hello World
    ');
    });
    
    server.listen(port, hostname, () => {
      console.log(`Server running at http://${hostname}:${port}/`);
    });
    
  • Và chạy câu lệnh sau để khởi tạo server:
     [email protected]  ~/projects  node app.js        
     Server running at http://127.0.0.1:3000/
    
  • Kiểm tra kết quả trên trình duyệt với dường dẫn http://localhost:3000/ ta sẽ thu được kết quả
    Hello World
    

3.Cài đặt Express

  • Express là một web application frameword Nodejs nhỏ và linh hoạt, nó cung cấp một loạt các tính năng cho web và ứng dụng di động.
  • Ngoài ra Express còn có vô số phương thức tiện ích HTTP và middleware bạn muốn, giúp thao tác với API nhanh và dễ dàng hơn.
  • Trước khi cài Express ta cần tạo file package.json trong project bằng câu lệnh khởi tạo npm init
    [email protected]  ~/projects  mkdir learn_nodejs
    [email protected]  ~/projects  cd learn_nodejs 
    [email protected]  ~/projects/learn_nodejs  npm init
    This utility will walk you through creating a package.json file.
    It only covers the most common items, and tries to guess sensible defaults.
    
    See `npm help json` for definitive documentation on these fields
    and exactly what they do.
    
    Use `npm install <pkg>` afterwards to install a package and
    save it as a dependency in the package.json file.
    
    Press ^C at any time to quit.
    package name: (learn_nodejs) learn_nodejs
    version: (1.0.0) 
    description: 
    entry point: (index.js) 
    test command: 
    git repository: 
    keywords: 
    author: 
    license: (ISC) 
    About to write to /home/giang/projects/lean_nodejs/learn_nodejs/package.json:
    
    {
      "name": "learn_nodejs",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo "Error: no test specified" && exit 1"
      },
      "author": "",
      "license": "ISC"
    }
    
    
    Is this ok? (yes) 
    [email protected]  ~/projects/lean_nodejs/learn_nodejs  ls
    package.json
    
  • Trong lúc khởi tạo, nó sẽ hỏi bạn 1 vài thông tin package name, version,.. nếu không thay đổi gì thì bạn chỉ việc enter
  • Tiếp đến là cài đặt express:
    npm install express --save
    
  • Sau khi cài đặt xong kết quả thu được như sau:
    [email protected]  ~/projects/learn_nodejs  ls
    app.js  node_modules  package.json  package-lock.json
    

4.Basic Express Routing

  • Express giúp tạo route trong nodejs một cách dễ dàng. Ví dụ ta sẽ tạo 2 route home và about
  • Route home hiển thị text: "Welcome to Express"
  • Route about hiển thị text: "This is about page"
  • Ta mở file app.js và update lại như sau:
    const express = require('express');
    const app = express()
    
    const hostname = '127.0.0.1';
    const port = 3000;
    
    app.get('/home', function (req, res) {
      res.send('Welcome to Express');
    });
    
    app.get('/about', function (req, res) {
      res.send('This is about page')
    });
    
    app.listen(port, hostname, () => {
      console.log(`Server running at http://${hostname}:${port}/`);
    });
    
  • Khởi tạo lại server với câu lệnh node app.js ta sẽ thu được kết quả ở 2 url http://localhost:3000/home và http://localhost:3000/about

5.File tĩnh

  • Express cho phép ta load file tĩnh bằng cách sử dụng express.static(), chẳng hạn ở đây ta có thể load file image, css, javascript,..
  • Ta sẽ làm ví dụ load file bootstrap ở đây, nếu chưa có file bootstrap thì ta có thể lên trang https://getbootstrap.com/ tải về.
  • Tạo thư mục public với 2 thư mục con cssjs như sau:
    [email protected]  ~/projects/learn_nodejs  tree public 
    public
    ├── css
    │   └── bootstrap.css
    └── js
        └── bootstrap.js
    
    2 directories, 2 files
    
  • Tiếp đến ta sẽ cài đặt template engine, express hỗ trợ rất nhiều template engine nhưng ở đây ta sẽ sử dụng template engine handlebars.js (hbs)
  • Cài đặt hbs:
    npm install hbs --save
    
  • Sau đó ta sẽ tạo file index.hbs bên trong thư mục views mới với nội dung:
    <!DOCTYPE html>
    <html lang="en">
     <head>
       <meta charset="utf-8">
       <title>Hello World</title>
        
       <link rel="stylesheet" href="css/bootstrap.css"/>
     </head>
     <body>
       <div class="container">
         <div class="row">
           <div class="col-md-12">
             <div class="jumbotron">
               <h1 class="display-4">Hello, world!</h1>
               <p class="lead">This is a simple site, a simple from mfikri.com.</p>
               <hr class="my-4">
               <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
             </div>
           </div>
         </div>
       </div>
    
        
       <script src="js/bootstrap.js"></script>
     </body>
    </html>
    
  • Và update file app.js
    //use path module
    const path = require('path');
    //use express module
    const express = require('express');
    //use hbs view engine
    const hbs = require('hbs');
    
    const app = express();
    
    const hostname = '127.0.0.1';
    const port = 3000;
    
    //set dynamic views file
    app.set('views',path.join(__dirname,'views'));
    //set view engine
    app.set('view engine', 'hbs');
    //set public folder as static folder for static file
    app.use(express.static('public'));
    //route for home page
    app.get('/',(req, res) => {
      //render index.hbs file
      res.render('index');
    });
    
    app.get('/home', function (req, res) {
      res.send('Welcome to Express');
    });
    
    app.get('/about', function (req, res) {
      res.send('This is about page');
    });
    
    app.listen(port, hostname, () => {
      console.log(`Server running at http://${hostname}:${port}/`);
    });
    
  • Chạy thử ta sẽ thu được kết quả như sau:

6.Truyền data từ server nodejs đến view

  • Update file app.js như sau:
    //use path module
    const path = require('path');
    //use express module
    const express = require('express');
    //use hbs view engine
    const hbs = require('hbs');
    
    const app = express();
    
    const hostname = '127.0.0.1';
    const port = 3000;
    
    //set dynamic views file
    app.set('views',path.join(__dirname,'views'));
    //set view engine
    app.set('view engine', 'hbs');
    //set public folder as static folder for static file
    app.use(express.static('public'));
    
    //route for home page
    app.get('/',(req, res) => {
      //render index.hbs file
      res.render('index',{
        name : "M Fikri"
      });
    });
    
    //route for home with params name
    app.get('/:name',(req, res) => {
      //render index.hbs file
      res.render('index',{
        name : req.params.name
      });
    });
    
    app.get('/home', function (req, res) {
      res.send('Welcome to Express');
    });
    
    app.get('/about', function (req, res) {
      res.send('This is about page');
    });
    
    app.listen(port, hostname, () => {
      console.log(`Server running at http://${hostname}:${port}/`);
    });
    
  • Và file index.hbs như sau:
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <title>Hello World</title>
         
        <link rel="stylesheet" href="css/bootstrap.css"/>
      </head>
      <body>
        <div class="container">
          <div class="row">
            <div class="col-md-12">
              <div class="jumbotron">
                <h1 class="display-4">Hello, {{ name }}</h1>
                <p class="lead">This is a simple site, a simple from mfikri.com.</p>
                <hr class="my-4">
                <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
              </div>
            </div>
          </div>
        </div>
    
         
        <script src="js/bootstrap.js"></script>
      </body>
    </html>
    
  • Kết quả ta thu được với url http://localhost:3000/Giang
  • Còn mặc định nếu ta test với url http://localhost:3000 thì kết quả sẽ là "Hello, M Fikri"

7.Tạo form post data đến view

  • Để post được data input đến view ta cần cài đặt thêm body-parser bằng câu lệnh sau:
    npm install body-parser --save
    
  • Tạo form.hbs trong thư mục views:
    [email protected]  ~/projects/learn_nodejs  tree views 
    views
    ├── form.hbs
    └── index.hbs
    
    0 directories, 2 files
    
  • File form.hbs có nội dung như sau:
    <!DOCTYPE html>
     <html lang="en">
       <head>
         <meta charset="utf-8">
         <title>Add New</title>
          
         <link rel="stylesheet" href="css/bootstrap.css"/>
       </head>
       <body>
         <div class="container">
           <div class="row">
             <div class="col-md-12">
               <h2>Add New User</h2>
               <form action="/post" method="post">
                 <div class="form-row">
                   <div class="col">
                     <input type="text" name="textname" class="form-control" placeholder="Name">
                   </div>
                   <div class="col">
                     <button type="submit" class="btn btn-success">Submit</button>
                   </div>
                 </div>
               </form>
             </div>
           </div>
         </div>
    
          
         <script src="js/bootstrap.js"></script>
       </body>
     </html>
    
  • File app.js sẽ được update 2 route thêm như sau:
    ...
    ...
    //use bodyParser middleware
    const bodyParser = require('body-parser');
    ...
    ...
    app.use(bodyParser.urlencoded({ extended: false }));
    
    //route for home page
    app.get('/',(req, res) => {
      //render index.hbs file
      res.render('index',{
        name : "M Fikri"
      });
    });
    
    //route for showing form
    app.get('/post',(req, res) => {
      //render form.hbs file
      res.render('form');
    });
    
    //route for submit form by using post method
    app.post('/post',(req, res) => {
      //render file form.hbs
      res.render('index',{
        //get value from textname
        name : req.body.textname
      });
    });
    
    //route for home with params name
    app.get('/:name',(req, res) => {
      //render index.hbs file
      res.render('index',{
        name : req.params.name
      });
    });
    ...
    ...
    
  • Kiểm tra kết quả ta sẽ thu được như sau:
  • Và subit sẽ thu được

0