بيانات الربيع jpa+springmvc+jquery.pagination.js مثال على تراجعية التنفيذ

تقدم هذه المدونة وظيفة ترقيم الصفحات استنادًا إلى إطار ORM لبيانات الربيع بالإضافة إلى المكون الإضافي jQuery.pagination.

تعتمد هذه المدونة على مشروع GitHub Open Source قيد التطوير. عنوان رمز المشروع هو: https://github.com/u014427391/jeepatform

مرحبًا بك في Star (Collection) أو التنزيل للتعلم ، ولا يزال يتطور ...

تقديم إطار بيانات الربيع

بيانات الربيع: مشروع فرعي للربيع. تستخدم لتبسيط الوصول إلى قاعدة البيانات ودعم NOSQL وتخزين البيانات العلائقية.

فيما يلي تخزين NOSQL المدعوم من مشروع SpringData:

* mongodb (قاعدة بيانات المستند)
* neo4j (قاعدة بيانات الرسوم)
* redis (مفتاح/متجر القيمة)
* HBase (قاعدة بيانات عائلة العمود)

تقنيات تخزين البيانات العلائقية التي تدعمها مشاريع SpringData:

* JDBC
* JPA

بيانات الربيع JPA: مكرسة لتقليل حجم تطوير طبقة الوصول إلى البيانات (DAO). يحتاج المطورون فقط إلى كتابة واجهة طبقة الثبات ، ثم ستساعد الأطر الأخرى المبرمجين على تنفيذها.

خطوات التنمية:

【بيانات الربيع تنفذ الحصول على البيانات】

يستخدم هذا المشروع Maven ، بحيث يمكنك الرجوع إلى تكوين Maven الخاص بي:

 <project xmlns = "http://maven.apache.org/pom/4.0.0" http://maven.apache.org/maven-v4_0_0.xsd "> <Arnal> <ChonfactId> muses </suntifactid> <roupiD> org.muses </groupid> <sophid> 1.0-snapshot </version> <Packaging> WAR </caping> <ame> JEEPARTFORM-ADMIN MAVEN WEBAPP </name> <Url> http://maven.apache.org </erl> <pretties> <pring.version> 4.1.5.5 <Spring-data-commons.version> 1.6.2.release </spring-data-commons.version> <-Hibernate <OPI.Version> 3.7 </poi.version> </sprenties> <تبعية> <!-MODULE START-> <REPERENCED> <LOUREID> org.muses </groupID> <STIFACTID> jeepatform-core </stifiSid> <sored> $ {jeepatform.core.version} <StifactId> Jeepatform-Common </artifactId> <sored> 1.0-snapshot </version> </sependency> <reperency> <roupiD> org.muses </groupid> </shintifactid> jeepatform-oss </attifactid> <splement> $ {jeepatform.oss <roughid> org.muses </rougiD> <StifactId> jeepatform-upms </artifactId> <الإصدار> 1.0-snapshot <select> </sependency> <!-moudle end-> <!-servlet start-> <redence> <scope> المقدمة </scope> </sependency> <!-servlet end-> <!-jstl start-> <reperence> <roupiD> jstl </rougeid> <sntifactid> jstl </shifactid> <splement> 1.2 </sperence> </repreadency> <sependency> </groupid> <sophy> 1.1.2 </version> </sependency> <!-JSTL End-> <!-log4j start-> <reperency> <roupiD> log4j </rougeid> <intifactid> log4j </tefactid> <splement> $ {log4j.version} </version> <!-log4j end- <Groper> commons-beanuTils </rougeid> <StifactId> commons-beanutils </artifactid> <الإصدار> 1.8.3 </version> </dependency> <sependency> <splemid> Commons-colles </rougiD> <StifactId> Commons-concercies </Artifactid> <Groper> net.sf.ezmorph </rougiD> <StifactId> ezmorph </shintifactid> <الإصدار> 1.0.6 </version> </sependency> <redence> </////commons-lang </groupid> <StifactId> commons-lang </artifactid> <ProwEd> commons-logging </rougiD> <StifactId> commons-logging </artifactId> <الإصدار> 1.2 </version> </sependency> <reperency> <roupiD> net.sf.json-lib </groupId> <StifactId> json-lib </shifactid> <sople> <Slassifier> jdk15 </slasiFier> <scope> ترجمة </scope> </sependency> <!-نهاية جرة مطلوبة لتحليل JSON-> <!-mysql start-> <redency> <roupid> mysql </rougiD> </reperency> <!-MySQL end-> <!-المشاع-> <rependency> <roupiD> commons-io </rougeid> <intifactid> commons-io </shintifactid> <sored> <sophy> 1.2.2 </version> </sependency> <!-المشاع-> <!-ابدأ إطار الربيع-> <Rependency> <roupiD> org.springframework </groupId> <StifactId> spring-core </chrofactid> <sperting> $ {spring.version} </version> </emperency> <StifactId> spring-beans </artifactId> <soph> $ {spring.version} </version> </sependency> <redence> <roupled> org.springframework </rougiD> </artifactid> spring-contex <roupl> org.springframework </rougiD> <StifactId> spring-context-support </stifactid> <sophy> $ {spring.version} </version> </sependency> <sependency> <supereng> org.springframeWork </rougeid> </reperency> <redency> <rougiD> org.springframework </rougiD> <StifactId> Spring-TX </attifactid> <ers <scope> test </scope> </sependency> <redency> <roupiD> org.springframework </rougiD> <intifactid> spring-web </shintifactid> <splex> $ {spring.version} </version> </dependency> <! <StifactId> Spring-Aop </stifactid> <soph> $ {spring.version} </version> </reperency> <reperency> <rouplencid> org.aspectj </groupId> <StifactId> actionJweaver </sprene> </splensed> <sperty> 1.6.10 </apples> </emperency> <roughid> org.springframework </rougiD> <SntifactId> Spring-Webmvc </stifactid> <sophy> $ {spring.version} </version> </repreadency <!-springmvc end-> <!-بيانات الربيع- <soph> $ {spring.version} </version> </sependency> <reperence> <roupiD> org.springframework.data </groupid> <tringActId> spring-data-jpa </sempency> <splex> $ {spring-data-jpa.versial} </version> </repremenced> <Groper> org.springframework.data </rougiD> <StifactId> spring-data-commons </artifactid> <sophy> $ {spring-data-commons.version} </version> </dependency> <!-Dring Data End-> <! <roupl> org.hibernate.javax.persistence </groupId> <intifactid> hibernate-jpa-2.1-api </shintifactid> <sored> 1.0.0.final </version> </prement> <sperency> <sophy> $ {hibernate.version} </version> </sependency> <redence> <roupiD> org.hibernate </groupId> <StifactId> hibernate-entityManager </attifactId> <splement> $ {hibernate.version} </apperence> <! <roupl> org.slf4j </rougiD> <StifactId> slf4j-api </shintifactid> <الإصدار> 1.6.1 </version> </sependency> <redepency> net.sf.ehcache </groupiD> <roughid> org.hibernate </rougiD> <StifactId> hibernate-ehcache </shintifactid> <sophy> $ {hibernate.version} </version> </sependency> <! <StifactId> druid </stifactid> <soph> $ {druid.version} </version> </dependency> <!-ALIBABA'S CONNECTION POOT DRUID END-> <!-Hibernate echache end-> <! <Rependency> <roupeD> org.apache.shiro </rougiD> <StifactId> shiro-all </shiro insifactid> <sophy> $ {shiro.version} </version> </sependency> <!-chiro end-> <! <soph> 1.6 </version> </sependency> <redency> <roupiD> org.apache.velocity </groupId> <intifactid> سرعة الأدوات </intifactid> <الإصدار> 2.0 </version> </respency> <!-VELOCITY END->! <StifactId> lucene-core </artifactId> <soph> $ {lucene.version} </version> </reperence> <redence> <roupiD> org.apache.lucene </groupId> </intifactid> lucene-analyzers-common </shintifactid> $ {lucene.version} <roupiD> org.apache.lucene </rougiD> <StifactId> lucene-queryparser </shintifactid> <sophy> $ {lucene.version} </version> </redenced> <redency> </groupid> org.apache.lucene </groupid> lustifactid> </reperency> <reperency> <roupiD> org.apache.lucene </rougiD> <ArtifactId> Lucene-Highlighter </artifactId> <sored> $ {lucene.version} </version> </dependency> <!-لاحظ أن Ikanalyzer لا يتمتع بتنسيقات متنوع ، يرجى إضافةها إلى المحول المحلي- <roughid> org.wltea.analyzer </rougiD> <StifactId> ikanalyzer </shintifactid> <sophy> 2012ff_u1 </version> <scope> النظام </scope> <stystemPath> {inderior} /src/main/webap/web- Lucene Full Text Search Engine End-> <!-log4j start-> <redence> <rougiD> log4j </rougiD> <StifactId> log4j </shintifactid> <sored> $ {log4j.version} </version> </dependency> <!-log4j end-> <! <StifactId> commons-beanutils </intifactid> <الإصدار> 1.8.3 </الإصدار> </repreadency> <sependency> <roupled> commons-collactions </rougeid> <sensifactid> commons-collections </stifiD> <الإصدار> 3.2.1 </version> <seperency> <StifactId> ezmorph </stifactId> <sople> 1.0.6 </version> </sependency> <sependency> <roupiD> commons-lang </rougeid> <StifactId> commons-lang </sultifactid> </version> 2.5 </version> <sophy> 1.2 </version> </sependency> <redency> <roupiD> net.sf.json-lib </rougiD> <artifactid> json-lib </shintifactid> <sophy> 2.4 </version> <type> جرة </type> <sypifier> jdk15 </classifier> <scope> </scope> <!-POI start-> <reperency> <roupiD> org.apache.poi </rougiD> <StifactId> poi </shintifactid> <splection> $ {poi.version} </version> </remebency> <!-POI end->! <StifactId> javax.mail </intifactid> <الإصدار> 1.5.6 </version> </repreadency> <!-Email End-> </sependencies> <buyname> jeepatform-admin </nymname> </build> </project>

صمم قاعدة البيانات واكتب فئة كيان:

 package org.muses.jeepatform.model.entity ؛ import java.util.date ؛ import java.util.set ؛ import javax.persistence.cascadetype ؛ import javax.persistence.column ؛ import javax.persistence javax.persistence.generatedvalue ؛ import javax.persistence.generationtype ؛ import javax.persistence.id ؛ import javax.persistence.joincolumn ؛ import javax. javax.persistence.temporaltype ؛/***فئة الكيان من معلومات المستخدم*Author Nicky*/@entity@table (name = "sys_user") مستخدم الفئة العامة {/** معرف المستخدم **/private int id ؛ / ** اسم المستخدم **/ اسم المستخدم الخاص بالسلسلة الخاصة ؛ / ** كلمة مرور المستخدم **/ كلمة مرور السلسلة الخاصة ؛ / ** رقم الهاتف المحمول **/ Private Int Phone ؛ / ** الجنس **/ سلسلة جنسية خاصة ؛ / ** البريد الإلكتروني **/ سلسلة البريد الإلكتروني الخاصة ؛ / ** ملاحظة **/ علامة السلسلة الخاصة ؛ / ** مستوى المستخدم **/ رتبة سلسلة خاصة ؛ / ** آخر مرة **/ تاريخ خاص LastLogin ؛ / ** تسجيل الدخول IP **/ سلسلة تسجيل الدخول الخاصة ؛ / ** مسار الصورة **/ سلسلة خاصة ImageUrl ؛ / ** وقت التسجيل **/ التاريخ الخاص RegTime ؛ / ** ما إذا كان الحساب مغلقًا **/ خاصًا بولانيًا مغلقًا = منطقي. مجموعة خاصة <ROB> أدوار ؛ generatedValue (الاستراتيجية = generType.Identity) id public int getId () {return id ؛ } public void setId (int id) {this.id = id ؛ } column (فريد = صحيح ، طول = 100 ، nullable = false) سلسلة عامة getUserName () {return username ؛ } public void setusername (string username) {this.userName = username ؛ } column (طول = 100 ، nullable = false) السلسلة العامة getPassword () {return password ؛ } public void setPassword (سلسلة كلمة مرور) {this.password = password ؛ } public int getPhone () {return phone ؛ } public void setphone (int phone) {this.phone = phone ؛ } column (طول = 6) سلسلة عامة getSex () {return sex ؛ } public void setSex (سلسلة الجنس) {this.sex = sex ؛ } column (طول = 100) سلسلة عامة getEmail () {return email ؛ } public void setemail (string email) {this.email = email ؛ } column (length = 30) السلسلة العامة getMark () {return mark ؛ } setMark public void (علامة السلسلة) {this.mark = mark ؛ } column (length = 10) سلسلة عامة getRank () {return rank ؛ } public void setRank (string recise) {this.rank = rank ؛ } temporal (ummortortype.date) التاريخ العام getlastlogin () {return lastlogin ؛ } public void setlastlogin (date lastlogin) {this.lastlogin = lastLogin ؛ } column (طول = 100) سلسلة عامة getLoginip () {return loginip ؛ } public void setLoginip (سلسلة loginip) {this.loginip = loginip ؛ } column (طول = 100) سلسلة عامة getImageurl () {return imageUrl ؛ } public void setImageUrl (String imageUrl) {this.imageurl = imageUrl ؛ } tmatmporal (ummortortype.date) column (nullable = false) التاريخ العام getRegtime () {return regtime ؛ } public void setRegtime (date regtime) {this.regtime = regtime ؛ } public boolean getLocked () {return locked ؛ } public void setLocked (Boolean Locked) {this.locked = locked ؛ }}

اكتب واجهة لتنفيذ واجهة pagingandsortingrepository لإطار بيانات الربيع

 package org.muses.jeepartform.repository ؛ استيراد org.muses.jeepartform.model.entity.user ؛ استيراد org.springframework.data.domain.page org.springframework.data.jpa.repository.jparepository ؛ استيراد org.springframework.data.repository java.util.date ؛ الواجهة العامة userrepository تمتد pagingandsortingRepository <user ، integer> { /*user findbyusername (اسم المستخدم) ؛ Query ("من المستخدم u where U.UserName =: username و u.password =: كلمة المرور") المستخدم FindByUserNameAndPassword (param ("username) username ، param (" password ") كلمة مرور السلسلة) ؛ Query ("من المستخدم u where U.ID =: id") userbybyid (param ("id") int id) ؛ Query ("من المستخدم u حيث date_format (U.Lastlogin ، 'Yyyy-mm-dd') بين Date_format ((: startDate) ، 'Yyyy-mm-dd') و date_format ((: enddate) ،" enddate ". قابلاً للبديل) ؛*/}

تنفيذ درجة الأعمال:

 package org.muses.jeepatform.service ؛ import java.util.*؛ استيراد org.muses.jeepatform.model.entity.user ؛ import org.muses.jeepatform.repository.userrepository ؛ import org.springframewework.beans.factory.Annotation.Autowired ؛ org.springframework.data.domain.page ؛ استيراد org.springframework.data.domain.pagerequest ؛ استيراد org.springframework.data.domain.sort ؛ org.springframework.transaction.annotation.transactional ؛ استيراد javax.persistence.criteria.criteriabuilder ؛ import javax.persistence.criteria.criteriaquery ؛/*** @description class for user informic userrepository / ** * بناء كائن pagerequest * param num * param size * param asc * param string * @return */ parcerquest buildpagerequest (int num ، int ، sort.direction asc ، string string) {return new pagerequest (num-1 ، size ، string) ؛ } / *** احصل على جميع معلومات القائمة وعرضها على الصفحات* param pageno* العدد الحالي للصفحات* param pagesize* عدد الصفحات لكل صفحة* return* / @transactional صفحة عامة <Seter> findall (int pageno ، int pagesize ، sort.direction dir ، string str) page <Sether> users = userrepository.findall (request) ؛ إرجاع المستخدمين ؛ }}

تتبنى فئة التحكم إطار عمل springMVC ، أولاً اكتب basecontroller لتنفيذ بعض الوظائف العامة:

 package org.muses.jeepatform.web.controller ؛ استيراد javax.servlet.http.httpservletrequest ؛ استيراد org.slf4j.logger ؛ استيراد org.slf4j.loggerfactory ؛ import org.springframework.web.web.request.request.request org.springframework.web.context.request.servletrequestattributes ؛ استيراد org.springframework.web.servlet.modelandview ؛ الفئة العامة basecontroller {logger log = null ؛ / *** الحصول على كائن السجل* regurn*/ public logger getInstance () {if (log == null) {log = loggerfactory.getLogger (basecontroller.class) ؛ } سجل الإرجاع ؛ } / *** الحصول على كائن طلب* / public httpservletrequest getRequest () {httpservletrequest request = ((servletRequestAttRibutes) requestContextholder.getRequestAttributes ()). getRequest () ؛ طلب العودة ؛ } / ** * get modelandview * / public modelandview getModelandView () {return new ModelAndView () ؛ }}

تنفيذ فئة التحكم:

 package org.muses.jeepatform.web.controller ؛ استيراد net.sf.json.jsonarray ؛ استيراد net.sf.json.jsonoBject ؛ استيراد net.sf.json.jsonconfig ؛ استيراد org.apache.commons.collections.map.hashedmap ؛ استيراد org. org.muses.jeepatform.core.excelViewWrite ؛ استيراد org.muses.jeepatform.core.javaemailsender ؛ استيراد org.muses.jeepatform.model.entity.user org.muses.jeepatform.utils.datejsonvalueprocessor ؛ استيراد org.muses.jeepatform.utils.dateutils ؛ استيراد org.springframework.beans.factory.annotation.autowired ؛ استيراد org.springframework.data.page ؛ org.springframework.data.domain.sort ؛ استيراد org.springframework.steretype.controller ؛ استيراد org.springframework.ui.model org.springframework.web.bind.annotation.requestparam ؛ استيراد org.springframework.web.bind.annotation.responsebody ؛ import org.springframework.web.servlet.modelandview ؛ javax.servlet.http.httpservletresponse ؛ استيراد java.io.printwriter ؛ استيراد java.util.* ؛/*** تم إنشاؤه بواسطة Nicky في 2017/7/29. */@requestmapping ("/user")@controlpublic class USERCONTROLLER يمتد BASECONTROLLER /** * استعلام جميع معلومات المسؤول وعرضها على صفحات * param طلب * param استجابة * param model * regurn */ @requestmapping (value = "/queryall" ، تنتج = "application/json ؛ charset = utf-8") @requestponsed modelandview ( pageIndExstr = request.getParameter ("pageIndex") ؛ // عدد الصفحات لكل صفحة int pagesize = constants.page_size ؛ modelandview mv = this.getModelandView () ؛ صفحة <Sether> 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 (سلسلة جديدة [] {"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 ("المستخدمين" ، jsonarray.toString ()) ؛ mv.setViewName ("admin/user/sys_user_list") ؛ إرجاع MV ؛ }}

【تنفيذ الصفحة الأمامية】

طريقة عرض الصفحة ، ارجع إلى 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 uri = "http://java.sun.com/jsp/jstl/fmt" ٪> <٪ string path = request.getContextPath () ؛ String basePath = request.getScheme ()+": //"+request.getServerName ()+": charset = "utf-8"/> <meta http-equiv = "x-ua- متوافقة مع" content = "ie = edge"> <meta name = "viewport" content = "width = width device ، scale scale = 1"> <title> insert title هنا </title> <! href = "<٪ = basepath ٪> الإضافات/الصفحة/css/bootstrap-33.3.5.min.css" rel = "خارجي nofollow"/> <! rel = "خارجي nofollow"/> <script type = "text/javaScript" src = "<٪ = basepath ٪> plugins/page/js/jquery.min.js"> </script> <! src = "<٪ = basepath ٪> الإضافات/الصفحة/js/jquery.pagination.js"> </script> <script type = "text/javaScript">/** لعمليات الترحيل ، استخدم jquery.pagination add add by nicky 20170729 start **////current page pageex = number ($ {{$ { // كمية البيانات var totalCount = number ($ {totalCount}) ؛ $ (document) .Ready (function () {// binding to paging $ $ ("#pagination"). pagination (totalCount ، {callback: pageElectCallback ، prev_text: '<preival page' ، next_text: 'extreen. "user/queryall؟ pageIndex = __ id__"/ OBJ.email ؛ "<td>"+mark+"</td>"+"<td>"+phone+"</td>"+"<td>"+email+"</td>"+"<td> HREF = 'JavaScript: OpenEdItDialog ("+id+") ؛' class = 'bouncein'> تكوين دور </a> "+" </tr> "؛}) ؛ $ ("#content "). // هذا الحدث هو وظيفة PageSelectCallback (الفهرس ، jq) {}/** ترقيم ترقيم ، باستخدام المكون الإضافي jQuery.Pagination أضف بواسطة Nicky 20170729 End **//// checkbox all/anti-select var ischeckall = false ؛ دالة doCheck () {if (isCheckall) {$ ("input [type = 'checkbox']"). كل (function () {this.checked = false ؛}) ؛ ischeckall = false ؛ } آخر {$ ("input [type = 'checkbox']"). كل (function () {this.checked = true ؛}) ؛ ischeckall = صحيح ؛ }} </script> </head> <body> <br> <viv> <viv> <viv> <viv> <Porm> <form> <input type = "button" value = "send mail" onClick = "sendemail () ؛" /> <input type = "button" value = "sendsms () ؛" /> <type type = "button" value = "exportexcel table" onClick = "exportexcel () ؛" ] ، maxDate: '#f {$ dp. $ d (/' enddate/')}'}) ؛ "/> إلى <type type =" text "placeholder =" الرجاء إدخال تاريخ الانتهاء "value =" $ {enddate} "id =" enddate "name =" enddate " ، Mindate: '#f {$ dp. $ d (/' startDate/')}'}) ؛ " /> <type type = "button" value = "search" onClick = "dosearch () ؛"/>-> </form> <table id = "mtable"> <thead> <tr> <th> <input type = "checkbox" onClick = "docheck () ؛" /> </h> <th> الرقم التسلسلي </th> <th> اسم المستخدم </th> <th> الوصف </th> <th> mobile </h> <th> البريد الإلكتروني </th> آخر تسجيل الدخول </th> <th> last login ip </fl> <th> العملية </th> <!-العرض التوضيحي-> </div> </viv> </viv> </viv> </viv> </viv> </viv> </viv> </body> </html>

عرض الصفحة الأمامية:

حسنًا ، تعتمد هذه المدونة على مشروع GitHub Open Source قيد التطوير. عنوان رمز المشروع هو: https://github.com/u014427391/jeepatform

ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.