门户首页功能

最新推荐文章于 2023-08-27 16:58:09 发布

雅猪OVO

最新推荐文章于 2023-08-27 16:58:09 发布

阅读量65

点赞数

文章标签： easyui ajax jquery

本文链接：https://blog.csdn.net/m0_60390985/article/details/120643908

版权

一.新书上架
1.Dao方法（根据时间降序）

public List<Book> news(Book book, PageBean pageBean) throws Exception {
       // TODO Auto-generated method stub
       String sql="select * from t_easyui_book where state=2 order by deployTime desc limit 0,8";

       return super.executeQuery(sql, Book.class, pageBean);
   }
2.子控制器

public String news(HttpServletRequest req, HttpServletResponse resp) {
           try {

               List<Book> lists = bookDao.news(book, null);

               ResponseUtil.writeJson(resp, lists);
           } catch (Exception e) {
               e.printStackTrace();
           }
           return "findBook";
       }
3.①.前端返回的是jsonArr数组
②.页面要显示html样式

$(function () {

// 上架新书
$.ajax({
url: '${pageContext.request.contextPath}/book.action?methodName=news',
dataType: "json",
data: "rows=18",
success: function (data) {
// data = eval(data);
// $(".c-category").next().append("444");

console.log(data);
single_item($(".c-category:eq(0)"), data, 0, "");

// debugger;
}
});

③.当json数组0-5产生一个新的row 6-11产生第二列row
④.最终拼成一个完整的html串
所以使用了递归(自己调自己,一定有递归的结束条件)

   public List<Book> hots(Book book, PageBean pageBean) throws Exception {
       // TODO Auto-generated method stub
       String sql="select * from t_easyui_book where state=2 order by sales desc ";

       return super.executeQuery(sql, Book.class, pageBean);
   }
2.子控制器

   public String hots(HttpServletRequest req, HttpServletResponse resp) {
           try {

               List<Book> lists = bookDao.hots(book, null);

               ResponseUtil.writeJson(resp, lists);
           } catch (Exception e) {
               e.printStackTrace();
           }
           return "findBook";
       }
3.前端渲染

$.ajax({
url: '${pageContext.request.contextPath}/book.action?methodName=hots',
dataType: "json",
data: "rows=18",
success: function (data) {
// data = eval(data);
// $(".c-category").next().append("444");
console.log(data);
single_item($(".c-category:eq(1)"), data, 0, "");

// debugger;
}
});
4.index.jsp整体代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core" %>
<html>
<head>
<meta charset="utf-8">
<title>网上书城首页</title>
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/static/css/fg.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script src="${pageContext.request.contextPath}/static/js/index.js"></script>
</head>
<body>
<input type="hidden" id="ctx" value="${pageContext.request.contextPath}">
<div class="container">
<div class="row head">
<div class="col-md-12">
<i>
您好，欢迎来到飞凡网上书店！
</i>
<b>
<a type="button" class="text-primary" href="${pageContext.request.contextPath}/login.jsp">登录</a> |
<a type="button" class="text-primary" href="${pageContext.request.contextPath}/register.jsp">注册</a> |
<a type="button" class="text-primary" href="${pageContext.request.contextPath}/shopping.action?methodName=list">我的购物车</a> |
<a type="button" class="text-primary" href="${pageContext.request.contextPath}/">网站首页</a>
</b>
</div>
</div>

<div class="row banner">
<div class="img1"></div>
<div class="col-md-12">
<form class="form" action="${pageContext.request.contextPath}/book.action?methodName=findByName" method="post">
<%--<input type="hidden" name="methodName" value="findByName">--%>
<input type="text" name="name" value="" id="input" class="search">
<input type="submit" class="btn btn-primary" value="查询">
</form>
</div>
</div>


<div class="row content">
<div class="col-md-3 float-left c-left">
<ul class="list-group">
<li class="list-group-item">书籍分类</li>
<%--<li class="list-group-item">999999999999999999999999999999999999</li>--%>
</ul>
</div>
<div class="col-md-9 float-right c-right">
<div class="row">
<div class="col-md-12">
<img class="img-fluid" src="${pageContext.request.contextPath}/static/img/banner.png">
</div>
</div>
<div class="row c-category">
<div class="col-md-12 text-left">
<img src="${pageContext.request.contextPath}/static/img/title_bj.png">
<h3>新书上架</h3>
</div>
</div>

<%--<div class="row">--%>
<%--<div class="col-md-2">--%>
<%--<figure class="figure">--%>
<%--<img src="imgs/1.png" class="figure-img img-fluid rounded" alt="...">--%>
<%--<figcaption class="figure-caption">--%>
<%--<p>小说名字</p>--%>
<%--<i class="text-danger">价格</i>--%>
<%--</figcaption>--%>
<%--</figure>--%>
<%--</div>--%>
<%--</div>--%>

<div class="row c-category">
<div class="col-md-12 text-left">
<img src="${pageContext.request.contextPath}/static/img/title_bj.png">
<h3>热销图书</h3>
</div>
</div>

<%--<div class="row">--%>
<%--<div class="col-md-2">--%>
<%--<figure class="figure">--%>
<%--<img src="imgs/1.png" class="figure-img img-fluid rounded" alt="...">--%>
<%--<figcaption class="figure-caption">--%>
<%--<p>小说名字</p>--%>
<%--<i class="text-danger">价格</i>--%>
<%--</figcaption>--%>
<%--</figure>--%>
<%--</div>--%>
<%--</div>--%>

</div>
</div>


<div class="row text-center footer">
<div class="col-md-12">
Copyright ©2014 飞凡教育，版权所有
</div>
</div>

</div>

<script type="text/javascript">
function searchByType(cid){
location.href='${pageContext.request.contextPath}/book.action?methodName=findByType&cid='+cid;
};

$(function () {

// 上架新书
$.ajax({
url: '${pageContext.request.contextPath}/book.action?methodName=news',
dataType: "json",
data: "rows=18",
success: function (data) {
// data = eval(data);
// $(".c-category").next().append("444");

console.log(data);
single_item($(".c-category:eq(0)"), data, 0, "");

// debugger;
}
});

// 热销书籍
$.ajax({
url: '${pageContext.request.contextPath}/book.action?methodName=hots',
dataType: "json",
data: "rows=18",
success: function (data) {
// data = eval(data);
// $(".c-category").next().append("444");
console.log(data);
single_item($(".c-category:eq(1)"), data, 0, "");

// debugger;
}
});

function single_item($node, data, level, htmlstr) {
// debugger;
var start = level * 6;
htmlstr += '<div class="row">';

for (var i = 0; i < 6; i++) {
if (data.length == start) {
break;
}
htmlstr += '<div class="col-md-2">'
htmlstr += '<figure class="figure">';
htmlstr += '<img src="' + data[start].image + '" class="figure-img img-fluid rounded" alt="...">';
htmlstr += '<figcaption class="figure-caption">';
htmlstr += '<p>' + data[start].name + '</p>';
htmlstr += '<i class="text-danger">' + data[start].price + '</i>';
htmlstr += '</figcaption>';
htmlstr += '</figure>';
htmlstr += '</div>';
start++;
}
htmlstr += '</div>';

level++;
if (start < data.length) {
single_item($node, data, level, htmlstr);
} else {
$node.after(htmlstr);
}
}
})

</script>
</body>
</html>

雅猪OVO

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
门户首页功能

一.新书上架1.Dao方法（根据时间降序）public List<Book> news(Book book, PageBean pageBean) throws Exception { // TODO Auto-generated method stub String sql="select * from t_easyui_book where state=2 order by deployTime desc limit 0,8"; ...
复制链接

扫一扫