nodejs寫一個后台管理系統

本文轉載自查看原文 2018-10-16 20:20 5423

准備工作

1，全局安裝 npm i express -g

2,全局安裝 npm i express-generator -g (用express腳手架)

3，腳手架創建項目 express -e project name(項目名稱列如 project 會生成一系列的目錄結構)

4，安裝package.json 中的依賴，進入項目列表，安裝依賴 npm i （出現node_modules）

（端口號自動生成在 bin 文件夾下面的.www的文件中 var port=~~~~~）

5,在package.json文件的“scripts”中配置和當前項目相關的所有指令（用 npm run + "script" 中配置的指令啟動項目）

6，在package.json文件的“scripts”中配置 "dev": "supervisor ./bin/www"

7，運行此項目 npm run dev 就行了

8，分頁處理時，用到異步 async 安裝 npm i async -D

9,以下所有的index.js 中都要引入

1 var express = require('express');
2 var router = express.Router();
3 var mongodb=require('mongodb').MongoClient;
4 
5 var db_str='mongodb://localhost:27017/test';
6 
7 var ObjectId = require('mongodb').ObjectId;
8 
9 var async=require('async');

10，在以下所有的users.js中都要引入

 1 var express = require('express');
 2 
 3 var router = express.Router();
 4 
 5 var mongodb=require('mongodb').MongoClient;
 6 
 7 var db_str='mongodb://localhost:27017/test';
 8 
 9 var upload=require('./upload');
10 
11 var ObjectId = require('mongodb').ObjectId;

關於上傳數據 textarea的實現圖片的上傳，和富文本編輯器

0，全局安裝 npm i multiparty -D

1，將xheditor文件和fwb.js放在public下面的js中,

1   $('#con').xheditor({         
2 
3  })      //$("#con")要與textarea的id保持一致

2，將unload放在routes下面,

3，在public里面的img中建立一個upload文件夾

4，在相應的文件中引入

1 <script src="/javascripts/xheditor/xheditor-1.2.2.min.js" type="text/javascript" charset="utf-8"></script>
2 <script src="/javascripts/xheditor/xheditor_lang/zh-cn.js" type="text/javascript" charset="utf-8"></script>

5，在根目錄下創建一個uploadtem文件夾

6，在users.js引入

1 var upload=require('./upload');
2 router.post('/uploadImg',(req,res)=>{
3         upload(req,res);
4 })

7，並且在textarea加class="xheditor"

//注冊

//在view文件夾中創建一個register.ejs

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    
    <script src="/javascripts/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
    <script src="/javascripts/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="/stylesheets/bootstrap.min.css"/>
  </head>
 	<style type="text/css">
 		*{
 			margin: 0;
 			padding:0;
 		}
 		body{
 			background-image: url(/images/2.jpg) ; 
 			position: relative;		
 		}
 		h2{
 			position: absolute;
 			color:pink;
 			right:490px;
 			top:20px
 		}
 		h5{
 			position: absolute;
 			right:200px;
 			top:100px;
 			color:yellowgreen
 		}
 		#form{
 			position: absolute;
 			right: 200px;
 			border:1px solid pink ;
 			width:300px;
 			height:400px;
 			top:150px;
 			
 		}
 		.form-group:nth-child(1){
 			position: absolute;
 			top:100px;
 			right:30px;
 		}
 		.form-group:nth-child(2){
 			position: absolute;
 			top:200px;
 			right:30px;
 		}
 		.btn-default{
 			position: absolute;
 			top:300px;
 			right: 100px;
 		}
 		#show,#unshow{
 			width:200px;
 			height:50px;
 			font-size:20px ;
 			text-align: center;
 			line-height: 50px;
 		
 			background: pink;
 			color: #fff;
 			position: absolute;
 			top:350px;
 			left:97px;
 			display:none;
 			border-radius: 20px;
 		}
 	
 		
 	</style>
 	
 </style>
  <body>
  	<h2>請注冊</h2>
  	<h5>已有賬號,點擊<a href="/login">登錄</a></h5>
    <div class="form-inline" id="form">
		  <div class="form-group">
		    <label for="exampleInputName2">用戶名</label>
		    <input type="text" class="form-control" id="username" >
		  </div>
		  <div class="form-group">
		    <label for="exampleInputEmail2">密碼</label>
		    <input type="password" class="form-control" id="password" >
		  </div>
		  <button  class="btn btn-default">注冊</button>
		  <div id="show">恭喜你，注冊成功</div>
		  <div id="unshow">此用戶已存在</div>
		  
		</div>	
		
  </body>
  <script type="text/javascript">
  	$(".btn-default").click(function(){
  		$.ajax({
  			type:"post",
  			url:"/users/register",
  			async:true,
  			data:{
  				username:$("#username").val(),
  				password:$("#password").val()
  			},
  			success:function(data){
  				console.log(data);
  				if(data==1){  					
  					$("#show").slideToggle("show");
  					setTimeout(function(){
  						location.href="/login"
  					},1000)
  					
  				}else{
  					$("#unshow").slideToggle("show");
  				}
  			}
  		});
  	})
  </script>
</html>

在index.js中對注冊頁面進行渲染

router.get('/register', function(req, res) {
  res.render('register', {});
});

在users.js中對注冊頁面進行相同的用戶名不能重復注冊

//注冊
router.post('/register',(req,res)=>{
	mongodb.connect(db_str,(err,database)=>{
		database.collection('user',(err,coll)=>{                                    //有user表插入數據，沒有則創建一個user的數據表
			coll.find({'username':req.body.username}).toArray((err,data)=>{　　　//判斷前端傳來的username,查找數據表中是否存在
				//console.log(data);
				if(data.length==0){　　//如果不存在，則查找出來的data.length==0,表示沒有重復注冊
					coll.insertOne(req.body,()=>{
						res.send('1');   //插入成功，則向前端send一個“1”
					});
				}else{
					res.send('2'); //用戶名已存在，不能重復注冊，向前端發送一個‘2’
				}
			})
		})
	})
})

//登錄

//在view文件夾中創建一個login.ejs文件

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    
    <script src="/javascripts/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
    <script src="/javascripts/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="/stylesheets/bootstrap.min.css"/>
  </head>
 	<style type="text/css">
 		*{
 			margin: 0;
 			padding:0;
 		}
 		body{
 			background-image: url(/images/6.jpg) ; 
 			position: relative;		
 		}
 		h2{
 			position: absolute;
 			color:pink;
 			right:490px;
 			top:20px
 		}
 		h5{
 			position: absolute;
 			right:200px;
 			top:100px;
 			color:yellowgreen
 		}
 		#form{
 			position: absolute;
 			right: 200px;
 			border:1px solid pink ;
 			width:300px;
 			height:400px;
 			top:150px;
 			
 			
 		}
 		.form-group:nth-child(1){
 			position: absolute;
 			top:100px;
 			right:30px;
 		
 		}
 		.form-group:nth-child(2){
 			position: absolute;
 			top:200px;
 			right:30px;
 		
 		}
 		.btn-default{
 			position: absolute;
 			top:300px;
 			right: 100px;
 		}
 		#show,#unshow{
 			width:200px;
 			height:50px;
 			font-size:20px ;
 			text-align: center;
 			line-height: 50px;
 		
 			background: pink;
 			color: #fff;
 			position: absolute;
 			top:350px;
 			left:97px;
 			display:none;
 			border-radius: 20px;
 		}
 	</style>
 	
 </style>
  <body>
  	<h2>歡迎登錄</h2>
  	<h5>無賬號,點擊<a href="/register">注冊</a></h5>
    <div class="form-inline" id="form">
		  <div class="form-group">
		    <label for="exampleInputName2">用戶名</label>
		    <input type="text" class="form-control" id="username" >
		  </div>
		  <div class="form-group">
		    <label for="exampleInputEmail2">密碼</label>
		    <input type="password" class="form-control" id="password" >
		  </div>
		  <button  class="btn btn-default">登錄</button>
		  <div id="show">恭喜你,登錄成功</div>
		  <div id="unshow">此用戶不存在</div>
		  
		</div>	
		
  </body>
  <script type="text/javascript">
  	$(".btn-default").click(function(){
  		$.ajax({
  			type:"post",
  			url:"/users/login",
  			async:true,
  			data:{
  				username:$("#username").val(),
  				password:$("#password").val()
  			},
  			success:function(data){
  				if(data==1){
  					//alert("成功")
  					$("#show").slideToggle("show");
  					setTimeout(function(){
  						location.href='/'
  					},1000)
  					
  				}else{
  					//alert('失敗')
  					$("#unshow").slideToggle("show");
  					setTimeout(function(){
  						location.href='/login'
  					},1000)
  					
  				}
  			}
  		});
  	})
  	
  
  </script>
</html>

存用戶名用到express-session，只要存一下用戶名在其他頁面就能使用

安裝依賴 npm i express-session -D

在app.js中配置

var session=require('express-session');

app.use(session({ 
	 secret: 'recommend 128 bytes random string', 
	cookie: { maxAge: 20 * 60 * 1000 },
	resave: true,
	saveUnintialized: true
}))

　//首頁（簡單的頁面布局，在插入數據頁article.js, 詳情頁 detail.js, 修改數據 updata.js 查詢數據seek.js ）

在已有的文件中書寫（index.ejs）

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <link rel="stylesheet" type="text/css" href="/stylesheets/bootstrap.min.css"/>
    <script src="/javascripts/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
  	<style type="text/css">
  		*{
  			margin:0 ;
  			padding:0;
  		}
  		body{
  			padding:0;
  		}
  		.wrapbox{
  			height:100%;	
  		
  		}
  		.box{
  			width:1583px;
  			height: 786px;
  			margin: 0 auto;
  		}
  		
  		.ttop{
  	
  			width:1583px;
  			height:100px;
  			margin: 0 auto;  		
  			font:italic bold 50px arial,sans-serif;
  			float: right;
  			text-align: center;
  			line-height: 100px;
  			color:skyblue;
  			background: darkslategray;

	 		}
  		h2{
  			margin: 0;
  			font:italic bold 35px arial,sans-serif; 
  						
  		}
  		button{  				
  				margin: 37px 35px;
  				text-align: center;
  				background: darkslategray;
  				color:skyblue;
  				border: none;
  				width:200px;
  				height:50px;
  				display: flex;
  				padding-left: 70px;
  				
  				
  		}
  		button:hover{
  			background: skyblue;
  			color:darkslategray;
  		}
  		.img{
  		
  			position: absolute;
  			right: 8px;
  			top:100px;
  			
  		}
  		img{
  			display: inline-block;
  			width:1300px;
  			height:685px;
  		}
  		
  	</style>
  </head>
  <body>
  	<div class="wrapbox">
  		<div class="box">
  			
  			<div class="ttop">網站后台管理系統</div>
	  		<div class="top">
	  			<h2>welcome:<%- names %></h2>
	  			<button onclick="location.href='/register'">注冊</button>
	  			<button onclick="location.href='/login'">登錄</button>
	  			<button onclick="location.href='/relogin'">注銷</button>//當按注銷按鈕時頁面跳轉
	  			<button onclick="location.href='/article'">發表文章</button>
	  			<button >詳細信息</button>
	  			<button>聯系我們</button>
	  			<button>關於我們</button>
  			</div>	
  			<div class='img'><img src="/images/v.jpg"/></div>
	  	</div>
	  	
	  	
		</div>
  	
    
  </body>
</html>

//在index.js對首頁進行渲染，並把在login登錄頁面存的uasername取出來

router.get('/', function(req, res, next) {
  res.render('index', { names:req.session.name });
});

在首頁有一個注銷的按鈕，當按注銷鈕時，實現頁面跳轉，讓其跳轉到登錄頁面，（頁面跳轉的一種寫法 res.redirect('' '')）在index.js中進行渲染

 1 //注銷在
 2 router.get('/relogin',(req,res)=>{
 3   req.session.destroy(function(err){
 4       //res.redirect("/")        
 5         if(err){            
 6             console.log(err)        
 7         }else{            
 8             res.redirect("login")        
 9         }    
10     })
11 });

插入數據及按發表文章按鈕

在view文件夾下創建一個文件article.ejs

  1 <!DOCTYPE html>
  2 <html>
  3   <head>
  4     <title></title>
  5     
  6     <script src="/javascripts/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
  7     <script src="/javascripts/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
  8     <link rel="stylesheet" type="text/css" href="/stylesheets/bootstrap.min.css"/>
  9     <script src="/javascripts/xheditor/xheditor-1.2.2.min.js" type="text/javascript" charset="utf-8"></script>
 10       <script src="/javascripts/xheditor/xheditor_lang/zh-cn.js" type="text/javascript" charset="utf-8"></script>
 11   
 12   </head>
 13   <style type="text/css">
 14   
 15           .top{
 16           width:1600px;
 17           height:100px;
 18           background:darkslategray;
 19           margin-bottom: 30px;
 20       }
 21       .top button{                  
 22                   margin: 43px 35px;
 23                   text-align: center;
 24                   background: darkslategray;
 25                   color:skyblue;
 26                   border: none;
 27                   width:200px;
 28                   height:50px;
 29                   display: flex;
 30                   padding-left: 70px;
 31                   
 32                   
 33           }
 34           button:hover{
 35               background: skyblue;
 36               color:darkslategray;
 37           }
 38           h2{
 39               margin: 0;
 40               padding-left: 100px;             
 41               font:italic bold 50px arial,sans-serif;
 42               display: inline-block;
 43               padding-top:25px ;
 44               color:skyblue;
 45               margin-left: 500px;
 46               
 47                   
 48           }
 49           .table{
 50               margin-left: 260px;
 51               width:1340px;
 52               height:100%;
 53           }
 54           #form{
 55               margin-bottom: 50px;
 56               margin-left: 200px;
 57           }
 58           .pagination{
 59               margin-left: 650px;
 60           }
 61           .form-group{
 62               margin-left:50px ;
 63           }
 64           #tit{
 65               width:300px;
 66               
 67           }
 68           
 69           
 70           .btn-danger{
 71               margin-left: 50px;
 72           }
 73           #txt{
 74               float: right;
 75               margin-right:50px ;
 76               margin-bottom: 50px;
 77           }
 78           
 79       </style>     
 80   <body>
 81       <div class="top">
 82           <h2>welcome to 花瓣網</h2>          
 83            <button onclick="location.href='/register'">注冊</button>
 84           <button onclick="location.href='/login'">登錄</button>
 85           <button onclick="location.href='/relogin'">注銷</button>
 86           <button onclick="location.href='/article'">發表文章</button>
 87           <button >詳細信息</button>    
 88           <button>聯系我們</button>
 89           <button>關於我們</button>
 90       </div>
 91       <div class="form-inline" id="form">
 92           <div class="form-group">
 93             <label for="exampleInputName2">標題</label>
 94             <input type="text" class="form-control" id="tit" >
 95           </div>
 96           <div class="form-group">
 97             <label for="exampleInputEmail2">內容</label>
 98            
 99             <textarea name="" rows="2" cols="80" class="form-control xheditor" id="con" ></textarea>
100         
101           </div>
102           <button  class="btn-danger">發布</button>         
103         </div>    
104         <div id="txt">
105             <input type="text" class="ipt"/>
106             <button id="btn">查詢</button>
107         </div>
108         <table class="table">
109             <tr>
110                 <th>序號</th>
111                 <th>標題</th>                
112                 <th>內容</th>
113                 <th>刪除</th>
114                 <th>修改</th>
115             </tr>
116             <% data.map(function(item,i){ %>            
117                 <tr>
118                     <td><%- (pageNum-1)*7+i+1 %></td>
119                     <td><a href="/detail?id=<%- item._id %>"><%- item.title%></a></td>
120                     <td><%- item.content%></td>
121                     <td><button class="btn-default" onclick="location.href='/delete?id=<%- item._id %>'">刪除</button></td> 
122                     <td><button class="btn-default" onclick="location.href='/updata?id=<%- item._id %>'">修改</button></td>
123                     
124                 </tr>
125             <% }) %>            
126         </table>
127     <nav aria-label="Page navigation">//分頁
128   <ul class="pagination">
129     <li>
130       <a href="/article?pageNum=<%- pageNum<=1?1:parseInt(pageNum)-1%>" aria-label="Previous">
131         <span aria-hidden="true">上一頁</span>
132       </a>
133     </li>
134     <%if(page >4){%>
135         <li><a href="/article?pageNum=1">1</a></li>
136         <li><a href="/article?pageNum=2">2</a></li>
137         <li><a href="#">...</a></li>   
138         <li><a href="/article?pageNum=<%- page-1 %>"><%- page-1 %></a></li>
139         <li><a href="/article?pageNum=<%- page %>"><%- page %></a></li>
140         
141        <%}else{%>
142            <%for(let i=0;i<page;i++){%>
143             <li><a href="/article?pageNum=<%- i+1 %>"><%-i+1 %></a></li>
144         <%}%>
145            
146       <%}%>
147    
148     <li>
149       <a href="/article?pageNum=<%-pageNum>=page ? page : parseInt(pageNum)+1%>" aria-label="Next">
150         <span aria-hidden="true">下一頁</span>
151       </a>
152     </li>
153   </ul>
154 </nav>
155         <script src="/javascripts/fwb.js" type="text/javascript" charset="utf-8"></script>
156         
157         
158   <script type="text/javascript">
159       //發布文章
160       $(".btn-danger").click(function(){
161           $.ajax({
162               type:"post",
163               url:"/users/article",
164               async:true,
165               data:{
166                   title:$("#tit").val(),
167                   content:$("#con").val()
168               },
169               success:function(data){
170                   if(data==1){        
171                       location.href='/article'   //插入數據成功，還是跳轉到本頁面
172                       
173                   }else{
174                       alert('失敗')
175                       
176                   }
177               }
178           });
179       })
180       
181  //查詢
182  $("#btn").click(function(){
183      var tit=$(".ipt").val()  //查詢按鈕前面input里面的值 184          $.ajax({
185           type:"post",
186           url:"/users/seek",
187           async:true,
188           data:{
189               val:tit　　//向后台傳入的數據 190           },
191           success:function(data){
192               console.log(data);
193               if(data=='1'){
194                   location.href="/seek?tit="+tit;
195               }
196           }
197       });     
198  })
199       
200   
201   </script>
202 </html>

先對插入數據發布按鈕進行設計

在article.ejs中對發布按鈕進行了ajax請求

1，首先在users.js文件中對傳入的數據進行處理

 1 router.post('/article',(req,res)=>{
 2     mongodb.connect(db_str,(err,database)=>{
 3         database.collection('article',(err,coll)=>{
 4             if(req.body.title != 0){        //發布文章的標題不能為空        
 5                 coll.save(req.body,(err,data)=>{  //coll中插入數據 ，數據是ajax前端傳入的data
 6                     //console.log(req.body);
 7                     res.send('1');　　//插入成功 向前端send一個 ‘1’  （在success中）
 8                     database.close();
 9                 })
10             }
11             
12         })
13     })
14 })

2，再次對插入的數據在index.js進行渲染，顯示在前端（對插入的數據進行分頁處理）

 1 //發布文章
 2 router.get('/article',(req,res)=>{
 3     mongodb.connect(db_str,(err,database)=>{
 4         database.collection('article',(err,coll)=>{
 5             var pageNum=req.query.pageNum;
 6             pageNum=pageNum?pageNum :1;
 7             //頁數
 8             var page=0;
 9             //總數量
10             var count=0;
11             //每頁展示的數量
12             var size=7;
13             async.series([　　　　　　　　　　
14                 function(callback){
15                     coll.find({}).toArray((err,data)=>{
16                         count=data.length;
17                         page=Math.ceil(count/size);
18                         //下一頁
19                         pageNum=pageNum<=1?1:pageNum;
20                         //上一頁
21                         pageNum=pageNum>=page?page:pageNum
22                     })
23                     callback(null,'')
24                 },
25                 function(callback){
26                     coll.find({}).sort({_id:-1}).limit(size).skip((pageNum-1)*size).toArray((err,data)=>{   //sort（{_id:-1}）按發表的時間排序，新發表的數據在第一行 27                         callback(null,data)
28                     })
29                     
30                 }
31             ],function(err,data){
32                 res.render('article',{data:data[1],page:page,count:count,pageNum:pageNum})
33                 database.close();
34             })
35         })
36     })
37 })

然后修改數據進行設計　

1，首先在view文件夾下創建一個文件updata.ejs

  1 <!DOCTYPE html>
  2 <html>
  3   <head>
  4     <title></title>
  5     
  6     <script src="/javascripts/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
  7     <script src="/javascripts/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
  8     <link rel="stylesheet" type="text/css" href="/stylesheets/bootstrap.min.css"/>
  9     <script src="/javascripts/xheditor/xheditor-1.2.2.min.js" type="text/javascript" charset="utf-8"></script>
 10       <script src="/javascripts/xheditor/xheditor_lang/zh-cn.js" type="text/javascript" charset="utf-8"></script>
 11   
 12   </head>
 13   <style type="text/css">
 14       .top{
 15           width:1600px;
 16           height:100px;
 17           background:darkslategray;
 18           margin-bottom: 30px;
 19       }
 20       .top button{                  
 21                   margin: 43px 35px;
 22                   text-align: center;
 23                   background: darkslategray;
 24                   color:skyblue;
 25                   border: none;
 26                   width:200px;
 27                   height:50px;
 28                   display: flex;
 29                   padding-left: 70px;    
 30           }
 31           button:hover{
 32               background: skyblue;
 33               color:darkslategray;
 34           }
 35           h2{
 36               margin: 0;
 37               padding-left: 100px;             
 38               font:italic bold 50px arial,sans-serif;
 39               display: inline-block;
 40               padding-top:25px ;
 41               color:skyblue;
 42               margin-left: 500px;
 43         }
 44           .table{
 45               margin-left: 260px;
 46               width:1340px;
 47               height:100%;
 48           }
 49           #form{
 50               margin-bottom: 50px;
 51               margin-left: 200px;
 52               display: flex;
 53               flex-direction: column;
 54           }
 55           .pagination{
 56               margin-left: 650px;
 57           }
 58           .form-group{
 59               margin-left:250px ;
 60               margin-top: 100px;
 61           }
 62           #tit{
 63               width:300px;
 64               
 65           }
 66           
 67           
 68           .btn-danger{
 69               margin-top: 50px;
 70               margin-left: 280px;
 71               width:200px;
 72               height:50px;
 73           }
 74           #txt{
 75               float: right;
 76               margin-right:50px ;
 77               margin-bottom: 50px;
 78           }
 79           
 80       </style>     
 81   <body>
 82       <div class="top">
 83           <h2>welcome to 花瓣網</h2>          
 84            <button onclick="location.href='/register'">注冊</button>
 85           <button onclick="location.href='/login'">登錄</button>
 86           <button onclick="location.href='/relogin'">注銷</button>
 87           <button onclick="location.href='/article'">發表文章</button>
 88           <button >詳細信息</button>    
 89           <button>聯系我們</button>
 90           <button>關於我們</button>
 91       </div>
 92       <div class="form-inline" id="form">
 93           <div class="form-group">
 94             <label for="exampleInputName2">標題</label>
 95             <input type="text" class="form-control" id="tit" value="<%- data4 %>">
 96           </div>
 97           <div class="form-group">
 98             <label for="exampleInputEmail2">內容</label>
 99            
100             <textarea name="" rows="4" cols="100" class="form-control xheditor" id="con" ><%- data3 %></textarea>
101         
102           </div>
103           <button  class="btn-danger" name="<%- id %>">發布</button>   //給一個屬性，點擊哪個 哪個的id 傳到后台，並且渲染的哪個    
104     </div>    
105   <script type="text/javascript">
106       $(".btn-danger").click(function(){
107           $.ajax({
108               type:"post",
109               url:"/users/updata",
110               async:true,
111               data:{
112                   id:$(this).attr('name'),   // 傳到users.js 113                   title:$("#tit").val(),
114                   content:$("#con").val()
115               },
116               success:function(data){ 
117                   if(data=="1"){
118                       location.href='/article';//修改成功跳轉到插入數據頁面 119                   }else{
120                       location.href='/updata'
121                   }
122                   //console.log(data);
123               
124               }
125           });
126       })
127       
128   
129   </script>
130 </html>

2在users.js對前台

 1 //修改
 2 
 3 router.post('/updata',(req,res)=>{
 4     mongodb.connect(db_str,(err,database)=>{
 5         database.collection('article',(err,coll)=>{
 6             //console.log(req.body);            
 7             var id=ObjectId(req.body.id)
 8             coll.updateOne({_id:id },{$set:{title:req.body.title,content:req.body.content}},(err,data)=>{ 　　// 修改從前端傳入來的id的title，content數據  9             res.send("1")
10             database.close();
11             })
12         })
13     })
14 })

3，在index.js對數據處理

 1 //修改
 2 
 3 
 4 router.get('/updata',(req,res)=>{
 5     var id=ObjectId(req.query.id);
 6     mongodb.connect(db_str,(err,database)=>{
 7         database.collection('article',(err,coll)=>{
 8             coll.find({_id:id}).toArray((err,data)=>{
 9                 //console.log(data);
10                 res.render('updata',{data3:data[0].content,data4:data[0].title,id:data[0]._id});    //把修改過的數據傳到前端 11                 database.close();
12             })
13             
14         })
15     })
16 })

對刪除按鈕進行處理

1，刪除按鈕有個跳轉路徑，我們對其進行渲染 index.js，（無ajax 所以不用在 users.js 進行處理）

//刪除
router.get('/delete',(req,res)=>{
    var id=ObjectId(req.query.id);
    mongodb.connect(db_str,(err,database)=>{
        database.collection('article',(err,coll)=>{
            coll.remove({_id:id});
            //console.log(id);
            res.redirect('article')
            database.close();
        })
    })
})

查詢數據的詳細信息 content 在view文件夾創建一個seek.js文件

  1 <!DOCTYPE html>
  2 <html>
  3   <head>
  4     <title></title>
  5     
  6     <script src="/javascripts/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
  7     <script src="/javascripts/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
  8     <link rel="stylesheet" type="text/css" href="/stylesheets/bootstrap.min.css"/>
  9     <script src="/javascripts/xheditor/xheditor-1.2.2.min.js" type="text/javascript" charset="utf-8"></script>
 10       <script src="/javascripts/xheditor/xheditor_lang/zh-cn.js" type="text/javascript" charset="utf-8"></script>
 11   
 12   </head>
 13   <style type="text/css">
 14   
 15           .top{
 16           width:1600px;
 17           height:100px;
 18           background:darkslategray;
 19           margin-bottom: 30px;
 20       }
 21       .top button{                  
 22                   margin: 43px 35px;
 23                   text-align: center;
 24                   background: darkslategray;
 25                   color:skyblue;
 26                   border: none;
 27                   width:200px;
 28                   height:50px;
 29                   display: flex;
 30                   padding-left: 70px;
 31                   
 32                   
 33           }
 34           button:hover{
 35               background: skyblue;
 36               color:darkslategray;
 37           }
 38           h2{
 39               margin: 0;
 40               padding-left: 100px;             
 41               font:italic bold 50px arial,sans-serif;
 42               display: inline-block;
 43               padding-top:25px ;
 44               color:skyblue;
 45               margin-left: 500px;
 46               
 47                   
 48           }
 49           .table{
 50               margin-left: 260px;
 51               width:1340px;
 52               height:100%;
 53           }
 54           #form{
 55               margin-bottom: 50px;
 56               margin-left: 200px;
 57           }
 58           .pagination{
 59               margin-left: 650px;
 60           }
 61           .form-group{
 62               margin-left:50px ;
 63           }
 64           #tit{
 65               width:300px;
 66               
 67           }
 68           
 69           
 70           .btn-danger{
 71               margin-left: 50px;
 72           }
 73           #txt{
 74               float: right;
 75               margin-right:50px ;
 76               margin-bottom: 50px;
 77           }
 78           
 79       </style>     
 80   <body>
 81       <div class="top">
 82           <h2>welcome to 花瓣網</h2>          
 83            <button onclick="location.href='/register'">注冊</button>
 84           <button onclick="location.href='/login'">登錄</button>
 85           <button onclick="location.href='/relogin'">注銷</button>
 86           <button onclick="location.href='/article'">發表文章</button>
 87           <button >詳細信息</button>    
 88           <button>聯系我們</button>
 89           <button>關於我們</button>
 90       </div>
 91 <table class="table">
 92             <tr>
 93                 <th>序號</th>
 94                 <th>標題</th>                
 95                 <th>內容</th>
 96                 
 97             </tr>
 98             <% data.map(function(item,i){ %>            
 99                 <tr>
100                     <td><%- i+1%></td>
101                     <td><a href="/detail?id=<%- item._id %>"><%- item.title%></a></td>
102                     <td><%- item.content%></td>                    
103                 </tr>
104             <% }) %>            
105         </table>
106 </html>

1，在users.js對數據進行處理

 1 //查詢
 2 router.post('/seek',(req,res)=>{
 3     mongodb.connect(db_str,(err,database)=>{
 4         database.collection('article',(err,coll)=>{
 5             var tit=new RegExp(req.body.val)   //以從前端傳來的input中值的首字母進行查詢      
 6             coll.find({content:tit}).toArray((err,data)=>{
 7                 //console.log(data);
 8                 res.send('1');　　//查詢成功向前端send   ‘1’
 9                 database.close();
10             })
11         })
12     })
13 })

2，對查詢的數據進行渲染，傳到前端 users.js

 1 //查詢
 2 
 3 router.get('/seek',(req,res)=>{
 4     mongodb.connect(db_str,(err,database)=>{
 5         database.collection('article',(err,coll)=>{
 6             var tit=new RegExp(req.query.tit);
 7             coll.find({content:tit}).toArray((err,data)=>{
 8                 //console.log(data);
 9                 res.render('seek',{data:data});
10                 database.close();
11             })
12         })
13     })
14 })

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 antdpro 寫后台管理系統的坑快速開發一個后台管理系統【java】struts2+hibernate寫的一個學生管理系統如何使用react做一個簡易的后台管理系統 layui快速搭建一個后台管理系統 simpleui后台管理系統 vue后台管理系統若依后台管理系統初識基於bootstrap的后台管理系統用nodejs,express,ejs,mongo,extjs實現了簡單了網站后台管理系統