express + mysql数据库 + ejs 进行的增删改查

使用express + mysql数据库 + ejs 进行的增删改查

注意：Express默认并不处理HTTP请求体中的数据，对于普通请求体(JSON、二进制、字符串)数据，可以使用body-parser中间件。

1.使用form表单进行请求

   form的使用事项：

  a) 在进行文件上传时：

    -.enctype设置

     需要使用enctype=“multipart/form-data”，（不对字符编码，在使用包含文件上传表单时必须使用）

    -.Multer中间件（需要npm install multer安装）

    在路由中获取数据要使用formidable模块或Multer中间件，Multer是用于Node.js multipart/form-data请求数据处理的中间件。可以高效的       处理文件上传，但并不处理multipart/form-data之外的用户请求。

    -.返回值

     Multer在解析完请求体后，会向Request对象中添加一个body对象和一个file或files对象（上传多个文件时使用files对象 ）

b) 在进行文本上传

     -.enctype设置

     需要使用enctype=“application/x-www-form-urlencoded”，（在发送前编码所有字符（默认）））

    -.body-parse中间件

    -.返回值

    req.body获取

    这个demo使用的是简单的数据库信息查询没有文件格式，所以使用了b）方法

2.数据库

连接数据库的操作

var sql=require('mysql');
//打开数据库连接
var conn=sql.createConnection({
	host:'localhost',
	user:'root',
	password:'',
	database:'mysqldata'
});
//连接数据库
conn.connect();

3.ejs

ejs官方文档很细，这里就不多说了

这里上代码

index.js

var express = require('express');
var router = express.Router();
var tool=require('../tool');
var sql=require('mysql');

router.get('/', function(req, res, next) {
    conn.connect();
//查数据
    conn.query('select * from user',function(error,results,fields){
        if(!error){
            //此处已经得到数据可以关闭数据库连接
            conn.close();
            var jsonData=tool.toJson(1,'获取成功',results);
            res.render('index', jsonData);
        }
    });

});

router.post('/updid',function(req,res){
    var id=req.body.id;
    var name=req.body.name;
    console.log(id);
    conn.query('select * from user where (id="'+ id +'" OR username="'+ name +'")',function(error,results,fields){
        if(!error){
            conn.close();
            var jsonData=tool.toJson(1,'获取成功',results);
            res.send(jsonData);
        }
    });

})
//修改数据
router.post('/update', function (req, res) {
    var id = req.body.id;
    var name = req.body.name;
    var phone = req.body.phone;
    var oldname=req.body.oldname;


    var sql = "update user set username='" + name + "',phonenum='" + phone + "' where (id=' "+ id +" 'OR username='"+ oldname +"')";
    conn.query(sql, function (err, rows) {
        if (err) {
            res.end('修改失败：' + err);
        } else {
            conn.close();
            res.redirect('/');
        }
    });
});



//删除数据
router.post('/dele', function(req, res, next) {
    console.log(req.files);
    var id = req.body.id;
    var name=req.body.name;
    console.log(id);
    console.log(name);
// 查数据
    conn.query("delete from user where (id='"+id+"'OR username='"+ name +"')",function(error,results,fields){
        if(!error){
            conn.close();
            //在根页面进行刷新所以重定向会跟页面，同时会调用查数据方法并渲染页面
            res.redirect('/');
        }else{
            res.end('删除失败:'+ error );
        }
    });

});

//增加数据
router.post('/add',function(req,res,next){
    var name=req.body.name;
    var email=req.body.email;
    var phone=req.body.phone;
    console.log(name,email,phone);
    conn.query('insert into user (username,email,phonenum) values("'+ name +'","'+ email +'","'+ phone +'")',function(error,results,fields){
        if(!error){
            conn.close();
            res.redirect('/');
        }else{
            res.end('添加失败:'+error);
        }
    })
})

module.exports = router;

index.ejs

<div>
        <table class="table table-hover usertable">
            <tr>
                <th>姓名</th>
                <th>E-mail</th>
                <th>电话</th>
                <th>操作</th>
            </tr>
            <%for(var key in data){%>
            <tr>
                <td><%=data[key].username%></td>
                <td><%=data[key].email%></td>
                <td><%=data[key].phonenum%></td>
            </tr>
            <%}%>

        </table>
    </div>

 <div class="form">
            <span>删除</span>
        <form action="/dele" method="post">
            姓 名<input type="text" name="name"><br>
            id：<input type="text" name="id" value=""><br>
            <!--电 话<input type="text" name="phone"><br>-->
            <input type="submit" value="删除">
        </form>
        </div>
        <div class="form">
            <span>添加</span>
        <form action="/add" method="post">
            姓 名<input type="text" name="name"><br>
            email<input type="text" name="email"><br>
            电 话<input type="text" name="phone"><br>
            <input type="submit" value="添加">
        </form>
        </div>
        <div class="form">
            <span>修改</span>
            <form action="/update" method="post">
                id：<input type="text" name="id" value="" id="updid"><br>
                旧姓名：<input type="text" name="oldname" value="" id="updname"><br>
                新姓名：<input type="text" name="name" value=""><br>
                电话：<input type="text" name="phone" value="" id="updphone"><br>
                <input type="submit" value="提交">
            </form>
        </div>
    </div>

在修改数据时，在输入id或者姓名后自动写入其他相关信息，做了如下设置，为了提升用户体验

<script>
    $('#updid').on("blur",function(){
        $.ajax({
            type:'post',
            url:'/updid',
            async:true,
            data:{
                id:$('#updid').val()
            },
            success:function(res){
                if(res.code){
                    $('#updname').val(res.data[0].username);
                    $('#updphone').val(res.data[0].phonenum);
                }

            },
            error:function(){

            }
        })
    })
    $('#updname').on("blur",function(){
        $.ajax({
            type:'post',
            url:'/updid',
            async:true,
            data:{
                name:$('#updname').val()
            },
            success:function(res){
                if(res.code){
                    $('#updid').val(res.data[0].id);
                    $('#updphone').val(res.data[0].phonenum);
                }
            },
            error:function(){

            }
        })
    })
</script>