NodeJS+Express+MySQL 增刪改查

2020-06-16 17:26:13

之前，一直使用的是nodejs+thinkjs來完成自己所需的專案需求，而對於nodejs中另外一中應用框架express卻了解的少之又少，這兩天就簡單的了解了一下如何使用express來做一些資料庫的增刪改查。

準備工作：

所需工具：電腦上要安裝好nodejs（官網https://nodejs.org/en/），下載並安裝好nodejs之後，需要在cmd中再安裝好express框架：

npm install express-generator -g

安裝完畢之後，檢查一下是否安裝成功：

還有一個工具就是連線資料庫操作的Navicat用戶端（我們平常連線資料庫的工具，挺好用的。）

準備好這些工具之後，就可以開始我們的資料庫操作了（記得電腦上也要裝上webstroms，這個就跳過不說了）。

著手demo：

1.開啟webstroms，新建一個express專案：

接著選擇好檔案型別：

在這裡，我選擇的是EJS模板引擎，這個憑自己喜好決定。於是新建好的專案目錄就是醬紫滴：

大家應該注意到了，views資料夾下的並非是平常所見的.html檔案，而是.ejs檔案，於是就需要我們自己來把它預設的引擎從EJS改成HTML，修改的操作就是開啟app.js檔案，然後將其中一段程式碼註釋掉並修改成如下：

// view engine setup
// app.set('views', path.join(__dirname, 'views'));
// app.set('view engine', 'ejs');

//注釋掉預設的，自己手動修改預設引擎
app.set('views', path.join(__dirname, 'views'));
var template = require('art-template');
template.config('base', '');
template.config('extname', '.html');
app.engine('.html', template.__express);
app.set('view engine', 'html');

然後將原有預設的兩個.ejs檔案刪掉，並建立相應的.html檔案，在這個小demo中，鑑於自己所需的，故重新建好的檔案目錄是醬紫滴：

2.資料庫準備：

開啟Navicat用戶端，新建一個資料庫，指令碼如下：

create database testdb;
use testdb;
create table userinfo(
 id                                        int not null auto_increment,
 name                                  varchar(20) not null,
age                                      int not null,
primary key (id)          
)

這樣我們所需的資料庫就有了。

接著就是將專案和此資料庫連線起來——在剛才新建的db.js中，來實現連線資料庫：

//db.js


/**
 * Created by Administrator on 2016/7/19.
 */
// 連線MySQL
var mysql = require('mysql');
var pool = mysql.createPool({
    host: 'localhost',
    user: 'root',
    password: 'root',
    database: 'testdb'
});

function query(sql, callback) {
    pool.getConnection(function (err, connection) {
        // Use the connection
        connection.query(sql, function (err, rows) {
            callback(err, rows);
            connection.release();//釋放連結
        });
    });
}
exports.query = query;

我是將程式碼寫在users.js中，而預設的index中就都沒有寫任何程式碼，於是完整的程式碼如下：

①users.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{title}}</title>
</head>
<body>
<form action="/users/search" method="post">
    姓名：<input type="text" name="s_name" value="{{s_name}}"><br>
    年齡：<input type="text" name="s_age" value="{{s_age}}"><br>
    <input type="submit" value="查詢">
</form>

<table>
    <tr>
        <th>編號</th>
        <th>姓名</th>
        <th>年齡</th>
        <th>操作</th>
    </tr>
    {{each datas as value index}}
    <tr>
        <td>{{value.id}}</td>
        <td>{{value.name}}</td>
        <td>{{value.age}}</td>
        <td><a href="/users/add">新增</a></td>
        <td><a href="/users/del/{{value.id}}">刪除</a></td>
        <td><a href="/users/toUpdate/{{value.id}}">修改</a></td>
    </tr>
    {{/each}}
</table>
</body>
</html>

②add.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增頁面</title>
</head>
<body>
<form action="/users/add" method="post">
    姓名：<input type="text" name="name"><br>
    年齡：<input type="text" name="age"><br>
    <input type="submit" value="提交">
</form>
</body>
</html>

③update.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改頁面</title>
</head>
<body>
<form action="/users/update" method="post">
    <input type="hidden" value="{{datas[0].id}}" name="id">
    姓名：<input type="text" name="name" value="{{datas[0].name}}"><br>
    年齡：<input type="text" name="age" value="{{datas[0].age}}"><br>
    <input type="submit" value="提交">
</form>
</body>
</html>

④user.js

var express = require('express');
var router = express.Router();
//引入資料庫包
var db = require("./db.js");

/* GET users listing. */
// router.get('/', function(req, res, next) {
//   res.send('respond with a resource');
// });

/**
 * 查詢列表頁
 */
router.get('/', function (req, res, next) {
    db.query('select * from userinfo', function (err, rows) {
        if (err) {
            res.render('users', {title: 'Express', datas: []});  // this renders "views/users.html"
        } else {
            res.render('users', {title: 'Express', datas: rows});
        }
    })
});
/**
 * 新增頁面跳轉
 */

router.get('/add', function (req, res) {
    res.render('add');
});
router.post('/add', function (req, res) {
    var name = req.body.name;
    var age = req.body.age;
    db.query("insert into userinfo(name,age) values('" + name + "'," + age + ")", function (err, rows) {
        if (err) {
            res.end('新增失敗：' + err);
        } else {
            res.redirect('/users');
        }
    })
});

/**
 * 刪
 */
router.get('/del/:id', function (req, res) {
    var id = req.params.id;
    db.query("delete from userinfo where id=" + id, function (err, rows) {
        if (err) {
            res.end('刪除失敗：' + err)
        } else {
            res.redirect('/users')
        }
    });
});
/**
 * 修改
 */
router.get('/toUpdate/:id', function (req, res) {
    var id = req.params.id;
    db.query("select * from userinfo where id=" + id, function (err, rows) {
        if (err) {
            res.end('修改頁面跳轉失敗：' + err);
        } else {
            res.render("update", {datas: rows});       //直接跳轉
        }
    });
});
router.post('/update', function (req, res) {
    var id = req.body.id;
    var name = req.body.name;
    var age = req.body.age;
    db.query("update userinfo set name='" + name + "',age='" + age + "' where id=" + id, function (err, rows) {
        if (err) {
            res.end('修改失敗：' + err);
        } else {
            res.redirect('/users');
        }
    });
});
/**
 * 查詢
 */
router.post('/search', function (req, res) {
    var name = req.body.s_name;
    var age = req.body.s_age;

    var sql = "select * from userinfo";

    if (name) {
        sql += " and name='" + name + "' ";
    }

    if (age) {
        sql += " and age=" + age + " ";
    }
    sql = sql.replace("and","where");
    db.query(sql, function (err, rows) {
        if (err) {
            res.end("查詢失敗：", err)
        } else {
            res.render("users", {title: 'Express', datas: rows, s_name: name, s_age: age});
        }
    });
});


module.exports = router;