天猫整站Springboot系列教材（七十四）- 后台-其他管理

天猫整站Springboot系列教材（七十三）- 后台-其他管理 - 后台其他页面

-->

下载区
文件名	文件大小
请先登录	382k
增值内容	382k
	382k
解压rar如果失败，请用5.21版本或者更高版本的winrar 点击下载 winrar5.21

工具版本兼容问题

10分56秒

1.0 原速 1.25 倍速 1.5 倍速 1.75 倍速

本视频采用html5方式播放，如无法正常播放，请将浏览器升级至最新版本，推荐火狐，chrome，360浏览器。如果装有迅雷，播放视频呈现直接下载状态，请调整迅雷系统设置-基本设置-启动-监视全部浏览器 (去掉这个选项)。 chrome 的视频下载插件会影响播放，如 IDM 等，请关闭或者切换其他浏览器

步骤 1 : 先运行，看到效果，再学习
步骤 2 : 模仿和排错
步骤 3 : 页面截图
步骤 4 : Property
步骤 5 : PropertyDAO
步骤 6 : PropertyService
步骤 7 : AdminPageController
步骤 8 : PropertyController
步骤 9 : listProperty.html+editProperty.html
步骤 10 : 查询功能讲解
步骤 11 : 增加功能讲解
步骤 12 : 编辑功能讲解
步骤 13 : 修改功能讲解
步骤 14 : 删除功能讲解
步骤 15 : 其他-面包屑导航
步骤 16 : 自己做一遍

步骤 1 :

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

edit 顶折

纠问

增值内容，请先登录

完整的 Springboot 模仿天猫项目，使用 Springboot 、Vue.js、shiro、redis、elasticsearch 等一整套技术栈，从无到有涵盖全部129个知识点，565个开发步骤, 充实 Springboot 项目经验，为简历加上一个有吸引力的砝码.
增值内容，点击购买

使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。如果是误封，请联系站长，谢谢

步骤 2 :

模仿和排错

edit 顶折

纠问

增值内容，请先登录

使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。如果是误封，请联系站长，谢谢

步骤 3 :

页面截图

edit 顶折

纠问

增值内容，请先登录

使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。如果是误封，请联系站长，谢谢

步骤 4 :

Property

edit 顶折

纠问

增值内容，请先登录

使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。如果是误封，请联系站长，谢谢

代码行数较多，请点击查看

package com.how2java.tmall.pojo;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.JoinColumn;
import javax.persistence.ManyToOne;
import javax.persistence.Table;

import com.fasterxml.jackson.annotation.JsonIgnoreProperties;

@Entity
@Table(name = "property")
@JsonIgnoreProperties({ "handler","hibernateLazyInitializer" })
public class Property {

	@Id
	@GeneratedValue(strategy = GenerationType.IDENTITY) 
	@Column(name = "id")	
	private int id;
	
	@Column(name = "name")
	private String name;

    @ManyToOne
    @JoinColumn(name="cid")
    
	private Category category;

	public int getId() {
		return id;
	}

	public void setId(int id) {
		this.id = id;
	}

	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	
	public Category getCategory() {
		return category;
	}
	public void setCategory(Category category) {
		this.category = category;
	}

	@Override
	public String toString() {
		return "Property [id=" + id + ", name=" + name + ", category=" + category + "]";
	}
	
}

步骤 5 :

PropertyDAO

edit 顶折

纠问

增值内容，请先登录

使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。如果是误封，请联系站长，谢谢

package com.how2java.tmall.dao;
 
import java.util.List;

import org.springframework.data.domain.Page;
import org.springframework.data.domain.Pageable;
import org.springframework.data.jpa.repository.JpaRepository;

import com.how2java.tmall.pojo.Category;
import com.how2java.tmall.pojo.Property;

public interface PropertyDAO extends JpaRepository<Property,Integer>{
	Page<Property> findByCategory(Category category, Pageable pageable);
}

步骤 6 :

PropertyService

edit 顶折

纠问

增值内容，请先登录

使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。如果是误封，请联系站长，谢谢

代码行数较多，请点击查看

package com.how2java.tmall.service;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.cache.annotation.CacheConfig;
import org.springframework.cache.annotation.CacheEvict;
import org.springframework.cache.annotation.Cacheable;
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.PropertyDAO;
import com.how2java.tmall.pojo.Category;
import com.how2java.tmall.pojo.Property;
import com.how2java.tmall.util.Page4Navigator;

@Service
public class PropertyService {

	@Autowired PropertyDAO propertyDAO;
	@Autowired CategoryService categoryService;

	public void add(Property bean) {
		propertyDAO.save(bean);
	}

	public void delete(int id) {
		propertyDAO.delete(id);
	}

	public Property get(int id) {
		return propertyDAO.findOne(id);
	}

	public void update(Property bean) {
		propertyDAO.save(bean);
	}

	public Page4Navigator<Property> list(int cid, int start, int size,int navigatePages) {
    	Category category = categoryService.get(cid);
		
    	Sort sort = new Sort(Sort.Direction.DESC, "id");
    	Pageable pageable = new PageRequest(start, size, sort);    	
    	
    	Page<Property> pageFromJPA =propertyDAO.findByCategory(category,pageable);
    	
    	return new Page4Navigator<>(pageFromJPA,navigatePages);
    	
	}	

}

步骤 7 :

AdminPageController

edit 顶折

纠问

增值内容，请先登录

使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。如果是误封，请联系站长，谢谢

代码行数较多，请点击查看

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";

	}

	@GetMapping(value="/admin_order_list")
	public String listOrder(){
		return "admin/listOrder";

	}

	@GetMapping(value="/admin_product_list")
	public String listProduct(){
		return "admin/listProduct";

	}

	@GetMapping(value="/admin_product_edit")
	public String editProduct(){
		return "admin/editProduct";

	}
	@GetMapping(value="/admin_productImage_list")
	public String listProductImage(){
		return "admin/listProductImage";

	}

	@GetMapping(value="/admin_property_list")
	public String listProperty(){
		return "admin/listProperty";

	}

	@GetMapping(value="/admin_property_edit")
	public String editProperty(){
		return "admin/editProperty";

	}

	@GetMapping(value="/admin_propertyValue_edit")
	public String editPropertyValue(){
		return "admin/editPropertyValue";

	}

	@GetMapping(value="/admin_user_list")
	public String listUser(){
		return "admin/listUser";

	}

}

步骤 8 :

PropertyController

edit 顶折

纠问

增值内容，请先登录

使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。如果是误封，请联系站长，谢谢

代码行数较多，请点击查看

package com.how2java.tmall.web;

import com.how2java.tmall.pojo.Property;
import com.how2java.tmall.service.PropertyService;
import com.how2java.tmall.util.Page4Navigator;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import javax.servlet.http.HttpServletRequest;
 
@RestController
public class PropertyController {
	@Autowired PropertyService propertyService;

    @GetMapping("/categories/{cid}/properties")
    public Page4Navigator<Property> list(@PathVariable("cid") int cid, @RequestParam(value = "start", defaultValue = "0") int start,@RequestParam(value = "size", defaultValue = "5") int size) throws Exception {
    	start = start<0?0:start;
    	Page4Navigator<Property> page =propertyService.list(cid, start, size,5); 
        return page;
    }
    
    @GetMapping("/properties/{id}")
    public Property get(@PathVariable("id") int id) throws Exception {
    	Property bean=propertyService.get(id);
    	return bean;
    }
    
    @PostMapping("/properties")
    public Object add(@RequestBody Property bean) throws Exception {
        propertyService.add(bean);
        return bean;
    }
    
    @DeleteMapping("/properties/{id}")
    public String delete(@PathVariable("id") int id, HttpServletRequest request)  throws Exception {
        propertyService.delete(id);
        return null;
    }
    
    @PutMapping("/properties")
    public Object update(@RequestBody Property bean) throws Exception {
        propertyService.update(bean);
        return bean;
    }

}

步骤 9 :

listProperty.html+editProperty.html

edit 顶折

纠问

增值内容，请先登录

使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。如果是误封，请联系站长，谢谢

listProperty.html
editProperty.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 cid = getUrlParms("cid");
        var data4Vue = {
            uri:'properties',
            beans: [],
            bean: {id:0,name:'',category:{id:0}},
            pagination:{},
            category:''
        };

        //ViewModel
        var vue = new Vue({
            el: '#workingArea',
            data: data4Vue,
            mounted:function(){ //mounted　表示这个 Vue 对象加载成功了
                this.getCategory(cid);
                this.list(0);
            },
            methods: {
                getCategory:function(cid){
                    var url = "categories/"+cid;
                    axios.get(url).then(function(response) {
                        vue.category = response.data;
                    })
                },
                list:function(start){
                    var url =  "categories/"+cid+"/"+this.uri+"?start="+start;
                    axios.get(url).then(function(response) {
                        vue.pagination = response.data;
                        vue.beans = response.data.content	;
                    });
                },
                add: function () {
                    if(!checkEmpty(this.bean.name, "属性名称"))
                        return;
                    var url = this.uri;
                    this.bean.category.id = cid;
                    axios.post(url,this.bean).then(function(response){
                        vue.list(0);
                        vue.bean = {id:0,name:'',category:{id:0}};
                    });
                },
                deleteBean: function (id) {
                    if(!checkDeleteLink())
                        return;
                    var url = this.uri+"/"+id;
                    axios.delete(url).then(function(response){
                        if(0!=response.data.length)
                            alert(response.data);
                        else
                            vue.list(0);
                    });
                },
                jump: function(page){
                    jump(page,vue); //定义在adminHeader.html 中
                },
                jumpByNumber: function(start){
                    jumpByNumber(start,vue);
                }
            }

        });
    });

</script>

<div id="workingArea" >
    <ol class="breadcrumb">
        <li><a href="admin_category_list">所有分类</a></li>
        <li><a :href="'admin_property_list?cid='+category.id">{{category.name}}</a></li>
        <li class="active">属性管理</li>
    </ol>

    <div class="listDataTableDiv">
        <table class="table table-striped table-bordered table-hover  table-condensed">
            <thead>
            <tr class="success">
                <th>ID</th>
                <th>属性名称</th>
                <th>编辑</th>
                <th>删除</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="bean in beans ">
                <td>{{bean.id}}</td>
                <td>
                    {{bean.name}}
                </td>
                <td>
                    <a :href="'admin_property_edit?id=' + bean.id "><span class="glyphicon glyphicon-edit"></span></a>
                </td>
                <td>
                    <a href="#nowhere"  @click="deleteBean(bean.id)"><span class="   glyphicon glyphicon-trash"></span></a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>

    <div th:replace="include/admin/adminPage::html" ></div>

    <div class="panel panel-warning addDiv">
        <div class="panel-heading">新增属性</div>
        <div class="panel-body">
            <table class="addTable">
                <tr>
                    <td>属性名称</td>
                    <td><input  @keyup.enter="add"  v-model.trim="bean.name" type="text" class="form-control"></td>
                </tr>
                <tr class="submitTR">
                    <td colspan="2" align="center">
                        <a href="#nowhere"  @click="add" class="btn btn-success">提交</a>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>

<div th:replace="include/admin/adminFooter::html" ></div>
</body>
</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: 'properties',
            listURL:'admin_property_list',
            bean: '',
            category:''
        };

        //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;
                        vue.category = vue.bean.category;
                    })
                },
                update:function () {
                    if(!checkEmpty(this.bean.name, "属性名称"))
                        return;
                    var url = this.uri;
                    axios.put(url,vue.bean).then(function(response){
                        location.href=vue.listURL+"?cid="+vue.category.id;
                    });
                }
            }
        });
    });
</script>

<div id="workingArea">

    <ol class="breadcrumb">
        <li><a href="admin_category_list">所有分类</a></li>
        <li><a :href="'admin_property_list?cid='+category.id">{{category.name}}</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 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>

步骤 10 :

查询功能讲解

edit 顶折

纠问

增值内容，请先登录

使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。如果是误封，请联系站长，谢谢

PropertyController片段
listProperty.html片段

代码行数较多，请点击查看

    @GetMapping("/categories/{cid}/properties")
    public Page4Navigator<Property> list(@PathVariable("cid") int cid, @RequestParam(value = "start", defaultValue = "0") int start,@RequestParam(value = "size", defaultValue = "5") int size) throws Exception {
    	start = start<0?0:start;
    	Page4Navigator<Property> page =propertyService.list(cid, start, size,5); 
        return page;
    }

代码行数较多，请点击查看


                list:function(start){
                    var url =  "categories/"+cid+"/"+this.uri+"?start="+start;
                    axios.get(url).then(function(response) {
                        vue.pagination = response.data;
                        vue.beans = response.data.content	;
                    });
                },

            <tr v-for="bean in beans ">
                <td>{{bean.id}}</td>
                <td>
                    {{bean.name}}
                </td>
                <td>
                    <a :href="'admin_property_edit?id=' + bean.id "><span class="glyphicon glyphicon-edit"></span></a>
                </td>
                <td>
                    <a href="#nowhere"  @click="deleteBean(bean.id)"><span class="   glyphicon glyphicon-trash"></span></a>
                </td>
            </tr>

步骤 11 :

增加功能讲解

edit 顶折

纠问

增值内容，请先登录

使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。如果是误封，请联系站长，谢谢

listProperty.html片段
PropertyController片段

代码行数较多，请点击查看

    <div class="panel panel-warning addDiv">
        <div class="panel-heading">新增属性</div>
        <div class="panel-body">
            <table class="addTable">
                <tr>
                    <td>属性名称</td>
                    <td><input  @keyup.enter="add"  v-model.trim="bean.name" type="text" class="form-control"></td>
                </tr>
                <tr class="submitTR">
                    <td colspan="2" align="center">
                        <a href="#nowhere"  @click="add" class="btn btn-success">提交</a>
                    </td>
                </tr>
            </table>
        </div>
    </div>

                add: function () {
                    if(!checkEmpty(this.bean.name, "属性名称"))
                        return;
                    var url = this.uri;
                    this.bean.category.id = cid;
                    axios.post(url,this.bean).then(function(response){
                        vue.list(0);
                        vue.bean = {id:0,name:'',category:{id:0}};
                    });
                }

代码行数较多，请点击查看


    @PostMapping("/properties")
    public Object add(@RequestBody Property bean) throws Exception {
        propertyService.add(bean);
        return bean;
    }

步骤 12 :

编辑功能讲解

edit 顶折

纠问

增值内容，请先登录

使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。如果是误封，请联系站长，谢谢

Controller代码片段
editProperty.html代码片段

代码行数较多，请点击查看

	@GetMapping(value="/admin_property_edit")
	public String editProperty(){
		return "admin/editProperty";

	}

    @GetMapping("/properties/{id}")
    public Property get(@PathVariable("id") int id) throws Exception {
    	Property bean=propertyService.get(id);
    	return bean;
    }

代码行数较多，请点击查看


                get:function(){
                    var id = getUrlParms("id");
                    var url = this.uri+"/"+id;
                    axios.get(url).then(function(response) {
                        vue.bean = response.data;
                        vue.category = vue.bean.category;
                    })
                },

步骤 13 :

修改功能讲解

edit 顶折

纠问

增值内容，请先登录

使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。如果是误封，请联系站长，谢谢

editProperty.html 片段
PropertyController片段

                update:function () {
                    if(!checkEmpty(this.bean.name, "属性名称"))
                        return;
                    var url = this.uri;
                    axios.put(url,vue.bean).then(function(response){
                        location.href=vue.listURL+"?cid="+vue.category.id;
                    });
                }


    @PutMapping("/properties")
    public Object update(@RequestBody Property bean) throws Exception {
        propertyService.update(bean);
        return bean;
    }

步骤 14 :

删除功能讲解

edit 顶折

纠问

增值内容，请先登录

使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。如果是误封，请联系站长，谢谢

listProperty.html 片段
PropertyController片段

                deleteBean: function (id) {
                    if(!checkDeleteLink())
                        return;
                    var url = this.uri+"/"+id;
                    axios.delete(url).then(function(response){
                        if(0!=response.data.length)
                            alert(response.data);
                        else
                            vue.list(0);
                    });
                },


    @DeleteMapping("/properties/{id}")
    public String delete(@PathVariable("id") int id, HttpServletRequest request)  throws Exception {
        propertyService.delete(id);
        return null;
    }

步骤 15 :

其他-面包屑导航

edit 顶折

纠问

增值内容，请先登录

使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。如果是误封，请联系站长，谢谢

                getCategory:function(cid){
                    var url = "categories/"+cid;
                    axios.get(url).then(function(response) {
                        vue.category = response.data;
                    })
                },

    <ol class="breadcrumb">
        <li><a href="admin_category_list">所有分类</a></li>
        <li><a :href="'admin_property_list?cid='+category.id">{{category.name}}</a></li>
        <li class="active">属性管理</li>
    </ol>

步骤 16 :

自己做一遍

edit 顶折

纠问

增值内容，请先登录

使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。如果是误封，请联系站长，谢谢

天猫整站Springboot系列教材（七十三）- 后台-其他管理 - 后台其他页面

天猫整站Springboot系列教材（七十五）- 后台-其他管理 - 产品管理

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

问答区域

2024-03-26 自己第一遍照着代码敲，代码没错，还是会报异常，但是粘过去就没问题

lee0315123

关于实践项目-天猫整站Springboot-属性管理的提问

先照着敲一遍，发现自己代码出现 annotation not allow here

@Entity
@Table(name="property")
@JsonIgnoreProperties({"handler","hibernateLazyInitializer"})
public class Property {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    @Column(name = "id");
    private int id;

    @Column(name = "name")
    private String name;

    @ManyToOne
    @JoinColumn(name = "cid");

annotation not allow here

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2022-07-20 受益良多

qaiwo520

关于实践项目-天猫整站Springboot-属性管理的提问

看完前两个，没看这节，这个产品的增删改查就自己做出来了，虽然是copy很多，但收获很多。总算思路明确了

1 个答案

how2j
答案时间：2022-08-01

对的，就是要自己干，才会变成自己的。

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2021-11-25 查询代码

2021-11-11 我还是觉得写SQL好，JPA在这种简单的增删改查可能比较方便，一旦业务复杂不得不写SQL的时候不就拉跨了，并不觉得JPA好在哪里

2021-10-13 Controller层删除功能中的HttpServletRequest request参数的作用是啥？

提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 53 条以前的提问，请点击查看

提问之前请登陆

提问已经提交成功，正在审核。请于我的提问处查看提问记录，谢谢

关于实践项目-天猫整站Springboot-属性管理的提问

尽量提供截图、代码和异常信息，有助于分析和解决问题。也可进本站QQ群交流: 578362961

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

上传截图