前言
博主在Web階段也學習了近一個月，對于前端和后端的一些連接部分也有了一些了解
本篇博客是用來總結自己寫過的一個小的綜合案例，其實增刪改查的操作都很簡單了，最重要的是如何 將前端和后端連接起來 的思想
歡迎大家提出意見哦~ 覺得博主寫得不錯的可以一鍵三連啦~ 博主寫得頭都要昏了~
?
目錄
- 登錄界面
- 界面展示
- 后端代碼思路分析
- 前端代碼分析
- 增加功能
- 界面展示
- 后端代碼思路分析
- 前端代碼分析
- 洗掉功能
- 界面展示
- 后端代碼思路分析
- 前端代碼分析
- 修改功能
- 界面展示
- 后端代碼思路分析
- 前端代碼分析
- 分頁查詢功能
- 界面展示
- 后端代碼思路分析
- 前端代碼分析
?
?
登錄界面
在進入系統前，我們要先進操作員的登錄，這里本來該建一個新的操作員物體類，并在資料庫中創建一個操作員資訊表的，但是這里為了方便，直接給用戶資訊添加了 username 和 password 兩個屬性
?
界面展示
?
后端代碼思路分析
LoginServlet 類的代碼撰寫流程：
-
設定編碼
request.setCharacterEncoding("utf-8"); -
獲取資料：獲取用戶填寫的驗證碼
String verifycode = request.getParameter("verifycode"); -
驗證碼校驗
如果驗證失敗： 1、先設定提示資訊 request.setAttribute("login_msg","驗證碼錯誤"); 2、再跳轉界面，跳轉回登錄界面（使用轉發） 為什么要跳轉呢？仔細想想，點擊登錄按鈕后，系統自動將資料拿到資料庫進行比較 如果登錄失敗就要跳轉到登錄界面，而登錄成功就需要跳轉到另一個系統界面 所以這里要做跳轉這一步，后面都會使用到跳轉，就不再詳細解釋了 request.getRequestDispatcher("/login.jsp").forward(request,response); -
封裝User物件
將前端獲取的資料進行封裝，封裝成物體類User(用戶資訊物體類)物件，這里使用的是 BeanUtils類的 populate 方法，引數為 ：(存盤資料的物件，要轉換的物件)
-
呼叫Service查詢
呼叫Service實作類中的方法將封裝后的物件 user 與資料庫中的資料進行比較，這里要說明：
根據三層架構，我們分為： 1.界面層(表示層)：用戶看的得界面，用戶可以通過界面上的組件和服務器進行互動 2.業務邏輯層：處理業務邏輯的，（介面命名為Service，實作類為ServiceImp） 3.資料訪問層：操作資料存盤檔案，(介面命名為Dao，實作類為DaoImp) -
判斷是否登錄成功
驗證成功 1、把資料存入session session.setAttribute("user",login_user); 2、跳轉頁面（重定向） response.sendRedirect(request.getContextPath()+"/index.jsp"); 驗證失敗 1、提示資訊 request.setAttribute("login_msg","用戶名或密碼錯誤"); 2、跳轉登錄界面 request.getRequestDispatcher("/login.jsp").forward(request,response);
?
前端代碼分析
-
為表單設定action屬性，設定表單提交的地址，其中
${pageContext.request.contextPath}用來替代虛擬路徑，這樣就不用再更換虛擬路徑后又一個個進行修改<form action="${pageContext.request.contextPath}/loginServlet" method="post"> -
給每一個文本框添加 id 屬性，因為要將文本框的資料傳入后端，傳入的資料是一個map集合，key 就是 id 的內容，例如：
<input type="text" name="username" class="form-control" id="user" placeholder="請輸入用戶名"/> -
登錄界面肯定需要驗證碼，添加一張驗證碼的圖，
"href="javascript:refreshCode();"是為該鏈接添加一個函式，使之能切換不同的驗證碼驗證碼的div如下：
<div class="form-inline"> <label for="vcode">驗證碼：</label> <input type="text" name="verifycode" class="form-control" id="verifycode" placeholder="請輸入驗證碼" style="width: 120px;"/> <a href="javascript:refreshCode();"> <img src="${pageContext.request.contextPath}/checkCodeServlet" title="看不清點擊重繪" id="vcode"/> </a> </div>驗證碼的
script<script type="text/javascript"> //切換驗證碼 function refreshCode(){ //1.獲取驗證碼圖片物件 var vcode = document.getElementById("vcode"); //2.設定其src屬性，加時間戳 vcode.src = "${pageContext.request.contextPath}/checkCodeServlet?time="+new Date().getTime(); } </script> -
修改錯誤提示框里的提示資訊，
<strong>xxx</strong>中的xxx改為${login_msg}，在Servlet中會定義這個資訊，并用setAttribute()方法傳入request中<!-- 出錯顯示的資訊框 --> <div class="alert alert-warning alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert" > <span>×</span> </button> <strong>${login_msg}</strong> </div>
增加功能
?
界面展示
?
后端代碼思路分析
AddUserServlet 的代碼撰寫思路：
-
設定編碼
設定編碼的作用主要是為了防止亂碼，代碼如下：
request.setCharacterEncoding("utf-8"); -
獲取引數
這里的引數指的是頁面里輸入的資料(前端輸入的資料)，獲取到后端，再到資料庫中進行查詢和比較，使用的是 getParameterMap() 方法
-
封裝物件
將前端獲取的資料進行封裝，封裝成物體類User(用戶資訊物體類)物件，這里使用的是 BeanUtils類的 populate 方法，引數為 ：(存盤資料的物件，要轉換的物件)
-
呼叫Service
呼叫Service實作類中的方法將封裝后的物件 user 與資料庫中的資料進行比較
-
跳轉到 FindUserByPageServlet（重定向）
?
前端代碼分析
-
為表單設定action屬性，設定表單提交的地址，其中
${pageContext.request.contextPath}用來替代虛擬路徑，這樣就不用再更換虛擬路徑后又一個個進行修改<form action="${pageContext.request.contextPath}/addUserServlet" method="post"> -
給每一個文本框添加 id 屬性，因為要將文本框的資料傳入后端，傳入的資料是一個map集合，key 就是 id 的內容，例如：
<input type="text" class="form-control" id="age" name="age" required="required" placeholder="請輸入年齡">
?
洗掉功能
?
界面展示
洗掉有兩種洗掉方法，一是單獨洗掉一行，二是洗掉選中的多行資料
?
后端代碼思路分析
DelUserServlet 類(洗掉單行) 代碼撰寫思路：
-
獲取id
String id = request.getParameter("id"); -
呼叫Service洗掉
UserService service=new UserServiceImpl(); service.deletUser(id); -
跳轉到查詢所有Servlet
response.sendRedirect(request.getContextPath()+"/findUserByPageServlet");
DelSelectServlet 類(洗掉多行) 代碼撰寫思路：
-
獲取所有id
String[] ids=request.getParameterValues("uid"); -
呼叫Service洗掉
UserService service=new UserServiceImpl(); service.delSelectedUser(ids); -
跳轉到查詢所有Servlet
response.sendRedirect(request.getContextPath()+"/findUserByPageServlet");
?
前端代碼分析
-
為單行洗掉按鈕添加函式，完成洗掉功能
<a class="btn btn-default btn-sm" href="javascript:deleteUser(${user.id});">洗掉</a></td><script> function deleteUser(id){ //用戶安全提示 if(confirm("您確定要洗掉嗎？")){ //訪問路徑 location.href="${pageContext.request.contextPath}/delUserServlet?id="+id; } } </script> -
給多行洗掉按鈕添加單擊事件
<a class="btn btn-primary" href="javascript:void(0);" id="delSelected">洗掉選中</a><script> window.onload = function(){ //給洗掉選中按鈕添加單擊事件 document.getElementById("delSelected").onclick = function(){ if(confirm("您確定要洗掉選中條目嗎？")){ var flag = false; //判斷是否有選中條目 var cbs = document.getElementsByName("uid"); for (var i = 0; i < cbs.length; i++) { if(cbs[i].checked){ //有一個條目選中了 flag = true; break; } } if(flag){//有條目被選中 //表單提交 document.getElementById("form").submit(); } } } //1.獲取第一個cb document.getElementById("firstCb").onclick = function(){ //2.獲取下邊串列中所有的cb var cbs = document.getElementsByName("uid"); //3.遍歷 for (var i = 0; i < cbs.length; i++) { //4.設定這些cbs[i]的checked狀態 = firstCb.checked cbs[i].checked = this.checked; } } } </script>實作了兩個小細節：(1) 點擊洗掉后有一個確認框，避免洗掉過快導致無法挽回；(2) 可以實作復選框全選中功能
-
給表單第一列添加復選框，實作多行洗掉的選中功能
<form id="form" action="${pageContext.request.contextPath}/delSelectServlet" method="post"> <table border="1" class="table table-bordered table-hover"> <tr class="success"> <!-- 復選框 --> <th><input type="checkbox" id="firstCb"></th> <th>編號</th> <th>姓名</th> <th>性別</th> <th>年齡</th> <th>籍貫</th> <th>QQ</th> <th>郵箱</th> <th>操作</th> </tr> <c:forEach items="${pb.list}" var="user" varStatus="s"> <tr> <!-- 復選框 --> <td><input type="checkbox" name="uid" value="${user.id}"></td> <td>${s.count}</td> <td>${user.name}</td> <td>${user.gender}</td> <td>${user.age}</td> <td>${user.address}</td> <td>${user.qq}</td> <td>${user.email}</td> <td><a class="btn btn-default btn-sm" href="${pageContext.request.contextPath}/findUserServlet?id=${user.id}">修改</a> <a class="btn btn-default btn-sm" href="javascript:deleteUser(${user.id});">洗掉</a></td> </tr> </c:forEach> </table> </form>
?
修改功能
?
界面展示
?
后端代碼思路分析
FindUserServlet 類代碼撰寫思路：
//1.獲取id
String id = request.getParameter("id");
//2.呼叫Service
UserService service=new UserServiceImpl();
User user=service.findUserById(id);
//3.將user存入request
request.setAttribute("user",user);
//4.轉發到update.jsp
request.getRequestDispatcher("/update.jsp").forward(request,response);
UpdateUserServlet 類代碼撰寫思路：
//1.設定編碼
request.setCharacterEncoding("utf-8");
//2.獲取map
Map<String, String[]> map = request.getParameterMap();
//封裝物件
User user=new User();
try {
BeanUtils.populate(user,map);
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}
//4.呼叫Service修改
UserService service=new UserServiceImpl();
service.updateUser(user);
//5.跳轉到查詢所有Servlet
response.sendRedirect(request.getContextPath()+"/findUserByPageServlet");
?
前端代碼分析
-
為表單設定action屬性，設定表單提交的地址，其中
${pageContext.request.contextPath}用來替代虛擬路徑，這樣就不用再更換虛擬路徑后又一個個進行修改<form action="${pageContext.request.contextPath}/updateUserServlet" method="post"> -
設定隱藏域 提交id
<input type="hidden" name="id" value="${user.id}"> -
設定資訊回顯，點擊進入修改頁面后，依然能看到原來的資訊
普通的文本框就添加
value屬性，性別選擇添加一個value屬性和checked地址資訊的回顯用以下方法：
<c:if test="${user.address == '陜西'}"> <option value="陜西" selected>陜西</option> <option value="北京">北京</option> <option value="上海">上海</option> </c:if> <c:if test="${user.address == '北京'}"> <option value="陜西" >陜西</option> <option value="北京" selected>北京</option> <option value="上海">上海</option> </c:if> <c:if test="${user.address == '上海'}"> <option value="陜西" >陜西</option> <option value="北京">北京</option> <option value="上海" selected>上海</option> </c:if> -
給姓名設定 readonly 屬性規定輸入欄位為只讀，修改時無法修改姓名
<input type="text" class="form-control" id="name" name="name" value="${user.name}" readonly="readonly" placeholder="請輸入姓名" />
?
分頁查詢功能
因為需要做出分頁的效果，所以原來的簡單的查詢功能就不再使用了，這里就結合著分頁來介紹
?
界面展示
?
后端代碼思路分析
先創建一個PageBean物體類，物體類成員變數如下：
//總記錄數
private int totalCount;
//總頁碼
private int totalPage;
//每頁的資料
private List<T> list;
//當前頁碼
private int currentPage;
//每頁顯示的記錄數
private int rows;
FindUserByPageServlet 代碼撰寫思路：
request.setCharacterEncoding("utf-8");
//1.獲取引數
//當前頁碼
String currentPage = request.getParameter("currentPage");
//每頁顯示條數
String rows = request.getParameter("rows");
//當頁碼為0時，使當前頁碼變為1
if(currentPage==null || "".equals(currentPage)){
currentPage="1";
}
if(rows==null||"".equals(rows)){
rows="5";
}
//獲取條件查詢引數
Map<String,String[]> condition=request.getParameterMap();
//2.呼叫service查詢
UserService service=new UserServiceImpl();
PageBean<User> pb=service.findUserByPage(currentPage,rows,condition);
//3.將PageBean存入request
request.setAttribute("pb",pb);
request.setAttribute("condition",condition);
//4.轉發到 list.jsp
request.getRequestDispatcher("/list.jsp").forward(request,response);
上述代碼的第2步是一個重點，回傳的pb是根據查詢文本框輸入的資料進行查詢得到的List資料
?
前端代碼分析
<div>
<nav aria-label="Page navigation">
<ul class="pagination">
<!-- 左角標 -->
<c:if test="${pb.currentPage == 1}">
<li class="disabled">
</c:if>
<c:if test="${pb.currentPage != 1}">
<li>
</c:if>
<a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${pb.currentPage - 1}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<!-- 頁碼 -->
<c:forEach begin="1" end="${pb.totalPage}" var="i">
<c:if test="${pb.currentPage == i}">
<li class="active"><a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${i}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}">${i}</a></li>
</c:if>
<c:if test="${pb.currentPage != i}">
<li><a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${i}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}">${i}</a></li>
</c:if>
</c:forEach>
<!-- 右角標 -->
<c:if test="${pb.currentPage==pb.totalPage}">
<li class="disabled">
</c:if>
<c:if test="${pb.currentPage != pb.totalPage}">
<li>
</c:if>
<a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${pb.currentPage + 1}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
<!-- 備注 -->
<span style="font-size: 25px;margin: 5px" >
共${pb.totalCount}條資料，共${pb.totalPage}頁
</span>
</ul>
</nav>
</div>
上述代碼大致分為四個部分："<" 、頁碼數字、">"、一共多少資料
(1) 每個部分的鏈接地址都由 ${pageContext.request.contextPath} + 實際地址 + 當前頁碼 + 每頁顯示的記錄數 + 文本框的值資訊 組成，這樣就組成了復制分頁查詢的分頁條
(2) 在 “<” 和 “>” 的部分做了 if 選擇，當頁碼為1或者最大時，再點擊 “<” 和 “>” 圖示，就會顯示無法點擊的圖示，用法是給 li 標簽添上class="disabled"屬性，但是實際上還是能點擊，并且網頁會報錯，但是這個問題在后端已經解決了
(3) 在頁碼數字的部分做了 if 選擇，使每個當前頁碼的樣式與其他的頁碼樣式不一樣，用法是給 li 標簽添上class="active"屬性
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/404371.html
標籤：其他
上一篇：H5應用轉換快應用