NodeJS Express博客项目实战 之 轮播图管理
Posted jiguiyan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了NodeJS Express博客项目实战 之 轮播图管理相关的知识，希望对你有一定的参考价值。
轮播图管理添加功能
后台轮播图管理的位置：
因此需在此处加一个路由的跳转：
在视图views中后台的index.html
<h2><span class="icon-user"></span>系统管理</h2> <ul > <li><a href="/admin/slider" target="right"><span class="icon-caret-right"></span>轮播图管理</a></li> <li><a href="/admin/system" target="right"><span class="icon-caret-right"></span>系统设置</a></li> </ul>
在后台路由中新建一个slider.js
在整个后台中进行对轮播图路由的注册：
//轮播图管理 let sliderRouter=require(‘./admin/slider‘); router.use(‘/slider‘,sliderRouter);
在后台的视图views中新建文件夹slider,并加入：
需要实现轮播图的添加功能，在slider.js中写入添加的页面，以及处理添加的功能，看是否获取到数据：
slider.js:
let express = require("express"); let router = new express.Router(); const path = require(‘path‘); //设置文件上传 const multer=require("multer"); //设置上传的图片的临时存储位置 const upload = multer(dest:"tmp/"); console.log(upload); //导入fs模块 const fs=require("fs"); // 导入mysql模块 const mysql = require("../../config/db.js"); //添加页 router.get("/add",function(req,res,next) res.render("admin/slider/add.html"); ); //处理添加的功能,看是否获取到了数据 router.post("/add",upload.single("img"),function(req,res,next) //获取表单数据 //console.log(req.body); //获取文件的相关数据 console.log(req.file); let name,url,sort=req.body; //接收文件相关的数据 let imgRes=req.file; console.log(req.file); //可以获取文件的临时目录 let tmpPath=imgRes.path; //文件上传的执行目录 //获取图片后缀名 let ext=path.extname(imgRes.originalname); console.log(ext); //获取时间撮（随机数+时间撮） let newName=""+(new Date().getTime())+Math.round(Math.random()*10000); let newPath="/upload/slider"+newName; console.log(tmpPath); console.log(newPath); //进行文件的拷贝 let fileData=fs.readFileSync(tmpPath); fs.writeFileSync(__dirname+"/../../"+newPath,fileData); // 将数据插入到数据库中 mysql.query("insert into banner(name,url,sort,img) value(?,?,?,?)",[name,url,sort,newPath],function(err,data) if (err) return ""; else if (data.affectedRows==1) //添加成功需要跳转到显示页面 res.send("<script>alert(‘添加成功‘);location.href=‘/admin/slider‘</script>"); else res.send("<script>alert(‘添加失败‘);history.go(-1)</script>"); ) ) module.exports=router;
add.html
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 7 <meta name="renderer" content="webkit"> 8 <title></title> 9 <link rel="stylesheet" href="../../../public/admin/css/pintuer.css"> 10 <link rel="stylesheet" href="../../../public/admin/css/admin.css"> 11 <script src="../../../public/admin/js/jquery.js"></script> 12 <script src="../../../public/admin/js/pintuer.js"></script> 13 </head> 14 <body> 15 <div class="panel admin-panel"> 16 <div class="panel-head"><strong><span class="icon-key"></span> 添加轮播图</strong></div> 17 <div class="body-content"> 18 <form method="post" enctype="multipart/form-data" class="form-x" action=""> 19 20 <div class="form-group"> 21 <div class="label"> 22 <label for="sitename">轮播图名称：</label> 23 </div> 24 <div class="field"> 25 <input type="text" class="input " id="mpass" name="name" size="50" placeholder="请输入轮播图名称" data-validate="required:请输入轮播图名" /> 26 </div> 27 </div> 28 <div class="form-group"> 29 <div class="label"> 30 <label for="sitename">轮播图跳转地址：</label> 31 </div> 32 <div class="field"> 33 <input type="text" class="input " name="url" placeholder="请输入轮播图跳转地址" data-validate="required:请输入轮播图跳转地址" /> 34 </div> 35 </div> 36 <div class="form-group"> 37 <div class="label"> 38 <label for="sitename">轮播图排序：</label> 39 </div> 40 <div class="field"> 41 <input type="number" class="number " name="sort" size="50" placeholder="请输入轮播图排序、数值越大越靠前" data-validate="required:请输入轮播图排序" /> 42 </div> 43 </div> 44 <div class="form-group"> 45 <div class="label"> 46 <label for="sitename">轮播图图片：</label> 47 </div> 48 <div class="field"> 49 <input type="file" class="number " name="img" data-validate="required:请选择轮播图图片" /> 50 </div> 51 </div> 52 53 54 55 56 57 58 <div class="form-group"> 59 <div class="label"> 60 <label></label> 61 </div> 62 <div class="field"> 63 <button class="button bg-main icon-check-square-o" type="submit"> 提交</button> 64 </div> 65 </div> 66 </form> 67 </div> 68 </div> 69 </body></html>
轮播图管理查看功能、删除功能和排序功能
查看功能需在页面上显示，因此需要加载页面index.html
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 7 <meta name="renderer" content="webkit"> 8 <title></title> 9 <link rel="stylesheet" href="./../public/admin/css/pintuer.css"> 10 <link rel="stylesheet" href="./../public/admin/css/admin.css"> 11 <script src="./../public/admin/js/jquery.js"></script> 12 <script src="./../public/admin/js/pintuer.js"></script> 13 </head> 14 <body> 15 16 <div class="panel admin-panel"> 17 <div class="panel-head"><strong class="icon-reorder">轮播图列表</strong> <a href="" style="float:right; display:none;">添加字段</a></div> 18 <div class="padding border-bottom"> 19 <ul class="search" style="padding-left:10px;"> 20 <li> <a class="button border-main icon-plus-square-o" href="/admin/slider/add"> 添加轮播图</a> </li> 21 <li>搜索：</li> 22 23 <li> 24 <form action="" method="get"> 25 <input type="text" placeholder="请输入搜索关键字" name="search" class="input" style="width:250px; line-height:17px;display:inline-block" /> 26 <button class="button border-main icon-search">搜索</button> 27 </form> 28 </li> 29 </ul> 30 </div> 31 <table class="table table-hover text-center"> 32 <tr> 33 <th width="100" style="text-align:left; padding-left:20px;">ID</th> 34 35 <th>轮播图名称</th> 36 <th>轮播图图片</th> 37 <th>跳转地址</th> 38 <th>排序</th> 39 40 <th width="310">操作</th> 41 </tr> 42 <% data.forEach(item=>%> 43 <tr> 44 <td><%= item.id %></td> 45 <td><%= item.name %></td> 46 <td><img style="width:200px;" src="<%= item.img %>" alt=""></td> 47 <td><%= item.url %></td> 48 <td> 49 <input style="width:50px;text-align:center;" type="number" name="" value="<%= item.sort %>" id="" onchange="sorts(this,<%= item.id %>)"> 50 </td> 51 <td> 52 <div class="button-group"> 53 <a class="button border-main" href="/admin/slider/edit?id=<%= item.id %>"><span class="icon-edit"></span> 修改</a> 54 <a class="button border-red" href="javascript:void(0)" onclick=" del(this,<%= item.id %>,‘<%= item.img %>‘)"><span class="icon-trash-o"></span> 删除</a> 55 </div> 56 </td> 57 58 </tr> 59 60 <% ) %> 61 62 63 64 <!--<td colspan="8"><div class="pagelist"> <a href="">上一页</a> <span class="current">1</span><a href="">2</a><a href="">3</a><a href="">下一页</a><a href="">尾页</a> </div></td> 65 --> 66 67 </table> 68 </div> 69 <script> 70 // 删除方法 71 function del(obj,id,img) 72 // 确认信息 73 if (confirm("您确认要删除数据?")) 74 // 发送ajax请求删除对应数据 75 $.get("/admin/slider/ajax_del",id:id,img:img,function(data) 76 // 判断是否删除成功 77 if (data==1) 78 alert("删除成功"); 79 //tr隐藏、移除 80 $(obj).parent().parent().parent().remove(); 81 82 ); 83 ; 84 85 86 // 无刷新更改状态 87 88 function sorts(obj,id) 89 90 let sort = $(obj).val(); 91 92 93 // 发送ajax请求进行数据删除 94 95 $.get("/admin/slider/ajax_sort",id:id,sort:sort,function(data) 96 // 判断是否执行成功 97 if (data==1) 98 window.location.reload(); 99 ; 100 ) 101 102 103 104 105 </script> 106 107 108 109 </body> 110 </html>
在slider.js中加入：
//轮播图管理路由 //首页 router.get("/",function(req,res,next) //查找轮播图中的数据 //轮播图的显示 mysql.query("select * from banner order by sort desc",function(err,data) if(err) return " "; else console.log(data); //加载页面 //将数据分配给页面 res.render("admin/slider/index.html",data:data); ); );
效果显示：
删除功能：
在slider.js中加入：
//删除功能 router.get("/ajax_del",function(req,res,next) // 接受用户删除的数据 let id,img = req.query; // 删除数据 mysql.query("delete from banner where id = "+id,function(err,data) if (err) return ""; else // 判断是否删除成功 if (data.affectedRows==1) // 删除对应的图片 if (fs.existsSync(__dirname+"/../../"+img)) //删除 fs.unlinkSync(__dirname+"/../../"+img); ; res.send("1"); else res.send("0"); );
排序功能：
// 无刷新的修改排序 router.get("/ajax_sort",function(req,res,next) // 接受数据 let id,sort = req.query; // 数据的修改 mysql.query("update banner set sort = ? where id = ?",[sort,id],function(err,data) // 判断是否执行成功 if (err) return ""; else if (data.affectedRows==1) res.send("1"); else res.send("0"); ); );
轮播图的修改功能：
加载的页面：edit.html
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 7 <meta name="renderer" content="webkit"> 8 <title></title> 9 <link rel="stylesheet" href="/public/admin/css/pintuer.css"> 10 <link rel="stylesheet" href="/public/admin/css/admin.css"> 11 <script src="/public/admin/js/jquery.js"></script> 12 <script src="/public/admin/js/pintuer.js"></script> 13 </head> 14 <body> 15 <div class="panel admin-panel"> 16 <div class="panel-head"><strong><span class="icon-key"></span> 修改轮播图</strong></div> 17 <div class="body-content"> 18 <form method="post" enctype="multipart/form-data" class="form-x" action=""> 19 20 <div class="form-group"> 21 <div class="label"> 22 <label for="sitename">轮播图名字：</label> 23 </div> 24 <div class="field"> 25 <input type="text" class="input" id="mpass" name="name" size="50" placeholder="请输入轮播图名字" value="<%= data.name %>" data-validate="required:请输入轮播图名" /> 26 <input type="hidden" name="id" value="<%= data.id %>"> 27 <input type="hidden" name="oldimg" value="<%= data.img %>"> 28 </div> 29 </div> 30 <div class="form-group"> 31 <div class="label"> 32 <label for="sitename">轮播图跳转地址：</label> 33 </div> 34 <div class="field"> 35 <input type="text" value="<%= data.url %>" class="input " name="url" placeholder="请输入轮播图跳转地址" data-validate="required:请输入轮播图跳转地址" /> 36 </div> 37 </div> 38 39 <div class="form-group"> 40 <div class="label"> 41 <label for="sitename">轮播图排序：</label> 42 </div> 43 <div class="field"> 44 <input type="number" value="<%= data.sort %>" class="input " name="sort" size="50" placeholder="请输入轮播图排序，数值越大越靠前" data-validate="required:请输入轮播图排序" /> 45 </div> 46 </div> 47 48 <div class="form-group"> 49 <div class="label"> 50 <label for="sitename">轮播图图片：</label> 51 </div> 52 <div class="field"> 53 <input type="file" class="input " name="img" /> 54 <img src="<%= data.img %>" alt=""> 55 </div> 56 </div> 57 58 <div class="form-group"> 59 <div class="label"> 60 <label></label> 61 </div> 62 <div class="field"> 63 <button class="button bg-main icon-check-square-o" type="submit"> 提交</button> 64 </div> 65 </div> 66 </form> 67 </div> 68 </div> 69 </body></html>
//修改功能 router.post("/edit",upload.single("img"),function(req,res,next) // 接受图片信息 let imgRes = req.file; // 接受表单数据 let id,name,url,sort,oldimg = req.body; // 判断图片资源是否存在 let sql=""; let arr=[]; if (imgRes) // 先上传图片 let img = uploads(imgRes,"slider"); sql = "update banner set name = ?,url = ?,sort = ?,img = ? where id = ?"; arr = [name,url,sort,img,id]; else sql = "update banner set name = ?,url = ?,sort = ? where id = ?"; arr = [name,url,sort,id]; // 发送sql语句 mysql.query(sql,arr,function(err,data) if (err) return ""; else if (data.affectedRows==1) // 判断是否修改了图片 if (imgRes) if (fs.existsSync(__dirname+"/../../"+oldimg)) fs.unlinkSync(__dirname+"/../../"+oldimg); ; ; res.send("<script>alert(‘修改成功‘);location.href=‘/admin/slider‘</script>"); else res.send("<script>alert(‘修改失败‘);history.go(-1)</script>"); ); );
最终总的效果图：
最终总的slider.js:
1 let express = require("express"); 2 3 let router = new express.Router(); 4 5 const path = require(‘path‘); 6 7 //设置文件上传 8 const multer=require("multer"); 9 10 11 12 13 //设置上传的图片的临时存储位置 14 15 16 const upload = multer(dest:"tmp/"); 17 console.log(upload); 18 19 20 //导入fs模块 21 const fs=require("fs"); 22 23 // 导入mysql模块 24 25 const mysql = require("../../config/db.js"); 26 27 28 29 30 31 32 33 //轮播图管理路由 34 35 //首页 36 router.get("/",function(req,res,next) 37 38 //查找轮播图中的数据 39 40 //轮播图的显示 41 mysql.query("select * from banner order by sort desc",function(err,data) 42 43 44 if(err) 45 return " "; 46 47 else 48 49 console.log(data); 50 //加载页面 51 //将数据分配给页面 52 res.render("admin/slider/index.html",data:data); 53 54 55 ); 56 57 58 ); 59 60 //添加页 61 router.get("/add",function(req,res,next) 62 res.render("admin/slider/add.html"); 63 64 65 ); 66 67 //处理添加的功能,看是否获取到了数据 68 router.post("/add",upload.single("img"),function(req,res,next) 69 //获取表单数据 70 //console.log(req.body); 71 //获取文件的相关数据 72 console.log(req.file); 73 74 let name,url,sort=req.body; 75 //接收文件相关的数据 76 let imgRes=req.file; 77 console.log(req.file); 78 //可以获取文件的临时目录 79 let tmpPath=imgRes.path; 80 //文件上传的执行目录 81 82 //获取图片后缀名 83 let ext=path.extname(imgRes.originalname); 84 85 console.log(ext); 86 //获取时间撮（随机数+时间撮） 87 let newName=""+(new Date().getTime())+Math.round(Math.random()*10000); 88 let newPath="/upload/slider"+newName; 89 console.log(tmpPath); 90 console.log(newPath); 91 92 //进行文件的拷贝 93 let fileData=fs.readFileSync(tmpPath); 94 95 fs.writeFileSync(__dirname+"/../../"+newPath,fileData); 96 97 // 将数据插入到数据库中 98 mysql.query("insert into banner(name,url,sort,img) value(?,?,?,?)",[name,url,sort,newPath],function(err,data) 99 if (err) 100 return ""; 101 else 102 if (data.affectedRows==1) 103 104 //添加成功需要跳转到显示页面 105 res.send("<script>alert(‘添加成功‘);location.href=‘/admin/slider‘</script>"); 106 107 else 108 res.send("<script>alert(‘添加失败‘);history.go(-1)</script>"); 109 110 111 112 ) 113 114 115 116 117 ) 118 // 修改页 119 router.get("/edit",function(req,res,next) 120 // 获取修改数据的ID 121 let id = req.query.id; 122 console.log(id); 123 // 查询对应的数据 124 mysql.query("select * from banner where id = "+id,function(err,data) 125 if (err) 126 return ""; 127 else 128 // 加载页面 129 res.render("admin/slider/edit.html",data:data[0]); 130 131 ); 132 ); 133 134 135 //修改功能 136 router.post("/edit",upload.single("img"),function(req,res,next) 137 // 接受图片信息 138 let imgRes = req.file; 139 // 接受表单数据 140 let id,name,url,sort,oldimg = req.body; 141 142 // 判断图片资源是否存在 143 144 let sql=""; 145 let arr=[]; 146 if (imgRes) 147 // 先上传图片 148 149 let img = uploads(imgRes,"slider"); 150 151 sql = "update banner set name = ?,url = ?,sort = ?,img = ? where id = ?"; 152 arr = [name,url,sort,img,id]; 153 else 154 sql = "update banner set name = ?,url = ?,sort = ? where id = ?"; 155 arr = [name,url,sort,id]; 156 157 158 // 发送sql语句 159 mysql.query(sql,arr,function(err,data) 160 if (err) 161 return ""; 162 else 163 if (data.affectedRows==1) 164 // 判断是否修改了图片 165 if (imgRes) 166 if (fs.existsSync(__dirname+"/../../"+oldimg)) 167 fs.unlinkSync(__dirname+"/../../"+oldimg); 168 ; 169 ; 170 res.send("<script>alert(‘修改成功‘);location.href=‘/admin/slider‘</script>"); 171 else 172 res.send("<script>alert(‘修改失败‘);history.go(-1)</script>"); 173 174 175 ); 176 ); 177 178 179 180 181 //删除功能 182 183 router.get("/ajax_del",function(req,res,next) 184 // 接受用户删除的数据 185 let id,img = req.query; 186 187 // 删除数据 188 189 mysql.query("delete from banner where id = "+id,function(err,data) 190 if (err) 191 return ""; 192 else 193 // 判断是否删除成功 194 if (data.affectedRows==1) 195 // 删除对应的图片 196 197 if (fs.existsSync(__dirname+"/../../"+img)) 198 //删除 199 fs.unlinkSync(__dirname+"/../../"+img); 200 ; 201 res.send("1"); 202 else 203 res.send("0"); 204 205 206 ); 207 208 209 210 // 无刷新的修改排序 211 212 router.get("/ajax_sort",function(req,res,next) 213 // 接受数据 214 let id,sort = req.query; 215 216 // 数据的修改 217 mysql.query("update banner set sort = ? where id = ?",[sort,id],function(err,data) 218 // 判断是否执行成功 219 if (err) 220 return ""; 221 else 222 if (data.affectedRows==1) 223 res.send("1"); 224 else 225 res.send("0"); 226 227 228 ); 229 ); 230 231 232 233 234 235 236 ) 237 238 module.exports=router;
以上是关于NodeJS Express博客项目实战 之 轮播图管理的主要内容，如果未能解决你的问题，请参考以下文章
Node.js Express博客项目实战 之 后台登录退出功能
NodeJS+express+MySQL实现博客系统（入门级）