Node.js+Express+Mysql实现增删改查功能

node.js+express+mysql实现简单的增删改查功能详细解析,如下:

准备工作:

安装express项目生成器:npm install express-generator -g

 检查是否安装成功:

查看express版本:express --version

创建一个project文件夹,在project目录下生成项目:

生成名为test的项目:express -e test

打开test目录

安装必要模块:npm install

安装mysql:npm install mysql

安装重要模块,之后会用到:

npm install --save art-template

npm install --save express-art-template

生成后的项目如下图所示:

 

修改app.js文件中的视图引擎为html:

 

将以上代码修改为以下代码:

// view engine setup

app.set('views', path.join(__dirname, 'views'));

//设置html引擎,使用express-art-template渲染后缀为html的模板,这个很重要!

app.engine('html', require('express-art-template'));

//设置视图引擎

app.set('view engine', 'html');

把views文件夹中的.ejs文件修改为.html文件,如下图所示:

 

 设计数据库:

建立名为test的数据库,创建名为userinfo的表,在表中创建id,name,age字段,其中id为主键。如下图所示:

在routes文件夹中创建db.js文件,作为数据库连接池:

//创建数据库连接池,连接mysql

var mysql = require('mysql');

var pool = mysql.createPool({

    host: 'localhost',

    user: 'root',

    password: '123456',

    database: 'test'

});

function query(sql, callback) {

    //得到连接

    pool.getConnection(function (err, connection) {

        //使用连接

        connection.query(sql, function (err, rows) {

            callback(err, rows);

            //释放连接

            connection.release();

        });

    });

}

exports.query = query;

 修改views文件夹中index.html文件,改成以下代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{ {title}}</title>
</head>
<body>
<!--设置行动地址-->
<form action="/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="查询">
    <a href="/add">新增</a>
</form>
<table>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>操作</th>
    </tr>
    <!--将每条数据命名为value,并当作索引-->
    { {each datas as value index}}
    <tr>
        <!--将后台返回的数据显示出来-->
        <td>{ {value.id}}</td>
        <td>{ {value.name}}</td>
        <td>{ {value.age}}</td>
        <td><a href="/del/{ {value.id}}">删除</a></td>
        <td><a href="/toUpdate/{ {value.id}}">修改</a></td>
    </tr>
    { {/each}}
</table>
</body>
</html>

在views文件夹中创建add.html文件:

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

在views文件夹中创建update.html文件:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改页面</title>
</head>
<body>
<form action="/update" method="post">
    <!--将后台的数据返回到前端,并将该数据的名字设置为id,返回到后台-->
    <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>

修改routes文件夹中的index.js文件为以下内容:

var express = require('express');

var router = express.Router();

//引入连接数据库文件

var db = require("./db.js");

//创建首页

router.get('/', function (req, res, next) {

    //在首页显示表中所有数据

    db.query('select * from userinfo', function (err, rows) {

        if (err) {

            res.render('index', {title: 'Express', datas: []});

        } else {

            //将数据显示在index.html页面

            res.render('index', {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('/');

        }

    })

});

//实现删除功能

router.get('/del/:id', function (req, res) {

    //获取参数中的id值

    var id = req.params.id;

    //删除当前id下的数据

    db.query("delete from userinfo where id=" + id, function (err, rows) {

        if (err) {

            res.end('删除失败:' + err)

        } else {

            res.redirect('/')

        }

    });

});

//创建修改页面

router.get('/toUpdate/:id', function (req, res) {

    var id = req.params.id;

    //查询当前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;

    //修改当前id下的数据

    db.query("update userinfo set name='" + name + "',age='" + age + "' where id=" + id, function (err, rows) {

        if (err) {

            res.end('修改失败:' + err);

        } else {

            res.redirect('/');

        }

    });

});

//实现查询功能

router.post('/search', function (req, res) {

    var name = req.body.s_name;

    var age = req.body.s_age;

    //创建查询的sql语句

    var sql = "select * from userinfo";

    if (name) {

        sql += " and name='" + name + "' ";

    }

    if (age) {

        sql += " and age=" + age + " ";

    }

    //替换掉匹配到的第一个and字符串,并该成where

    sql = sql.replace(/and/,"where");

    db.query(sql, function (err, rows) {

        if (err) {

            res.end("查询失败:", err)

        } else {

            //将查询的数据显示在index.html

            res.render("index", {title: 'Express', datas: rows, s_name: name, s_age: age});

        }

    });

});

module.exports = router;

启动项目,在test目录下执行以下命令:

npm start 

在浏览器中访问:localhost:3000 

以上为node.js+express+mysq实现增删改查的详细知识点。 

猜你喜欢

转载自blog.csdn.net/m0_70819559/article/details/126362962