门户首页类别显示&分类查询&图片上传

一，门户首页类别显示

如果需要把数据库里的东西呈现在页面上，首先我们需要进行HTML拼接样式

如下：

 

---

 然后我们需要拿到后台获取的数据，写到有关这分类表Category的实体类Category、dao方法CategoryDao、子控制器CategoryAction以及配置进行查询里面的数据。

实体类Category：

 dao方法CategoryDao：

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);
    } 

子控制器CategoryAction：

public String load(HttpServletRequest req, HttpServletResponse resp) {
        try {
//            传递id到后台，只会查出一个类别
            Category c = cd.list(category, null).get(0);
            ResponseUtil.writeJson(resp, c);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    } 

配置：

<action path="/bookVo" type="lv.com.web.BookVoAction"></action>

效果如下：

二，根据类别查询 

我们需要在点击类别时拿到这个类别的数据并呈现在页面上

 从首页index.jsp传递书籍类别ID到后台来查询
 不是发送Ajax请求

1，点击事件如下

,2，给这个类别方法设置点击事件

$(function(){
	$.ajax({
		url:$("#ctx").val()+"/category.action?methodName=listType",
		success:function(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)
		}
	})
})

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>

效果如下：

 

三，网络图片上传

1，考入jar包

 

 2，图片上传表单提交

   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');
            }
        })
    }

3，bookdao修改图片的方法

public void editImgUrl(Book book) throws Exception {
        super.executeUpdate("update t_easyui_book set image=?  where id=?", 
                book,new String[] {"image","id"});
    } 

4，工具类DateUtil

public static String getCurrentDateStr() {
//        生成20210924123025这种格式的照片
        SimpleDateFormat sdf=new SimpleDateFormat("yyyyMMddHHmmss");
        return sdf.format(new Date());
    } 

5、资源文件的配置，写一个资源文件resource.properties

注意diskDir的路径应在本电脑中已创建

diskDir=E:/Temp/mvc/upload/
serverDir=/uploadImages/

6、、写一个读取资源文件的帮助类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);
    }

7、子控制器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文件

 在server文件中添加图片映射

<Context path="/uploadImages" docBase="E:/Temp/mvc/upload/"/>         

效果如下：