轮播图管理添加功能
后台轮播图管理的位置：
因此需在此处加一个路由的跳转：
在视图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>
add.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>
index.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>
edit.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;
slide.js
原文地址：https://www.cnblogs.com/jiguiyan/p/11423267.html
时间： 2024-10-19 05:01:41