2. 程式人生 > >【SpringMvc】從零開始學SpringMvc之實現使用者管理(四)

【SpringMvc】從零開始學SpringMvc之實現使用者管理(四)

阿新 • • 發佈：2018-12-21

大家好，在上一篇中，我們實現了使用者登入，這一篇我們來實現使用者的增刪改查。由於在第2篇中，我們已經建立好了資料庫，這裡就不在詳述了。

準備

這裡，我們用到了騰訊的前端模板引擎art-template，不熟悉的小夥伴可以先了解一番，或者有熟悉其他模板引擎的，也可以替換為其他的。中文文件點這裡

在第3篇中，我們建立了一個空的index.html（沒有看過的可以跳過，建立新的即可）

正式開始

  • 1.下載art-template.js，複製至WEB-INF/js 資料夾下，然後在index.html中新增Bootstrap 和art-template.js的引用

<script src=
 
"https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script
	src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/template-web.js"></script>
<link rel="stylesheet"
	href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
 
>

  • 2.在body標籤中，新增目標id為 user_content 的div標籤，id可以自定義；

<div id="user_content"></div>

  • 3.WEB-INF/js 下新加user.js，並在index.html中新增引用，然後新增js 程式碼，發起get請求，呼叫第二篇中的getUser介面

/**
 * 獲取全部使用者
 */
function getUser() {
	var url = "http://localhost:8080/SpringMvc/user/getUser";
	$.get(url, function(data) {
		if
 
 (data.code == 1) {
			var html = template('user_list', data.data);
			document.getElementById('user_content').innerHTML = html;
		} else if (data.code == 101) {
			// 登入失效
			
		} else {
			alert(data.msg)
		}
	});
}

其中，template 為art-template的語法，表示建立一個id為user_list的模板，傳入的資料為data.data；生成的html設定給我們第2步建立的div。 getUser返回的json如下圖： image.png

  • 4.在index.html中新增js程式碼，生成html；注意id要與上一步保持一致

<script id="user_list" type="text/html">

			<table class="table table-bordered">
				<caption>

				</caption>
				<thead>
					<tr>
						<th>序號</th>
						<th>使用者名稱</th>
						<th>手機號</th>
						<th>郵箱</th>
						<th>修改時間</th>
						<th><button class="btn btn-primary pull-right" data-toggle="modal" onclick="showAddDialog()">新增使用者</button></th>
					</tr>
				</thead>
				<tbody>

					{{each $data}}
					<tr>
						<td>{{$index}}</td>
						<td>{{$value.username}}</td>
						<td>{{$value.phone}}</td>
						<td>{{$value.email}}</td>
						<td>{{$value.editTime}}</td>
						<td>
							<button type="button" class="btn btn-default" onclick="showEditDialog({{$value.userId}})">編輯</button>
							<button type="button" class="btn btn-default" onclick="showDeleteDialog({{$value.userId}})">刪除</button>

						</td>
					</tr>
					{{/each}}

				</tbody>
			</table>

		</script>

其中，{{each $data}} {{/each}} 為 art-templated的陣列遍歷寫法，相當於java 中的for；其中index 就是當前的下標，value為當前下標的資料。

  • 5.在後臺程式碼中，建立IndexController，其中Controller和RequestMapping註解我們之前已經詳細說過了（此步第3篇中已經新增過了）

@Controller
@RequestMapping("")
public class IndexController extends BaseController {

	@RequestMapping("/index")
	public String hello() {
		return "index";
	}

	@RequestMapping("")
	public String index() {
		return "login";
	}

}

到這裡，使用者查詢已經完成了，我們執行專案，在瀏覽器中輸入http://localhost:8080/SpringMvc/index即可看到如下圖

image.png

下面是新增/編輯使用者，由於編輯比新增只多一個userId ，所以放到一起了。這裡我們用到了Bootstrap的模態框

  • 6.在index.html 的body標籤中新增html，預設是隱藏的

	<!-- 模態框（Modal） -->
	<div class="modal fade" id="addUser" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">×</button>
					<h4 class="modal-title" id="myUser">新增使用者</h4>
				</div>
				<div class="modal-body">
					<div class="input-group" style="display: none;">
						<span class="input_tip">*id</span> <input id="id"
							class="form-control" placeholder="請輸入使用者名稱" />
					</div>
					<div class="input-group">
						<span class="input_tip">*使用者名稱</span> <input id="username"
							class="form-control" placeholder="請輸入使用者名稱" />
					</div>
					<div class="input-group">
						<span class="input_tip">*密碼</span> <input id="password"
							class="form-control" style="-webkit-text-security: disc"
							placeholder="請輸入密碼" />
					</div>
					<div class="input-group">
						<span class="input_tip" style="margin-top: 20px;">*手機號</span> <input
							id="phone" type="tel" class="form-control" placeholder="請輸入手機號" />
					</div>
					<div class="input-group">
						<span class="input_tip">郵箱</span> <input id="email" type="email"
							class="form-control" placeholder="請輸入郵箱" />
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-primary"
						onclick="addorEditUser()">提交</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal-dialog -->
	</div>

  • 7.在user.js 中新增showAddDialog()方法、showEditDialog()方法

// 新增使用者彈窗
function showAddDialog() {
	$('#id').val('');
	$('#username').val('');
	$('#password').val('');
	$('#phone').val('');
	$('#email').val('');

	$('#myUser').html("新增使用者");
        //顯示彈窗
	$('#addUser').modal('show');

}
// 編輯使用者彈窗
function showEditDialog(id) {
	var url = "http://localhost:8080/SpringMvc/user/getUser?userId=" + id;
	$.get(url, function(data) {
		if (data.code == 1) {
			$('#id').val(data.data[0].userId);
			$('#username').val(data.data[0].username);
			$('#password').val(data.data[0].password);
			$('#phone').val(data.data[0].phone);
			$('#email').val(data.data[0].email);

			$('#myUser').html("修改使用者");
                        //顯示彈窗
			$('#addUser').modal('show');
		} else if (data.code == 101) {
			// 登入失效
			
		} else {
			alert(data.msg)
		}
	});

}

  • 8.在user.js 中新增addorEditUser()方法，判斷引數、呼叫addUser和updateUser介面

// 新增/編輯使用者
function addorEditUser() {

	var username = $('#username').val();
	var password = $('#password').val();
	var phone = $('#phone').val();
	var email = $('#email').val();
	if (username.length <= 0) {
		alert("使用者名稱不能為空")
		return;
	}
	if (password.length <= 0) {
		alert("密碼不能為空")
		return;
	}
	if (phone.length <= 0) {
		alert("手機號不能為空")
		return;
	}
	var title = $('#myUser').html();
	if (title.indexOf("修改") != -1) {
		var id = $('#id').val();
		var url = "http://localhost:8080/SpringMvc/user/updateUser?username="
				+ username + "&password=" + password + "&phone=" + phone
				+ "&email=" + email + "&userId=" + id;
		$.get(url, function(data) {
			if (data.code == 1) {
                                //隱藏彈窗                              
				$('#addUser').modal('hide');
				// 重新整理介面
				window.location.reload();
			} else if (data.code == 101) {
				// 登入失效
				
			} else {
				alert(data.msg);
			}
		});

	} else {
		var url = "http://localhost:8080/SpringMvc/user/addUser?username="
				+ username + "&password=" + password + "&phone=" + phone
				+ "&email=" + email;
		$.get(url, function(data) {
			if (data.code == 1) {
                                //隱藏彈窗  
				$('#addUser').modal('hide');
				// 重新整理介面
				window.location.reload();
			} else if (data.code == 101) {
				// 登入失效
				
			} else {
				alert(data.msg);
			}
		});
	}

}

刪除使用者

  • 9.在body標籤中新增刪除使用者彈窗

<!-- 模態框（Modal） -->
	<div class="modal fade" id="deleteUser" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">×</button>
					<h4 class="modal-title">提示</h4>
				</div>
				<div class="modal-body">
					<h4 class="modal-title">要刪除這個使用者？</h4>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-primary"
						onclick="deleteUser()">提交</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal-dialog -->
	</div>

  • 10.在user.js 中新增showDeleteDialog和deleteUser方法，由於刪除使用者需要userId，我們定義了一個變數儲存我們選擇刪除的id

//刪除使用者彈窗
var userId;
function 
            
  

           

              
              

            

            
相關推薦

			   
            
            
            
 

    


    
    
【SpringMvc】從零開始學SpringMvc之資料庫(二)

     
  
 
  
  
 大家好，在上一篇中，我們介紹了SpringMvc 的搭建，這篇我們來看下SpringMvc連線資料庫。 
  
  【SpringMvc】從零開始學SpringMvc之初始化(一) 
  
 準備 
 首先， 需要安裝Mysql、Navicat（或者類似軟體）、有一點sql基礎，瞭解一點 



  
 

    


    
    
【SpringMvc】從零開始學SpringMvc之初始化(一)

     
  
 
  
  
 大家好，我們今天開始SpringMvc 這個系列，由於筆者也是安卓出身，對SpringMvc 也是接觸不久，所以，這個系列僅僅只是記錄筆者學習SpringMvc 過程中的心得，如有錯誤，歡迎指正。 
 在開始之前，我們需要準備一些東西，JDK、Eclipse（MyEclipse）、Tom 



  
 

    


    
    
【SpringMvc】從零開始學SpringMvc之實現使用者登入(三)

     
  
 
  
  
 大家好，在前2篇中，我們實現了SpringMvc的配置和資料庫連線，這一篇我們來用html/ajax實現一個簡單的登入功能。 
  
  【SpringMvc】從零開始學SpringMvc之初始化(一) 
  【SpringMvc】從零開始學SpringMvc之資料庫(二) 
  
 準 



  
 

    


    
    
【SpringMvc】從零開始學SpringMvc之實現使用者管理(四)

     
 
							
							
							大家好，在上一篇中，我們實現了使用者登入，這一篇我們來實現使用者的增刪改查。由於在第2篇中，我們已經建立好了資料庫，這裡就不在詳述了。

準備
這裡，我們用到了騰訊的前端模板引擎art-template，不熟悉的小夥伴可以先了解一番，或者有熟悉其他模板引擎的，也 



  
 

    


    
    
【 專欄 】- 從零開始學產品

     
 
            從零開始學產品
            
              本專欄致力於將【系統化】【規範化】【可執行】【循序漸進】的產品經理學習方法分享給大家：
怎樣從零基礎，成長為一個獨立完成專案的產品經理

內容分享人：
暗滅，出身搜狐，葡萄藤創始人/CEO，10年敏捷開發最 



  
 

    


    
    
【 專欄 】- 從零開始學前端

     
 
            從零開始學前端
            
              本專欄內容，致力於讓零基礎的小白，成長為可以獨立完成專案的初級Web工程師
主要分享CSS和JS的基礎知識點及框架的使用，通過階梯性的文章分享，系統地勾畫出初級前端工程師的技能樹            
     



  
 

    


    
    
【 專欄 】- 從零開始學敏捷開發

     
 
            從零開始學敏捷開發
            
              1 為什麼需要敏捷開發
2 敏捷開發流程中有哪些工具可以使用
3 從零開始認識敏捷開發中的角色
4 產品經理/UI 設計師/後端工程師/前端工程師/測試工程師/運維工程師
5 敏捷開發的流程有哪些
6 



  
 

    


    
    
【 專欄 】- 從零開始學演算法

     
 
            從零開始學演算法
            
              從零開始系統地講解資料結構與演算法，包含：演算法基礎（分析、設計）、資料結構（基本、散列表、樹等）、圖演算法、計算幾何學等等內容，結合虛擬碼進行講解，並且附有基於python的實現程式碼，由淺入深，適合入門級選手 



  
 

    


    
    
從零開始學 Web 之 DOM（四）節點

     
 def   clas   scrip   while   p標簽   設置   ner   操作   text   
大家好，這裏是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號，歡迎大家訂閱關註。在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相 



  
 

    


    
    
從零開始學 Web 之 BOM（四）client系列

     
 

一、client 系列
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style 



  
 

    


    
    
從零開始學 Web 之 ES6（四）ES6基礎語法二

     
 

一、Promise
Promise是一個物件，代表了未來某個將要發生的事件(，這個事件通常是一個非同步操作)
有了Promise物件, 可以將非同步操作以同步的流程表達出來, 避免了層層巢狀的回撥函式(俗稱'回撥地獄')。
ES6的Promise是一個建構函式, 用來生成promise例項。
1、prom 



  
 

    


    
    
從零開始學 Web 之 JavaScript（四）陣列

     
 
大家好，這裡是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！


一、陣列
1、陣列 



  
 

    


    
    
從零開始學 Web 之 Ajax（四）介面文件，驗證使用者名稱唯一性案例

     
 
			>大家好，這裡是「 從零開始學 Web 系列教程 」，並在下列地址同步更新......
>
> - github：https://github.com/Daotin/Web
> - 微信公眾號：[Web前端之巔](https://github.com/Daotin/pi 



  
 

    


    
    
從零開始學 Web 之 HTML5（四）拖拽介面，Web儲存，自定義播放器

     
 
			>大家好，這裡是「 從零開始學 Web 系列教程 」，並在下列地址同步更新......
>
> - github：https://github.com/Daotin/Web
> - 微信公眾號：[Web前端之巔](https://github.com/Daotin/pi 



  
 

    


    
    
從零開始學 Web 之 CSS（四）CSS初始化、定位、overflow、標籤規範

     
 
大家好，這裡是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！


一、CSS初始化
 



  
 

    


    
    
從零開始學 Web 之 jQuery（四）元素的建立新增與刪除，自定義屬性

     
 

一、元素的建立新增和刪除
1、方式一：以物件的方式建立元素

append，appendTo ：在被選元素所有子元素的結尾插入內容（增加子元素）。
prepend，prependTo：在被選元素所有子元素的開頭插入元素（增加子元素）。
before：在當前被選元素之後插入內容（相當於增加兄弟元素）。
af 



  
 

    


    
    
從零開始學 Web 之 CSS3（四）邊框圖片，過渡

     
 

一、邊框圖片
邊框圖片：就是給邊框加圖片背景。
我們之前加的邊框都是純顏色的邊框，那麼我們怎麼給邊框加圖片呢？
原理：把一張圖片分成九宮格的形式，然後一一對應到需要新增邊框的元素上。

並且，新增邊框圖片是以背景的方式新增的，所以會有可能文字覆蓋在邊框的情況，後面也會介紹處理方法。
語法：
/* bord 



  
 

    


    
    
【高德地圖API】從零開始學高德JS API（七）——定位方式大揭祕

     
 
                摘要：關於定位，分為GPS定位和網路定位2種。GPS定位，精度較高，可達到10米，但室內不可用，且超級費電。網路定位，分為wifi定位和基站定位，都是通過獲取wifi或者基站資訊，然後查詢對應的wifi或者基站位置資料庫，得到的定位地點。定位資料庫可以不斷完善不斷補充，所以， 



  
 

    


    
    
【工作筆記】從零開始學ExtJs6( 四）—— 首頁樹狀選單和Tab頁的實現

     
 
								
								            
							
							
							題外話


  做一個專案要向完成對應的模組，肯定是先要有樹形選單結構，點選對應才dna跳轉到相應介面，在extjs中如何實現。是上週遇到的一個小問題，現在做做記錄



app目錄下建立data/me 



  
 

    


    
    
【工作筆記】從零開始學ExtJs6（一）——構建專案

     
 
								
								            
							
							
							題外話


  因為工作，需要用到ExtJs搭建一個報表系統，做後端的，前端Ext完全沒有接觸過，所以從頭開始，此工作日記就是記錄我學習ext的過程，從搭建，到登入，到首頁等等這些元件，慢慢摸索，然後記