使用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>