NodeJS Express博客項目實戰之輪播圖管理

時間 2019-12-01

標籤 nodejs express 博客項目實戰管理简体版

原文原文鏈接

輪播圖管理添加功能

後臺輪播圖管理的位置：javascript

所以需在此處加一個路由的跳轉：css

在視圖views中後臺的index.htmlhtml

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

在整個後臺中進行對輪播圖路由的註冊：mysql

//輪播圖管理
let sliderRouter=require('./admin/slider');

router.use('/slider',sliderRouter);

在後臺的視圖views中新建文件夾slider,並加入：jquery

須要實現輪播圖的添加功能，在slider.js中寫入添加的頁面，以及處理添加的功能，看是否獲取到數據：web

slider.js:ajax

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

 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;