node + express + mysql實現簡單的增刪查改

這是我參與更文挑戰的第2天，活動詳情查看：更文挑戰html

前提node

電腦已經安裝了node，express，mysql。mysql

實現步驟

1.新建數據庫表

附數據表結構：sql

2.建立exprss項目

express -e myapp 新建一個以ejs爲模板的express項目數據庫

cd myappexpress

npm installnpm

3.安裝nodejs的mysql插件

npm install mysql --save瀏覽器

4.建立數據庫配置文件

項目根目錄下建立config目錄，config目錄內新建db.js,來實現基本的數據庫鏈接markdown

var mysql = require("mysql");
var pool = mysql.createPool({
    host:"localhost",
    user:"root",
    password:"",
    database:"oa"
});
function query(sql,callback){
    pool.getConnection(function(err,connection){
        connection.query(sql, function (err,rows) {
            callback(err,rows);
            connection.release();
        });
    });
}
exports.query = query;
複製代碼

5.數據表增刪改查的業務代碼，demo中暫時放到routes下的user.js中(demo的項目目錄結構可能不大合理，暫且不糾結於此)

user.js
var express = require('express');
var router = express.Router();
var db = require("../config/db");
/**
 * 查詢列表頁
 */
router.get("/",function(req,res,next){
    db.query("select * from user",function(err,rows){
        if(err){
            res.render("users",{title:"用戶列表",datas:[]});
        }else {
            res.render("users",{title:"用戶列表",datas:rows});
        }
    });
});
/**
 * 添加用戶
 */
router.get("/add",function(req,res,next){
    res.render("add");
});
router.post("/add",function(req,res,next){
    var name = req.body.name;
    var age = req.body.age;
    db.query("insert into user(name,age) values('"+name+"','"+ age +"')",function(err,rows){
        if(err){
            res.send("新增失敗"+err);
        }else {
            res.redirect("/users");
        }
    });
});
/**
 * 刪除用戶
 */
router.get("/del/:id",function(req,res){
    var id = req.params.id;
    db.query("delete from user where id = " + id,function(err,rows){
        if(err){
            res.send("刪除失敗"+err);
        }else {
            res.redirect("/users");
        }
    });
});
/**
 * 修改
 */
router.get("/toUpdate/:id",function(req,res,next){
    var id = req.params.id;
    var sql = "select * from user where id = " + id;
    console.log(sql);
    db.query(sql,function(err,rows){
        if(err){
            res.send("修改頁面跳轉失敗");
        }else {
            res.render("update",{datas:rows});
        }
    });
});
router.post("/update",function(req,res,next){
    var id = req.body.id;
    var name = req.body.name;
    var age = req.body.age;
    var sql = "update user set name = '"+ name +"',age = '"+ age +"' where id = " + id;
    console.log(sql);
    db.query(sql,function(err,rows){
        if(err){
            res.send("修改失敗 " + err);
        }else {
            res.redirect("/users");
        }
    });
});
/**
 * 查詢
 */
router.post("/search",function(req,res,next){
    var name = req.body.s_name;
    var age = req.body.s_age;
    var sql = "select * from user";
    if(name){
        sql += " where name = '"+ name +"'";
    }
    //if(age){
    //    sql += " and age = '" + age + "'";
    //}
    sql.replace("and","where");
    db.query(sql,function(err,rows){
        if(err){
            res.send("查詢失敗: "+err);
        }else{
            res.render("users",{title:"用戶列表",datas:rows,s_name:name,s_age:age});
        }
    });
})
module.exports = router;
6.建立ejs模版文件
users.ejs(用戶列表頁模板)
<!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="<%= datas.name %>"><br>
    年齡：<input type="text" name="s_age" value="<%= datas.age %>"><br>
    <input type="submit" value="查詢">
</form>
<table>
    <tr>
        <th>編號</th>
        <th>姓名</th>
        <th>年齡</th>
        <th>操做</th>
    </tr>
    <% for(var i = 0; i < datas.length; i++) {%>
        <tr>
            <td><%= datas[i].id %></td>
            <td><%= datas[i].age %></td>
            <td><%= datas[i].name %></td>
            <td><a href="/users/add">添加用戶</a></td>
            <td><a href="/users/del/<%= datas[i].id %>">刪除</a></td>
            <td><a href="/users/toUpdate/<%= datas[i].id %>">修改</a></td>
        </tr>
    <% } %>
</table>
</body>
</html>
add.ejs(添加用戶的模板文件)
<!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.ejs(用戶信息修改的模板文件)
<!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>
複製代碼

7.啓動服務

npm start 啓動服務app

express默認的是3000的端口，若是服務正常啓動，則能夠在瀏覽器地址欄輸入http://localhost:3000/users

8.示例貼圖：

人懶，不想配圖，都是本身的博客內容（乾貨），望能幫到你們

公衆號：小何成長，佛系更文，都是本身曾經踩過的坑或者是學到的東西

有興趣的小夥伴歡迎關注我哦，我是：小阿肥。 你們一塊兒進步鴨