本文详细描述了如何在网页中实现左侧菜单栏的显示，通过AJAX获取并显示不同类别书籍，以及图片上传功能的实现步骤。使用Category实体类、DAO和Action进行数据交互，配合jQuery实现动态效果。
一、课程目标
1、左侧没有菜单栏，要显示菜单栏
2、根据点击左侧菜单栏，要出现相应的书籍
3、最后就是图片上传
二、具体思路、代码以及效果显示
一、显示菜单栏：
1、要写一个查询书籍类别的方法
2、在index.js中运用ajax技术，定义一个jsonarr来接收数据
3、定义一个html来拼接数据
4、最后显示
2、代码：
1.Category实体类：
package com.zxy.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 + "]";
}
public Category(long id, String name) {
super();
this.id = id;
this.name = name;
}
public Category() {
super();
// TODO Auto-generated constructor stub
}
}
2.CategoryDao：
package com.zxy.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.zxy.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.zxy.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、思路：
1、在index.js中要给对应的方法添加点击事件，并附带id传到index.jsp界面
2、当点击左侧菜单栏时要附带改类别的id传到搜索书籍的方法
3、最后查询出改类别所有的书籍，先是在bookdao加上cid的条件，最后在 bookAction中调用。
代码：
index.js
for ( var i in jsonArr) {
html += '<li class="list-group-item" onclick="searchByType('+jsonArr[i].id+')">' + jsonArr[i].name
+ '</li>';
}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>
<!-- 横幅搜索栏 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>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:
public String findByType(HttpServletRequest req, HttpServletResponse resp) {
try {
PageBean pageBean=new PageBean();
List<Book> list = bd.list(book, pageBean);
pageBean.setRequest(req);
req.setAttribute("books", list);
req.setAttribute("pageBean", pageBean);
} catch (Exception e) {
e.printStackTrace();
}
return "findByType";
}配置mvc.xml
<action type="com.zxy.web.BookAction" path="/book">
<forward path="/fg/findBook.jsp" redirect="false" name="findBook"/>3、效果展示：
三、图片上传：
1、思路：
1、导入图片上传需要的jar包
2、到BookDao中写好修改image路径的方法
3、BookAction中写好上传图片的方法，名为upload。
4、到eclipse内部服务器中配置好图片映射
2、代码：
1、导入图片上传需要的jar包
2、到BookDao中写好修改image路径的方法
public void editImgUrl(Book t) throws Exception {
super.executeUpdate("update t_easyui_book set image=? where id=?", t,
new String[] {"image","id"});
}3、BookAction中写好上传图片的方法，名为upload。图片映射代码：
<Context path="/uploadImages" docBase="E:/temp/2021/mvc/upload/"/>
<Context path="/" docBase="/mvc"/>
工具类：
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);
}
}4.图片映射代码：
<Context path="/uploadImages" docBase="E:/temp/2021/mvc/upload/"/>
<Context path="/" docBase="/mvc"/>效果展示：
结束啦啦啦啦
扫一扫
2724
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
