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

最新推荐文章于 2024-05-19 18:18:41 发布

我没有三颗心脏

最新推荐文章于 2024-05-19 18:18:41 发布

阅读量1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Java Web 文章标签：天猫SSM版模仿天猫SSM SSM电商项目模仿天猫实战SSM

本文链接：https://blog.youkuaiyun.com/qq939419061/article/details/80139955

本文介绍了使用SSM框架模仿天猫后台开发的过程，包括后台需求分析、界面设计、分类管理的实现，如Service层、Controller和JSP文件编写。在开发中遇到的问题，如PropertyValue的处理、图片管理的规则设定和文件上传，以及如何使用IDEA进行快速重构，对开发过程进行了总结和反思。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上一篇文章链接：模仿天猫实战【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>