一个page的项目，fastjson和artTemplate以及

1，首先建立MySQL数据库：

drop database if EXISTS jdbc;
CREATE database if not EXISTS jdbc;
use jdbc;

drop table if exists user;
create table if not EXISTS user(
        id int(11) PRIMARY KEY NOT NULL auto_increment,
        name VARCHAR(50) NOT NULL,
        pwd VARCHAR(50) NOT NULL
);

insert into user(name,pwd) values ('赵1' ,'123456' );
insert into user(name,pwd) values ('钱2' ,'123456' );
insert into user(name,pwd) values ('孙3' ,'123456' );
insert into user(name,pwd) values ('李21' ,'123456' );
insert into user(name,pwd) values ('周22' ,'123456' );
insert into user(name,pwd) values ('吴23' ,'123456' );
insert into user(name,pwd) values ('郑31' ,'123456' );
insert into user(name,pwd) values ('王32' ,'123456' );
insert into user(name,pwd) values ('冯33' ,'123456' );

---

2，导包：

image.png

---

3，设计结构框架：

image.png

---

4，编程：

User类，用于存放用户信息，和数据库里的参数对应。

package com.zhu.bean;

/**
 * Created by Think on 2018/7/12.
 */
public class User {
    private int id;
    private String name;
    private String pwd;

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", pwd='" + pwd + '\'' +
                '}';
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getPwd() {
        return pwd;
    }

    public void setPwd(String pwd) {
        this.pwd = pwd;
    }
}

Users类，用户后续包装json对象。

package com.zhu.bean;

import java.util.List;

/**
 * Created by Think on 2018/7/12.
 */
public class Users {
    List<User> userlist;
    private int total;

    public int getTotal() {
        return total;
    }

    public void setTotal(int total) {
        this.total = total;
    }

    public List<User> getUserlist() {
        return userlist;
    }

    public void setUserlist(List<User> userlist) {
        this.userlist = userlist;
    }
}

IUserDao接口类，用户实现UserDao类，使用接口可以在以后的开发中方便转换成实现其他类，比较灵活。

package com.zhu.dao;

import com.zhu.bean.User;

import java.util.List;

/**
 * Created by Think on 2018/7/12.
 */
public interface IUserDao {
    int getUserCount();
    List<User> getPagedUsers(int pageIndex, int pageSize);
}

UserDao类，用户实现两个重要的方法。

package com.zhu.dao;

import com.zhu.bean.User;
import com.zhu.util.JDBCUtils;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

/**
 * Created by Think on 2018/7/12.
 */
public class UserDao implements IUserDao {
    @Override
    public int getUserCount() {
        Connection connection = JDBCUtils.getConnection();//连接数据库
        int total = 0;
        try {
            PreparedStatement preparedStatement = connection.prepareStatement("select count(*) as num from user");

            ResultSet resultSet = preparedStatement.executeQuery();
            if (resultSet.next())
            {
                total = resultSet.getInt("num");
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }

        return total;//返回查询到的值
    }

    @Override
    public List<User> getPagedUsers(int pageIndex, int pageSize) {
        Connection connection = JDBCUtils.getConnection();
        List<User> list = new ArrayList<>();
        try {
            PreparedStatement preparedStatement = connection.prepareStatement("select * from user limit ?,?");
            preparedStatement.setInt(1,pageIndex*pageSize);
            preparedStatement.setInt(2,pageSize);

            ResultSet resultSet = preparedStatement.executeQuery();
            while (resultSet.next())
            {
                User user = new User();
                user.setId(resultSet.getInt("id"));
                user.setName(resultSet.getString("name"));
                user.setPwd(resultSet.getString("pwd"));

                list.add(user);//将该页的每一个用户加入到list里
            }

        } catch (SQLException e) {
            e.printStackTrace();
        }

        return list;//返回该页的用户list
    }
}

Filter01encoding，用来过滤的filter，主要是破译中文编码。

package com.zhu.filter;

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import java.io.IOException;

/**
 * Created by Think on 2018/7/13.
 */
@WebFilter(filterName = "Filter01-encoding",urlPatterns = "*.do")
public class Filter01encoding implements Filter {
    public void destroy() {
    }

    public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");//request请求行中文解码
        resp.setContentType("text/html;charset=utf-8");//response反馈行中文解码
        chain.doFilter(req, resp);
    }

    public void init(FilterConfig config) throws ServletException {

    }

}

pageServlet服务器，用来处理页面请求。

package com.zhu.servlet;

import com.alibaba.fastjson.JSON;
import com.zhu.bean.User;
import com.zhu.bean.Users;
import com.zhu.dao.IUserDao;
import com.zhu.dao.UserDao;

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.List;

/**
 * Created by Think on 2018/7/12.
 */
@WebServlet(name = "pageServlet",urlPatterns = "/page.do")
public class pageServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        int pageIndex = Integer.parseInt(request.getParameter("pageIndex"));//jsp页面发送来的参数，？后面带来的参数
        int pageSize = Integer.parseInt(request.getParameter("pageSize"));

        IUserDao iUserDao = new UserDao();//定义接口，实例化为UserDao
        int count = iUserDao.getUserCount();
        List<User> userList = iUserDao.getPagedUsers(pageIndex,pageSize);

        Users users = new Users();
        users.setUserlist(userList);//用Users类进行包装
        users.setTotal(count);

        String json = JSON.toJSONString(users);//转为json字符串
        System.out.println(json);
        response.getWriter().println(json);//将json字符串返回到jsp页面
    }
}

TestDao测试类，用户测试。

package com.zhu.test;

import com.zhu.bean.User;

import com.zhu.bean.User;
import com.zhu.dao.IUserDao;
import com.zhu.dao.UserDao;
import org.junit.Test;

import java.util.List;

/**
 * Created by Think on 2018/7/12.
 */
public class TestDao {
    @Test //这句话Test类一定要加
    public void testCount()
    {
        IUserDao iUserInfoDao = new UserDao();
        int count = iUserInfoDao.getUserCount();
        System.out.println(count);
        List<User> userList = iUserInfoDao.getPagedUsers(1,3);
        for(User user : userList)
        {
            System.out.println(user.toString());
        }
    }
}

JDBCUtils数据库连接组件，配置url。

package com.zhu.util;

import java.sql.*;

/**
 * Created by ttc on 2018/6/14.
 */
public class JDBCUtils {
    private JDBCUtils(){}
    private static Connection con ;

    static{
        try{
            Class.forName("com.mysql.jdbc.Driver");
            String url = "jdbc:mysql://localhost:3306/jdbc?useUnicode=true&characterEncoding=UTF-8";
            String username="root";
            String password="root";
            con = DriverManager.getConnection(url, username, password);
        }catch(Exception ex){
            throw new RuntimeException(ex+"数据库连接失败");
        }
    }

    /*
     * 定义静态方法,返回数据库的连接对象
     */
    public static Connection getConnection(){
        return con;
    }


    public static void close(Connection con,Statement stat){

        if(stat!=null){
            try{
                stat.close();
            }catch(SQLException ex){}
        }

        if(con!=null){
            try{
                con.close();
            }catch(SQLException ex){}
        }

    }


    public static void close(Connection con,Statement stat , ResultSet rs){
        if(rs!=null){
            try{
                rs.close();
            }catch(SQLException ex){}
        }

        if(stat!=null){
            try{
                stat.close();
            }catch(SQLException ex){}
        }

        if(con!=null){
            try{
                con.close();
            }catch(SQLException ex){}
        }

    }
}

index.jsp文件

<%--
  Created by IntelliJ IDEA.
  User: Think
  Date: 2018/7/12
  Time: 19:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


<html>
<head>
  <title>$Title$</title>
  <%--配置css文件--%>
  <link href="mricode.pagination.css" rel="stylesheet">
  <%--必须首先配置jquery--%>
  <script src="jquery-2.1.4.min.js"></script>
  <%--依附于jquery实现，实现分页功能--%>
  <script src="mricode.pagination.js"></script>
  <%--{{}}符号的配置js文件--%>
  <script src="arttemplate.min.js"></script>
  <script>
      window.onload = function () {
          var page = $("#page");//调用id为page的div
          page.pagination({
              pageIndex: 0,
              pageSize: 2,
              showInfo: true,
              showJump: true,
              showPageSizes: true,
              remote:{
                  url:'${pageContext.request.contextPath}/page.do',//进入page.do的服务器
                  success:function (data) {                       //成功返回data数据，服务器中response回应的json
                      var html = template('test',data);//放入id为test的html模板里
                      document.getElementById('content').innerHTML = html;//将该html整体放入id为content的div内
                  }
              }
          });//json 对象
      }
  </script>
</head>
<body>
<div id="content">

</div>

<%--固定必须有的模块--%>
<div id="page" class="m-pagination"></div>
</body>
</html>

<script id="test" type="text/html">
  <table>
    <thead>
    <tr>
      <td>ID</td>
      <td>姓名</td>
      <td>密码</td>
    </tr>
    </thead>

    <tbody>
    {{each userlist as value index}}
    <tr>
      <td>{{value.id}}</td>
      <td>{{value.name}}</td>
      <td>{{value.pwd}}</td>
    </tr>
    {{/each}}
    </tbody>

  </table>
</script>

运行结果：

image.png

{"total":9,"userlist":[{"id":1,"name":"赵1","pwd":"123456"},{"id":2,"name":"钱2","pwd":"123456"}]}