前言
最近用到了这个功能，百度大半天，网上的不是有各种问题就是需要引入其他的插件，无奈，只能自己写，大致功能已经完成。前端页面用bootstrap做样式，分页功能用ajax实现，没用其他插件哦，只引入引这些：
<link href="bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet" /> <script src="js/jquery-3.3.1.min.js" type="text/javascript">script> <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript">script>
简介
相关概念：
ajax：异步的javascript和xml 指的是在不刷新网页的情况下，可以和服务器端通信，局部刷新。
bootstrap：Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
简析
主要思路就是写两个ajax方法，一个ajax方法负责更新页数的同时调用另外一个ajax方法，另一个ajax方法负责加载页面数据。
代码
doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<title>文章列表title>
<link href="css/style.css" rel="stylesheet" />
<link href="bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet" />
<script src="js/jquery-3.3.1.min.js" type="text/javascript">script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript">script>
<script type="text/javascript">
function rows(np){
$.ajax({
url : '../article/rows',
type : 'POST',
dataType : 'json',
/* data : params, */
success : function(data) {
var pageCount = data%5 == 0 ? data/5 : (data/5+1);
var codePage = "";
for (var j=np-2; j<=np+2; j++) {
if(j > pageCount && j > 0){
codePage +=
"\r\n
" +
" "+data[i].articleTitle+"\r\n" +
"\r\n" +
"\r\n
" +
" "+data[i].nowDate+" \r\n" +
" "+data[i].user.userName+"\r\n" +
"\r\n" +
""+data[i].articleSummary+"\r\n" +
"\r\n" +
" More\r\n" +
" \r\n" +
"\r\n" +
"
\r\n" +
"";
}
$("#tableBody").html(code);
},
error : function() {
alert("page出错了！");
}
});
}
$(document).ready(function () {
rows(1);
pages(1);
});
script>
head>
<body>
<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
<span class="sr-only">切换导航span>
<span class="icon-bar">span>
<span class="icon-bar">span>
<span class="icon-bar">span>
button>
<a class="navbar-brand" href="#">动态a>
div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user">span> 注册a>li>
<li><a href="#"><span class="glyphicon glyphicon-log-in">span> 登录a>li>
ul>
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页a>li>
<li><a href="#">动态a>li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
管理 <b class="caret">b>
a>
<ul class="dropdown-menu">
<li><a href="#">文章a>li>
<li><a href="#">评论a>li>
ul>
li>
ul>
div>
div>
nav>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-10 col-md-offset-1">
<div class="list-group" id="tableBody">
<div>
<h2>
<a href="#">在教室内活动应注意安全a>
h2>
<h5> <span class="glyphicon glyphicon-calendar" aria-hidden="true">2018-02-10span>
<span class="glyphicon glyphicon-user" aria-hidden="true">SpringBoot Redisspan>
h5>
<p>在教室内活动，有许多看起来细微的事情值得同学们注意，否则，在教室里也同样容易发生危险。以下就是几个同学们需要注意的几点：
1. 防磕碰。目前大多数教室空间比较狭小，又置放了许多桌椅、饮水机等用品，所以不应在教室中追逐、打闹，做剧烈的运动和游戏，防止磕碰受伤。
2．防滑、防摔。教室地板比较光滑的，要注意防止滑倒受伤；需要登高打扫卫生、取放物品时，要请他人加以保护，注意防止摔伤。
3．防坠落。无论教室是否处于高层，都不要将身体探出阳台或者窗外，谨防不慎发生坠楼的危险。
4．防挤压。教室的门、窗户在开关时容易压到手，也应当处处小心，要轻轻地开关门窗，还先留意会不会夹到他人的手。
p>
<a href="#">
<strong>Morestrong>
<span class="glyphicon glyphicon-menu-right" aria-hidden="true">span>
a>
<hr />
div>
<div>
<h2>
<a href="#">在教室内活动应注意安全a>
h2>
<h5> <span class="glyphicon glyphicon-calendar" aria-hidden="true">2018-02-10span>
<span class="glyphicon glyphicon-user" aria-hidden="true">SpringBoot Redisspan>
h5>
<p>在教室内活动，有许多看起来细微的事情值得同学们注意，否则，在教室里也同样容易发生危险。以下就是几个同学们需要注意的几点：
1. 防磕碰。目前大多数教室空间比较狭小，又置放了许多桌椅、饮水机等用品，所以不应在教室中追逐、打闹，做剧烈的运动和游戏，防止磕碰受伤。
2．防滑、防摔。教室地板比较光滑的，要注意防止滑倒受伤；需要登高打扫卫生、取放物品时，要请他人加以保护，注意防止摔伤。
3．防坠落。无论教室是否处于高层，都不要将身体探出阳台或者窗外，谨防不慎发生坠楼的危险。
4．防挤压。教室的门、窗户在开关时容易压到手，也应当处处小心，要轻轻地开关门窗，还先留意会不会夹到他人的手。
p>
<a href="#">
<strong>Morestrong>
<span class="glyphicon glyphicon-menu-right" aria-hidden="true">span>
a>
<hr />
div>
div>
<nav aria-label="Page navigation" class="text-center">
<ul class="pagination pagination-lg" id="page-size">
<li><a href="#">首页a>li>
<li><a href="#">«上一页a>li>
<li><a href="#">1a>li>
<li><a href="#">2a>li>
<li><a href="#">3a>li>
<li><a href="#">4a>li>
<li><a href="#">5a>li>
<li><a href="#">下一页»a>li>
<li><a href="#">尾页a>li>
ul>
nav>
div>
div>
div>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Copyright © 2019 朱学良 蒙ICP备15101216号-1 a>li>
ul>
div>
nav>
body>
html>
后台：处理数据（SSM框架写的，看吧）
package com.securty.imut.controller; import java.io.File; import java.io.IOException; import java.io.InputStream; import java.sql.Timestamp; import java.util.List; import javax.servlet.http.HttpServletRequest; import org.apache.commons.io.FileUtils; import org.apache.log4j.helpers.LogLog; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.multipart.MultipartFile; import com.securty.imut.bean.Article; import com.securty.imut.service.ArticleService; import com.securty.imut.util.WangEditor; @Controller @RequestMapping(value="/article") public class ArticleController { @Autowired private ArticleService articleService; /** * 查找所有 * @return */ @RequestMapping(value="/list") @ResponseBody public Listlist(){ List list = articleService.findAll(); return list; } /** * 查找 * @return */ @RequestMapping(value="/page") @ResponseBody public List page(HttpServletRequest request){ Article article = new Article(); Timestamp nowDate = new Timestamp(System.currentTimeMillis()); article.setNowDate(nowDate); String pn = request.getParameter("pageNow") == null ? String.valueOf(1) : request.getParameter("pageNow"); int pageNow = Integer.parseInt(pn); int pageSize = 5; int startRows = pageSize*(pageNow-1); List list = articleService.queryPage(startRows); return list; } /** * 查找 * @return */ @RequestMapping(value="/rows") @ResponseBody public int rows(HttpServletRequest request){ return articleService.getRowCount(); } @RequestMapping(value="/add") @ResponseBody public int add(Article article){ return articleService.addArticle(article); } @RequestMapping(value="/update") @ResponseBody public int update(Article article){ return articleService.updateArticleById(article); } @RequestMapping(value="/read") @ResponseBody public Article read(Article article){ return articleService.selectArticlesById(article); } @RequestMapping(value="/delete") @ResponseBody public int delete(Integer aid){ return articleService.deleteArticleById(aid); } @RequestMapping(value = "/upload",method=RequestMethod.POST) @ResponseBody public WangEditor uploadFile( @RequestParam("myFile") MultipartFile multipartFile, HttpServletRequest request) { try { // 获取项目路径 String realPath = request.getSession().getServletContext() .getRealPath(""); InputStream inputStream = multipartFile.getInputStream(); String contextPath = request.getContextPath(); // 服务器根目录的路径 String path = realPath.replace(contextPath.substring(1), ""); // 根目录下新建文件夹upload，存放上传图片 String uploadPath = path + "upload"; // 获取文件名称 String filename = multipartFile.getOriginalFilename(); // 将文件上传的服务器根目录下的upload文件夹 File file = new File(uploadPath, filename); FileUtils.copyInputStreamToFile(inputStream, file); // 返回图片访问路径 String url = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + "/upload/" + filename; String [] str = {url}; WangEditor we = new WangEditor(str); return we; } catch (IOException e) { LogLog.error("上传文件失败", e); } return null; } }
效果
参考地址
https://github.com/Aizhuxueliang/security