node+express+mysql实现简单的数据增删改查

前提

电脑已经安装了node，express，mysql。

实现步骤

1.新建数据库表

附数据表结构：

2.创建exprss项目

express -e myapp 新建一个以ejs为模板的express项目

cd myapp

npm install

3.安装nodejs的mysql插件

npm install mysql --save

4.创建数据库配置文件

项目根目录下创建config目录，config目录内新建db.js,来实现基本的数据库连接

db.js

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 启动服务

express默认的是3000的端口，如果服务正常启动，则可以在浏览器地址栏输入http://localhost:3000/users

8.示例贴图：

posted on 2017-03-14 19:23 yansj1997 阅读(18566) 评论(4) 编辑收藏举报

刷新页面返回顶部

左手抓右手

公告