前後端分離——使用Ajax跨域請求資料並分頁展示
阿新 • • 發佈：2018-12-19
前後端分離的意思是，前後端只通過 JSON 來交流，元件化、工程化不需要依賴後端去實現：
下面以程式碼來講解使用Ajax跨域請求後端資料並分頁展示在前臺中：
後端程式碼如下：
Dao層：資料訪問層，實現對資料表的Select(查詢)，Insert(插入)，Update(更新)，Delete(刪除)等操作，以及物件實體的持久化；
BaseDao 執行資料庫操作的工具類
package com.cn.Demo.dao; import com.cn.Demo.util.DatabaseUtil; import java.sql.Connection; import java.sql.PreparedStatement;import java.sql.ResultSet; import java.sql.SQLException; /** * 執行資料庫操作的工具類。 */ public class BaseDao { private Connection conn; /** * 增、刪、改操作的方法 * * @param sql sql語句 * @param prams 引數陣列 * @return 執行結果 * @throws SQLException */ protected int executeUpdate(String sql, Object... params) throwsSQLException { int result = 0; conn=DatabaseUtil.getConnection(); PreparedStatement pstmt = null; try { pstmt = conn.prepareStatement(sql); for (int i = 0; i < params.length; i++) { pstmt.setObject(i + 1, params[i]); } result= pstmt.executeUpdate(); } catch (SQLException e) { e.printStackTrace(); throw e; } finally { DatabaseUtil.closeAll(null, pstmt, null); } return result; } /** * 查詢操作的方法 * * @param sql sql語句 * @param params 引數陣列 * @return 查詢結果集 * @throws SQLException */ protected ResultSet executeQuery(String sql, Object... params) throws SQLException { PreparedStatement pstmt = null; conn=DatabaseUtil.getConnection(); ResultSet rs = null; try { pstmt = conn.prepareStatement(sql); for (int i = 0; i < params.length; i++) { pstmt.setObject(i + 1, params[i]); } rs = pstmt.executeQuery(); } catch (SQLException e) { e.printStackTrace(); throw e; } return rs; } }
UserDao使用者資訊分頁展示的介面：
package com.cn.Demo.dao; import com.cn.Demo.vo.User; import java.util.List; import java.util.Map; public interface UserDao { /** * 分頁查詢資料 * @param param 分頁內容 * @return 資料集合 */ public List<User> getPagination(Map<String, Object> param); }
UserDaoImpl：UserDao介面的實現類
package com.cn.Demo.dao.Impl; import com.cn.Demo.dao.BaseDao; import com.cn.Demo.dao.UserDao; import com.cn.Demo.entity.User; import com.cn.Demo.util.DatabaseUtil; import com.cn.Demo.vo.User; import java.sql.ResultSet; import java.sql.SQLException; import java.util.ArrayList; import java.util.List; import java.util.Map; public class UserDaoImpl extends BaseDao implements UserDao { @Override public List<User> getPagination(Map<String, Object> param) { List<User> userList = new ArrayList<User>(); ResultSet rs = null; try { //拼接Sql語句
StringBuffer sb = new StringBuffer(); sb.append("select * from easybuy_user ");
if (param.get("pageIndex") != null && param.get("pageSize") != null) { sb.append(" Limit ?,? "); } //拼接可變引數 Object[] pa = new Object[]{param.get("pageIndex"), param.get("pageSize")}; //獲取結果集 rs = executeQuery(sb.toString(),pa); while (rs.next()) { User user = new User(); user.setId(rs.getInt("id")); user.setLoginName(rs.getString("loginName")); user.setUserName(rs.getString("userName")); user.setPassword(rs.getString("password")); user.setSex(rs.getInt("sex")); user.setIdentityCode(rs.getString("identityCode")); user.setEmail(rs.getString("email")); user.setMobile(rs.getString("mobile")); user.setType(rs.getInt("type")); userList.add(user); } } catch (SQLException e) { e.printStackTrace(); } finally { DatabaseUtil.closeAll(null, null, rs); } return userList; } }
entity：User的實體類（對應資料庫的欄位）
package com.cn.Demo.entity; import java.io.Serializable; public class User implements Serializable { private Integer id=null; //使用者id private String loginName=null; //使用者登入名 private String userName=null;//使用者名稱稱 private String password=null;//登陸密碼 private Integer sex=null;//使用者性別 private String identityCode=null;//使用者身份證號 private String email=null;//使用者郵箱 private String mobile=null;//使用者手機 private Integer type=null;//使用者型別 //省略getter和setter方法 }
service層：業務邏輯層負責系統領域業務的處理，負責邏輯性資料的生成、處理及轉換。對所輸入的邏輯性資料的正確性及有效性負責，但對輸出的邏輯性資料及使用者性資料的正確性不負責，對資料的呈現樣式不負責；
UserService ：業務邏輯層的介面
package com.cn.Demo.service; import com.cn.Demo.entity.User; import com.cn.Demo.vo.User; import java.util.List; import java.util.Map; public interface UserService { /** * 分頁查詢資料 * @param param 分頁內容 * @return 資料集合 */ public List<User> getPagination(Map<String, Object> param); }
UserServiceImpl：UserService介面的實現類
package com.cn.Demo.service.Impl; import com.cn.Demo.dao.Impl.UserDaoImpl; import com.cn.Demo.dao.UserDao; import com.cn.Demo.entity.User; import com.cn.Demo.service.UserService; import com.cn.Demo.vo.User; import java.util.List; import java.util.Map; public class UserServiceImpl implements UserService { private UserDao userDao = new UserDaoImpl(); @Override public List<User> getPagination(Map<String, Object> param) { return userDao.getPagination(param); } }
servlet：實現對前端資料的列印，將資料輸出給前端
userServlet
package com.cn.Demo.servlet; import com.alibaba.fastjson.JSONObject; import com.cn.Demo.dto.ResultDTO; import com.cn.Demo.entity.User; import com.cn.Demo.service.Impl.UserServiceImpl; import com.cn.Demo.service.UserService; import com.cn.Demo.vo.UserVO; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.util.HashMap; import java.util.List; import java.util.Map; @WebServlet(name = "userServlet", value = "/user") public class userServlet extends HttpServlet { private UserService userService = new UserServiceImpl(); int pageSize = 5;//頁面大小 int pageIndex = 1;//當前頁數 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); response.setCharacterEncoding("utf-8"); response.setContentType("application/json;charset=utf-8"); //開啟跨域請求 response.setHeader("Access-Control-Allow-Origin","*"); response.setHeader("Access-Control-Allow-Methods","POST,GET"); Map<String, Object> param = new HashMap<>(); //獲取分頁引數以及頁碼引數 if (request.getParameter("pageIndex") != null) { pageIndex = Integer.valueOf(request.getParameter("pageIndex")); } if (request.getParameter("pageSize") != null) { pageSize = Integer.valueOf(request.getParameter("pageSize")); } param.put("pageIndex", (pageIndex - 1) * pageSize); param.put("pageSize", pageSize); List<User> list = userService.getPagination(param);//輸出前臺 response.getWriter().write(JSONObject.toJSONString(dot,true)); } }
util：工具類：
ConfigManager：資料庫引數配置檔案查詢工具類
package com.cn.Demo.util; import java.io.IOException; import java.io.InputStream; import java.util.Properties; /** * 資料庫引數配置檔案查詢工具類 * @author 逆風〠飛 * */ public class ConfigManager { private static Properties props = null; static { InputStream is = null; is = ConfigManager.class.getClassLoader().getResourceAsStream("DB.properties"); if (is == null) throw new RuntimeException("找不到資料庫引數配置檔案"); props = new Properties(); try { props.load(is); } catch (IOException e) { throw new RuntimeException("資料庫配置引數載入錯誤！", e); } finally { try { is.close(); } catch (IOException e) { e.printStackTrace(); } } } public static String getProperty(String key) { return props.getProperty(key); } }
DatabaseUtil ：資料庫引數配置檔案查詢工具類
package com.cn.Demo.util; import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statement; /** * 資料庫連線與關閉工具類 * */ public class DatabaseUtil { private static String driver = ConfigManager.getProperty("jdbc.driver");// 資料庫驅動字串 private static String url = ConfigManager.getProperty("jdbc.url"); // 連線URL字元�? private static String user = ConfigManager.getProperty("jdbc.username"); // 資料庫使用者名稱 private static String password = ConfigManager.getProperty("jdbc.password"); // 使用者密碼 static { try { Class.forName(driver); } catch (ClassNotFoundException e) { e.printStackTrace(); } } /** * 獲取資料庫連線物件 */ public static Connection getConnection() throws SQLException { // 獲取連線並捕獲異常 Connection conn = null; try { conn = DriverManager.getConnection(url, user, password); } catch (SQLException e) { e.printStackTrace(); throw e; } return conn;// 返回連線物件 } /** * * 關閉資料庫連連線 * @param conn 資料庫連線 * @param stmt Statement物件 * @param rs 結果集 */ public static void closeAll(Connection conn, Statement stmt, ResultSet rs) { // 若結果集物件不為空，則關閉 try { if (rs != null && !rs.isClosed()) rs.close(); } catch (Exception e) { e.printStackTrace(); } // 若Statement物件不為空，則關閉 try { if (stmt != null && !stmt.isClosed()) stmt.close(); } catch (Exception e) { e.printStackTrace(); } // 若資料庫連線物件不為空，則關閉 try { if (conn != null && !conn.isClosed()) conn.close(); } catch (Exception e) { e.printStackTrace(); } } }
前端程式碼：
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/index.css"> <script rel="script" src="js/jquery-3.3.1.min.js"></script> <script rel="script" src="js/index.js"></script> </head> <body> <div class="container"> <div class="left"> <h2>此處圖片為固定參照物</h2> <img src="image/pic02.jpg" alt=""> </div> <div class="right"> <table class="tb" border="0" cellpadding="0" cellspacing="0"> <tr> <th>id</th> <th>賬號</th> <th>暱稱</th> <th>性別</th> <th>手機</th> <th>郵箱</th> <th>型別</th> <th>identityCode</th> <th>操作</th> </tr> <tbody id="t_body"> </tbody> </table> <div class="page"> <button id="firstPage">首頁</button>    <button id="previous">上一頁</button>    第<input type="text" id="index" value="1" size="1" >頁    <button id="next">下一頁</button>    <button id="last">尾頁</button> <div id="pageCount" style="display: inline-block"></div> </div> </div> </div> </body> </html>
css:簡單的css佈局
*{margin: 0;padding: 0} .container{width: 90%;border: 1px solid #999;margin: 0px auto;margin: 80px} .container>div{float: left} .container:after{content: '';display: block;clear: both} .left{width: 24%;border: 1px solid #f40000} .right{width: 70%;border: 1px solid rgba(255,255,255,.5)} .tb{width: 1050px} .tb th{background-color: #108ee9;color: #fff} .tb tr{height: 40px;line-height: 40px;text-align: center} .tb tr:hover{background: #9af5ff } h2{text-align: center} img{width: 330px;padding: 1px} .page{margin-left: 35%;margin-top: 10px;background-color: #f0f0f0;width: 297px;} #index{text-align: center;border: none;font-weight: bold}
js：Ajax非同步請求後臺資料並在前臺並分頁展示
var pageSize = "5";//每頁行數 var pageIndex = "1";//當前頁 var totalPageCount = "0";//總頁數 var totalCount = "0";//總記錄數 //jquery程式碼隨著document載入完畢而載入 $(document).ready(function () { //分頁查詢 function queryForPages() { $.ajax({ url: 'http://localhost:8080/user', type: 'post', dataType: 'json', data: "pageIndex=" + pageIndex + "&pageSize=" + pageSize, success: function callbackFun(data) { //清空資料 clearDate(); //查詢資料 fillTable(data); } }); } //填充資料 function fillTable(data) { var trs = "";//不初始化字串"",會預設"undefined" for (var i in data.data) { totalCount++; var tr="<tr>" +"<td>"+data.data[i].id+"</td>" +"<td>"+data.data[i].loginName+"</td>" +"<td>"+data.data[i].userName+"</td>" +"<td>"+data.data[i].sex+"</td>" +"<td>"+data.data[i].mobile+"</td>" +"<td>"+data.data[i].email+"</td>" +"<td>"+data.data[i].type+"</td>" +"<td>"+data.data[i].identityCode+"</td>" +"<td>刪除</td>" +"</tr>"; trs += tr; $("#t_body").html(trs); } totalPageCount = (totalCount % pageSize == 0) ? (totalCount / pageSize) : (totalCount / pageSize + 1); } //清空資料 function clearDate() { $("#t_body").html(""); } //首頁 $("#firstPage").click(function () { //var index=$("#index").val(); pageIndex = "1"; $("#index").val(pageIndex); queryForPages(); }); //上一頁 $("#previous").click(function () { if (pageIndex > 1) { pageIndex--; } $("#index").val(pageIndex); queryForPages(); }); //下一頁 $("#next").click(function () { if (pageIndex < totalPageCount) { pageIndex++; } $("#index").val(pageIndex); queryForPages(); }); //尾頁 $("#last").click(function () { pageIndex = totalPageCount; $("#index").val(pageIndex); queryForPages(); }); });
Mysql資料庫欄位如下：
展示效果：
