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>

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="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="200px;" src="<%= item.img %>" alt=""></td>
 47           <td><%= item.url %></td>
 48           <td>
 49             <input style="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