门户书籍，类别查询，图片上传

一.门户首页类别

知识：学一个查询书籍的方法，在index.js中运用ajax技术，然后定义一个jsonarry来接收数据，接着用一个html来拼接数据，最后显示出来。

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;}@Overridepublic 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;}@Overridepublic 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"/>

展示效果：