模仿天猫实战【SSM版】——后台开发

模仿天猫实战【SSM版】——后台开发

后台需求分析

在开始码代码之前,还是需要先清楚自己要做什么事情,后台具体需要实现哪些功能:

模仿天猫实战【SSM版】——后台开发

注意: 订单、用户、订单、推荐链接均不提供增删的功能。

后台界面设计

不像前端那样有原型直接照搬就可以了,后台的设计还真的有难到我...毕竟我是一个对美有一定要求的人,一方面想尽量的简洁、简单,另一方面又不想要太难看,那怎么办呢?

模仿天猫实战【SSM版】——后台开发

那当然是找模板了,找到一个顺眼的下载下来就开始改,

这个模板的原地址在这里:戳这里

模仿天猫实战【SSM版】——后台开发

顺便安利一下 FireFox ,真是开发神器,配合着修改,棒棒哒:

模仿天猫实战【SSM版】——后台开发

经过一番折腾...

模仿天猫实战【SSM版】——后台开发

摁,就这风格了,而且我还发现右上角的【Search】框是下载的模板用 js 实现的...对于管理来说更加方便了....而且居然还实现了分页....

一个邪恶的想法又诞生了...

一些规定

为了降低项目的难度,我们做了很多的精简,现在我们作出如下的规定:

全站没有商家,只有一家 Tmall ,后台没有验证,可以直接进入

前台的路径就是默认路径,后台的路径需要加上 “/admin” 后缀,如访问后台则为:localhost/admin (默认为分类管理页

管理路径统一为:admin/listXxxxx,如分类管理路径为:admin/listCategory,用户管理路径为:admin/listUser,诸如此类

编辑路径统一为:admin/editXxxxx,如编辑分类路径为:admin/editCategory,产品编辑页为:admin/editProduct,诸如此类

删除路径统一为:admin/deleteXxxxx

更新路径统一为:admin/updateXxxxx

关于页面路径的一些规定:

前端页面统一在【WEB-INF/views】下,后端页面统一在【WEB-INF/views/admin】下

分类管理

正式开始编写我们的代码,以 Category 为例。

编写 Service 层

我们需要在这一层上考虑需要完成的功能,对应我们上面画的后台功能图,分类管理也就是完成分类的查询还有修改的工作:

package cn.wmyskxz.service; import cn.wmyskxz.pojo.Category; import java.util.List; public interface CategoryService { /** * 返回分类列表 * @return */ List<Category> list(); /** * 通过id获取对应的数据 * @param id * @return */ Category get(Integer id); /** * 更新分类 * @param category * @return */ void update(Category category); }

编写 CategoryServiceImpl :
在同一包下编写实现类

package cn.wmyskxz.service; import cn.wmyskxz.mapper.CategoryMapper; import cn.wmyskxz.pojo.Category; import cn.wmyskxz.pojo.CategoryExample; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import java.util.List; /** * CategoryService 的实现类 * * @author: @我没有三颗心脏 * @create: 2018-04-27-下午 16:35 */ @Service public class CategoryServiceImpl implements CategoryService { @Autowired CategoryMapper categoryMapper; public List<Category> list() { CategoryExample example = new CategoryExample(); List<Category> categories = categoryMapper.selectByExample(example); return categories; } public Category get(Integer id) { return categoryMapper.selectByPrimaryKey(id); } public void update(Category category) { categoryMapper.updateByPrimaryKey(category); } } 编写 CategoryController

根据业务需求可以很容易的编写出来:

package cn.wmyskxz.controller; import cn.wmyskxz.pojo.Category; import cn.wmyskxz.service.CategoryService; 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 java.util.List; /** * Category 的控制类 * * @author: @我没有三颗心脏 * @create: 2018-04-27-下午 16:37 */ @Controller @RequestMapping("/admin") public class CategoryController { @Autowired CategoryService categoryService; @RequestMapping("/listCategory") public String list(Model model) { List<Category> categories = categoryService.list(); model.addAttribute("categories", categories); return "admin/listCategory"; } @RequestMapping("/editCategory") public String edit(Category category,Model model) { model.addAttribute("category", category); return "admin/editCategory"; } @RequestMapping("/updateCategory") public String update(Category category) { categoryService.update(category); return "redirect:listCategory"; } } JSP 相关文件编写

自己研究了一会儿这个模板,感觉还是挺好改的,然后就给改成了大概以下这个样子(自己在数据库中加入了 16 条数据):

分类管理页

模仿天猫实战【SSM版】——后台开发

分类编辑页

模仿天猫实战【SSM版】——后台开发

模板下载下来之后文件目录是这样的:

模仿天猫实战【SSM版】——后台开发

我们直接整个拷贝【assets】文件夹放在【webapp】目录下,然后根据模板里面的代码就可以开始修改了,修改下来的两个文件源码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zyyjdz.html