一.门户首页类别
1.entity类别实体类
package com.zking.entity;
public class Category {
private long id;
private String name;
public long getId() {
return id;
}
public void setId(long id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
@Override
public String toString() {
return "Category [id=" + id + ", name=" + name + "]";
}
}
2.CategoryDao
package com.zking.dao;
import java.util.List;
import com.zking.entity.Category;
import com.zking.util.BaseDao;
import com.zking.util.PageBean;
public class CategoryDao extends BaseDao<Category> {
// 查询书籍分类
public List<Category> list(Category category,PageBean pageBean) throws Exception {
String sql = "select * from t_easyui_category where 1=1";
long id=category.getId();
if(id!=0) {
sql+=" and id = "+id;
}
return super.executeQuery(sql,Category.class, pageBean);
}
}
3.CategoryAction
package com.zking.web;
import com.zking.dao.CategoryDao;
import com.zking.entity.Category;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.ResponseUtil;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.List;
public class CategoryAction extends ActionSupport implements ModelDriver<Category> {
private Category category = new Category();
private CategoryDao categoryDao = new CategoryDao();
/**
* 加载书籍类别下拉框
* @param req
* @param resp
* @return
*/
public String combobox(HttpServletRequest req, HttpServletResponse resp){
try {
List<Category> list = categoryDao.list(category, null);
ResponseUtil.writeJson(resp,list);
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
public String load(HttpServletRequest req, HttpServletResponse resp){
try {
//传递id到后台,只会查出一个类别
Category c= categoryDao.list(category, null).get(0);
ResponseUtil.writeJson(resp,c);
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
@Override
public Category getModel() {
return category;
}
}
4.配置mvc.xml
<action type="com.zking.web.CategoryAction" path="/Category">
</action>
5.js拼接
//门户首页类别
$(function(){
$.ajax({
url:$("#ctx").val()+"/Category.action?methodName=combobox",
success:function(data){
// var jsonstr='[{"id":1,"name":"文艺"},{"id":2,"name":"小说"},{"id":3,"name":"生活"}]'
alert(data);
var jsonArr=eval("("+data+")");
var html='';
for(var i in jsonArr){
html+='<li class="list-group-item" onclick="searchByType('+jsonArr[i].id+')">'+jsonArr[i].name+'</li>';
}
$(".list-group").append(html);
}
});
})
展示效果:
二.书籍类别查询
效果:点击左菜单栏,出现对应的书籍
1.在index.js中要给对应的方法添加点击事件,并附带id传到index.jsp界面
2.当点击左侧菜单栏时要附带改类别的id传到搜索书籍的方法
3.最后查询出改类别所有的书籍,先是在bookdao加上cid的条件,最后在bookAction中调用
BookDao
public List<Book> list(Book book, PageBean pageBean) throws Exception {
String sql="select * from t_easyui_book where 1=1";
String name=book.getName();
int state = book.getState();
long cid=book.getCid();
if(StringUtils.isNotBlank(name)) {
sql+=" and name like '%"+name+"%'";
}
if(state!=0) {
sql+=" and state="+state;
}
if(cid!=0) {
sql+=" and cid="+cid;
}
return super.executeQuery(sql,Book.class, pageBean);
}
bookAction
/**
* 目标:按照书籍的类别查询出对应的书籍信息
* 前端:从首页index.jsp传递书籍类别id到后台查询
* 不是发送ajax请求
* 后端:
* 通过类别id查询出对应书籍集合,到前台遍历
* 后台有返回值
* @param req
* @param resp
* @return
*/
public String findByType(HttpServletRequest req, HttpServletResponse resp) {
try {
PageBean pageBean =new PageBean();
pageBean.setRequest(req);
List<Book>list=bookDao.list(book, pageBean);
req.setAttribute("books",list);
req.setAttribute("pagebean",pageBean);
} catch (Exception e) {
e.printStackTrace();
}
return "findBook";
}
配置mvc.xml
<action type="com.zking.web.BookAction" path="/book">
<forward path="/fg/findBook.jsp" redirect="false" name="findBook"/>
书籍界面展示:
<%@ 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>
<!-- 横幅搜索栏 start -->
<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>
<!-- 横幅搜索栏 end -->
<!-- 页面主体内容 start -->
<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>
<!-- 页面主体内容 end -->
<!-- 网站版权 start -->
<div class="row text-center footer">
<div class="col-md-12">
Copyright ©2014 飞凡教育,版权所有
</div>
</div>
<!-- 网站版权 end -->
</div>
<script type="text/javascript">
function searchByType(cid){
//alert(cid);
location.href='${pageContext.request.contextPath}/book.action?methodName=findByType&cid='+cid;
};
//门户首页类别<li class="list-group-item">99</li>将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.rows, 0, "");
// debugger;
}
});
// 热销书籍
$.ajax({
url: '${pageContext.request.contextPath}/book.action?methodName=hot',
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.rows, 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>
展示效果:
三.图片上传
思路:
1.导入图片上传需要的jar包
2.BookDao中写好修改image路径的方法
3.BookAction中写好上传图片的方法
4.到eclipse内部服务器中配置好图片映射
bookAction
public String upload(HttpServletRequest request, HttpServletResponse response) {
try {
FileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
List<FileItem> items = upload.parseRequest(request);
Iterator<FileItem> itr = items.iterator();
HttpSession session = request.getSession();
while (itr.hasNext()) {
FileItem item = (FileItem) itr.next();
if (item.isFormField()) {
System.out.println("普通字段处理");
book.setId(Long.valueOf(request.getParameter("id")));
} else if (!"".equals(item.getName())) {
String imageName = DateUtil.getCurrentDateStr();
// 存入数据的的数据,以及浏览器访问图片的映射地址
String serverDir = PropertiesUtil.getValue("serverDir");
// 图片真实的存放位置
String diskDir = PropertiesUtil.getValue("diskDir");
// 图片的后缀名
String subfix = item.getName().split("\\.")[1];
book.setImage(serverDir + imageName + "." + subfix);
item.write(new File(diskDir + imageName + "." + subfix));
this.bookDao.editImgUrl(book);
ResponseUtil.writeJson(response, 1);
}
}
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
工具类
package com.zking.util;
import java.text.SimpleDateFormat;
import java.util.Date;
/**
* 日期处理工具包
* @author Administrator
*
*/
public class DateUtil {
*/
/**
* 获取当前时间的字符串
* @return
* @throws Exception
*/
public static String getCurrentDateStr()throws Exception{
Date date=new Date();
SimpleDateFormat sdf=new SimpleDateFormat("yyyyMMddHHmmss");
return sdf.format(date);
}
}
文件解析类
package com.zking.util;
import java.io.IOException;
import java.io.InputStream;
import java.util.Properties;
public class PropertiesUtil {
public static String getValue(String key) throws IOException{
Properties p=new Properties();
InputStream in=PropertiesUtil.class.getResourceAsStream("/resources.properties");
p.load(in);
return p.getProperty(key);
}
}
配置resource.properties文件内容
diskDir=E:/temp/2021/mvc/upload/
serverDir=/uploadImages/
到server服务里调路径
<Context docBase="E:/temp/2021/mvc/upload/" path="/uploadImages"/>
展示效果: