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

 

以上是关于NodeJS Express博客项目实战 之 轮播图管理的主要内容,如果未能解决你的问题,请参考以下文章

Node.js Express博客项目实战 之 系统设置

Node.js Express博客项目实战 之 后台登录退出功能

NodeJS+express+MySQL实现博客系统(入门级)

NodeJS+Express+MongoDB 简单个人博客系统Study笔记

原生javascript之实战 轮播图

nodejs + express 入门之 hello world