用mysql + node搭建一個簡易工做列表網站

時間 2019-12-06

標籤 mysql node 搭建一個簡易列表網站欄目 MySQL 简体版

原文原文鏈接

初衷

增刪改查是web開發最多見的操做，那麼接下來這篇文章將演示如何用node + mysql作一個簡易的網站。html

須要的知識

本教程不涉及express等web框架，但請確保您對node + mysql等有基本瞭解。node

需求分析

本網站共有二個頁面，主頁和副頁。mysql

主頁：

以下圖，主頁最上面是一個查看存檔的按鈕，點擊會進入副頁。上半部分是一個表格，有日期，耗時，描述三個字段，每一列有二個操做，能夠存檔和刪除，存檔的記錄會從主頁中消失，而會在副頁中顯示，點擊刪除會完全刪除該列。下半部分是一個表單，由用戶輸入並提交，提交後的記錄出如今上半部分的表格中。
git

副頁：

以下圖，副頁上部是一個表格，有日期，耗時，描述三個字段，每一列只有一個操做，點擊刪除會完全刪除該列。下部有一個返回按鈕，點擊會回到主頁。
github

項目目錄

在根目錄下建立app.js，app.js負責建立http服務器，頁面路由控制，登陸數據庫等功能
在根目錄下建立lib文件夾，在lib下新建timetrack.js，其負責解析post請求，與數據庫交互（添加，刪除，查看，更新），將服務端渲染的html返回到客戶端等功能
安裝node的mysql數據庫，命令以下：npm install mysql --save

最終，目錄以下所示：
web

工具準備

mysql數據庫：5.7.22
node版本：10.4.1
workbench：6.3 communitysql

數據庫部分

首先，打開workbench，登陸進去後，新建一個數據庫worklist
數據庫

新建一個sql tab，輸入以下命令，建立一個表，用於存儲本項目所涉及的數據。
express

-- sql腳本
CREATE TABLE IF NOT EXISTS work (
    id INT(10) NOT NULL AUTO_INCREMENT,
    hours DECIMAL(5,2) DEFAULT 0, 
    date DATE, 
    archived INT(1) DEFAULT 0, 
    description LONGTEXT,
    PRIMARY KEY(id));

這樣，數據庫部分就準備好了。npm

編碼

首先，在app.js中輸入以下代碼：

let http = require('http')
let work = require('./lib/timetrack')
let mysql = require('mysql')

var db = mysql.createConnection({
  host: '127.0.0.1',
  user: '@your username', // 你的數據庫用戶名
  password: '@your password',  // 你的數據庫密碼
  database: 'worklist'
})

var server = http.createServer((req, res) => {
  switch (req.method) {
    case 'POST':
      switch(req.url) {
        case '/':
          work.add(db, req, res)
          break
        case '/archive':
          work.archive(db, req, res)
          break
        case '/delete':
          work.delete(db, req, res)
          break
      }
      break
    case 'GET':
      switch (req.url) {
        case '/':
          work.show(db, res)
          break
        case '/archived':
          work.showArchived(db, res)
          break
      }
      break
  }
})

console.log('Server started...')
server.listen(3000, '127.0.0.1')

接着，在lib目錄下的timetrack.js中輸入以下代碼：

var qs = require('querystring')

// 1 show
exports.show = function (db, res, showArchived) {
  let archiveValue = (showArchived) ? 1 : 0
  db.query(
    'SELECT * FROM work WHERE archived = ? ORDER BY date DESC',
    [archiveValue],
    function (err, rows) {
      if (err) {
        throw err
      }

      if (showArchived) { // 副頁
        html = (showArchived) ? '' : '<a href="/archived">查看存檔</a><br/>'
        html += exports.workHitlistHtml(rows)
        html += '<a href="/">返回</a>'
      } else { // 主頁
        html = (showArchived) ? '' : '<a href="/archived">查看存檔</a><br/>'
        html += exports.workHitlistHtml(rows)
        html += exports.workFormHtml()
      }

      exports.sendHtml(res, html)
    }
  )
}

// 顯示上半部分--列表
exports.workHitlistHtml = function (rows) {
  var html = '<table>'
  for(var i in rows) {
    html += '<tr>'
    html += '<td>' + rows[i].date + '</td>'
    html += '<td>' + rows[i].hours + '</td>'
    html += '<td>' + rows[i].description + '</td>'
    if (!rows[i].archived) {
      html += '<td>' + exports.workArchiveForm(rows[i].id) + '</td>'
    }
    html += '<td>' + exports.workDeleteForm(rows[i].id) + '</td>'
    html += '</tr>'
  }
  html += '</table>'
  return html
}
// 顯示下半部分--提交
exports.workFormHtml = function () {
  var html = '<form method="POST" action="/">' +
    '<p>日期 (YYYY-MM-DD)：<br/><input name="date" type="text"><p/>' +
    '<p>耗時：<br/><input name="hours" type="text"><p/>' +
    '<p>描述：<br/>' +
    '<textarea name="description"></textarea></p>' +
    '<input type="submit" value="添加" />' +
    '</form>'
  return html
}

// 返回到瀏覽器
exports.sendHtml = function (res, html) {
  res.setHeader('Content-Type', 'text/html; charset=UTF-8')
  res.setHeader('Content-Length', Buffer.byteLength(html))
  res.end(html)
}

// 渲染二個操做 -- 存檔和刪除
exports.workArchiveForm = function (id) {
  return exports.actionForm(id, '/archive', '存檔')
}
exports.workDeleteForm = function (id) {
  return exports.actionForm(id, '/delete', '刪除')
}
exports.actionForm = function (id, path, label) {
  var html = '<form method="POST" action="' + path + '">' +
    '<input type="hidden" name="id" value="' + id + '">' +
    '<input type="submit" value="' + label + '" />' +
    '</form>'
  return html
}

// 2 add
exports.add = function (db, req, res) {
  exports.parseReceivedData(req, function(work) {
    db.query(
      'INSERT INTO work (hours, date, description) VALUES (?, ?, ?)',
      [work.hours, work.date, work.description],
      function (err) {
        if (err) throw err
        exports.show(db, res)
      }
    )
  })
}

// 解析post請求
exports.parseReceivedData = function (req, cb) {
  var body = ''
  req.setEncoding('utf8')
  req.on('data', chunk => {
    body += chunk
  })
  req.on('end', () => {
    var data = qs.parse(body)
    cb(data)
  })
}

// 3 存檔
exports.archive = function (db, req, res) {
  exports.parseReceivedData(req, function(work) {
    db.query(
      "UPDATE work SET archived = 1 WHERE id = ?",
      [work.id],
      function (err) {
        if (err) throw err
        exports.show(db, res)
      }
    )
  })
}

// 4 刪除
exports.delete = function (db, req, res) {
  exports.parseReceivedData(req, function (work) {
    db.query(
      "DELETE FROM work WHERE id = ?",
      [work.id],
      function (err) {
        if (err) throw err
        exports.show(db, res)
      }
    )
  })
}

// 5 查看存檔
exports.showArchived = function (db, res) {
  exports.show(db, res, true)
}