目录
4、资源文件的配置,写一个资源文件resource.properties
一、门户首页书籍类别显示
也就是说我们想根据数据库里的数据呈现在页面上
当然我们需要的不是固定死的数据,而是从后台获得的数据
我们需要写到有关这分类表Category的实体类Category、dao方法CategoryDao、子控制器CategoryAction以及配置进行查询里面的数据,这些前面有写到
在index.js中运用ajax技术,定义一个jsonarr来接收数据:
$(function() {
$.ajax({
url:$("#ctx").val()+'/category.action?methodName=combobox',
success:function(data){
console.log(data)
var jsonArr = eval("("+data+")");
var html='';
for (var i in jsonArr) {
html +='<li class="list-group-item" οnclick="searchByType('+jsonArr[i].id+')">'+jsonArr[i].name+'</li>';
}
$(".list-group").append(html);
}
})
})
效果如下:
三、按类别查询对应的书籍
解释:点击类别出现有关这个类别的书籍
1.前端
注:从首页index.jsp传递书籍类别ID到后台来查询
不是发送Ajax请求
点击事件的方法是:
function searchByType(cid){
location.href='${pageContext.request.contextPath}/book.action?methodName=findByType&cid='+cid;
};
2、我们给这个类别方法设置一个点击事件
$(function(){
$.ajax({
url:$("#ctx").val()+"/category.action?methodName=combobox",
success:function(data){
var jsonArr=eval("("+data+")");
var html='';
for(var i in jsonArr){
html+='<li class="list-group-item" οnclick="searchByType('+jsonArr[i].id+')">'+jsonArr[i].name+'</li>';
}
$(".list-group").append(html);
}
});
})
3、后端:
通过类别id查询到对应书籍集合,到前台遍历
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();
pageBean.setRequest(req);
List<Book> list = bd.list(book, pageBean);
req.setAttribute("books", list);
req.setAttribute("pageBean", pageBean);
} catch (Exception e) {
e.printStackTrace();
try {
ResponseUtil.writeJson(resp, 0);
} catch (Exception e1) {
e1.printStackTrace();
}
}
return "findBook";
}
4、进行配置,跳转方式为转发
<action path="/book" type="lv.com.web.BookAction">
<forward name="findBook" path="/fg/findBook.jsp" redirect="false" />
</action>
5.运行效果
二、图片上传
1.图片上传表单提交
function submitForm2() {
var row = $('#dg').datagrid('getSelected');
console.log(row);
// if (row) {
// $('#ff2').attr("action", $('#ff2').attr("action") + "&id=" + row.id);
// }
$('#ff2').form('submit', {
url: '${pageContext.request.contextPath}/book.action?methodName=upload&id=' + row.id,
success: function (param) {
$('#dd2').dialog('close');
$('#dg').datagrid('reload');
$('#ff2').form('clear');
}
})
}
2、修改图片的方法BookDao
public void editImgUrl(Book book) throws Exception {
super.executeUpdate("update t_easyui_book set image=? where id=?",
book,new String[] {"image","id"});
}
3、写一个工具类DateUtil
public static String getCurrentDateStr() {
// 生成20210924123025这种格式的照片
SimpleDateFormat sdf=new SimpleDateFormat("yyyyMMddHHmmss");
return sdf.format(new Date());
}
4、资源文件的配置,写一个资源文件resource.properties
注意diskDir的路径应在本电脑中已创建
diskDir=F:/temp/imgs/
serverDir=/uploadImages/
5、写一个读取资源文件的帮助类PropertiesUtil
public static String getValue(String key) throws Exception {
Properties p=new Properties();
InputStream in = PropertiesUtil.class.getResourceAsStream("/resource.properties");
p.load(in);
return p.getProperty(key);
}
6、子控制器BookAction
public String upload(HttpServletRequest req, HttpServletResponse resp) {
try {
FileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
List<FileItem> items = upload.parseRequest(req);
Iterator<FileItem> itr = items.iterator();HttpSession session = req.getSession();
while (itr.hasNext()) {
FileItem item = (FileItem) itr.next();
if (item.isFormField()) {
System.out.println("普通字段处理");
book.setId(Long.valueOf(req.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.bd.editImgUrl(book);
ResponseUtil.writeJson(resp, 1);
}
}} catch (Exception e) {
e.printStackTrace();
}
return null;
}
8、配置eclipse内置的tomcat
首先在tomcat文件中找到服务server文件
<Context path="/uploadImages" docBase="F:/temp/imgs/"/>