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

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"}]}
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 217,826评论 6赞 506
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,968评论 3赞 395
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 164,234评论 0赞 354
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,562评论 1赞 293
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,611评论 6赞 392
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,482评论 1赞 302
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,271评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,166评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,608评论 1赞 314
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,814评论 3赞 336
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,926评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,644评论 5赞 346
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,249评论 3赞 329
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,866评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,991评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,063评论 3赞 370
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,871评论 2赞 354

推荐阅读更多精彩内容

  • 关于Mongodb的全面总结
    关于Mongodb的全面总结 MongoDB的内部构造《MongoDB The Definitive Guide》...
    中v中阅读 31,931评论 2赞 89
  • 天台雨
    远处雾蒙蒙的。 天色渐渐转暗， 望着，望着。 无声的， 天台上盖住了厚厚的一层。 咚咚， 雨水踩踏着木桌， 飞舞起...
    单人责阅读 186评论 0赞 0
  • JS高阶总结
    1.0对象的基本概念 当我们把相对应的功能都封装到了对应的对象后，想要使用这个功能只需要找到相应的对象即可。 2....
    王鳟鱼阅读 638评论 0赞 0
  • WINFORM Combox下拉框级联
    已省、市下拉框级联关系作为例子
    a9b854aded01阅读 864评论 0赞 0
  • 晨间500字（38）-反思
    反思一下昨天的想法和基于该想法的一些行动以及因此而浪费的时间。大概是下午的时候开始尝试着使用格致日记来记一下晨...
    博子阅读 183评论 0赞 0