Spring Data Jpa+SpringMVC+Jquery.pagination.js實現分頁示例

本博客介紹基於Spring Data這款orm框架加上Jquery.pagination插件實現的分頁功能。

本博客是基於一款正在開發中的github開源項目的，項目代碼地址：https://github.com/u014427391/jeeplatform

歡迎star(收藏)或者可以下載去學習，還在開發…

介紹一下Spring Data框架

spring Data : Spring 的一個子項目。用於簡化數據庫訪問，支持NoSQL 和關係數據存儲。

下面給出SpringData 項目所支持NoSQL 存儲：

* MongoDB （文檔數據庫）
* Neo4j（圖形數據庫）
* Redis（鍵/值存儲）
* Hbase（列族數據庫）

SpringData 項目所支持的關係數據存儲技術：

* JDBC
* JPA

JPA Spring Data : 致力於減少數據訪問層(DAO) 的開發量。開發者只要寫好持久層接口就好，然後其它的框架會幫程序員實現。

開發步驟：

【Spring Data實現數據獲取】

本項目是採用maven的，所以可以參考一下我的maven配置：

 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd"> <parent> <artifactId>muses</artifactId> <groupId>org.muses</groupId> <version>1.0-SNAPSHOT</version> </parent> <modelVersion>4.0.0</modelVersion> <artifactId>jeeplatform-admin</artifactId> <packaging>war</packaging> <name>jeeplatform-admin Maven Webapp</name> <url>http://maven.apache.org</url> <properties> <spring.version>4.1.5.RELEASE</spring.version> <spring-data-jpa.version>1.4.2.RELEASE</spring-data-jpa.version> <spring-data-commons.version>1.6.2.RELEASE</spring-data-commons.version> <hibernate.version>4.3.8.Final</hibernate.version> <shiro.version>1.2.3</shiro.version> <lucene.version>4.7.2</lucene.version> <druid.version>1.0.9</druid.version> <poi.version>3.7</poi.version> </properties> <dependencies> <!-- module start --> <dependency> <groupId>org.muses</groupId> <artifactId>jeeplatform-core</artifactId> <version>${jeeplatform.core.version}</version> </dependency> <dependency> <groupId>org.muses</groupId> <artifactId>jeeplatform-common</artifactId> <version>1.0-SNAPSHOT</version> </dependency> <dependency> <groupId>org.muses</groupId> <artifactId>jeeplatform-oss</artifactId> <version>${jeeplatform.oss.version}</version> </dependency> <dependency> <groupId>org.muses</groupId> <artifactId>jeeplatform-upms</artifactId> <version>1.0-SNAPSHOT</version> </dependency> <!-- moudle end--> <!-- servlet start--> <dependency> <groupId>javax.servlet</groupId> <artifactId>servlet-api</artifactId> <version>2.5</version> <scope>provided</scope> </dependency> <!-- servlet end --> <!-- jstl start--> <dependency> <groupId>jstl</groupId> <artifactId>jstl</artifactId> <version>1.2</version> </dependency> <dependency> <groupId>taglibs</groupId> <artifactId>standard</artifactId> <version>1.1.2</version> </dependency> <!-- jstl end --> <!-- log4j start--> <dependency> <groupId>log4j</groupId> <artifactId>log4j</artifactId> <version>${log4j.version}</version> </dependency> <!-- log4j end--> <!-- json解析需要的jar start--> <dependency> <groupId>commons-beanutils</groupId> <artifactId>commons-beanutils</artifactId> <version>1.8.3</version> </dependency> <dependency> <groupId>commons-collections</groupId> <artifactId>commons-collections</artifactId> <version>3.2.1</version> </dependency> <dependency> <groupId>net.sf.ezmorph</groupId> <artifactId>ezmorph</artifactId> <version>1.0.6</version> </dependency> <dependency> <groupId>commons-lang</groupId> <artifactId>commons-lang</artifactId> <version>2.5</version> </dependency> <dependency> <groupId>commons-logging</groupId> <artifactId>commons-logging</artifactId> <version>1.2</version> </dependency> <dependency> <groupId>net.sf.json-lib</groupId> <artifactId>json-lib</artifactId> <version>2.4</version> <type>jar</type> <classifier>jdk15</classifier> <scope>compile</scope> </dependency> <!-- json解析需要的jar end --> <!-- mysql start--> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>${mysql.version}</version> </dependency> <!-- mysql end--> <!-- commons --> <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>2.0.1</version> </dependency> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.2.2</version> </dependency> <!-- commons --> <!-- spring framework start--> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-core</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-beans</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-context</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-context-support</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-jdbc</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-tx</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-test</artifactId> <version>${spring.version}</version> <scope>test</scope> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-web</artifactId> <version>${spring.version}</version> </dependency> <!-- spring framework end --> <!-- spring aop start--> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-aop</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.aspectj</groupId> <artifactId>aspectjweaver</artifactId> <version>1.6.10</version> </dependency> <!-- spring aop end --> <!-- springMVC start--> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>${spring.version}</version> </dependency> <!-- springMVC end --> <!-- spring data start--> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-orm</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework.data</groupId> <artifactId>spring-data-jpa</artifactId> <version>${spring-data-jpa.version}</version> </dependency> <dependency> <groupId>org.springframework.data</groupId> <artifactId>spring-data-commons</artifactId> <version>${spring-data-commons.version}</version> </dependency> <!-- spring data end --> <!-- hibernate jpa start--> <dependency> <groupId>org.hibernate.javax.persistence</groupId> <artifactId>hibernate-jpa-2.1-api</artifactId> <version>1.0.0.Final</version> </dependency> <dependency> <groupId>org.hibernate</groupId> <artifactId>hibernate-core</artifactId> <version>${hibernate.version}</version> </dependency> <dependency> <groupId>org.hibernate</groupId> <artifactId>hibernate-entitymanager</artifactId> <version>${hibernate.version}</version> </dependency> <!-- hibernate jpa end --> <!-- hibernate echache start--> <dependency> <groupId>org.slf4j</groupId> <artifactId>slf4j-api</artifactId> <version>1.6.1</version> </dependency> <dependency> <groupId>net.sf.ehcache</groupId> <artifactId>ehcache-core</artifactId> <version>2.5.0</version> </dependency> <dependency> <groupId>org.hibernate</groupId> <artifactId>hibernate-ehcache</artifactId> <version>${hibernate.version}</version> </dependency> <!-- hibernate echache end --> <!-- 阿里的連接池druid start--> <dependency> <groupId>com.alibaba</groupId> <artifactId>druid</artifactId> <version>${druid.version}</version> </dependency> <!-- 阿里的連接池druid end--> <!--shiro start--> <dependency> <groupId>org.apache.shiro</groupId> <artifactId>shiro-all</artifactId> <version>${shiro.version}</version> </dependency> <!-- shiro end--> <!-- velocity start--> <dependency> <groupId>org.apache.velocity</groupId> <artifactId>velocity</artifactId> <version>1.6</version> </dependency> <dependency> <groupId>org.apache.velocity</groupId> <artifactId>velocity-tools</artifactId> <version>2.0</version> </dependency> <!-- velocity end--> <!-- lucene全文搜素引擎start--> <dependency> <groupId>org.apache.lucene</groupId> <artifactId>lucene-core</artifactId> <version>${lucene.version}</version> </dependency> <dependency> <groupId>org.apache.lucene</groupId> <artifactId>lucene-analyzers-common</artifactId> <version>${lucene.version}</version> </dependency> <dependency> <groupId>org.apache.lucene</groupId> <artifactId>lucene-queryparser</artifactId> <version>${lucene.version}</version> </dependency> <dependency> <groupId>org.apache.lucene</groupId> <artifactId>lucene-memory</artifactId> <version>${lucene.version}</version> </dependency> <dependency> <groupId>org.apache.lucene</groupId> <artifactId>lucene-highlighter</artifactId> <version>${lucene.version}</version> </dependency> <!-- 注意IKAnalyzer沒有maven坐標,請自行添加到本地倉庫--> <dependency> <groupId>org.wltea.analyzer</groupId> <artifactId>IKAnalyzer</artifactId> <version>2012FF_u1</version> <scope>system</scope> <systemPath>${basedir}/src/main/webapp/WEB-INF/lib/IKAnalyzer2012FF_u1.jar</systemPath> </dependency> <!-- lucene全文搜素引擎end --> <!-- log4j start--> <dependency> <groupId>log4j</groupId> <artifactId>log4j</artifactId> <version>${log4j.version}</version> </dependency> <!-- log4j end--> <!-- json解析需要的jar start--> <dependency> <groupId>commons-beanutils</groupId> <artifactId>commons-beanutils</artifactId> <version>1.8.3</version> </dependency> <dependency> <groupId>commons-collections</groupId> <artifactId>commons-collections</artifactId> <version>3.2.1</version> </dependency> <dependency> <groupId>net.sf.ezmorph</groupId> <artifactId>ezmorph</artifactId> <version>1.0.6</version> </dependency> <dependency> <groupId>commons-lang</groupId> <artifactId>commons-lang</artifactId> <version>2.5</version> </dependency> <dependency> <groupId>commons-logging</groupId> <artifactId>commons-logging</artifactId> <version>1.2</version> </dependency> <dependency> <groupId>net.sf.json-lib</groupId> <artifactId>json-lib</artifactId> <version>2.4</version> <type>jar</type> <classifier>jdk15</classifier> <scope>compile</scope> </dependency> <!-- json解析需要的jar end --> <!-- poi start--> <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi</artifactId> <version>${poi.version}</version> </dependency> <!-- poi end--> <!-- email start--> <dependency> <groupId>com.sun.mail</groupId> <artifactId>javax.mail</artifactId> <version>1.5.6</version> </dependency> <!-- email end--> </dependencies> <build> <finalName>jeeplatform-admin</finalName> </build></project>

設計好數據庫，編寫一個實體類：

 package org.muses.jeeplatform.model.entity;import java.util.Date;import java.util.Set;import javax.persistence.CascadeType;import javax.persistence.Column;import javax.persistence.Entity;import javax.persistence.FetchType;import javax.persistence.GeneratedValue;import javax.persistence.GenerationType;import javax.persistence.Id;import javax.persistence.JoinColumn;import javax.persistence.JoinTable;import javax.persistence.ManyToMany;import javax.persistence.Table;import javax.persistence.Temporal;import javax.persistence.TemporalType;/** * 用戶信息的實體類* @author Nicky */@Entity@Table(name="sys_user")public class User { /** 用戶Id**/ private int id; /** 用戶名**/ private String username; /** 用戶密碼**/ private String password; /** 手機號**/ private int phone; /** 性別**/ private String sex; /** 郵件**/ private String email; /** 備註**/ private String mark; /** 用戶級別**/ private String rank; /** 最後一次時間**/ private Date lastLogin; /** 登錄ip**/ private String loginIp; /** 圖片路徑**/ private String imageUrl; /** 註冊時間**/ private Date regTime; /** 賬號是否被鎖定**/ private Boolean locked = Boolean.FALSE; private Set<Role> roles; @GeneratedValue(strategy=GenerationType.IDENTITY) @Id public int getId() { return id; } public void setId(int id) { this.id = id; } @Column(unique=true,length=100,nullable=false) public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } @Column(length=100,nullable=false) public String getPassword() { return password; } public void setPassword(String password) { this.password = password; } public int getPhone() { return phone; } public void setPhone(int phone) { this.phone = phone; } @Column(length=6) public String getSex() { return sex; } public void setSex(String sex) { this.sex = sex; } @Column(length=100) public String getEmail() { return email; } public void setEmail(String email) { this.email = email; } @Column(length=30) public String getMark() { return mark; } public void setMark(String mark) { this.mark = mark; } @Column(length=10) public String getRank() { return rank; } public void setRank(String rank) { this.rank = rank; } @Temporal(TemporalType.DATE) public Date getLastLogin() { return lastLogin; } public void setLastLogin(Date lastLogin) { this.lastLogin = lastLogin; } @Column(length=100) public String getLoginIp() { return loginIp; } public void setLoginIp(String loginIp) { this.loginIp = loginIp; } @Column(length=100) public String getImageUrl() { return imageUrl; } public void setImageUrl(String imageUrl) { this.imageUrl = imageUrl; } @Temporal(TemporalType.DATE) @Column(nullable=false) public Date getRegTime() { return regTime; } public void setRegTime(Date regTime) { this.regTime = regTime; } public Boolean getLocked() { return locked; } public void setLocked(Boolean locked) { this.locked = locked; }}

編寫接口實現Spring Data框架的PagingAndSortingRepository接口

package org.muses.jeeplatform.repository;import org.muses.jeeplatform.model.entity.User;import org.springframework.data.domain.Page;import org.springframework.data.domain.Pageable;import org.springframework.data.jpa.repository.JpaRepository;import org.springframework.data.jpa.repository.Query;import org.springframework.data.repository.PagingAndSortingRepository;import org.springframework.data.repository.query.Param;import java.util.Date;public interface UserRepository extends PagingAndSortingRepository<User, Integer> { /*User findByUsername(String username); @Query("from User u where u.username=:username and u.password=:password") User findByUsernameAndPassword(@Param("username") String username, @Param("password") String password); @Query("from User u where u.id=:id") User findById(@Param("id") int id); @Query("from User u where date_format(u.lastLogin,'yyyy-MM-dd') between date_format((:startDate),'yyyy-MM-dd') and date_format((:endDate),'yyyy-MM-dd')") Page<User> searchU(@Param("startDate")Date startDate,@Param("endDate")Date endDate, Pageable pageable);*/}

業務類實現：

 package org.muses.jeeplatform.service;import java.util.*;import org.muses.jeeplatform.model.entity.User;import org.muses.jeeplatform.repository.UserRepository;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.data.domain.Page;import org.springframework.data.domain.PageRequest;import org.springframework.data.domain.Sort;import org.springframework.data.jpa.domain.Specification;import org.springframework.stereotype.Service;import org.springframework.transaction.annotation.Transactional;import javax.persistence.criteria.CriteriaBuilder;import javax.persistence.criteria.CriteriaQuery;/** * @description 用戶信息管理的業務類* @author Nicky * @date 2017年3月6日*/@Servicepublic class UserService { @Autowired UserRepository userRepository; /** * 構建PageRequest對象* @param num * @param size * @param asc * @param string * @return */ private PageRequest buildPageRequest(int num, int size, Sort.Direction asc, String string) { return new PageRequest(num-1, size,null,string); } /** * 獲取所有的菜單信息並分頁顯示* @param pageNo * 當前頁面數* @param pageSize * 每一頁面的頁數* @return */ @Transactional public Page<User> findAll(int pageNo, int pageSize, Sort.Direction dir, String str){ PageRequest request = buildPageRequest(pageNo, pageSize, dir, str); Page<User> users = userRepository.findAll(request); return users; }}

控制類，採用SpringMVC框架，先編寫一個baseController，實現一些通用功能的封裝：

 package org.muses.jeeplatform.web.controller;import javax.servlet.http.HttpServletRequest;import org.slf4j.Logger;import org.slf4j.LoggerFactory;import org.springframework.web.context.request.RequestContextHolder;import org.springframework.web.context.request.ServletRequestAttributes;import org.springframework.web.servlet.ModelAndView;public class BaseController { Logger log = null; /** * 獲取日誌對象* @return */ public Logger getInstance(){ if(log == null){ log = LoggerFactory.getLogger(BaseController.class); } return log; } /** * 得到request對象*/ public HttpServletRequest getRequest() { HttpServletRequest request = ((ServletRequestAttributes)RequestContextHolder.getRequestAttributes()).getRequest(); return request; } /** * 得到ModelAndView */ public ModelAndView getModelAndView(){ return new ModelAndView(); }}

控制類實現：

 package org.muses.jeeplatform.web.controller;import net.sf.json.JSONArray;import net.sf.json.JSONObject;import net.sf.json.JsonConfig;import org.apache.commons.collections.map.HashedMap;import org.muses.jeeplatform.core.Constants;import org.muses.jeeplatform.core.ExcelViewWrite;import org.muses.jeeplatform.core.JavaEmailSender;import org.muses.jeeplatform.model.entity.User;import org.muses.jeeplatform.service.UserService;import org.muses.jeeplatform.utils.DateJsonValueProcessor;import org.muses.jeeplatform.utils.DateUtils;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.data.domain.Page;import org.springframework.data.domain.Sort;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 org.springframework.web.bind.annotation.ResponseBody;import org.springframework.web.servlet.ModelAndView;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.PrintWriter;import java.util.*;/** * Created by Nicky on 2017/7/29. */@RequestMapping("/user")@Controllerpublic class UserController extends BaseController{ @Autowired UserService userService; /** * 查詢所有管理員信息並分頁顯示* @param request * @param response * @param model * @return */ @RequestMapping(value = "/queryAll",produces = "application/json;charset=UTF-8") @ResponseBody public ModelAndView findAll(HttpServletRequest request, HttpServletResponse response, Model model){ //當前頁String pageIndexStr = request.getParameter("pageIndex"); //每一頁的頁數int pageSize = Constants.PAGE_SIZE; ModelAndView mv = this.getModelAndView(); Page<User> userPage; if(pageIndexStr==null||"".equals(pageIndexStr)){ pageIndexStr = "0"; } int pageIndex = Integer.parseInt(pageIndexStr); userPage = userService.findAll(pageIndex+1, pageSize, Sort.Direction.ASC,"id"); mv.addObject("totalCount",userPage.getTotalElements()); mv.addObject("pageIndex",pageIndex);// JsonConfig cfg = new JsonConfig();// cfg.setExcludes(new String[]{"handler","hibernateLazyInitializer"}); JsonConfig jcg = new JsonConfig(); jcg.registerJsonValueProcessor(Date.class, new DateJsonValueProcessor("yyyy-mm-dd")); JSONArray jsonArray = JSONArray.fromObject(userPage.getContent(),jcg); //System.out.println(jsonArray.toString()); mv.addObject("users",jsonArray.toString()); mv.setViewName("admin/user/sys_user_list"); return mv; }}

【前端頁面實現】

頁面View實現，引用jquery.pagination.js （分頁js），跟pagination.css（分頁樣式css）。

可以去這裡下載：//www.VeVB.COm/article/105013.htm

 <%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%><% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE html><html lang="zh-CN"><head> <base href="<%=basePath %>" rel="external nofollow" > <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Insert title here</title> <!-- bootstrap樣式--> <link type="text/css" rel="stylesheet" href="<%=basePath%>plugins/page/css/bootstrap-3.3.5.min.css" rel="external nofollow" /> <!-- jquery.pagination所需CSS --> <link type="text/css" rel="stylesheet" href="<%=basePath%>plugins/page/css/pagination.css" rel="external nofollow" /> <script type="text/javascript" src="<%=basePath%>plugins/page/js/jquery.min.js"></script> <!-- jquery.pagination所需JS 注意必須放在jquery.js後面--> <script type="text/javascript" src="<%=basePath%>plugins/page/js/jquery.pagination.js"></script> <script type="text/javascript"> /** 分頁操作，使用jquery.pagination插件add by nicky 20170729 start **/ //當前頁var pageIndex = Number(${pageIndex}); //數據量var totalCount = Number(${totalCount}); $(document).ready(function () { //加入分頁的綁定$("#Pagination").pagination(totalCount, { callback : pageselectCallback, prev_text : '< 上一頁', next_text: '下一頁>', items_per_page : 6, num_display_entries : 6, current_page : pageIndex, num_edge_entries : 1, link_to: "user/queryAll?pageIndex=__id__" //分頁的js中會自動把"__id__"替換為當前的數。0 }); var html = ""; var data = ${users}; $.each(data,function(idx,obj){ var id = obj.id; var username = obj.username; var mark = obj.mark; var phone = obj.phone; var email = obj.email; var lastLogin = obj.lastLogin; var loginIp = obj.loginIp; html += "<tr><td><input type='checkbox' name='id' id='id' value=" + id + " /></td>" + "<td>"+id+"</td>"+ "<td>"+username+"</td>"+ "<td>"+mark+"</td>"+ "<td>"+phone+"</td>"+ "<td>"+email+"</td>"+ "<td>"+lastLogin+"</td>"+ "<td>"+loginIp+"</td>"+ "<td><a href='javascript:openEditDialog("+id+");' class='bounceIn'>配置角色</a>"+ "</tr>"; }); $("#content").append(html); }); //這個事件是在翻頁時候用的function pageselectCallback(index, jq) { } /** 分頁操作，使用jquery.pagination插件add by nicky 20170729 end **/ //checkbox的全選/反選var isCheckAll = false; function doCheck(){ if(isCheckAll){ $("input[type='checkbox']").each(function(){ this.checked = false; }); isCheckAll = false; }else{ $("input[type='checkbox']").each(function(){ this.checked = true; }); isCheckAll = true; } } </script></head><body><br><div> <div> <div> <div> <div> <form> <input type="button" value="發送郵件" onclick="sendEmail();" /> <input type="button" value="發送短信" onclick="sendSms();" /> <input type="button" value="導出Excel表" onclick="exportExcel();" /> <br><br><!-- <input type="text" id="keyword" placeholder="請輸入關鍵詞"> 日期從<input type="text" placeholder="請輸入開始日期" value="${startdate }" id="startDate" name="startdate" onclick="WdatePicker({dateFmt:'yyyy-MM-dd' ,maxDate:'#F{$dp.$D(/'endDate/')}'});"/> 到<input type="text" placeholder="請輸入結束日期" value="${enddate }" id="endDate" name="enddate" onclick="WdatePicker({dateFmt:'yyyy-MM-dd' ,minDate:'#F{$dp.$D(/'startDate/')}'});" /> <input type="button" value="Search" onclick="doSearch();"/>--> </form> <table id="mTable"> <thead> <tr> <th><input type="checkbox" onclick="doCheck();" /></th> <th>序號</th> <th>用戶名</th> <th>描述</th> <th>手機</th> <th>郵箱</th> <th>最近登錄</th> <th>上次登錄IP</th> <th>操作</th> </tr> </thead> <tbody id="content"> </tbody> </table> <div id="Pagination"></div> <!-- demo --> </div> </div> </div> </div></div></body></html>

前端頁面展示：

ok，本博客是基於一款正在開發中的github開源項目的，項目代碼地址：https://github.com/u014427391/jeeplatform

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。