Nodejs mysql trả về kết quả

Question

Tiếp nối bài hôm trước hôm nay mình sẽ giới thiệu đến các bạn cách làm việc với Nodejs để làm website Đầy đủ chức năng cơ bản. Trong bài viết này các bạn có thể biết cách lấy dữ liệu thông qua 2 phương thức chính là post và get để thực hiện chức năng Create, Edit và Delete Books bằng Nodejs

Nội dung chính Show

1. url mô-đun
2. Chuỗi truy vấn mô-đun
Phương thức Nhận
phương pháp bài
Chú thích
Chuẩn bị cấu trúc dự án
1. Chức năng chèn sách mới
2. Trả về màn hình chỉnh sửa khi người dùng nhấp vào http. //máy chủ cục bộ. 8000/chỉnh sửa/1

Các kiến thức cần chuẩn bị

1. url mô-đun

Cài đặt

<% include ../layout/header %>
    <div class="row" style="margin-top: 1%; margin-bottom: 1%;">
        <div class="col-md-2 col-md-offset-11">
            <a href="/books" class="btn btn-success">List</a>
        </div>
    </div>
    <div class="panel panel-default" style="margin-top: 2%;">
        <div class="panel-heading">Create Book</div>
        <div class="panel-body">
            <div class="col-md-12">
               <form action="/books/store" method="post" class="form-horizontal">
                   //mình sẽ include form book ở đây
                 <% include form_books %>
                 <div class="form-group">
                   <div class="col-sm-offset-11 col-sm-10">
                     <button type="submit" name="create" class="btn btn-info">Create</button>
                   </div>
                 </div>
               </form>
            </div>
        </div>
    </div>

<% include ../layout/footer %>

6

Khái niệm. URL mô-đun cung cấp các tiện ích để phân tích và phân tích URL. Nó có thể được truy cập bằng cách sử dụng các phương pháp sau.

2. Chuỗi truy vấn mô-đun

Cài đặt

<% include ../layout/header %>
    <div class="row" style="margin-top: 1%; margin-bottom: 1%;">
        <div class="col-md-2 col-md-offset-11">
            <a href="/books" class="btn btn-success">List</a>
        </div>
    </div>
    <div class="panel panel-default" style="margin-top: 2%;">
        <div class="panel-heading">Create Book</div>
        <div class="panel-body">
            <div class="col-md-12">
               <form action="/books/store" method="post" class="form-horizontal">
                   //mình sẽ include form book ở đây
                 <% include form_books %>
                 <div class="form-group">
                   <div class="col-sm-offset-11 col-sm-10">
                     <button type="submit" name="create" class="btn btn-info">Create</button>
                   </div>
                 </div>
               </form>
            </div>
        </div>
    </div>

<% include ../layout/footer %>

7

Chuỗi truy vấn mô-đun cung cấp cách phân tích chuỗi truy vấn URL

Làm thế nào lấy dữ liệu mà người dùng truyền lên thông qua phương thức đăng và nhận

Như các bạn đã biết client truyền dữ liệu lên server thông qua phương thức HTTP request với 2 phương thức chính là post và get. Cũng như các máy chủ ngôn ngữ khác Nodejs cũng hỗ trợ các cách lấy dữ liệu từ yêu cầu hoặc từ nội dung

Phương thức Nhận

Nếu người dùng truy cập thông tin qua url sau.

<% include ../layout/header %>
    <div class="row" style="margin-top: 1%; margin-bottom: 1%;">
        <div class="col-md-2 col-md-offset-11">
            <a href="/books" class="btn btn-success">List</a>
        </div>
    </div>
    <div class="panel panel-default" style="margin-top: 2%;">
        <div class="panel-heading">Create Book</div>
        <div class="panel-body">
            <div class="col-md-12">
               <form action="/books/store" method="post" class="form-horizontal">
                   //mình sẽ include form book ở đây
                 <% include form_books %>
                 <div class="form-group">
                   <div class="col-sm-offset-11 col-sm-10">
                     <button type="submit" name="create" class="btn btn-info">Create</button>
                   </div>
                 </div>
               </form>
            </div>
        </div>
    </div>

<% include ../layout/footer %>

8 thì chúng ta có thể sử dụng url để phân tích nó như sau

  var http = require('http')  
  var url = require('url')  

  http.createServer(function (req, res) {  

      var queryString = url.parse(req.url, true)  
      console.log(q.host) //returns 'localhost:8080'
      console.log(q.pathname) //returns '/default.htm'
      console.log(q.search) //returns '?year=2017&month=february'
      var qdata = q.query //returns an object: { year: 2017, month: 'february' }
      console.log(queryString)  

  }).listen(8000)

phương pháp bài

If user has 1 form insert Books as after.

Như các bạn đã biết nếu sử dụng phương thức Post thì dữ liệu sẽ được truyền lên máy chủ thông qua Form Data tức là nó sẽ không hiển thị với người dùng nên để lấy dữ liệu dạng này chúng ta sẽ làm như sau

var http = require('http') 
var { parse } = require('querystring') //đây là cách khai báo khi mình muốn dùng 1 function nào của module thay vì lấy tất cả
var body = ''
 http.createServer(function (req, res) { 
     req.on('data', (data) => {
             body += data
      })

      req.on('end', () => {
            body = parse(body)
            console.log(body
      })
 }).listen(8000)

Chú thích

Bất kỳ máy chủ ngôn ngữ nào như PHP, Java, Ruby. Nếu các bạn biết cách lấy dữ liệu từ phương thức GET và phương thức POST thì các bạn có thể thực hiện một số chức năng cơ bản đối với ngôn ngữ đó

Hoàn thiện ứng dụng với các chức năng tạo, cập nhật và xóa

Chuẩn bị cấu trúc dự án

Mình xin nói chút về cách thức tổ chức cấu trúc project của mình bao gồm 1 file tạo. ejs, cập nhật. ejs và form_books. ejs. Đối với các bạn là lập trình viên mới vào nghề thì các bạn sẽ thấy bời lạ vì mình tập trung các trường sử dụng cho cả form tạo và cập nhật để sau này có thêm hay xóa trường thì mình sẽ sửa nhanh hơn

In file create. js

<% include ../layout/header %>
    <div class="row" style="margin-top: 1%; margin-bottom: 1%;">
        <div class="col-md-2 col-md-offset-11">
            <a href="/books" class="btn btn-success">List</a>
        </div>
    </div>
    <div class="panel panel-default" style="margin-top: 2%;">
        <div class="panel-heading">Create Book</div>
        <div class="panel-body">
            <div class="col-md-12">
               <form action="/books/store" method="post" class="form-horizontal">
                   //mình sẽ include form book ở đây
                 <% include form_books %>
                 <div class="form-group">
                   <div class="col-sm-offset-11 col-sm-10">
                     <button type="submit" name="create" class="btn btn-info">Create</button>
                   </div>
                 </div>
               </form>
            </div>
        </div>
    </div>

<% include ../layout/footer %>

In file update. ejs

<% include ../layout/header %>
    <div class="row" style="margin-top: 1%; margin-bottom: 1%;">
        <div class="col-md-2 col-md-offset-11">
            <a href="/books" class="btn btn-success">List</a>
        </div>
    </div>
    <div class="panel panel-default" style="margin-top: 2%;">
        <div class="panel-heading">Edit Book</div>
        <div class="panel-body">
            <div class="col-md-12">
               <form action="/books/update/<%=  book[0].id %>" method="post" class="form-horizontal">
                //mình sẽ include form book ở đây
                 <% include form_books %>
                 <div class="form-group">
                   <div class="col-sm-offset-11 col-sm-10">
                     <button type="submit" name="update" class="btn btn-info">Update</button>
                   </div>
                 </div>
               </form>
            </div>
        </div>
    </div>

<% include ../layout/footer %>

In file form_books. ejs

Ở đây mình đã sử dụng so sánh tồn tại của cuốn sách. Nếu sách không tồn tại thì đó là tạo còn nếu sách không tồn tại thì lúc đó người dùng đang truy cập vào màn hình chỉnh sửa như vậy mình có thể sử dụng một tệp cho 2 thao tác

value="<%= typeof(book) !== 'undefined' ? book[0].name : null  %>">

<div class="form-group">
    <label class="control-label col-sm-2" for="name">Name:</label>
    <div class="col-sm-10">
        <input type="text" name="name" class="form-control" id="name" placeholder="Enter name" required value="<%= typeof(book) !== 'undefined' ? book[0].name : null  %>">
    </div>
</div>

<div class="form-group">
    <label class="control-label col-sm-2" for="author">Author:</label>
    <div class="col-sm-10">
        <input type="text" name="author" class="form-control" id="author" placeholder="Enter author" required value="<%= typeof(book) !== 'undefined' ? book[0].author : null  %>">
    </div>
</div>

<div class="form-group">
    <label class="control-label col-sm-2" for="description">Description:</label>
    <div class="col-sm-10">
        <textarea name="description" class="form-control" id="description" cols="10" rows="5" placeholder="Enter description"><%= typeof(book) !== 'undefined' ? book[0].description : null  %></textarea>
    </div>
</div>

--> Sau khi chuẩn bị xem xong, mình sẽ thực hiện các chức năng sau

1. Chức năng chèn sách mới

Xử lý tại máy chủ. js Mình sẽ thực hiện 2 bước đó là

Bước 1. Lấy dữ liệu từ biểu mẫu (mình đã giới thiệu trên)
Bước 2. Xử lý và chèn vào DB

var body = '';
req.on('data', (data) => {
    body += data;
});

req.on('end', () => {
    body = parse(body)
    var fields = []
    var values = []
    var bindParams = []
    //check fiels and value in  request to insert to DB
    for (const key in body) {
        if (key != 'create') {
            fields.push(key)
            values.push(`${body[key]}`)
            bindParams.push('?')
        }
    }

    //generate sql insert
    let sql = `INSERT INTO books (${fields.join(',')})  VALUES (${bindParams.join(',')})`
    // connect DB to create book
    con.connect(function(err) {
        con.query(sql, values, function (err, result, fields) {
        if (err) throw err;
             // request về page list books khi insert success
            res.writeHead(301, { "Location": "http://" + req.headers['host'] + '/books' });

            return res.end();
        });
    });
});

2. Trả về màn hình chỉnh sửa khi người dùng nhấp vào http. //máy chủ cục bộ. 8000/chỉnh sửa/1

Xử lý chức năng này mình cũng cần 3 bước

Bước 1. Lấy id của sách Vì id được truyền qua url mà không phải tham số nên ta lấy như sau

<% include ../layout/header %>
    <div class="row" style="margin-top: 1%; margin-bottom: 1%;">
        <div class="col-md-2 col-md-offset-11">
            <a href="/books" class="btn btn-success">List</a>
        </div>
    </div>
    <div class="panel panel-default" style="margin-top: 2%;">
        <div class="panel-heading">Create Book</div>
        <div class="panel-body">
            <div class="col-md-12">
               <form action="/books/store" method="post" class="form-horizontal">
                   //mình sẽ include form book ở đây
                 <% include form_books %>
                 <div class="form-group">
                   <div class="col-sm-offset-11 col-sm-10">
                     <button type="submit" name="create" class="btn btn-info">Create</button>
                   </div>
                 </div>
               </form>
            </div>
        </div>
    </div>

<% include ../layout/footer %>

0

Bước 2. Get data of id that from DB

Cũng giống như bài trước, render view will information through a function that is

<% include ../layout/header %>
    <div class="row" style="margin-top: 1%; margin-bottom: 1%;">
        <div class="col-md-2 col-md-offset-11">
            <a href="/books" class="btn btn-success">List</a>
        </div>
    </div>
    <div class="panel panel-default" style="margin-top: 2%;">
        <div class="panel-heading">Create Book</div>
        <div class="panel-body">
            <div class="col-md-12">
               <form action="/books/store" method="post" class="form-horizontal">
                   //mình sẽ include form book ở đây
                 <% include form_books %>
                 <div class="form-group">
                   <div class="col-sm-offset-11 col-sm-10">
                     <button type="submit" name="create" class="btn btn-info">Create</button>
                   </div>
                 </div>
               </form>
            </div>
        </div>
    </div>

<% include ../layout/footer %>

1

<% include ../layout/header %>
    <div class="row" style="margin-top: 1%; margin-bottom: 1%;">
        <div class="col-md-2 col-md-offset-11">
            <a href="/books" class="btn btn-success">List</a>
        </div>
    </div>
    <div class="panel panel-default" style="margin-top: 2%;">
        <div class="panel-heading">Create Book</div>
        <div class="panel-body">
            <div class="col-md-12">
               <form action="/books/store" method="post" class="form-horizontal">
                   //mình sẽ include form book ở đây
                 <% include form_books %>
                 <div class="form-group">
                   <div class="col-sm-offset-11 col-sm-10">
                     <button type="submit" name="create" class="btn btn-info">Create</button>
                   </div>
                 </div>
               </form>
            </div>
        </div>
    </div>

<% include ../layout/footer %>

2

Bước 3 đổ ra chế độ xem và hiển thị cho người dùng

var http = require('http') 
var { parse } = require('querystring') //đây là cách khai báo khi mình muốn dùng 1 function nào của module thay vì lấy tất cả
var body = ''
 http.createServer(function (req, res) { 
     req.on('data', (data) => {
             body += data
      })

      req.on('end', () => {
            body = parse(body)
            console.log(body
      })
 }).listen(8000)

0

Tương tự cho các trường khác ở đây mình sẽ dùng

<% include ../layout/header %>
    <div class="row" style="margin-top: 1%; margin-bottom: 1%;">
        <div class="col-md-2 col-md-offset-11">
            <a href="/books" class="btn btn-success">List</a>
        </div>
    </div>
    <div class="panel panel-default" style="margin-top: 2%;">
        <div class="panel-heading">Create Book</div>
        <div class="panel-body">
            <div class="col-md-12">
               <form action="/books/store" method="post" class="form-horizontal">
                   //mình sẽ include form book ở đây
                 <% include form_books %>
                 <div class="form-group">
                   <div class="col-sm-offset-11 col-sm-10">
                     <button type="submit" name="create" class="btn btn-info">Create</button>
                   </div>
                 </div>
               </form>
            </div>
        </div>
    </div>

<% include ../layout/footer %>

9 lấy dữ liệu vì khi trả về nó là một mảng

programming nodejs