NodeJS Express博客項目實戰之管理員管理添加功能

時間 2019-11-08

標籤 nodejs express 博客項目實戰管理員管理添加功能简体版

原文原文鏈接

管理員管理添加功能（一）

在點擊管理員管理中的添加管理，出現的是一段文字須要進行修改成顯示一個頁面javascript

在views視圖層admin中新建admin文件夾:php

通過修改後頁面的顯示：css

可是顯示的頁面並無樣式，須要進行修改：html

修改後的效果：java

管理員管理代碼index.html：mysql

  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 <form method="post" action="" id="listform">
 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="add.html"> 添加內容</a> </li>
 21         <li>搜索：</li>
 22         <li>首頁
 23           <select name="s_ishome" class="input" onchange="changesearch()" style="width:60px; line-height:17px; display:inline-block">
 24             <option value="">選擇</option>
 25             <option value="1">是</option>
 26             <option value="0">否</option>
 27           </select>
 28           &nbsp;&nbsp;
 29           推薦
 30           <select name="s_isvouch" class="input" onchange="changesearch()"  style="width:60px; line-height:17px;display:inline-block">
 31             <option value="">選擇</option>
 32             <option value="1">是</option>
 33             <option value="0">否</option>
 34           </select>
 35           &nbsp;&nbsp;
 36           置頂
 37           <select name="s_istop" class="input" onchange="changesearch()"  style="width:60px; line-height:17px;display:inline-block">
 38             <option value="">選擇</option>
 39             <option value="1">是</option>
 40             <option value="0">否</option>
 41           </select>
 42         </li>
 43         <if condition="$iscid eq 1">
 44           <li>
 45             <select name="cid" class="input" style="width:200px; line-height:17px;" onchange="changesearch()">
 46               <option value="">請選擇分類</option>
 47               <option value="">產品分類</option>
 48               <option value="">產品分類</option>
 49               <option value="">產品分類</option>
 50               <option value="">產品分類</option>
 51             </select>
 52           </li>
 53         </if>
 54         <li>
 55           <input type="text" placeholder="請輸入搜索關鍵字" name="keywords" class="input" style="width:250px; line-height:17px;display:inline-block" />
 56           <a href="javascript:void(0)" class="button border-main icon-search" onclick="changesearch()" > 搜索</a></li>
 57       </ul>
 58     </div>
 59     <table class="table table-hover text-center">
 60       <tr>
 61         <th width="100" style="text-align:left; padding-left:20px;">ID</th>
 62         <th width="10%">排序</th>
 63         <th>圖片</th>
 64         <th>名稱</th>
 65         <th>屬性</th>
 66         <th>分類名稱</th>
 67         <th width="10%">更新時間</th>
 68         <th width="310">操做</th>
 69       </tr>
 70       <volist name="list" id="vo">
 71         <tr>
 72           <td style="text-align:left; padding-left:20px;"><input type="checkbox" name="id[]" value="" />
 73            1</td>
 74           <td><input type="text" name="sort[1]" value="1" style="width:50px; text-align:center; border:1px solid #ddd; padding:7px 0;" /></td>
 75           <td width="10%"><img src="./../public/admin/images/11.jpg" alt="" width="70" height="50" /></td>
 76           <td>這是一套MUI後臺精美管理系統，感謝您的支持</td>
 77           <td><font color="#00CC99">首頁</font></td>
 78           <td>產品分類</td>
 79           <td>2016-07-01</td>
 80           <td><div class="button-group"> <a class="button border-main" href="add.html"><span class="icon-edit"></span> 修改</a> <a class="button border-red" href="javascript:void(0)" onclick="return del(1,1,1)"><span class="icon-trash-o"></span> 刪除</a> </div></td>
 81         </tr>
 82             <tr>
 83           <td style="text-align:left; padding-left:20px;"><input type="checkbox" name="id[]" value="" />
 84            1</td>
 85           <td><input type="text" name="sort[1]" value="1" style="width:50px; text-align:center; border:1px solid #ddd; padding:7px 0;" /></td>
 86           <td width="10%"><img src="./../public/admin/images/11.jpg" alt="" width="70" height="50" /></td>
 87           <td>這是一套MUI後臺精美管理系統，感謝您的支持</td>
 88           <td><font color="#00CC99">首頁</font></td>
 89           <td>產品分類</td>
 90           <td>2016-07-01</td>
 91           <td><div class="button-group"> <a class="button border-main" href="add.html"><span class="icon-edit"></span> 修改</a> <a class="button border-red" href="javascript:void(0)" onclick="return del(1,1,1)"><span class="icon-trash-o"></span> 刪除</a> </div></td>
 92         </tr>
 93          <tr>
 94           <td style="text-align:left; padding-left:20px;"><input type="checkbox" name="id[]" value="" />
 95            1</td>
 96           <td><input type="text" name="sort[1]" value="1" style="width:50px; text-align:center; border:1px solid #ddd; padding:7px 0;" /></td>
 97           <td width="10%"><img src="./../public/admin/images/11.jpg" alt="" width="70" height="50" /></td>
 98           <td>這是一套MUI後臺精美管理系統，感謝您的支持</td>
 99           <td><font color="#00CC99">首頁</font></td>
100           <td>產品分類</td>
101           <td>2016-07-01</td>
102           <td><div class="button-group"> <a class="button border-main" href="add.html"><span class="icon-edit"></span> 修改</a> <a class="button border-red" href="javascript:void(0)" onclick="return del(1,1,1)"><span class="icon-trash-o"></span> 刪除</a> </div></td>
103         </tr>
104          <tr>
105           <td style="text-align:left; padding-left:20px;"><input type="checkbox" name="id[]" value="" />
106            1</td>
107           <td><input type="text" name="sort[1]" value="1" style="width:50px; text-align:center; border:1px solid #ddd; padding:7px 0;" /></td>
108           <td width="10%"><img src="./../public/admin/images/11.jpg" alt="" width="70" height="50" /></td>
109           <td>這是一套MUI後臺精美管理系統，感謝您的支持</td>
110           <td><font color="#00CC99">首頁</font></td>
111           <td>產品分類</td>
112           <td>2016-07-01</td>
113           <td><div class="button-group"> <a class="button border-main" href="add.html"><span class="icon-edit"></span> 修改</a> <a class="button border-red" href="javascript:void(0)" onclick="return del(1,1,1)"><span class="icon-trash-o"></span> 刪除</a> </div></td>
114         </tr>
115          <tr>
116           <td style="text-align:left; padding-left:20px;"><input type="checkbox" name="id[]" value="" />
117            1</td>
118           <td><input type="text" name="sort[1]" value="1" style="width:50px; text-align:center; border:1px solid #ddd; padding:7px 0;" /></td>
119           <td width="10%"><img src="./../public/admin/images/11.jpg" alt="" width="70" height="50" /></td>
120           <td>這是一套MUI後臺精美管理系統，感謝您的支持</td>
121           <td><font color="#00CC99">首頁</font></td>
122           <td>產品分類</td>
123           <td>2016-07-01</td>
124           <td><div class="button-group"> <a class="button border-main" href="add.html"><span class="icon-edit"></span> 修改</a> <a class="button border-red" href="javascript:void(0)" onclick="return del(1,1,1)"><span class="icon-trash-o"></span> 刪除</a> </div></td>
125         </tr>
126          <tr>
127           <td style="text-align:left; padding-left:20px;"><input type="checkbox" name="id[]" value="" />
128            1</td>
129           <td><input type="text" name="sort[1]" value="1" style="width:50px; text-align:center; border:1px solid #ddd; padding:7px 0;" /></td>
130           <td width="10%"><img src="./../public/admin/images/11.jpg" alt="" width="70" height="50" /></td>
131           <td>這是一套MUI後臺精美管理系統，感謝您的支持</td>
132           <td><font color="#00CC99">首頁</font></td>
133           <td>產品分類</td>
134           <td>2016-07-01</td>
135           <td><div class="button-group"> <a class="button border-main" href="add.html"><span class="icon-edit"></span> 修改</a> <a class="button border-red" href="javascript:void(0)" onclick="return del(1,1,1)"><span class="icon-trash-o"></span> 刪除</a> </div></td>
136         </tr>
137       <tr>
138         <td style="text-align:left; padding:19px 0;padding-left:20px;"><input type="checkbox" id="checkall"/>
139           全選 </td>
140         <td colspan="7" style="text-align:left;padding-left:20px;"><a href="javascript:void(0)" class="button border-red icon-trash-o" style="padding:5px 15px;" onclick="DelSelect()"> 刪除</a> <a href="javascript:void(0)" style="padding:5px 15px; margin:0 10px;" class="button border-blue icon-edit" onclick="sorts()"> 排序</a> 操做：
141           <select name="ishome" style="padding:5px 15px; border:1px solid #ddd;" onchange="changeishome(this)">
142             <option value="">首頁</option>
143             <option value="1">是</option>
144             <option value="0">否</option>
145           </select>
146           <select name="isvouch" style="padding:5px 15px; border:1px solid #ddd;" onchange="changeisvouch(this)">
147             <option value="">推薦</option>
148             <option value="1">是</option>
149             <option value="0">否</option>
150           </select>
151           <select name="istop" style="padding:5px 15px; border:1px solid #ddd;" onchange="changeistop(this)">
152             <option value="">置頂</option>
153             <option value="1">是</option>
154             <option value="0">否</option>
155           </select>
156           &nbsp;&nbsp;&nbsp;
157           
158           移動到：
159           <select name="movecid" style="padding:5px 15px; border:1px solid #ddd;" onchange="changecate(this)">
160             <option value="">請選擇分類</option>
161             <option value="">產品分類</option>
162             <option value="">產品分類</option>
163             <option value="">產品分類</option>
164             <option value="">產品分類</option>
165           </select>
166           <select name="copynum" style="padding:5px 15px; border:1px solid #ddd;" onchange="changecopy(this)">
167             <option value="">請選擇複製</option>
168             <option value="5">複製5條</option>
169             <option value="10">複製10條</option>
170             <option value="15">複製15條</option>
171             <option value="20">複製20條</option>
172           </select></td>
173       </tr>
174       <tr>
175         <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>
176       </tr>
177     </table>
178   </div>
179 </form>
180 <script type="text/javascript">
181 
182 //搜索
183 function changesearch(){    
184         
185 }
186 
187 //單個刪除
188 function del(id,mid,iscid){
189     if(confirm("您肯定要刪除嗎?")){
190         
191     }
192 }
193 
194 //全選
195 $("#checkall").click(function(){ 
196   $("input[name='id[]']").each(function(){
197       if (this.checked) {
198           this.checked = false;
199       }
200       else {
201           this.checked = true;
202       }
203   });
204 })
205 
206 //批量刪除
207 function DelSelect(){
208     var Checkbox=false;
209      $("input[name='id[]']").each(function(){
210       if (this.checked==true) {        
211         Checkbox=true;    
212       }
213     });
214     if (Checkbox){
215         var t=confirm("您確認要刪除選中的內容嗎？");
216         if (t==false) return false;        
217         $("#listform").submit();        
218     }
219     else{
220         alert("請選擇您要刪除的內容!");
221         return false;
222     }
223 }
224 
225 //批量排序
226 function sorts(){
227     var Checkbox=false;
228      $("input[name='id[]']").each(function(){
229       if (this.checked==true) {        
230         Checkbox=true;    
231       }
232     });
233     if (Checkbox){    
234         
235         $("#listform").submit();        
236     }
237     else{
238         alert("請選擇要操做的內容!");
239         return false;
240     }
241 }
242 
243 
244 //批量首頁顯示
245 function changeishome(o){
246     var Checkbox=false;
247      $("input[name='id[]']").each(function(){
248       if (this.checked==true) {        
249         Checkbox=true;    
250       }
251     });
252     if (Checkbox){
253         
254         $("#listform").submit();    
255     }
256     else{
257         alert("請選擇要操做的內容!");        
258     
259         return false;
260     }
261 }
262 
263 //批量推薦
264 function changeisvouch(o){
265     var Checkbox=false;
266      $("input[name='id[]']").each(function(){
267       if (this.checked==true) {        
268         Checkbox=true;    
269       }
270     });
271     if (Checkbox){
272         
273         
274         $("#listform").submit();    
275     }
276     else{
277         alert("請選擇要操做的內容!");    
278         
279         return false;
280     }
281 }
282 
283 //批量置頂
284 function changeistop(o){
285     var Checkbox=false;
286      $("input[name='id[]']").each(function(){
287       if (this.checked==true) {        
288         Checkbox=true;    
289       }
290     });
291     if (Checkbox){        
292         
293         $("#listform").submit();    
294     }
295     else{
296         alert("請選擇要操做的內容!");        
297     
298         return false;
299     }
300 }
301 
302 
303 //批量移動
304 function changecate(o){
305     var Checkbox=false;
306      $("input[name='id[]']").each(function(){
307       if (this.checked==true) {        
308         Checkbox=true;    
309       }
310     });
311     if (Checkbox){        
312         
313         $("#listform").submit();        
314     }
315     else{
316         alert("請選擇要操做的內容!");
317         
318         return false;
319     }
320 }
321 
322 //批量複製
323 function changecopy(o){
324     var Checkbox=false;
325      $("input[name='id[]']").each(function(){
326       if (this.checked==true) {        
327         Checkbox=true;    
328       }
329     });
330     if (Checkbox){    
331         var i = 0;
332         $("input[name='id[]']").each(function(){
333               if (this.checked==true) {
334                 i++;
335             }        
336         });
337         if(i>1){ 
338             alert("只能選擇一條信息!");
339             $(o).find("option:first").prop("selected","selected");
340         }else{
341         
342             $("#listform").submit();        
343         }    
344     }
345     else{
346         alert("請選擇要複製的內容!");
347         $(o).find("option:first").prop("selected","selected");
348         return false;
349     }
350 }
351 
352 </script>
353 </body>
354 </html>

管理員管理頁面

整個後臺頁面的首頁：jquery

 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 </head>
13 <body style="background-color:#f2f9fd;">
14 <div class="header bg-main">
15   <div class="logo margin-big-left fadein-top">
16     <h1><img src="./../public/admin/images/y.jpg" class="radius-circle rotate-hover" height="50" alt="" />後臺管理中心</h1>
17   </div>
18   <div class="head-l">
19     <a class="button button-little bg-green" href="" target="_blank"><span class="icon-home"></span> 前臺首頁</a> 
20     &nbsp;&nbsp;
21     <a href="##" class="button button-little bg-blue"><span class="icon-wrench"></span> 清除緩存</a> &nbsp;&nbsp;
22     <a class="button button-little bg-red" href="/admin/logout"><span class="icon-power-off"></span> 退出登陸</a> 
23   </div>
24 </div>
25 <div class="leftnav">
26   <div class="leftnav-title"><strong><span class="icon-list"></span>菜單列表</strong></div>
27   <h2><span class="icon-user"></span>用戶管理</h2>
28   <ul >
29     <li><a href="/admin/admin" target="right"><span class="icon-caret-right"></span>管理員管理</a></li>
30     <li><a href="/admin/user" target="right"><span class="icon-caret-right"></span>會員管理</a></li>
31   </ul>   
32 
33   <h2><span class="icon-user"></span>新聞管理</h2>
34   <ul >
35     <li><a href="/admin/type/" target="right"><span class="icon-caret-right"></span>新聞分類管理</a></li>
36     <li><a href="/admin/news/" target="right"><span class="icon-caret-right"></span>新聞管理</a></li>
37     <li><a href="/admin/comment/" target="right"><span class="icon-caret-right"></span>評論管理</a></li>
38   </ul>   
39   <h2><span class="icon-user"></span>系統管理</h2>
40   <ul >
41     <li><a href="/admin/slider" target="right"><span class="icon-caret-right"></span>輪播圖管理</a></li>
42     <li><a href="/admin/system" target="right"><span class="icon-caret-right"></span>系統設置</a></li>
43   </ul>   
44 </div>
45 <script type="text/javascript">
46 $(function(){
47   $(".leftnav h2").click(function(){
48       $(this).next().slideToggle(200);    
49       $(this).toggleClass("on"); 
50   })
51   $(".leftnav ul li a").click(function(){
52         $("#a_leader_txt").text($(this).text());
53           $(".leftnav ul li a").removeClass("on");
54         $(this).addClass("on");
55   })
56 });
57 </script>
58 <ul class="bread">
59   <li><a href="{:U('Index/info')}" target="right" class="icon-home"> 首頁</a></li>
60   <li><a href="##" id="a_leader_txt">網站信息</a></li>
61   <li><b>當前語言：</b><span style="color:red;">中文</php></span>
62   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;切換語言：<a href="##">中文</a> &nbsp;&nbsp;<a href="##">英文</a> </li>
63 </ul>
64 <div class="admin">
65   <iframe scrolling="auto" rameborder="0" src="/admin/welcome" name="right" width="100%" height="100%"></iframe>
66 </div>
67 </body>
68 </html>

後臺頁面的首頁

將管理員管理代碼index.html中：web

<!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>
<form method="post" action="" id="listform">
  <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> <a class="button border-main icon-plus-square-o" href="/admin/admin/add"> 添加管理員</a> </li>
        <li>搜索：</li>
       
        <li>
          <input type="text" placeholder="請輸入搜索關鍵字" name="keywords" class="input" style="width:250px; line-height:17px;display:inline-block" />
          <a href="javascript:void(0)" class="button border-main icon-search" onclick="changesearch()" > 搜索</a></li>
      </ul>
    </div>
    <table class="table table-hover text-center">
      <tr>
        <th width="100" style="text-align:left; padding-left:20px;">ID</th>
        <th width="10%">排序</th>
        <th>圖片</th>
        <th>名稱</th>
        <th>屬性</th>
        <th>分類名稱</th>
        <th width="10%">更新時間</th>
        <th width="310">操做</th>
      </tr>
      <volist name="list" id="vo">
        <tr>
          <td style="text-align:left; padding-left:20px;"><input type="checkbox" name="id[]" value="" />
           1</td>
          <td><input type="text" name="sort[1]" value="1" style="width:50px; text-align:center; border:1px solid #ddd; padding:7px 0;" /></td>
          <td width="10%"><img src="./../public/admin/images/11.jpg" alt="" width="70" height="50" /></td>
          <td>這是一套MUI後臺精美管理系統，感謝您的支持</td>
          <td><font color="#00CC99">首頁</font></td>
          <td>產品分類</td>
          <td>2016-07-01</td>
          <td><div class="button-group"> <a class="button border-main" href="add.html"><span class="icon-edit"></span> 修改</a> <a class="button border-red" href="javascript:void(0)" onclick="return del(1,1,1)"><span class="icon-trash-o"></span> 刪除</a> </div></td>
        </tr>
            <tr>
          <td style="text-align:left; padding-left:20px;"><input type="checkbox" name="id[]" value="" />
           1</td>
          <td><input type="text" name="sort[1]" value="1" style="width:50px; text-align:center; border:1px solid #ddd; padding:7px 0;" /></td>
          <td width="10%"><img src="./../public/admin/images/11.jpg" alt="" width="70" height="50" /></td>
          <td>這是一套MUI後臺精美管理系統，感謝您的支持</td>
          <td><font color="#00CC99">首頁</font></td>
          <td>產品分類</td>
          <td>2016-07-01</td>
          <td><div class="button-group"> <a class="button border-main" href="add.html"><span class="icon-edit"></span> 修改</a> <a class="button border-red" href="javascript:void(0)" onclick="return del(1,1,1)"><span class="icon-trash-o"></span> 刪除</a> </div></td>
        </tr>
         <tr>
          <td style="text-align:left; padding-left:20px;"><input type="checkbox" name="id[]" value="" />
           1</td>
          <td><input type="text" name="sort[1]" value="1" style="width:50px; text-align:center; border:1px solid #ddd; padding:7px 0;" /></td>
          <td width="10%"><img src="./../public/admin/images/11.jpg" alt="" width="70" height="50" /></td>
          <td>這是一套MUI後臺精美管理系統，感謝您的支持</td>
          <td><font color="#00CC99">首頁</font></td>
          <td>產品分類</td>
          <td>2016-07-01</td>
          <td><div class="button-group"> <a class="button border-main" href="add.html"><span class="icon-edit"></span> 修改</a> <a class="button border-red" href="javascript:void(0)" onclick="return del(1,1,1)"><span class="icon-trash-o"></span> 刪除</a> </div></td>
        </tr>
         <tr>
          <td style="text-align:left; padding-left:20px;"><input type="checkbox" name="id[]" value="" />
           1</td>
          <td><input type="text" name="sort[1]" value="1" style="width:50px; text-align:center; border:1px solid #ddd; padding:7px 0;" /></td>
          <td width="10%"><img src="./../public/admin/images/11.jpg" alt="" width="70" height="50" /></td>
          <td>這是一套MUI後臺精美管理系統，感謝您的支持</td>
          <td><font color="#00CC99">首頁</font></td>
          <td>產品分類</td>
          <td>2016-07-01</td>
          <td><div class="button-group"> <a class="button border-main" href="add.html"><span class="icon-edit"></span> 修改</a> <a class="button border-red" href="javascript:void(0)" onclick="return del(1,1,1)"><span class="icon-trash-o"></span> 刪除</a> </div></td>
        </tr>
         <tr>
          <td style="text-align:left; padding-left:20px;"><input type="checkbox" name="id[]" value="" />
           1</td>
          <td><input type="text" name="sort[1]" value="1" style="width:50px; text-align:center; border:1px solid #ddd; padding:7px 0;" /></td>
          <td width="10%"><img src="./../public/admin/images/11.jpg" alt="" width="70" height="50" /></td>
          <td>這是一套MUI後臺精美管理系統，感謝您的支持</td>
          <td><font color="#00CC99">首頁</font></td>
          <td>產品分類</td>
          <td>2016-07-01</td>
          <td><div class="button-group"> <a class="button border-main" href="add.html"><span class="icon-edit"></span> 修改</a> <a class="button border-red" href="javascript:void(0)" onclick="return del(1,1,1)"><span class="icon-trash-o"></span> 刪除</a> </div></td>
        </tr>
         <tr>
          <td style="text-align:left; padding-left:20px;"><input type="checkbox" name="id[]" value="" />
           1</td>
          <td><input type="text" name="sort[1]" value="1" style="width:50px; text-align:center; border:1px solid #ddd; padding:7px 0;" /></td>
          <td width="10%"><img src="./../public/admin/images/11.jpg" alt="" width="70" height="50" /></td>
          <td>這是一套MUI後臺精美管理系統，感謝您的支持</td>
          <td><font color="#00CC99">首頁</font></td>
          <td>產品分類</td>
          <td>2016-07-01</td>
          <td><div class="button-group"> <a class="button border-main" href="add.html"><span class="icon-edit"></span> 修改</a> <a class="button border-red" href="javascript:void(0)" onclick="return del(1,1,1)"><span class="icon-trash-o"></span> 刪除</a> </div></td>
        </tr>
     
        <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>
      </tr>
    </table>
  </div>
</form>
<script type="text/javascript">

//搜索
function changesearch(){    
        
}

//單個刪除
function del(id,mid,iscid){
    if(confirm("您肯定要刪除嗎?")){
        
    }
}

//全選
$("#checkall").click(function(){ 
  $("input[name='id[]']").each(function(){
      if (this.checked) {
          this.checked = false;
      }
      else {
          this.checked = true;
      }
  });
})

//批量刪除
function DelSelect(){
    var Checkbox=false;
     $("input[name='id[]']").each(function(){
      if (this.checked==true) {        
        Checkbox=true;    
      }
    });
    if (Checkbox){
        var t=confirm("您確認要刪除選中的內容嗎？");
        if (t==false) return false;        
        $("#listform").submit();        
    }
    else{
        alert("請選擇您要刪除的內容!");
        return false;
    }
}

//批量排序
function sorts(){
    var Checkbox=false;
     $("input[name='id[]']").each(function(){
      if (this.checked==true) {        
        Checkbox=true;    
      }
    });
    if (Checkbox){    
        
        $("#listform").submit();        
    }
    else{
        alert("請選擇要操做的內容!");
        return false;
    }
}


//批量首頁顯示
function changeishome(o){
    var Checkbox=false;
     $("input[name='id[]']").each(function(){
      if (this.checked==true) {        
        Checkbox=true;    
      }
    });
    if (Checkbox){
        
        $("#listform").submit();    
    }
    else{
        alert("請選擇要操做的內容!");        
    
        return false;
    }
}

//批量推薦
function changeisvouch(o){
    var Checkbox=false;
     $("input[name='id[]']").each(function(){
      if (this.checked==true) {        
        Checkbox=true;    
      }
    });
    if (Checkbox){
        
        
        $("#listform").submit();    
    }
    else{
        alert("請選擇要操做的內容!");    
        
        return false;
    }
}

//批量置頂
function changeistop(o){
    var Checkbox=false;
     $("input[name='id[]']").each(function(){
      if (this.checked==true) {        
        Checkbox=true;    
      }
    });
    if (Checkbox){        
        
        $("#listform").submit();    
    }
    else{
        alert("請選擇要操做的內容!");        
    
        return false;
    }
}


//批量移動
function changecate(o){
    var Checkbox=false;
     $("input[name='id[]']").each(function(){
      if (this.checked==true) {        
        Checkbox=true;    
      }
    });
    if (Checkbox){        
        
        $("#listform").submit();        
    }
    else{
        alert("請選擇要操做的內容!");
        
        return false;
    }
}

//批量複製
function changecopy(o){
    var Checkbox=false;
     $("input[name='id[]']").each(function(){
      if (this.checked==true) {        
        Checkbox=true;    
      }
    });
    if (Checkbox){    
        var i = 0;
        $("input[name='id[]']").each(function(){
              if (this.checked==true) {
                i++;
            }        
        });
        if(i>1){ 
            alert("只能選擇一條信息!");
            $(o).find("option:first").prop("selected","selected");
        }else{
        
            $("#listform").submit();        
        }    
    }
    else{
        alert("請選擇要複製的內容!");
        $(o).find("option:first").prop("selected","selected");
        return false;
    }
}

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

修改後的

效果;sql

因爲顯示的是一段文字，所以須要進行頁面的加載，數據庫

router.get('/add',function(req,res,next){
    
//    res.send("管理員添加");
//加載頁面
res.render("admin/admin/add.html");
});

添加管理員的頁面：

長度的限制：

data-validate="required:請輸入管理員帳戶,length#>=6:帳戶名不能小於6位,length#<=12:帳戶名最多12位"

密碼的校驗：

 <div class="form-group">
        <div class="label">
          <label for="sitename">密碼：</label>
        </div>
        <div class="field">
          <input type="password" class="input " name="password" size="50" placeholder="請輸入密碼" data-validate="required:請輸入密碼,length#>=8:新密碼不能小於8位" />         
        </div>
      </div>
      <div class="form-group">
        <div class="label">
          <label for="sitename">確認密碼：</label>
        </div>
        <div class="field">
          <input type="password" class="input " name="repassword" size="50" placeholder="請再次輸入密碼" data-validate="required:請再次輸入密碼,repeat#password:兩次輸入的密碼不一致" />          
        </div>
      </div>

須要給管理員一個狀態，是白名單仍是黑名單：

<div class="form-group">
        <div class="label">
          <label for="sitename">狀態：</label>
        </div>
        <div class="field">
          <label for="" style="line-height: 32px;"><input type="radio" checked="checked"  name="status" id="" value="0"/>白名單</label>
          <label for="" style="line-height: 32px;"><input type="radio" name="status" id="" value="1"/>黒名單</label>
        </div>
      </div>

添加管理員頁面的顯示效果：

添加管理員頁面的代碼;

 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" 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="username" size="50" placeholder="請輸入管理員帳戶" data-validate="required:請輸入管理員帳戶,length#>=6:帳戶名不能小於6位,length#<=12:帳戶名最多12位" />       
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="password" class="input " name="password" size="50" placeholder="請輸入密碼" data-validate="required:請輸入密碼,length#>=8:新密碼不能小於8位" />         
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="password" class="input " name="repassword" size="50" placeholder="請再次輸入密碼" data-validate="required:請再次輸入密碼,repeat#password:兩次輸入的密碼不一致" />          
42         </div>
43       </div>
44       
45       
46       
47       <div class="form-group">
48         <div class="label">
49           <label for="sitename">狀態：</label>
50         </div>
51         <div class="field">
52           <label for="" style="line-height: 32px;"><input type="radio" checked="checked"  name="status" id="" value="0"/>白名單</label>
53           <label for="" style="line-height: 32px;"><input type="radio" name="status" id="" value="1"/>黒名單</label>
54         </div>
55       </div>
56       
57       <div class="form-group">
58         <div class="label">
59           <label></label>
60         </div>
61         <div class="field">
62           <button class="button bg-main icon-check-square-o" type="submit"> 提交</button>   
63         </div>
64       </div>      
65     </form>
66   </div>
67 </div>
68 </body></html>

添加管理員頁面

獲取提交添加管理員表單的數據：

採用post方式點擊提交：

在admin->admin.js:

管理員添加功能:

//管理員添加功能
router.post('/add',function(req,res,next){
    
    
    //接收數據
    let {username,password,repassword}=req.body;
    
    
    console.log(req.body);

});

效果圖：

先後端都進行用戶輸入信息的斷定，爲了保證其安全性

在後端判斷須要用到數據庫，所以須要在命令行輸入：cnpm install mysql 從而進行安裝MySQL模塊

在config文件夾中新建db.js用來配置項目與數據庫的鏈接

數據庫的鏈接：

db.js的代碼書寫：

 1 //導入數據庫模塊
 2 
 3 
 4 const mysql=require("mysql");
 5 
 6 
 7 //設置鏈接數據庫的屬性
 8 let connect =mysql .createConnection({
 9     
10     
11     host:"localhost",
12     user:"root",
13     password:"root",
14     database:"blog_gyji"
15 });
16 
17 //開始鏈接數據庫
18 
19 connect.connect();
20 
21 //拋出
22 
23 module.exports=connect;

db.js

在admin.js中引入該數據庫，並進行驗證：

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

驗證結果：

說明數據庫鏈接成功

管理員管理添加功能(二)

判斷用戶是否已經註冊，須要用到數據庫模塊

實現的效果圖：

//管理員添加功能
router.post('/add',function(req,res,next){
    
    
    //接收數據
    let {username,password,repassword,status}=req.body;
    
    
    //判斷用戶名是否書寫
    if(username){
        //判斷用戶名的長度
        if(username.length>=6&&username.length<=12){
            
            
            
            
            //判斷密碼
            if(password){
                //判斷兩次密碼是否一致
                if(password==repassword){
                    //判斷該用戶名是否已經註冊
                    
                    mysql.query("select *  from admin where username=?",[username],function(err,data)
                    {
                        //判斷是否有錯誤
                        if(err){
                            
                            return "";
                            
                        }else{
                            
//                          console.log(data);
                             //判斷 用戶名是否已經註冊
                             if(data.length==0){
                                 //沒有註冊，須要進行插入數據庫
                                 //當前時間戳
                                 let  time=Math.round((new Date().getTime())/1000);
                                 
                                 //密碼加密
                                 let md5=crypto.createHash('md5');
                                 
                                 
                                 password=md5.update(password).digest('hex');
                                 
                                 
                                 mysql.query("insert into admin(username,password,status,time) value(?,?,?,?)",[username,password,status,time],function(err,data){
                                     
                                     //判斷
                                     if(err){
                                         
                                         return "";
                                         
                                     }else{
                                         console.log(data);
                                         
                                         //判斷是否執行成功
                                         if(data.affectedRows==1){
                                             res.send("<script>alert('添加成功');location.href='/admin/admin'  </script>");
                                             
                                             
                                             
                                         }else{
                                             
                                             res.send("<script>alert('添加失敗');history.go(-1)</script>");
                                         }
                                     }
                     
                                     
                                     
                                     
                                     
                                 })
                                 
                                 
                                 
                                 
                             }else{
                                 res.send("<script>alert('該帳戶已經註冊，請從新輸入');history.go(-1)</script>");
                                 
                             }

                        }
                        
                        
                        
                        
                    });
                    
                    
                }else{
                    res.send("<script>alert('兩次密碼不一致');history.go(-1)</script>");
                }
                
                
                
            }else{
                
                res.send("<script>alert('請輸入密碼');history.go(-1)</script>");
            }
            
            
        }else{
            
            res.send("<script>alert('用戶名6-12位之間');history.go(-1)</script>");
        }
        
        
        
    }else{
        
        res.send("<script>alert('請輸入帳戶名');history.go(-1)</script>");
    }

});

實現管理員添加功能的代碼：

  1 //導入express
  2 
  3 let express=require("express");
  4 
  5 //實例化
  6 
  7 let router=new express.Router();
  8 
  9 const mysql=require("../../config/db.js");
 10 console.log(mysql);
 11 
 12 
 13 const crypto = require('crypto')
 14 
 15 
 16 //管理員管理的首頁
 17 router.get('/',function(req,res,next){
 18     
 19 //    res.send("管理員管理的首頁");
 20 
 21 //加載頁面
 22 res.render("admin/admin/index.html");
 23 });
 24 
 25 
 26 router.get('/add',function(req,res,next){
 27     
 28 //    res.send("管理員添加");
 29 //加載頁面
 30 res.render("admin/admin/add.html");
 31 });
 32 
 33 
 34 //管理員添加功能
 35 router.post('/add',function(req,res,next){
 36     
 37     
 38     //接收數據
 39     let {username,password,repassword,status}=req.body;
 40     
 41     
 42     //判斷用戶名是否書寫
 43     if(username){
 44         //判斷用戶名的長度
 45         if(username.length>=6&&username.length<=12){
 46             
 47             
 48             
 49             
 50             //判斷密碼
 51             if(password){
 52                 //判斷兩次密碼是否一致
 53                 if(password==repassword){
 54                     //判斷該用戶名是否已經註冊
 55                     
 56                     mysql.query("select *  from admin where username=?",[username],function(err,data)
 57                     {
 58                         //判斷是否有錯誤
 59                         if(err){
 60                             
 61                             return "";
 62                             
 63                         }else{
 64                             
 65 //                          console.log(data);
 66                              //判斷 用戶名是否已經註冊
 67                              if(data.length==0){
 68                                  //沒有註冊，須要進行插入數據庫
 69                                  //當前時間戳
 70                                  let  time=Math.round((new Date().getTime())/1000);
 71                                  
 72                                  //密碼加密
 73                                  let md5=crypto.createHash('md5');
 74                                  
 75                                  
 76                                  password=md5.update(password).digest('hex');
 77                                  
 78                                  
 79                                  mysql.query("insert into admin(username,password,status,time) value(?,?,?,?)",[username,password,status,time],function(err,data){
 80                                      
 81                                      //判斷
 82                                      if(err){
 83                                          
 84                                          return "";
 85                                          
 86                                      }else{
 87                                          console.log(data);
 88                                          
 89                                          //判斷是否執行成功
 90                                          if(data.affectedRows==1){
 91                                              res.send("<script>alert('添加成功');location.href='/admin/admin'  </script>");
 92                                              
 93                                              
 94                                              
 95                                          }else{
 96                                              
 97                                              res.send("<script>alert('添加失敗');history.go(-1)</script>");
 98                                          }
 99                                      }
100                      
101                                      
102                                      
103                                      
104                                      
105                                  })
106                                  
107                                  
108                                  
109                                  
110                              }else{
111                                  res.send("<script>alert('該帳戶已經註冊，請從新輸入');history.go(-1)</script>");
112                                  
113                              }
114 
115                         }
116                         
117                         
118                         
119                         
120                     });
121                     
122                     
123                 }else{
124                     res.send("<script>alert('兩次密碼不一致');history.go(-1)</script>");
125                 }
126                 
127                 
128                 
129             }else{
130                 
131                 res.send("<script>alert('請輸入密碼');history.go(-1)</script>");
132             }
133             
134             
135         }else{
136             
137             res.send("<script>alert('用戶名6-12位之間');history.go(-1)</script>");
138         }
139         
140         
141         
142     }else{
143         
144         res.send("<script>alert('請輸入帳戶名');history.go(-1)</script>");
145     }
146 
147 });
148 
149 
150 
151 
152 router.get('/edit',function(req,res,next){
153     
154     res.send("管理員修改");
155 });
156 router.get('/insert',function(req,res,next){
157     
158     res.send("管理員管理的添加操做");
159 });
160 router.get('/save',function(req,res,next){
161     
162     res.send("管理員管理的修改操做");
163 });
164 router.get('/delete',function(req,res,next){
165     
166     res.send("管理員管理的刪除操做");
167 });
168 
169 
170 
171 
172 
173 module.exports=router;