NodeJS Express博客項目實戰之會員查看功能

時間 2019-12-01

標籤 nodejs express 博客項目實戰會員查看功能简体版

原文原文鏈接

在上一篇實現了管理員的功能，在這篇博文中將實現會員的功能javascript

準備工做：css

在視圖views中新建一個user的文件夾html

將視圖views文件夾中的index.html的側邊導航欄中的會員管理的鏈接到/admin/user路由；java

<li><a href="/admin/user" target="right"><span class="icon-caret-right"></span>會員管理</a></li>

在routers文件夾的admin中有user.js的路由：mysql

須要在裏面進行加載頁面：jquery

let express = require("express");

let router = new express.Router();
//會員管理首頁
router.get('/',function(req,res,next){
     res.render("admin/user/index");
        }
        
        
    })

所以須要在視圖views文件夾中的admin中的user文件夾中創建一個index.htmlweb

index.htmlsql

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="renderer" content="webkit">
<title></title>
<link rel="stylesheet" href="/public/admin/css/pintuer.css">
<link rel="stylesheet" href="/public/admin/css/admin.css">
<script src="/public/admin/js/jquery.js"></script>
<script src="/public/admin/js/pintuer.js"></script>
</head>
<body>
  <div class="panel admin-panel">
    <div class="panel-head"><strong class="icon-reorder"> 會員列表</strong> <a href="" style="float:right; display:none;">添加字段</a></div>
    <div class="padding border-bottom">
      <ul class="search" style="padding-left:10px;">
        <li>搜索：</li>
       
        <li>
          <form action="" method="get">
          <input type="text"  placeholder="請輸入搜索關鍵字" name="search" class="input" style="width:250px; line-height:17px;display:inline-block" />
          <button class="button border-main icon-search">搜索</button>
          </form>
        </li>
      </ul>
    </div>
    <table class="table table-hover text-center">
      <tr>
        <th width="100" style="text-align:left; padding-left:20px;">ID</th>
        <th>用戶名</th>
        <th>註冊時間</th>
        <th>狀態</th>
      </tr>
      <!-- ejs 的模板引擎 -->
      <% data.forEach(item=>{ %>
         <tr>
          <td style="text-align:left; padding-left:20px;"><%= item.id %></td>
          <td><%= item.username %></td>
          <td><%= item.time %></td>
          <td>
            <% if(item.status==0){ %>
              <a class="button border-green" href="javascript:;" onclick="status(this,<%= item.id %>,1)"> 白名單</a>
            <% }else{ %>
              <a class="button border-red" href="javascript:;" onclick="status(this,<%= item.id %>,0)">黑名單</a>
            <% } %>
          
          </td>
        </tr>
    
      <% }) %>
     
      
      <tr>
        <td colspan="8">
          <div class="pagelist"> 
            
          </div>
        </td>
      </tr>
    </table>
  </div>
<script>

</script>
</body>
</html>

index.html

查看功能：

在user.js中寫入路由數據庫

let express = require("express");

let router = new express.Router();

// 導入數據庫模塊

const mysql = require("../../config/db.js");

// 導入時間格式化

const moment = require("moment");

//會員管理首頁
router.get('/',function(req,res,next){
    
    
        
    
    mysql.query("select * from user order by id desc ,function(err,data){
        
        
    
        
        //判斷是否有錯誤
        if(err){
            return "";
            
        }else{
            
            
            // 將時間格式化
                    data.forEach(item=>{
                        //item.username = item.username;
                        //item.time = moment(item.time*1000).format("YYYY-MM-DD HH:mm:ss");
                        item.time = moment(item.time).format("YYYY-MM-DD HH:mm:ss");
                            
                    })
            
                
            
            console.log(data);
            //加載頁面
      res.render("admin/user/index",{data:data});
        }
        
        
    })
    
    
})



module.exports = router;

顯示的效果：express

搜索功能與分頁功能

因爲會員的人數可能會不少，所以須要一個分頁效果的實現：

須要對分頁函數的封裝

數據庫中會員的內容：

使用搜索與分頁功能的效果展現：

在common文件夾中建立一個page.js

進行對分頁函數的封裝；

// 分頁函數

function pagess(tot,p=1,size=5){
    // 計算截取的開始位置、結束位置
    let start = (p-1)*size;
    // 計算總頁數
    let pages = Math.ceil(tot/size);

    // 展現分頁效果
    let show ="";

    show +=`<a href="?p=1">首頁</a>`; 
    show +=`<a href="?p=${ p- 1 >=1 ? p - 1 : 1 }">上一頁</a> `;
    show +=`<span class="current">${p}</span>`;
    show +=`<a href="?p=${ Number(p)+1 <= pages ?  Number(p)+1 : pages }">下一頁</a>`;
    show +=`<a href="?p=${pages}">尾頁</a>`;

    return {
        start:start,
        size:size,
        show:show
    }
}

module.exports = pagess;

在user.js中進行導入分頁方法：

// 導入分頁方法

const page = require("../../common/page.js");

 1 let express = require("express");
 2 
 3 let router = new express.Router();
 4 
 5 // 導入數據庫模塊
 6 
 7 const mysql = require("../../config/db.js");
 8 // 導入分頁方法
 9 
10 const page = require("../../common/page.js");
11 
12 // 導入時間格式化
13 
14 const moment = require("moment");
15 
16 //會員管理首頁
17 router.get('/',function(req,res,next){
18     
19     
20         //如何開發分頁
21         //第一頁 0，5
22         //第二頁 5，5個
23         //第三頁 10 5
24         //第四頁  15 5
25         //獲取頁碼
26         let p = req.query.p ? req.query.p :1;
27         //console.log(p);
28         // 接受檢索的數據
29 
30       let search = req.query.search ? req.query.search :"";
31 //默認每頁展現數據
32 let size=3;
33 
34 
35 
36 
37      //計算總數據
38     
39     mysql.query("select count(*) tot from user where username like ? ",['%'+search+'%'],function(err,data){
40         
41         
42         
43         
44         // 判斷
45         if (err) {
46             return "";
47         }else{
48             // 獲取總數據
49             let tot = data[0].tot;
50 
51             let fpage = page(tot,p,size);
52             // 查看數據
53             
54             mysql.query("select * from user where username like ?  order by id desc limit ?,?",['%'+search+'%',fpage.start,fpage.size],function(err,data)
55             {
56         
57           //判斷是否有錯誤
58         if(err){
59             return "";
60             
61         }else{
62             
63             
64             // 將時間格式化
65                     data.forEach(item=>{
66                         //item.username = item.username;
67                         //item.time = moment(item.time*1000).format("YYYY-MM-DD HH:mm:ss");
68                         item.time = moment(item.time).format("YYYY-MM-DD HH:mm:ss");
69                             
70                     })
71             
72                 
73             
74             console.log(data);
75             //加載頁面
76       res.render("admin/user/index",{data:data,show:fpage.show,search:search});
77         }
78         
79         
80     
81             });
82         }
83     });
84 
85     
86 
87 });
88 
89 
90 
91 module.exports = router;

user.js的總代碼

 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 class="icon-reorder"> 會員列表</strong> <a href="" style="float:right; display:none;">添加字段</a></div>
17     <div class="padding border-bottom">
18       <ul class="search" style="padding-left:10px;">
19         <li>搜索：</li>
20        
21         <li>
22           <form action="" method="get">
23           <input type="text" value="<%= search %>" placeholder="請輸入搜索關鍵字" name="search" class="input" style="width:250px; line-height:17px;display:inline-block" />
24           <button class="button border-main icon-search">搜索</button>
25           </form>
26         </li>
27       </ul>
28     </div>
29     <table class="table table-hover text-center">
30       <tr>
31         <th width="100" style="text-align:left; padding-left:20px;">ID</th>
32         <th>用戶名</th>
33         <th>註冊時間</th>
34         <th>狀態</th>
35       </tr>
36       <!-- ejs 的模板引擎 -->
37       <% data.forEach(item=>{ %>
38          <tr>
39           <td style="text-align:left; padding-left:20px;"><%= item.id %></td>
40           <td><%= item.username %></td>
41           <td><%= item.time %></td>
42           <td>
43             <% if(item.status==0){ %>
44               <a class="button border-green" href="javascript:;" onclick="status(this,<%= item.id %>,1)"> 白名單</a>
45             <% }else{ %>
46               <a class="button border-red" href="javascript:;" onclick="status(this,<%= item.id %>,0)">黑名單</a>
47             <% } %>
48           
49           </td>
50         </tr>
51     
52       <% }) %>
53      
54       
55       <tr>
56         <td colspan="8">
57           <div class="pagelist"> 
58              <%- show%>
59           </div>
60         </td>
61       </tr>
62     </table>
63   </div>
64 <script>
65 
66 </script>
67 </body>
68 </html>