效果
页面中的增加分类部分
增加分类的代码是整合在listCategory.jsp中的
需要注意几点:
1. method="post" 用于保证中文的正确提交
2. 必须有enctype="multipart/form-data",这样才能上传文件
3. accept="image/*" 这样把上传的文件类型限制在了图片
<div class="panel panel-warning addDiv">
<div class="panel-heading">新增分类</div>
<div class="panel-body">
<form method="post" id="addForm" action="admin_category_add" enctype="multipart/form-data">
<table class="addTable">
<tr>
<td>分类名称</td>
<td><input id="name" name="name" type="text" class="form-control"></td>
</tr>
<tr>
<td>分类圖片</td>
<td>
<input id="categoryPic" accept="image/*" type="file" name="image" />
</td>
</tr>
<tr class="submitTR">
<td colspan="2" align="center">
<button type="submit" class="btn btn-success">提 交</button>
</td>
</tr>
</table>
</form>
</div>
为空判断
对分类名称和分类图片做了为空判断,当为空的时候,不能提交
其中用到的函数checkEmpty,在adminHeader.jsp 中定义
<script>
$(function(){
$("#addForm").submit(function(){
if(!checkEmpty("name","分类名称"))
return false;
if(!checkEmpty("categoryPic","分类图片"))
return false;
return true;
});
});
</script>
CategoryMapper.xml
在CategoryMapper.xml中新增加 插入分类的SQL语句
注: 需要加上2个属性:keyProperty="id" useGeneratedKeys="true" 以确保Category对象通过mybatis增加到数据库之后得到的id增长值会被设置在Category对象上。 因为在保存分类图片的时候需要用到这个id值,所以这一步是必须的。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.how2java.tmall.mapper.CategoryMapper">
<select id="list" resultType="Category">
select * from category order by id desc
<if test="start!=null and count!=null">
limit #{start},#{count}
</if>
</select>
<select id="total" resultType="int">
select count(*) from category
</select>
<insert id="add" keyProperty="id" useGeneratedKeys="true" parameterType="Category" >
insert into category ( name ) values (#{name})
</insert>
</mapper>
CategoryMapper
新增add方法
package com.how2java.tmall.mapper;
import com.how2java.tmall.util.Page;
import com.how2java.tmall.pojo.Category;
import java.util.List;
public interface CategoryMapper {
List<Category> list(Page page);
int total();
void add(Category category);
}
CategoryServiceImpl
package com.how2java.tmall.service.impl;
import com.how2java.tmall.util.Page;
import com.how2java.tmall.mapper.CategoryMapper;
import com.how2java.tmall.pojo.Category;
import com.how2java.tmall.service.CategoryService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class CategoryServiceImpl implements CategoryService {
@Autowired
CategoryMapper categoryMapper;
@Override
public List<Category> list(Page page) {
return categoryMapper.list(page);
}
@Override
public int total() {
return categoryMapper.total();
}
@Override
public void add(Category category) {
categoryMapper.add(category);
}
}
CategoryController
CategoryController新增add方法
1. add方法映射路径admin_category_add的访问
1.1 参数 Category c接受页面提交的分类名称
1.2 参数 session 用于在后续获取当前应用的路径
1.3 UploadedImageFile 用于接受上传的图片
2. 通过categoryService保存c对象
3. 通过session获取ServletContext,再通过getRealPath定位存放分类图片的路径。
如果严格按照本教程的做法,使用idea中的tomcat部署的话,那么图片就会存放在:E:\project\tmall_ssm\target\tmall_ssm\img\category 这里
4. 根据分类id创建文件名
5. 如果/img/category目录不存在,则创建该目录,否则后续保存浏览器传过来图片,会提示无法保存
6. 通过UploadedImageFile 把浏览器传递过来的图片保存在上述指定的位置
7. 通过ImageUtil.change2jpg(file); 确保图片格式一定是jpg,而不仅仅是后缀名是jpg.
8. 客户端跳转到admin_category_list
@RequestMapping("admin_category_add")
public String add(Category c, HttpSession session, UploadedImageFile uploadedImageFile) throws IOException {
categoryService.add(c);
File imageFolder= new File(session.getServletContext().getRealPath("img/category"));
File file = new File(imageFolder,c.getId()+".jpg");
if(!file.getParentFile().exists())
file.getParentFile().mkdirs();
uploadedImageFile.getImage().transferTo(file);
BufferedImage img = ImageUtil.change2jpg(file);
ImageIO.write(img, "jpg", file);
return "redirect:/admin_category_list";
}
中文问题
中文问题,统一交由web.xml 中定义的org.springframework.web.filter.CharacterEncodingFilter来进行处理
其他的配合动作
1. 在jsp中要加上
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" import="java.util.*"%>
其中contentType="text/html; charset=UTF-8"的作用是告诉浏览器提交数据的时候,使用UTF-8编码
2. 在form里method="post" 才能正确提交中文