瀑布流

stylesheet样式

<style>
    /*给蓝色信息条添加样式*/
        .floatView{
            width: 100%;
            height: 40px;
            background-color: #0aa1ed;
            text-align: center;
            color: #ffc600;
            /*显示到最下面*/
            position: absolute;
            bottom: 0;
            display: none;/*让元素隐藏*/
        }
        .floatView>p{
            margin: 0;/*去掉自带外边距*/
            font-size: 14px;
        }
</style>

html代码

<!--瀑布流开始-->
<div class="grid">
    <div th:each="p:${pList}" class="grid-item">
        <a th:href="'detail?id='+${p.id}">
            <img class="img-responsive" th:src="${p.url}" alt="">
        </a>
        <!--蓝色信息条开始-->
        <div class="floatView">
            <!--显示作品标题-->
            <p th:text="${p.title}"></p>
            <!--显示作品浏览量和点赞量-->
            <span th:text="${p.viewCount}" class="fa fa-eye"></span>
            <span th:text="${p.likeCount}" class="fa fa-thumbs-o-up"></span>
        </div>
        <!--蓝色信息条结束-->
    </div>
</div>

javascript代码

<script>
    //瀑布流初始化代码
    $(".grid").masonry({
        itemSelector: ".grid-item", //告诉框架 选择器是什么
        columnWidth: 210 //告诉框架 每个元素所占宽度(元素宽度+间距)
    })
    //图片加载完之后让瀑布流处理一下显示布局
    $(".grid").imagesLoaded().progress(function () {
        //此处代码图片加载完之后会执行
        $(".grid").masonry("layout");//让瀑布流重新计算显示效果 解决图片层叠问题
    });
    //给瀑布流中的元素添加鼠标移入移出事件
    $(".grid-item").hover(function () {//鼠标移入
        //通过瀑布流元素获取里面的蓝色信息条div
        $(this).children("div").stop().fadeIn(500);
    }, function () {//鼠标移出
        $(this).children("div").stop().fadeOut(500);
    });
</script>

引入文件

<link rel="stylesheet" type="text/css" href="bootstrap3/css/bt3.css">
<link rel="stylesheet" type="text/css" href="bootstrap3/font-awesome-4.7.0/css/font-awesome.css"/>
<script type="text/javascript" src="bootstrap3/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap3/js/bootstrap.js"></script>
<script type="text/javascript" src="bootstrap3/js/holder.js"></script>
<script type="text/javascript" src="bootstrap3/js/html5shiv.min.js"></script>
<script type="text/javascript" src="bootstrap3/js/css3-mediaqueries.js"></script>
<script type="text/javascript" src="bootstrap3/js/respond.min.js"></script>
<!--引入和瀑布流相关的文件-->
<script src="js/masonry.pkgd.min.js"></script>
<script src="js/imagesloaded.pkgd.js"></script>

HomeServlet.java

package cn.tedu.controller;

import cn.tedu.dao.BannerDao;
import cn.tedu.dao.CategoryDao;
import cn.tedu.dao.ProductDao;
import cn.tedu.entity.Banner;
import cn.tedu.entity.Category;
import cn.tedu.entity.Product;
import cn.tedu.entity.User;
import cn.tedu.utils.ThUtils;
import org.thymeleaf.context.Context;

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 javax.servlet.http.HttpSession;
import java.io.IOException;
import java.util.List;

@WebServlet(name = "HomeServlet", urlPatterns = "/home")
public class HomeServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //获取传递过来的分类id
        String cid = request.getParameter("cid");
        //获取搜索关键字
        String keyword = request.getParameter("keyword");

        //显示首页页面
        Context context = new Context();
        //查询所有分类并添加到容器中
        CategoryDao dao = new CategoryDao();
        List<Category> list = dao.findAll();
        context.setVariable("list", list);
        //查询所有轮播图并添加到容器中
        BannerDao bDao = new BannerDao();
        List<Banner> bList = bDao.findAll();
        System.out.println(bList);
        context.setVariable("bList", bList);
        //获取Session对象
        HttpSession session = request.getSession();
        //取出保存的用户对象
        User user = (User) session.getAttribute("user");
        /*if (user == null) {
            System.out.println("未登录!");
        } else {
            System.out.println("已登录!");
        }*/
        //把用户对象装进容器
        context.setVariable("user", user);
        //查询出所有作品并装进context容器
        ProductDao pDao = new ProductDao();
        if (cid != null) {//说明查询的是某个分类的作品
            //cid有值说明需要查询某个分类的所有作品
            List<Product> pList = pDao.findByCID(cid);
            context.setVariable("pList", pList);
        } else if (keyword != null) {
            List<Product> pList = pDao.findByKeyword(keyword);
            context.setVariable("pList", pList);
        } else {//查询的是所有作品
            List<Product> pList = pDao.findAll();
            context.setVariable("pList", pList);
        }
        //查询浏览最多
        List<Product> vList = pDao.findViewList();
        context.setVariable("vList", vList);
        //查询最受欢迎
        List<Product> lList = pDao.findLikeList();
        context.setVariable("lList", lList);
        ThUtils.print("home.html", context, response);
    }
}

Product.java

package cn.tedu.entity;

import java.text.SimpleDateFormat;
import java.util.Date;

public class Product {
    private int id;
    private String title;
    private String author;
    private String intro;
    private String url;
    private int viewCount;
    private int likeCount;
    private long created;
    private int categoryId;

    public String createdStr() {
        //日期格式化对象
        SimpleDateFormat f = new SimpleDateFormat("yyyy-MM-dd HH:mm");
        //根据发布时间戳 创建日期对象
        Date date = new Date(created);
        //把日期对象转成指定格式字符串时间
        return f.format(date);
    }

    public Product(int id, String title, String author, String intro, String url, int viewCount, int likeCount, long created, int categoryId) {
        this.id = id;
        this.title = title;
        this.author = author;
        this.intro = intro;
        this.url = url;
        this.viewCount = viewCount;
        this.likeCount = likeCount;
        this.created = created;
        this.categoryId = categoryId;
    }

    @Override
    public String toString() {
        return "Product{" +
                "id=" + id +
                ", title='" + title + '\'' +
                ", author='" + author + '\'' +
                ", intro='" + intro + '\'' +
                ", url='" + url + '\'' +
                ", viewCount=" + viewCount +
                ", likeCount=" + likeCount +
                ", created=" + created +
                ", categoryId=" + categoryId +
                '}';
    }

    public int getId() {
        return id;
    }

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

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getAuthor() {
        return author;
    }

    public void setAuthor(String author) {
        this.author = author;
    }

    public String getIntro() {
        return intro;
    }

    public void setIntro(String intro) {
        this.intro = intro;
    }

    public String getUrl() {
        return url;
    }

    public void setUrl(String url) {
        this.url = url;
    }

    public int getViewCount() {
        return viewCount;
    }

    public void setViewCount(int viewCount) {
        this.viewCount = viewCount;
    }

    public int getLikeCount() {
        return likeCount;
    }

    public void setLikeCount(int likeCount) {
        this.likeCount = likeCount;
    }

    public long getCreated() {
        return created;
    }

    public void setCreated(long created) {
        this.created = created;
    }

    public int getCategoryId() {
        return categoryId;
    }

    public void setCategoryId(int categoryId) {
        this.categoryId = categoryId;
    }
}

ProductDao.java

package cn.tedu.dao;

import cn.tedu.entity.Product;
import cn.tedu.utils.DBUtils;

import java.sql.*;
import java.util.ArrayList;
import java.util.List;

public class ProductDao {
    public void insert(Product p) {
        //获取连接
        try (Connection conn = DBUtils.getConn()) {
            String sql = "insert into product values(0,?,?,?,?,0,0,?,?)";
            PreparedStatement ps = conn.prepareStatement(sql);
            ps.setString(1, p.getTitle());
            ps.setString(2, p.getAuthor());
            ps.setString(3, p.getIntro());
            ps.setString(4, p.getUrl());
            ps.setLong(5, p.getCreated());
            ps.setInt(6, p.getCategoryId());
            ps.executeUpdate();
            System.out.println("保存完成!");
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    public List<Product> findAll() {
        ArrayList<Product> list = new ArrayList<>();
        //获取连接
        try (Connection conn = DBUtils.getConn()) {
            Statement s = conn.createStatement();
            String sql = "select * from product";
            ResultSet rs = s.executeQuery(sql);
            RsetListAdd(list, rs);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return list;
    }

    public List<Product> findByCID(String cid) {
        ArrayList<Product> list = new ArrayList<>();
        //获取连接
        try (Connection conn = DBUtils.getConn()) {
            String sql = "select * from product where category_id=?";
            PreparedStatement ps = conn.prepareStatement(sql);
            ps.setInt(1, Integer.parseInt(cid));
            ResultSet rs = ps.executeQuery();
            RsetListAdd(list, rs);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return list;
    }

    public List<Product> findByKeyword(String keyword) {
        ArrayList<Product> list = new ArrayList<>();
        //获取连接
        try (Connection conn = DBUtils.getConn()) {
            String sql = "select * from product where" + "title like ? or author like ? or intro like ?";
            PreparedStatement ps = conn.prepareStatement(sql);
            String like = "%" + keyword + "%";
            ps.setString(1, like);
            ps.setString(2, like);
            ps.setString(3, like);
            ResultSet rs = ps.executeQuery();
            RsetListAdd(list, rs);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return list;
    }

    public List<Product> findViewList() {
        ArrayList<Product> list = new ArrayList<>();
        try (Connection conn = DBUtils.getConn()) {
            String sql = "select * from product order by viewCount desc limit 0,4";
            Statement s = conn.createStatement();
            ResultSet rs = s.executeQuery(sql);
            RsetListAdd(list, rs);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return list;
    }

    public List<Product> findLikeList() {
        ArrayList<Product> list = new ArrayList<>();
        try (Connection conn = DBUtils.getConn()) {
            String sql = "select * from product order by likeCount desc limit 0,4";
            Statement s = conn.createStatement();
            ResultSet rs = s.executeQuery(sql);
            RsetListAdd(list, rs);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return list;
    }

    public Product findById(String id) {
        try (Connection conn = DBUtils.getConn()) {
            String sql = "select * from product where id=?";
            PreparedStatement ps = conn.prepareStatement(sql);
            ps.setInt(1, Integer.parseInt(id));
            ResultSet rs = ps.executeQuery();
            while (rs.next()) {
                //取出数据 封装到Product对象中 并且把对象添加到list集合
                int oid = rs.getInt(1);
                String title = rs.getString(2);
                String author = rs.getString(3);
                String intro = rs.getString(4);
                String url = rs.getString(5);
                int viewCount = rs.getInt(6);
                int likeCount = rs.getInt(7);
                long created = rs.getLong(8);
                int categoryId = rs.getInt(9);
                return new Product(oid, title, author, intro, url, viewCount, likeCount, created, categoryId);
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }

    private void RsetListAdd(ArrayList<Product> list, ResultSet rs) throws SQLException {
        //Refactor(重构)遍历结果集代码为方法
        while (rs.next()) {
            //取出数据 封装到Product对象中 并且把对象添加到list集合
            int id = rs.getInt(1);
            String title = rs.getString(2);
            String author = rs.getString(3);
            String intro = rs.getString(4);
            String url = rs.getString(5);
            int viewCount = rs.getInt(6);
            int likeCount = rs.getInt(7);
            long created = rs.getLong(8);
            int categoryId = rs.getInt(9);
            list.add(new Product(id, title, author, intro, url, viewCount, likeCount, created, categoryId));
        }
    }
}