[TOC] ## 步驟 1 : 先運行，看到效果，再學習 先將完整的 spring 項目（向老師要相關資料），配置運行起來，確認可用之后，再學習做了哪些步驟以達到這樣的效果。 ## 步驟 2 : 模仿和排錯 在確保可運行項目能夠正確無誤地運行之后，再嚴格照著教程的步驟，對代碼模仿一遍。 模仿過程難免代碼有出入，導致無法得到期望的運行結果，此時此刻通過比較**正確答案** ( 可運行項目 ) 和自己的代碼，來定位問題所在。 采用這種方式，**學習有效果，排錯有效率**，可以較為明顯地提升學習速度，跨過學習路上的各個檻。 ## 步驟 3 : 效果 如圖所示，"測試分類A" 的名稱被修改為了 "測試分類B"  ## 步驟 4 : 編輯頁面提交數據 編輯頁面提交數據到admin_category_update ~~~ <form method="post" id="editForm" action="admin_category_update" enctype="multipart/form-data"> ~~~ 1. method="post" 用于提交中文 2. enctype="multipart/form-data" 用于提交二進制文件  ## 步驟 5 : CategoryMapper.xml 增加修改的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> <update id="update" parameterType="Category"> update t_category set name=#{name} where id=#{id} </update> </mapper> ~~~ ## 步驟 6 : CategoryMapper 增加update方法 ~~~ 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); void update(Category category); } ~~~ ## 步驟 7 : CategoryService 增加update方法 ~~~ 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); void update(Category category); } ~~~ ## 步驟 8 : CategoryServiceImpl 增加update方法 ~~~ 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); } @Override public void update(Category category) { categoryMapper.update(category); } } ~~~ ## 步驟 9 : CategoryController 新增update方法 1. update 方法映射路徑admin_category_update的訪問 * 參數 Category c接受頁面提交的分類名稱 * 參數 session 用于在后續獲取當前應用的路徑 * UploadedImageFile 用于接受上傳的圖片 2. 通過categoryService更新c對象 3. 首先判斷是否有上傳圖片，如果有上傳，那么通過session獲取ControllerContext,再通過getRealPath定位存放分類圖片的路徑。 如果嚴格按照本教程的做法，使用idea中的tomcat部署的話，那么圖片就會存放在:E:\project\tmall_ssm\target\tmall_ssm\img\category 這里 4. 根據分類id創建文件名 5. 通過UploadedImageFile 把瀏覽器傳遞過來的圖片保存在上述指定的位置 6. 通過ImageUtil.change2jpg(file); 確保圖片格式一定是jpg，而不僅僅是后綴名是jpg. 7. 客戶端跳轉到admin_category_list ~~~ 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 org.springframework.web.multipart.MultipartFile; 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 頁面路徑 * @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"; } /** * 更新分類 * @param c 接受頁面提交的分類名稱 * @param session 用于在后續獲取當前應用的路徑 * @param uploadedImageFile 用于接受上傳的圖片 * @return 頁面路徑 * @throws IOException */ @RequestMapping("admin_category_update") public String update(Category c, HttpSession session, UploadedImageFile uploadedImageFile) throws IOException { // 更新分類 categoryService.update(c); MultipartFile image = uploadedImageFile.getImage(); // 判斷是否有圖片上傳 if(null!=image &&!image.isEmpty()){ File imageFolder= new File(session.getServletContext().getRealPath("img/category")); // 根據分類id創建文件 File file = new File(imageFolder,c.getId()+".jpg"); // 把瀏覽器傳遞過來的圖片保存在上述指定的位置 image.transferTo(file); // 確保圖片格式一定是jpg，而不僅僅是后綴名是jpg. BufferedImage img = ImageUtil.change2jpg(file); // 覆蓋圖片 ImageIO.write(img, "jpg", file); } // 客戶端跳轉到admin_category_list return "redirect:/admin_category_list"; } } ~~~ ## 步驟 10 : 測試效果 如圖所示，點擊編輯按鈕之后，出現分類編輯頁面，更改信息，保存，訪問分類信息頁面。 比如將**測試分類A**更改為**測試分類B**   ## 問題 1. 在有圖片時選擇編輯，更改了圖片成功后，網頁上的圖片沒有及時變更，這是怎么一回事？ > 有緩存，用F5多刷新幾下，就能看到最新上傳的分類圖片了 > 2. 編輯信息，又上傳一張圖片，但是圖片的名字始終是id+jpg。那么不會沖突嗎 > 新上傳的，把原來上傳的圖片替換了呀，所以并沒有保留原圖片的需求，也就談不上沖突嘛