ssm項目之Bookstrap建立頁面並分頁查詢

時間  2019-11-18
標籤 ssm 項目 bookstrap 建立 頁面 分頁 查詢 简体版
原文   原文鏈接

本文地址:http://www.cnblogs.com/maplefighting/p/7491866.html javascript

1、引入bookstrapcss

Bookstrap: http://www.bootcss.com/ html

解壓後，拷貝放到webapp/static下，而後引入，由於須要jquery，因此網上下了一個，放到webapp/static/js下java

<!-- 引入jquery -->
<script type="text/javascript" src="static/js/jquery-3.2.1.min.js"></script>
<!-- 引入樣式 -->
<link href="static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
View Code

而後要組件，要樣式，本身在文檔查後加就好了jquery

2、引入分頁插件git

由於手寫比較麻煩，咱們能夠用pagehelper，github上查一下（使用的是5.0.0）github

    <!-- 引入pageHelper分頁插件 -->
      <dependency>
        <groupId>com.github.pagehelper</groupId>
        <artifactId>pagehelper</artifactId>
        <version>5.0.0</version>
    </dependency>
View Code

在mybatis配置文件配置下，mybatis-config.xml下，放在最後面web

<plugins>
         <plugin interceptor="com.github.pagehelper.PageInterceptor"></plugin>
     </plugins>
View Code

新建EmployeeController.javaspring

package com.sgd.crud.controller; import java.util.List; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import com.github.pagehelper.PageHelper; import com.github.pagehelper.PageInfo; import com.sgd.crud.bean.Employee; import com.sgd.crud.service.EmployeeService; /** * 處理CRUD請求 * */ @Controller public class EmployeeController { @Autowired EmployeeService employeeService; /** * 查詢員工數據(分頁查詢) * @return
     */ @RequestMapping("/emps") public String getEmps(@RequestParam(value="pn", defaultValue="1")Integer pn,Model model) { //引入PageHelper分頁插件 //在查詢以前只須要調用。傳入頁碼，以及每頁大小
        PageHelper.startPage(pn,5); //startPage後面緊跟的查詢就是分頁查詢
        List<Employee> emps = employeeService.getAll(); //pageInfo包裝查詢後的結果，只須要將pageINfo交給頁面 //封裝了詳細的分頁信息，包括咱們查詢出來的數據，傳入連續顯示的頁數
        PageInfo page = new PageInfo(emps,5); model.addAttribute("pageInfo", page); return "list"; } }
View Code

EmployeeService.javabootstrap

package com.sgd.crud.service; import java.util.List; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import com.sgd.crud.bean.Employee; import com.sgd.crud.dao.EmployeeMapper; @Service public class EmployeeService { @Autowired EmployeeMapper employeeMapper; /** * 查詢全部員工 * @return
     */
    public List<Employee> getAll() { return employeeMapper.selectByExampleWithDept(null); } }
View Code

測試下

package com.sgd.crud.test; import java.util.List; import org.junit.Before; import org.junit.Test; import org.junit.runner.RunWith; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.mock.web.MockHttpServletRequest; import org.springframework.test.context.ContextConfiguration; import org.springframework.test.context.junit4.SpringJUnit4ClassRunner; import org.springframework.test.context.web.WebAppConfiguration; import org.springframework.test.web.servlet.MockMvc; import org.springframework.test.web.servlet.MvcResult; import org.springframework.test.web.servlet.request.MockMvcRequestBuilders; import org.springframework.test.web.servlet.setup.MockMvcBuilders; import org.springframework.web.context.WebApplicationContext; import com.github.pagehelper.PageInfo; import com.sgd.crud.bean.Employee; /** * 使用spring測試模塊提供的測試請求功能，測試crud * Spring4測試的時候須要Servlet3.0的支持 * */ @RunWith(SpringJUnit4ClassRunner.class) @WebAppConfiguration @ContextConfiguration(locations= {"classpath:applicationContext.xml","file:src/main/webapp/WEB-INF/dispatcherServlet-servlet.xml"}) public class MvcTest { //傳入springmvc的ioc
 @Autowired WebApplicationContext context; //虛擬mvc請求。獲取處理結果
 MockMvc mockMvc; @Before public void initMockMvc() { mockMvc = MockMvcBuilders.webAppContextSetup(context).build(); } @Test public void testPage() throws Exception { //模擬請求拿到返回值
        MvcResult result = mockMvc.perform(MockMvcRequestBuilders.get("/emps").param("pn", "1")).andReturn(); //請求成功之後，請求域中會有pageInfo，咱們能夠取出pageInfo驗證
        MockHttpServletRequest request = result.getRequest(); PageInfo pi =  (PageInfo) request.getAttribute("pageInfo"); System.out.println("當前頁碼:"+ pi.getPageNum()); System.out.println("總頁碼:"+ pi.getPages()); System.out.println("總記錄數:"+ pi.getTotal()); System.out.println("當前頁碼:"+ pi.getPageNum()); System.out.println("在頁面連續顯示的頁碼"); int[] nums = pi.getNavigatepageNums(); for (int i: nums) { System.out.println(" "+i); } //獲取員工數據
        List<Employee> list = pi.getList(); for (Employee employee : list) { System.out.println("ID:" + employee.getEmpId() + "姓名:"+ employee.getEmpName()); } } }
View Code

而後發現竟然報錯了，須要servlet3.0

因此咱們把pom裏面的servlet2.5改下3.0+ (用的是3.0.1)，把2.5的刪了

測試結果

ok！！！

接下來就寫頁面啦

3、 搭建bookstrap頁面，並進行查詢

須要組件http://v3.bootcss.com/components/

須要樣式到最上面點樣式，而後喜歡什麼就選什麼

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<jsp:forward page="/emps"></jsp:forward>
<!-- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> 引入jquery <script type="text/javascript" src="static/js/jquery-3.2.1.min.js"></script> 引入樣式 <link href="static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"> <script src="static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> </head> <body> <button type="button" class="btn btn-success">（成功）Success</button> </body>-->
</html>
View Code

list.jsp

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>員工列表</title>
<% pageContext.setAttribute("APP_PATH", request.getContextPath()); %>
<!-- 以/開始的相對路徑，找資源，以服務器路徑爲基準 -->
<!-- 引入jquery -->
<script type="text/javascript" src="${APP_PATH}/static/js/jquery-3.2.1.min.js"></script>
<!-- 引入bookstrap -->
<link href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
    <!-- 搭建顯示頁面 -->
    <div class="container">
        <!-- 標題 -->
        <div class="row">
            <div class="col-md-12">
                <h1>SSM-CRUD</h1>
            </div>
        </div>
        <!-- 按鈕 -->
        <div class="row">
            <div class="col-md-4 col-md-offset-8">
                <button class="btn btn-primary">新增</button>
                <button class="btn btn-danger">刪除</button>
            </div>
        </div>
        <!-- 表格數據 -->
        <div class="row">
            <div class="col-md-12">
                <table class="table table-hover">
                    <tr>
                        <th>#</th>
                        <th>empName</th>
                        <th>gender</th>
                        <th>email</th>
                        <th>department</th>
                        <th>操做</th>
                    </tr>
                    <tr>
                        <th>1</th>
                        <th>a</th>
                        <th>男</th>
                        <th>aaa@sgd.com</th>
                        <th>department</th>
                        <th>
                            <button class="btn btn-primary btn-sm">
                                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> 編輯 </button>
                            <button class="btn btn-danger btn-sm">
                                <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> 刪除 </button>
                        </th>
                    </tr>
                </table>
            </div>
        </div>
        <!-- 分頁數據 -->
        <div class="row">
        
            <!-- 分頁文字信息 -->
            <div class="col-md-6"> 當前記錄數:××× </div>
            <!-- 分頁條信息 -->
            <div class="col-md-6">
                <nav aria-label="Page navigation">
                 <ul class="pagination">
                     <li><a href="#">首頁</a></li>
                    <li>
                      <a href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                      </a>
                    </li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li>
                      <a href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                      </a>
                    </li>
                    <li><a href="#">末頁</a></li>
                  </ul>
                </nav>
            </div>
             
        </div>
        
    </div>
</body>
</html>
View Code

 --------------------------------------------------------------

把頁面數據查詢等寫完，頁碼以及一些邏輯判斷

 list.jsp

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>員工列表</title>
<% pageContext.setAttribute("APP_PATH", request.getContextPath()); %>
<!-- 以/開始的相對路徑，找資源，以服務器路徑爲基準 -->
<!-- 引入jquery -->
<script type="text/javascript" src="${APP_PATH}/static/js/jquery-3.2.1.min.js"></script>
<!-- 引入bookstrap -->
<link href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
    <!-- 搭建顯示頁面 -->
    <div class="container">
        <!-- 標題 -->
        <div class="row">
            <div class="col-md-12">
                <h1>SSM-CRUD</h1>
            </div>
        </div>
        <!-- 按鈕 -->
        <div class="row">
            <div class="col-md-4 col-md-offset-8">
                <button class="btn btn-primary">新增</button>
                <button class="btn btn-danger">刪除</button>
            </div>
        </div>
        <!-- 表格數據 -->
        <div class="row">
            <div class="col-md-12">
                <table class="table table-hover">
                    <tr>
                        <th>#</th>
                        <th>empName</th>
                        <th>gender</th>
                        <th>email</th>
                        <th>department</th>
                        <th>操做</th>
                    </tr>
                    <c:forEach items="${pageInfo.list }" var="emp">
                        <tr>
                            <th>${emp.empId }</th>
                            <th>${emp.empName }</th>
                            <th>${emp.gender=="M"?"男":"女" }</th>
                            <th>${emp.email }</th>
                            <th>${emp.department.deptName }</th>
                            <th>
                                <button class="btn btn-primary btn-sm">
                                    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> 編輯 </button>
                                <button class="btn btn-danger btn-sm">
                                    <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> 刪除 </button>
                            </th>
                        </tr>
                    </c:forEach>
                    
                </table>
            </div>
        </div>
        <!-- 分頁數據 -->
        <div class="row">
        
            <!-- 分頁文字信息 -->
            <div class="col-md-6"> 當前${pageInfo.pageNum}頁,總${pageInfo.pages}頁,總${pageInfo.total }條記錄 </div>
            <!-- 分頁條信息 -->
            <div class="col-md-6">
                <nav aria-label="Page navigation">
                 <ul class="pagination">
                 <li><a href="${APP_PATH }/emps?pn=1">首頁</a></li>
                     <c:if test="${pageInfo.hasPreviousPage }">
                         <li>
                          <a href="${APP_PATH }/emps?pn=${pageInfo.pageNum-1}" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                          </a>
                         </li>
                     </c:if>
                     
                    <c:forEach items="${pageInfo.navigatepageNums }" var="page_Num">
                        <c:if test="${page_Num==pageInfo.pageNum }">
                            <li class="active"><a href="#">${page_Num }</a></li>
                        </c:if>
                        <c:if test="${page_Num!=pageInfo.pageNum }">
                            <li><a href="${APP_PATH }/emps?pn=${page_Num }">${page_Num }</a></li>
                        </c:if>    
                    </c:forEach>
                    <c:if test="${pageInfo.hasNextPage }">
                         <li>
                          <a href="${APP_PATH }/emps?pn=${pageInfo.pageNum+1}" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                          </a>
                         </li>
                     </c:if>
                    
                    <li><a href="${APP_PATH}/emps?pn=${pageInfo.pages} ">末頁</a></li>
                  </ul>
                </nav>
            </div>
             
        </div>
        
    </div>
</body>
</html>
View Code

 暫時就完成了一部分啦！！這樣整合也就成功了，還少了增長刪除修改的功能

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程