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

上一篇文章链接:模仿天猫实战【SSM版】——项目起步

后台需求分析

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

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

后台界面设计

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

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

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

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

经过一番折腾...

摁,就这风格了,而且我还发现右上角的【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 条数据):

  • 分类管理页

  • 分类编辑页

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

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

  • listCategory.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>模仿天猫-后台</title>
    <!-- Bootstrap Styles-->
    <link href="../assets/css/bootstrap.css" rel="stylesheet" />
    <!-- FontAwesome Styles-->
    <link href="../assets/css/font-awesome.css" rel="stylesheet" />
    <!-- Morris Chart Styles-->

    <!-- Custom Styles-->
    <link href="../assets/css/custom-styles.css" rel="stylesheet" />
    <!-- Google Fonts-->
    <link href=‘https://fonts.googleapis.com/css?family=Open+Sans‘ rel=‘stylesheet‘ type=‘text/css‘ />
    <!-- TABLE STYLES-->
    <link href="../assets/js/dataTables/dataTables.bootstrap.css" rel="stylesheet" />
</head>
<body>
<div id="wrapper">
    <nav class="navbar navbar-default top-navbar" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="listCategory">Tmall</a>
        </div>
    </nav>

    <!--/. NAV TOP  -->
    <nav class="navbar-default navbar-side" role="navigation">
        <div class="sidebar-collapse">
            <ul class="nav" id="main-menu">

                <li>
                    <a class="active-menu" href="listCategory"><i class="fa fa-bars"></i> 分类管理</a>
                </li>
                <li>
                    <a href="listUser"><i class="fa fa-user"></i> 用户管理</a>
                </li>
                <li>
                    <a href="listOrder"><i class="fa fa-list-alt"></i> 订单管理</a>
                </li>
                <li>
                    <a href="listProduct"><i class="fa fa-th-list"></i> 产品管理</a>
                </li>
                <li>
                    <a href="listLink"><i class="fa fa-link"></i> 推荐链接管理</a>
                </li>
            </ul>
        </div>

    </nav>
    <!-- /. NAV SIDE  -->
    <div id="page-wrapper">
        <div id="page-inner">
            <div class="row">
                <div class="col-md-12">
                    <h1 class="page-header">
                        分类管理
                        <small></small>
                    </h1>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <!-- Advanced Tables -->
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            分类管理表
                        </div>
                        <div class="panel-body">
                            <div class="table-responsive">
                                <table class="table table-striped table-bordered table-hover" id="dataTables-example">
                                    <thead>
                                    <tr>
                                        <th>分类id</th>
                                        <th>分类名称</th>

                                        <th>编辑分类</th>
                                        <th>产品管理</th>
                                        <th>属性管理</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <c:forEach items="${categories}" var="c">
                                        <tr>
                                            <td>${c.id}</td>
                                            <td>${c.name}</td>

                                            <td><a href="editCategory?id=${c.id}&name=${c.name}"><span class="glyphicon glyphicon-th-list"></span></a></td>
                                            <td><a href="listProduct?category_id=${c.id}"><span class="glyphicon glyphicon-shopping-cart"></span></a></td>
                                            <td><a href="listProperty?category_id=${c.id}"><span class="glyphicon glyphicon-edit"></span></a></td>
                                        </tr>
                                    </c:forEach>
                                    </tbody>
                                </table>
                            </div>

                        </div>
                    </div>
                    <!--End Advanced Tables -->
                </div>
            </div>

        </div>
    </div>
    <!-- /. PAGE WRAPPER  -->
</div>
<!-- /. WRAPPER  -->
<!-- JS Scripts-->
<!-- jQuery Js -->
<script src="../assets/js/jquery-1.10.2.js"></script>
<!-- Bootstrap Js -->
<script src="../assets/js/bootstrap.min.js"></script>
<!-- Metis Menu Js -->
<script src="../assets/js/jquery.metisMenu.js"></script>
<!-- DATA TABLE SCRIPTS -->
<script src="../assets/js/dataTables/jquery.dataTables.js"></script>
<script src="../assets/js/dataTables/dataTables.bootstrap.js"></script>
<script>
    $(document).ready(function () {
        $(‘#dataTables-example‘).dataTable();
    });
</script>
<!-- Custom Js -->
<script src="../assets/js/custom-scripts.js"></script>

</body>
</html>
  • editCategory.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>模仿天猫-后台</title>
    <!-- Bootstrap Styles-->
    <link href="../assets/css/bootstrap.css" rel="stylesheet"/>
    <!-- FontAwesome Styles-->
    <link href="../assets/css/font-awesome.css" rel="stylesheet"/>
    <!-- Morris Chart Styles-->

    <!-- Custom Styles-->
    <link href="../assets/css/custom-styles.css" rel="stylesheet"/>
    <!-- Google Fonts-->
    <link href=‘https://fonts.googleapis.com/css?family=Open+Sans‘ rel=‘stylesheet‘ type=‘text/css‘/>
</head>
<body>
<div id="wrapper">
    <nav class="navbar navbar-default top-navbar" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="listCategory">Tmall</a>
        </div>
    </nav>

    <!--/. NAV TOP  -->
    <nav class="navbar-default navbar-side" role="navigation">
        <div class="sidebar-collapse">
            <ul class="nav" id="main-menu">

                <li>
                    <a class="active-menu" href="listCategory"><i class="fa fa-bars"></i> 分类管理</a>
                </li>
                <li>
                    <a href="listUser"><i class="fa fa-user"></i> 用户管理</a>
                </li>
                <li>
                    <a href="listOrder"><i class="fa fa-list-alt"></i> 订单管理</a>
                </li>
                <li>
                    <a href="listProduct"><i class="fa fa-th-list"></i> 产品管理</a>
                </li>
                <li>
                    <a href="listLink"><i class="fa fa-link"></i> 推荐链接管理</a>
                </li>
            </ul>
        </div>

    </nav>
    <!-- /. NAV SIDE  -->
    <div id="page-wrapper">
        <div id="page-inner">
            <div class="row">
                <div class="col-md-12">
                    <h1 class="page-header">
                        分类管理
                        <small> - id:${category.id} </small>
                    </h1>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <!-- Advanced Tables -->
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            编辑分类
                        </div>
                        <div class="panel-body">
                            <div class="row col-lg-12">
                                <form action="updateCategory" role="form">
                                    <div class="form-group">
                                        <%-- 隐藏id属性,一并提交 --%>
                                        <input type="hidden" name="id" value="${category.id}">
                                        <label>分类名称:</label>
                                        <input name="name" class="form-control" value="${category.name}"> <br/>
                                        <div class="pull-right">
                                            <input type="submit" class="btn btn-default">
                                        </div>
                                    </div>
                                </form>
                            </div>

                        </div>
                    </div>
                    <!--End Advanced Tables -->
                </div>
            </div>

        </div>
    </div>
    <!-- /. PAGE WRAPPER  -->
</div>
<!-- /. WRAPPER  -->
<!-- JS Scripts-->
<!-- jQuery Js -->
<script src="../assets/js/jquery-1.10.2.js"></script>
<!-- Bootstrap Js -->
<script src="../assets/js/bootstrap.min.js"></script>
</body>
</html>

这样就完成了 Category 的后台管理模块

其他模块的思路跟 Category 如出一辙,就比较偏向于体力劳动了...

  • 注意: 所有本类的 id 属性均为 id ,所有外键的 id 都是 属性名_id 这样的格式,保持统一!

Example 条件查询

MyBatis 逆向工程自动生成文件的时候自动生成了 Example 条件查询类,我们到底应该怎么使用它呢,这里简要的说明一下。

不得不说这个东西还挺神奇,也很方便,比如我们需要查询 category_id 对应下的属性表,我们可以这样写:

public List<Property> list(Integer category_id) {
    PropertyExample example = new PropertyExample();
    example.or().andCategory_idEqualTo(category_id);
    List<Property> properties = propertyMapper.selectByExample(example);
    return properties;
}

通过方法名其实也很容易看懂这些是什么意思,我们首先创建了一个 PropertyExample 实例对象,然后通过 .or() 方法开启条件查询,.andCategory_idEqualTo() 匹配对应的 category_id ,自动生成的 sql 语句就像这样:

更多详情戳这里 - 引用其他博客的详细说明


IDEA 快速重构

当我编写好了 PropertyService 、PropertyServiceImpl、 PropertyController 之后再想要去编写 Product 的这一系列文件的时候,发现其实很多代码都是重复的,只是很少一部分的代码需要改动,暂时不考虑设计模式的话,我们可以使用 IDEA 来完成快速重构:

  • 直接复制 PropertyController 的代码到 ProductController 中,然后【Ctrl + F】搜索 Property :

我们可以发现所有的 Property 都高亮了,然后我们怎么批量修改呢?

然后继续疯狂码代码...


开发过程中遇到的一些问题

PropertyValue 遇到的麻烦

PropertyValue 属性值表,这个表关联了两个外键,一个指向 Product ,另一个指向 Property ,当我按照之前的设计把 listProduct.jsp 设计成下面这个样子的时候,点击【编辑属性】,Property 的信息应该怎么传递?

  • 也就是说,如何处理从 listProduct 跳转到 listPropertyValue 页面时凭空跳出来的 Property 的相关信息?

解决方案:

在 PropertyValueServiceImpl 中增加:

@Autowired
PropertyService propertyService;

我们现在有 category_id 和 product_id ,我们可以利用 Property 和 Category 之间的联系,通过 category_id 查询出所有对应的 Property ,然后再筛选出同时匹配 property_id 和 product_id 的 PropertyValue:

public List<PropertyValue> list(Integer product_id, Integer category_id) {
    PropertyValueExample example = new PropertyValueExample();
    List<PropertyValue> propertyValues = new ArrayList<PropertyValue>();
    List<Property> properties = propertyService.list(category_id);
    for (Property property : properties) {
        // 筛选出同时匹配 property_id 和 product_id 的值
        example.or().andProperti_idEqualTo(property.getId()).andProduct_idEqualTo(product_id);
        propertyValues.addAll(propertyValueMapper.selectByExample(example));
    }
    return propertyValues;
}

emmm...这样的思路出来之后,对应的 Controller 就清晰了:

@RequestMapping("/listPropertyValue")
public String list(Model model, Integer product_id, Integer category_id) {
    List<PropertyValue> propertyValues = propertyValueService.list(product_id, category_id);
    model.addAttribute("propertyValues", propertyValues);
    Product product = productService.get(product_id);
    model.addAttribute("product", product);
    return "admin/listPropertyValue";
}

加入一条数据测试:

  • bingo!

另一个问题是添加属性值:

添加的属性值必须是当前 Category 下有的属性值,所以我们可以在 Controller 上自动注入一个 PropertyService 通过 category_id 查询到当前分类下所有的 Property 然后传递给 listPropertyValue :

@Autowired
PropertyService propertyService;

@RequestMapping("/listPropertyValue")
public String list(Model model, Integer product_id, Integer category_id) {
    List<PropertyValue> propertyValues = propertyValueService.list(product_id, category_id);
    model.addAttribute("propertyValues", propertyValues);
    Product product = productService.get(product_id);
    model.addAttribute("product", product);
    List<Property> properties = propertyService.list(category_id);
    model.addAttribute("properties", properties);
    return "admin/listPropertyValue";
}

期间发现一个 BUG,PropertyValue 表里的 property_id 居然写成了 properti_id,吓得我赶紧检查了一下所有表的字段,其他的没问题,重新生成一下逆向工程

然后获取属性名称:

  • 完善之后大概是这样:

产品图片管理

产品图片的管理需要涉及到文件的上传操作,我们需要先提供必要的 jar 包依赖:

  • commons-fileupload
  • commons-io

同样的搜索 maven 库添加依赖到 pom.xml中:

<!-- 上传文件fileupload -->
<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.3.3</version>
</dependency>
<dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>2.6</version>
</dependency>

产品图片如何管理?

  • 规定一:

    所有的产品图片均保存在【img/product/】对应的 product_id 目录下,并且默认的文件名为 1,2,3,4,5 ,例如 product_id 为 1 的产品的产品图片 1 保存于:【img/product/1/1.jpg】

  • 规定二:

    每一个产品对应五张图片,文件名分别为 1.jpg ,2.jpg 以此类推,不能少也不能多,删除也只是将对应目录下的图片删除,id 并不改变

  • 规定三:

    默认产品打开的大图即为该产品图片目录中的 1.jpg

  • 界面大概设计成了这样:

  • 莫名其妙一个 BUG:

我把表单设计成了这样,隐藏了两个属性,一个 product_id,一个 id:

为了方便操作,我想要直接申明两个参数用来接收上面的两个属性,大概是这样:

但是上面两种方法都不行,我还查了一些资料在 @RequestParam 注解里设置了 required 属性,仍然获取不到,但是我改成用 ProductImage 来接收就好了..Why?

后来写着写着,又必须要使用上面两种方法了....

  • 根据我们的规定来完成代码

ProductImageService 层还是跟之前的没有多大的区别,但是值得注意的是,根据我们的规定,我们的删除需要做一些改动(根据 product_id 批量删除):

package cn.wmyskxz.service;

import cn.wmyskxz.mapper.PropertyValueMapper;
import cn.wmyskxz.pojo.*;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.ArrayList;
import java.util.List;

/**
 * cn.wmyskxz.pojo.PropertyValueValueService 实现类
 *
 * @author: @我没有三颗心脏
 * @create: 2018-04-28-上午 7:47
 */
@Service
public class PropertyValueServiceImpl implements PropertyValueService {

    @Autowired
    PropertyValueMapper propertyValueMapper;

    @Autowired
    PropertyService propertyService;

    @Autowired
    ProductService productService;

    public void add(PropertyValue propertyValue) {
        propertyValueMapper.insert(propertyValue);
    }

    public void delete(Integer id) {
        propertyValueMapper.deleteByPrimaryKey(id);
    }

    public void deleteByProductId(Integer product_id) {
        // 按条件查询出需要删除的列表
        PropertyValueExample example = new PropertyValueExample();
        example.or().andProduct_idEqualTo(product_id);
        Integer category_id = productService.get(product_id).getCategory_id();
        List<PropertyValue> propertyValues = list(product_id, category_id);
        // 循环删除
        for (int i = 0; i < propertyValues.size(); i++) {
            propertyValueMapper.deleteByPrimaryKey(propertyValues.get(i).getId());
        }
    }
    public void update(PropertyValue propertyValue) {
        propertyValueMapper.updateByPrimaryKey(propertyValue);
    }

    public List<PropertyValue> list(Integer product_id, Integer category_id) {
        PropertyValueExample example = new PropertyValueExample();
        List<PropertyValue> propertyValues = new ArrayList<PropertyValue>();
        List<Property> properties = propertyService.list(category_id);
        for (Property property : properties) {
            // 筛选出同时匹配 property_id 和 product_id 的值
            example.or().andProperty_idEqualTo(property.getId()).andProduct_idEqualTo(product_id);
            propertyValues.addAll(propertyValueMapper.selectByExample(example));
        }
        return propertyValues;
    }

    public PropertyValue get(Integer id) {
        return propertyValueMapper.selectByPrimaryKey(id);
    }
}
  • 首先在 ProductController 中 add 和 delete 方法中增加以下代码:
@Autowired
ProductImageService productImageService;

@RequestMapping("/addProduct")
public String add(Product product) {
    productService.add(product);

    // 创建新的 Product 时默认创建 5 个对应的 ProductImage 数据
    ProductImage productImage = new ProductImage();
    productImage.setProduct_id(product.getId());
    for (int i = 1; i <= 5; i++) {
        productImage.setId(i);
        productImageService.add(productImage);
    }

    return "redirect:listProduct?category_id=" + product.getCategory_id();
}

@RequestMapping("/deleteProduct")
public String delete(Integer id, HttpServletRequest request) {

    // 在删除产品的时候将对应的 5 个 ProductImage 数据也删除了
    productImageService.deleteByProductId(id);
    // 同时删除目录下的相关文件
    String path = request.getSession().getServletContext().getRealPath("" + id);
    deleteDir(new File(path));

    // 删除外键对应的数据
    propertyValueService.deleteByProductId(id);

    int category_id = productService.get(id).getCategory_id();
    productService.delete(id);

    return "redirect:listProduct?category_id=" + category_id;
}

/**
 * 递归删除目录下的所有文件及子目录下所有文件
 *
 * @param dir 将要删除的文件目录
 * @return boolean Returns "true" if all deletions were successful.
 * If a deletion fails, the method stops attempting to
 * delete and returns "false".
 */
private static boolean deleteDir(File dir) {
    if (dir.isDirectory()) {
        String[] children = dir.list();
        //递归删除目录中的子目录下
        for (int i = 0; i < children.length; i++) {
            boolean success = deleteDir(new File(dir, children[i]));
            if (!success) {
                return false;
            }
        }
    }
    // 目录此时为空,可以删除
    return dir.delete();
}

然后编写我们的 ProductImageController :

package cn.wmyskxz.controller;

import cn.wmyskxz.pojo.Product;
import cn.wmyskxz.pojo.ProductImage;
import cn.wmyskxz.service.ProductImageService;
import cn.wmyskxz.service.ProductService;
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.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.util.List;

/**
 * ProductImage 的控制器
 *
 * @author: @我没有三颗心脏
 * @create: 2018-04-28-下午 14:10
 */
@Controller
@RequestMapping("/admin")
public class ProductImageController {

    @Autowired
    ProductImageService productImageService;

    @Autowired
    ProductService productService;

    @RequestMapping("/editProductImage")
    public String edit(Model model, Integer product_id) {
        List<ProductImage> productImages = productImageService.list(product_id);
        model.addAttribute("productImages", productImages);
        Product product = productService.get(product_id);
        model.addAttribute("product", product);
        return "admin/editProductImage";
    }

    @RequestMapping(value = "/updateProductImage", method = RequestMethod.POST)
    public String update(HttpServletRequest request,
//                       @RequestParam("productImage") ProductImage productImage,
                         Integer product_id,
                         Integer id,
                         @RequestParam("picture") MultipartFile picture) {

        // 上传文件到指定位置
        String filePath = request.getSession().getServletContext()
                .getRealPath("img/product/" + product_id);
        // 因为 id 是自增长键,所以需要 % 5 来作为文件名
        String fileName = (id % 5 == 0 ? 5 : id % 5) + ".jpg";
        File uploadPicture = new File(filePath, fileName);
        if (!uploadPicture.exists()) {
            uploadPicture.mkdirs();
        }
        // 保存
        try {
            picture.transferTo(uploadPicture);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return "redirect:editProductImage?product_id=" + product_id;
    }

    @RequestMapping("/deleteProductImage")
    public String delete(Integer id, Integer product_id, HttpServletRequest request) {
        // 不删除表中的数据(在 ProductController 中统一删除),删除对应文件
        String filePath = request.getSession().getServletContext()
                .getRealPath("img/product/" + product_id);
        String fileName = id + ".jpg";
        new File(filePath, fileName).delete();

        return "redirect:editProductImage?product_id=" + product_id;
    }
}
  • 再优化一下界面的东西,增加没有图片显示的 error 图片,大概就是这个样子:

这里就只贴一下 table 的代码吧:

<c:forEach items="${productImages}" var="pi">
    <tr>
        <td>${pi.product_id}</td>
        <td>${pi.id}</td>
        <td><img class="col-md-8"
                 src="../img/product/${pi.product_id}/${pi.id%5==0?5:pi.id%5}.jpg"
                 onerror="this.src=‘../img/product/error.png‘"></td>
        <td class="col-md-5">
            <form action="updateProductImage" method="post"
                  enctype="multipart/form-data">
                <input type="hidden" name="id" value="${pi.id}">
                <input type="hidden" name="product_id"
                       value="${pi.product_id}">
                <input type="file" name="picture" class="pull-left">
                <input type="submit" class="btn btn-primary pull-right" value="上传">
            </form>
        </td>
        <td>
            <a href="deleteProductImage?product_id=${pi.product_id}&id=${pi.id}"><span
                    class="glyphicon glyphicon-trash"></span></a></td>
    </tr>
</c:forEach>

在写图片管理的时候又遇到一个坑

在删除顶层数据库数据的时候,要注意删除其下的有外键关联的数据,特别是 product_id 这个东西,是很多表的外键,删除 product 之前需要先清空有关联的其他表的数据....

总之坑是很多啦..不过项目在进展总归是好事...耐心耐心...

接着码代码....

还剩下一些体力活的东西,就先结博文啦...(心累.jpg)

有一些催更的朋友,希望能别催啦...每天都在码啦,而且本身也是很low的东西,写完之后我会上传 github 的。


总结

当我给自己埋了一个大坑说要模仿天猫,并且陷进去的时候,一方面痛苦着一方面也察觉了自己很多不足的地方,就觉得还是很值得,现在来做一下简短的总结。

  • 进度比想象中慢了很多,虽然一步一步按照之前的分析图来编写代码总体是顺畅的,但是有那种写着写着突然发现之前的设计有问题的感觉,中途也改了几次,发现自己分析问题不够全面。
  • 项目中有许多类似的代码,并且在 Controller 和 Impl 中不断有其他的东西加入,总觉得是糟糕的代码,但是又不知道应该进一步如何改进。
  • 方向永远比努力重要,在行动之前思考清楚,我一直觉得是很重要的一点,我觉得通过对项目的分析,对我项目的进展有一个整体的构思,各个模块该有什么功能都比较清晰,特别在编写 JSP 文件的时候能明显感觉不会很迷茫,这是比较好的一点
  • 发现自己阅读代码量很少,这种感觉体现在很多地方,一是写代码时感觉到自己思想的局限性,二是觉得自己写的代码有很多的相似性,虽然这个项目是自己突发奇想的想要去做的,但是有很多细节的地方,是自己没有去注意到的,比如类型要求、边界判断、事务处理等等等...

欢迎转载,转载请注明出处!

@我没有三颗心脏

CSDN博客:http://blog.csdn.net/qq939419061

简书:http://www.jianshu.com/u/a40d61a49221

原文地址:https://www.cnblogs.com/wmyskxz/p/8969842.html

时间: 2024-11-02 16:49:30

模仿天猫实战【SSM版】——后台开发的相关文章

模仿天猫实战【SSM】——总结

第一篇文章链接:模仿天猫实战[SSM版]--项目起步 第二篇文章链接:模仿天猫实战[SSM版]--后台开发 总结:项目从4-27号开始写,到今天5-7号才算真正的完工,有许多粗糙的地方,但总算完成了,比想象中的开发周期要久的多,并且大部分的时间都花在了前端页面的编写上...仅以此文来总结一下 项目总结 功能一览表 大致理了一下功能列表,应该是齐全的,其中推荐链接暂时不支持修改. 项目页面一览表 后端页面: 后台所需要用到的页面,从名字很好区分功能,其中 index.jsp 只有一行代码用于跳转

现货!《PHP7实践指南:o2o网站与App后台开发》京东天猫有售

终于发售了,啥也不想说了,喜欢的或需要的就点击 链接 进去购买吧. 另外此书将作为 2017 PHP全球开发者大会 现场活动用书 天猫购书包邮 PHP7实践指南:O2O网站与App后台开发 数据库设计 PHP开发工程 适合作为企业内部培训.培训机构和大专院校的教学参考书 京东购书PHP7实践指南:O2O网站与App后台开发 陈小龙 PHP7语言编程教程书籍 php7 PHP全球开发者大会 2017 PHP 全球开发者大会 -百格活动 作者简介陈小龙,奇虎360软件工程师,是国内较早研究微信开发和

第九篇 :微信公众平台开发实战Java版之如何实现自定义分享内容

微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包. 通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语音.位置等手机系统的能力,同时可以直接使用微信分享.扫一扫.卡券.支付等微信特有的能力,为微信用户提供更优质的网页体验. 本次的内容: 实现:分享到朋友圈,qq,qq空间,微信朋友的功能. 基础接口 判断当前客户端版本是否支持指定JS接口 wx.checkJsApi({ jsApiList: ['chooseImage'], // 需要检测的JS接

后台开发知识点总结(一、Linux和OS)

偶然在知乎上看到想要从事linux后台开发需要的能力集锦,总结的挺全面的,鉴于自己贫弱的记忆力,还是在这里总结一下供以后查看,顺便检验一下自己. 1. 命令:netstat tcpdump ipcs ipcrm 这四个命令的熟练掌握程度基本上能体现实际开发和调试程序的经验 在<TCP/IP>协议一书中,经常使用到netstat和tcpdump这两个命令,netstat常用于显示各种网络信息与自己的主机信息,例如路由表信息.tcpdump用于网络数据包的截获分析,例如三次握手,数据交换等等的显示

做后台开发用到的技能都在这儿——《后台开发:核心技术与应用实践》

大多数面向对象语言没有指针的概念,C语言也没有对象的概念,同时具有指针和对象的C++语言在学习时有高昂的门槛,同时在服务端后台开发.处理多并发的海量网络请求等方面有天然的优势.就像Android开发对性能要求比较高的地图.视频.即时通讯由NDK开发一样,当网络应用的用户量. 并发量迅速增长,达到一定量级之后,后端服务的技术架构都会适用于自己玩玩的JavaScript(Bmob云端代码).适用于小规模网站的PHP和适用于中等规模网站的Java转变为Linux C++. 徐老师的<后台开发:核心技术

基于spring mvc 移动终端后台开发

基于spring mvc 移动终端后台开发 研发背景 到年底了,很多项目都要突击完成,我们自己的"问题及知识管理平台"移动端研发也到了不能再拖的地步,所以需要在后台集成移动端框架.由于后台架构采用spring mvc+hibernate,并且近期也深入的研究过spring mvc,所以就不想沿用已有成熟的整合方案<HTML5企业移动应用解决方案V1.0.doc>,尝试完全应用spring framework技术实现移动端后台架构. 根据技术特点和我的一些架构封装想法,给自己

后台开发 -- 核心技术与应用实践

后台开发 核心技术与应用实践 . C++编程常用技术 最好不要在头文件中使用命名空间,很容易造成命名冲突. strlen与sizeof的区别: strlen是函数,在运行时才能计算,传入参数是char*指针,返回字符串长度. sizeof()是运算符,而不是一个函数,在编译时就计算好了,用于计算数据空间的字节数. sizeof常用于返回类型和静态分配的对象.结构或数组所占用的空间,返回值跟内容无关. 在C++中,临时对象都是const类型的. 可以使用union(联合)判断系统是大端(big e

移动端自动化测试Appium 从入门到项目实战Python版

移动端自动化测试Appium 从入门到项目实战Python版 说到APP自动化测试,Appium可是说是非常流行了, 不仅支持多语言.多平台的优势,同时支持Andriod.iOS.H5的自动化测试:本课程会从初级的Appium框架讲起,涉及业界常见的po模型.关键字模型.服务自动化.持续集成等实战讲解,让你快速上手移动端自动化测试工作 appium做app自动化测试,环境搭建是比较麻烦的.也是很多初学者在学习app自动化之时,花很多时间都难跨越的坎. 但没有成功的环境,就没有办法继续后续的使用.

收藏很久的后台开发资源分享给你!

2020的开头真是遇到了太多太多的事儿,大部分的事儿都需要推迟了. 不管是准备春招还是已经工作了,希望这份资料可以帮你在这期间充实自己. 从去年来开始通过平台来学习,好不好大家可以看看哈. 在这里推荐如下资料.注意:所有资料将在文末免费分享给大家 资料 王争< 数据结构与算法之美> 算法面试通关40讲 趣谈网络协议 从零开始学架构 深入拆解 Java 虚拟机 机器学习40讲 Netty源码剖析与实战 玩转Git三剑客 java核心技术36讲 从0开始学微服务 Linux性能优化实战 领取方式: