基于JSP和Servlet操作英雄联盟装备项目

使用的技术

        1、mvc标准三层架构原理

        2、JSP技术和servlet技术 

        3、使用Fileter过滤器模拟权限控制

        4、使用JDBC技术操作数据库

·       5、使用ajax实现前后端交互

展示

        

主页面

分页

  重点：如何实现分页操作？

        分页操作：需要两个参数Page和Size及当前页码和展示的数据条数。

        分页操作是基于数据库中limit关键实现。数据库中查询出来的数据进行截取显示。那么第一个数怎么确定？

代码实现：

        实体类：

                

package com.wzk.utils;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.Setter;

import java.util.List;

//分页工具类
@NoArgsConstructor
@AllArgsConstructor
@Setter  //提供set方法（没有使用@data的原因：工具类用于分页，需要使用get方法进行计算第一个limit的值）
public class PageInfo<T>{  //使用泛型
    //以知的，前端传输过来的
    private Integer currentSize;   // 页面条数（第二个参数值）
    //以知的，前端传输过来的
    private Integer currentPage;   //当前页
    //通过起那面两个参数计算出来的limit的第一个数
    private Integer firstNum;      //第一个limit参数值
    //数据库查询出来的总条数
    private Integer total;         //数据总条数
    //数据库查询出来的分页后的数据
    private List<T> records;


    public Integer getCurrentSize() {
        return currentSize;
    }

    public Integer getCurrentPage() {
        return currentPage;
    }

    //获取limit的第一个数，进行计算
    public Integer getFirstNum() {
        return (currentPage-1)*currentSize;  //（当前页-1）* 当前页面显示的条数
    }

    public Integer getTotal() {
        return total;
    }

    public List<T> getRecords() {
        return records;
    }
}

        数据库代码实现

public List<ItemInfo> selectAllByPage(Integer firstNum, Integer currentSize,String name) {
        try {
            //获取连接
            con = JDBCUtil.getCon();
            String sql = "select * from item_info where name like \"%\"?\"%\" limit ?,?";
            ps = con.prepareStatement(sql);
            //传值给sql对象
            ps.setString(1,name);
            ps.setInt(2,firstNum);
            ps.setInt(3,currentSize);
            rs = ps.executeQuery();
            //
            ArrayList<ItemInfo> itemInfos = new ArrayList<ItemInfo>();
            while (rs.next()){
                //创建对象存储数据
                ItemInfo itemInfo = new ItemInfo();
                //设置对象的值
                itemInfo.setItemId(rs.getInt("item_id"));
                itemInfo.setName(rs.getString("name"));
                itemInfo.setIconPath(rs.getString("icon_path"));
                itemInfo.setPlainText(rs.getString("plain_text"));
                itemInfo.setPrice(rs.getInt("price"));
                itemInfo.setSell(rs.getInt("sell"));
                //添加到集合中
                itemInfos.add(itemInfo);
            }
            return itemInfos;
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }finally {
            //关闭资源
            JDBCUtil.closeAll(rs,ps,con);
        }
        return null;
    }

前端代码

new Vue({
        //帮绑定作用域
        el:"#app",
        data:{
            itemList:[],
            //当前页码，默认值1
            currentPage:1,
            //当前页显示最大条数
            currentSize:8,
            //总条数
            total:0,
            //模糊查询装备名
            name:""
        },
        methods:{
            //分页查询所有
            selectAllByPage(){
                var _this = this
                //发送ajax请求
                $.ajax({
                    url:"/itemInfo",
                    type:"get",
                    data:{
                        //定义一个参数，让后端用其判断调用什么方法
                        method:"selectAllByPage",
                        //当前页
                        currentPage:this.currentPage,
                        //当前页大小
                        currentSize:this.currentSize,
                        name:this.name
                    },
                    dataType: "json",
                    success:function (rs) {
                        // console.log(rs)
                        _this.itemList = rs.data.records
                        _this.total= rs.data.total
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        alert("ajax请求失败");
                    }
                })
            },

使用mvc三层架构篇幅有限，给大家做个参考