how2j.cn

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

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

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

步骤 1 :

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

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

模仿和排错

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

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

效果

如图所示,点击编辑按钮之后,出现分类编辑页面
效果
步骤 4 :

编辑超链

用于编辑的超链,指向地址admin_category_edit,并且会传递当前分类对象的id过去。

<a :href="'admin_category_edit?id=' + bean.id "><span class="glyphicon glyphicon-edit"></span></a>
编辑超链
步骤 5 :

AdminPageController

增加一个对/admin_category_edit的映射,然后服务端跳转到 editCategory.html 去
package com.how2java.tmall.web; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; @Controller public class AdminPageController { @GetMapping(value="/admin") public String admin(){ return "redirect:admin_category_list"; } @GetMapping(value="/admin_category_list") public String listCategory(){ return "admin/listCategory"; } @GetMapping(value="/admin_category_edit") public String editCategory(){ return "admin/editCategory"; } }
步骤 6 :

editCategory.html

editCategory.html 加载成功之后,调用 get 方法。
1. get 方法首先从图如所示的地址栏里把id取出来。 取出的办法是调用 getUrlParms 函数。 getUrlParms 函数是定义在 adminHeader.html 里的。
2. 组织url 成为 /categories/13 这种形式
3. 通过 axios 发出 get 请求
4. 把返回对象放在bean上。
5. vue 会根据 v-model 自动把 bean 上的数据放到对应的输入框里的。

关于 update 函数,下一个知识点才讲解,先不管它。。。
editCategory.html
<!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>
步骤 7 :

CategoryService

提供 get 方法
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; } }
步骤 8 :

CategoryController

提供 get 方法,把id对应的Category取出来,并转换为json对象发给浏览器
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; } }


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


问答区域    
2018-10-31 HTML乱码问题
yutongxue
站长你这使用thymeleaf的HTML页面怎么都是GBK的乱码格式?每次都要单独的变换为utf-8……




2 个答案

yutongxue 答案时间:2018-11-02
奇了个怪

how2j 答案时间:2018-11-02
啊?不会吧,刚才我专门下载了当前 可运行项目里的 editCategory.html, 它是 utf-8编码的呀,奇了怪了哦




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




2018-10-29 勘误
假装在火星
站长你好,我发现了你的一个小疏忽。 editCategory.html中第40行代码 上传图片的方法使用的是put,但是在CategoryController中没有对应的映射方法,所以会报异常Request method 'PUT' not supported,导致编辑失败。 你看下是不是这个情况。








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




2018-10-29 axios.put上传图片




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

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

上传截图