how2j.cn

相关下载
文件名 文件大小
tmall_springboot.rar 1m
使用站长秘制下载工具

4分28秒
本视频采用html5方式播放,如无法正常播放,请将浏览器升级至最新版本,推荐火狐,chrome,360浏览器 如果装有迅雷,播放视频呈现直接下载状态,请调整 迅雷系统设置-基本设置-启动-监视全部浏览器 (去掉这个选项)

步骤 1 : 先运行,看到效果,再学习   
步骤 2 : 模仿和排错   
步骤 3 : 效果   
步骤 4 : editCategory.html   
步骤 5 : CategoryService   
步骤 6 : CategoryController   

步骤 1 :

先运行,看到效果,再学习

老规矩,先下载右上角的可运行项目,配置运行起来,确认可用之后,再学习做了哪些步骤以达到这样的效果。
步骤 2 :

模仿和排错

在确保可运行项目能够正确无误地运行之后,再严格照着教程的步骤,对代码模仿一遍。
模仿过程难免代码有出入,导致无法得到期望的运行结果,此时此刻通过比较正确答案 ( 可运行项目 ) 和自己的代码,来定位问题所在。
采用这种方式,学习有效果,排错有效率,可以较为明显地提升学习速度,跨过学习路上的各个槛。

推荐使用diffmerge软件,进行文件夹比较。把你自己做的项目文件夹,和我的可运行项目文件夹进行比较。
这个软件很牛逼的,可以知道文件夹里哪两个文件不对,并且很明显地标记出来
这里提供了绿色安装和使用教程:diffmerge 下载和使用教程
步骤 3 :

效果

如图所示,"测试分类A" 的名称被修改为了 "测试分类B"
效果
步骤 4 :

editCategory.html

editCategory.html 没有改变,因为在编辑里的 editCategory.html 就已经给完整了。 这里讲解一下 update 方法。
其实,这个update 和增加页面 listCategory.html add 函数是很接近的。
1. 也是先判断分类名称是否为空
2. 不判断是否有选择上传图片。 因为在逻辑上是如果选择了上传图片,就更新图片,如果没有选择,就保留原图片不变。
3. 使用 formData 上传图片
4. 使用 put 方式上传。 按照 REST规范,增加是 POST,修改是 PUT。
5. 修改成功之后, 跳转到 admin_category_list 页面去。

getFile 函数的作用和以前一样,略过不表。
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head th:include="include/admin/adminHeader::html('编辑分类')" ></head> <body> <div th:replace="include/admin/adminNavigator::html" ></div> <script> $(function(){ var data4Vue = { uri: 'categories', listURL:'admin_category_list', bean: { id: 0, name: '', hp: '0'}, file:'' }; //ViewModel var vue = new Vue({ el: '#workingArea', data: data4Vue, mounted:function(){ //mounted 表示这个 Vue 对象加载成功了 this.get(); }, methods: { get:function(){ var id = getUrlParms("id"); var url = this.uri+"/"+id; axios.get(url).then(function(response) { vue.bean = response.data; }) }, update:function () { if(!checkEmpty(this.bean.name, "分类名称")) return; var url = this.uri+"/"+this.bean.id; //axios.js 上传文件要用 formData 这种方式 var formData = new FormData(); formData.append("image", this.file); formData.append("name", this.bean.name); axios.put(url,formData).then(function(response){ location.href=vue.listURL; }); }, getFile: function (event) { this.file = event.target.files[0]; } } }); }); </script> <div id="workingArea"> <ol class="breadcrumb"> <li><a href="admin_category_list">所有分类</a></li> <li class="active">编辑分类</li> </ol> <div class="panel panel-warning editDiv"> <div class="panel-heading">编辑分类</div> <div class="panel-body"> <table class="editTable"> <tr> <td>分类名称</td> <td><input @keyup.enter="update" v-model.trim="bean.name" type="text" class="form-control"></td> </tr> <tr> <td>分类图片</td> <td> <input id="categoryPic" accept="image/*" type="file" name="image" @change="getFile($event)" /> </td> </tr> <tr class="submitTR"> <td colspan="2" align="center"> <input type="hidden" name="id" v-model.trim="bean.id" > <a href="#nowhere" class="btn btn-success" @click="update">提 交</a> </td> </tr> </table> </div> </div> </div> <div th:replace="include/admin/adminFooter::html" ></div> </body> </html>
步骤 5 :

CategoryService

增加 update 函数
package com.how2java.tmall.service; import java.util.List; import com.how2java.tmall.util.Page4Navigator; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.data.domain.Page; import org.springframework.data.domain.PageRequest; import org.springframework.data.domain.Pageable; import org.springframework.data.domain.Sort; import org.springframework.stereotype.Service; import com.how2java.tmall.dao.CategoryDAO; import com.how2java.tmall.pojo.Category; @Service public class CategoryService { @Autowired CategoryDAO categoryDAO; public Page4Navigator<Category> list(int start, int size, int navigatePages) { Sort sort = new Sort(Sort.Direction.DESC, "id"); Pageable pageable = new PageRequest(start, size,sort); Page pageFromJPA =categoryDAO.findAll(pageable); return new Page4Navigator<>(pageFromJPA,navigatePages); } public List<Category> list() { Sort sort = new Sort(Sort.Direction.DESC, "id"); return categoryDAO.findAll(sort); } public void add(Category bean) { categoryDAO.save(bean); } public void delete(int id) { categoryDAO.delete(id); } public Category get(int id) { Category c= categoryDAO.findOne(id); return c; } public void update(Category bean) { categoryDAO.save(bean); } }
步骤 6 :

CategoryController

增加update函数,它是用 PutMapping 来映射的,因为 REST要求修改用PUT来做。
1. 获取参数名称
这里获取参数用的是 request.getParameter("name"). 为什么不用 add里的注入一个 Category对象呢? 因为。。。PUT 方式注入不了。。。 只能用这种方式取参数了,试了很多次才知道是这么个情况~
2. 通过 CategoryService 的update方法更新到数据库
3. 如果上传了图片,调用增加的时候共用的 saveOrUpdateImageFile 方法。
4. 返回这个分类对象。
package com.how2java.tmall.web; import com.how2java.tmall.pojo.Category; import com.how2java.tmall.service.CategoryService; import com.how2java.tmall.util.ImageUtil; import com.how2java.tmall.util.Page4Navigator; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.*; import org.springframework.web.multipart.MultipartFile; import javax.imageio.ImageIO; import javax.servlet.http.HttpServletRequest; import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; @RestController public class CategoryController { @Autowired CategoryService categoryService; @GetMapping("/categories") public Page4Navigator<Category> list(@RequestParam(value = "start", defaultValue = "0") int start, @RequestParam(value = "size", defaultValue = "5") int size) throws Exception { start = start<0?0:start; Page4Navigator<Category> page =categoryService.list(start, size, 5); //5表示导航分页最多有5个,像 [1,2,3,4,5] 这样 return page; } @PostMapping("/categories") public Object add(Category bean, MultipartFile image, HttpServletRequest request) throws Exception { categoryService.add(bean); saveOrUpdateImageFile(bean, image, request); return bean; } public void saveOrUpdateImageFile(Category bean, MultipartFile image, HttpServletRequest request) throws IOException { File imageFolder= new File(request.getServletContext().getRealPath("img/category")); File file = new File(imageFolder,bean.getId()+".jpg"); if(!file.getParentFile().exists()) file.getParentFile().mkdirs(); image.transferTo(file); BufferedImage img = ImageUtil.change2jpg(file); ImageIO.write(img, "jpg", file); } @DeleteMapping("/categories/{id}") public String delete(@PathVariable("id") int id, HttpServletRequest request) throws Exception { categoryService.delete(id); File imageFolder= new File(request.getServletContext().getRealPath("img/category")); File file = new File(imageFolder,id+".jpg"); file.delete(); return null; } @GetMapping("/categories/{id}") public Category get(@PathVariable("id") int id) throws Exception { Category bean=categoryService.get(id); return bean; } @PutMapping("/categories/{id}") public Object update(Category bean, MultipartFile image,HttpServletRequest request) throws Exception { String name = request.getParameter("name"); bean.setName(name); categoryService.update(bean); if(image!=null) { saveOrUpdateImageFile(bean, image, request); } return bean; } }


HOW2J公众号,关注后实时获知布最新的教程和优惠活动,谢谢。


问答区域    
2018-11-07 关于获取参数的问题
Coolman
update方法中为什么需要获取参数name,而不是像Id一样注入bean中呢








答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到








提问之前请登陆
关于 实践项目-天猫整站Springboot-修改 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 902680467
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: http://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图