🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
[TOC] ## 步骤 1 : 先运行,看到效果,再学习 先将完整的 spring 项目(向老师要相关资料),配置运行起来,确认可用之后,再学习做了哪些步骤以达到这样的效果。 ## 步骤 2 : 模仿和排错 在确保可运行项目能够正确无误地运行之后,再严格照着教程的步骤,对代码模仿一遍。 模仿过程难免代码有出入,导致无法得到期望的运行结果,此时此刻通过比较**正确答案** ( 可运行项目 ) 和自己的代码,来定位问题所在。 采用这种方式,**学习有效果,排错有效率**,可以较为明显地提升学习速度,跨过学习路上的各个槛。 ## 步骤 3 : 效果 如图所示,点击编辑按钮之后,出现分类编辑页面 ![](https://box.kancloud.cn/ea6dc0c77813ed0dec3547e18668ebaf_529x246.png) ## 步骤 4 : 编辑超链 用于编辑的超链,指向地址admin_category_edit,并且会传递当前分类对象的id过去。 `<a href="admin_category_edit?id=${c.id}"><span class="glyphicon glyphicon-edit"></span></a>` ![](https://box.kancloud.cn/aac591dc495a8770945f062ded9d40a9_88x307.png) ## 步骤 5 : CategoryMapper.xml 增加通过id获取Category对象的sql语句 ~~~ <?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.dodoke.tmall.mapper.CategoryMapper"> <select id="list" resultType="Category"> select * from t_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 t_category </select> <insert id="add" keyProperty="id" useGeneratedKeys="true" parameterType="Category"> insert into t_category(name) values(#{name}) </insert> <delete id="delete"> delete from t_category where id=#{id} </delete> <select id="get" resultType="Category"> select * from t_category where id=#{id} </select> </mapper> ~~~ ## 步骤 6 : CategoryMapper 增加get方法 ~~~ package com.dodoke.tmall.mapper; import java.util.List; import com.dodoke.tmall.pojo.Category; import com.dodoke.tmall.util.Page; public interface CategoryMapper { List<Category> list(Page page); public int total(); void add(Category category); void delete(int id); Category get(int id); } ~~~ ## 步骤 7 : CategoryService 增加get方法 ~~~ package com.dodoke.tmall.service; import java.util.List; import com.dodoke.tmall.pojo.Category; import com.dodoke.tmall.util.Page; public interface CategoryService { List<Category> list(Page page); int total(); void add(Category category); void delete(int id); Category get(int id); } ~~~ ## 步骤 8 : CategoryServiceImpl 增加get方法 ~~~ package com.dodoke.tmall.service.impl; import java.util.List; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import com.dodoke.tmall.mapper.CategoryMapper; import com.dodoke.tmall.pojo.Category; import com.dodoke.tmall.service.CategoryService; import com.dodoke.tmall.util.Page; @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); } @Override public void delete(int id) { categoryMapper.delete(id); } @Override public Category get(int id) { return categoryMapper.get(id); } } ~~~ ## 步骤 9 : CategoryController 增加edit方法 1. 映射admin_category_edit路径的访问 2. 参数id用来接受注入 3. 通过categoryService.get获取Category对象 4. 把对象放在“c"上 5. 返回editCategory.jsp ~~~ package com.dodoke.tmall.controller; import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; import java.util.List; import javax.imageio.ImageIO; import javax.servlet.http.HttpSession; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import com.dodoke.tmall.pojo.Category; import com.dodoke.tmall.service.CategoryService; import com.dodoke.tmall.util.ImageUtil; import com.dodoke.tmall.util.Page; import com.dodoke.tmall.util.UploadedImageFile; @RequestMapping("") @Controller public class CategoryController { @Autowired CategoryService categoryService; @RequestMapping("admin_category_list") public String list(Model model,Page page) { List<Category> cs = categoryService.list(page); int total = categoryService.total(); page.setTotal(total); model.addAttribute("cs", cs); model.addAttribute("page",page); return "admin/listCategory"; } /** * 新增分类 * @param c 分类对象 * @param session 用于在后续获取当前应用的路径 * @param uploadedImageFile 用于接受上传的图片 * @return 页面路径 * @throws IOException */ @RequestMapping("admin_category_add") public String add(Category c, HttpSession session, UploadedImageFile uploadedImageFile) throws IOException { // 新增分类 categoryService.add(c); // 通过session获取ControllerContext,再通过getRealPath定位存放分类图片的路径。 File imageFolder= new File(session.getServletContext().getRealPath("img/category")); // 根据分类id创建文件名 File file = new File(imageFolder,c.getId() + ".jpg"); // 如果/img/category目录不存在,则创建该目录,否则后续保存浏览器传过来图片,会提示无法保存 if(!file.getParentFile().exists()) { file.getParentFile().mkdirs(); } System.out.println(file); // 通过UploadedImageFile 把浏览器传递过来的图片保存在上述指定的位置 uploadedImageFile.getImage().transferTo(file); // 通过ImageUtil.change2jpg(file); 确保图片格式一定是jpg,而不仅仅是后缀名是jpg. BufferedImage img = ImageUtil.change2jpg(file); // 写入图片 ImageIO.write(img, "jpg", file); // 客户端跳转到admin_category_list return "redirect:/admin_category_list"; } /** * 删除分类 * @param id 分类id * @param session 用于在后续获取当前应用的路径 * @return 页面路径 * @throws IOException */ @RequestMapping("admin_category_delete") public String delete(int id,HttpSession session) throws IOException { categoryService.delete(id); File imageFolder= new File(session.getServletContext().getRealPath("img/category")); File file = new File(imageFolder,id+".jpg"); file.delete(); return "redirect:/admin_category_list"; } /** * 根据id,查询分类信息 * @param id 分类id * @param model 模型 * @return String * @throws IOException */ @RequestMapping("admin_category_edit") public String edit(int id,Model model) throws IOException { Category c= categoryService.get(id); model.addAttribute("c", c); return "admin/editCategory"; } } ~~~ ## 步骤 10 : editCategory.jsp 新建editCategory.jsp ![](https://box.kancloud.cn/b2139cd7e77949cbff2046eb4ad95394_323x501.png) ## 步骤 11 : 测试效果 如图所示,点击编辑按钮之后,出现分类编辑页面 ![](https://box.kancloud.cn/ea6dc0c77813ed0dec3547e18668ebaf_529x246.png)