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

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

-->

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

工具版本兼容问题

步骤 1 : 先运行，看到效果，再学习
步骤 2 : 模仿和排错
步骤 3 : 页面截图
步骤 4 : PropertyValue
步骤 5 : PropertyValueDAO
步骤 6 : PropertyDAO
步骤 7 : PropertyService
步骤 8 : PropertyValueService
步骤 9 : PropertyValueController
步骤 10 : editPropertyValue.html
步骤 11 : 编辑功能讲解
步骤 12 : 修改功能讲解
步骤 13 : 删除，增加功能不需要

步骤 1 :

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

edit 顶折

纠问

增值内容，请先登录

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

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

步骤 2 :

模仿和排错

edit 顶折

纠问

增值内容，请先登录

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

步骤 3 :

页面截图

edit 顶折

纠问

增值内容，请先登录

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

步骤 4 :

PropertyValue

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 = "propertyvalue")
@JsonIgnoreProperties({ "handler","hibernateLazyInitializer" })
public class PropertyValue {
	@Id
	@GeneratedValue(strategy = GenerationType.IDENTITY) 
	@Column(name = "id")	
	private int id;
	
    @ManyToOne
    @JoinColumn(name="pid")	
    
	private Product product;
    @ManyToOne
    
    @JoinColumn(name="ptid")    
	private Property property;

    private String value;
	public int getId() {
		return id;
	}

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

	public String getValue() {
		return value;
	}
	public void setValue(String value) {
		this.value = value;
	}
	public Product getProduct() {
		return product;
	}
	public void setProduct(Product product) {
		this.product = product;
	}
	public Property getProperty() {
		return property;
	}
	public void setProperty(Property property) {
		this.property = property;
	}

	@Override
	public String toString() {
		return "PropertyValue [id=" + id + ", product=" + product + ", property=" + property + ", value=" + value + "]";
	}
	
}

步骤 5 :

PropertyValueDAO

edit 顶折

纠问

增值内容，请先登录

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

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

import org.springframework.data.jpa.repository.JpaRepository;

import com.how2java.tmall.pojo.Product;
import com.how2java.tmall.pojo.Property;
import com.how2java.tmall.pojo.PropertyValue;

public interface PropertyValueDAO extends JpaRepository<PropertyValue,Integer>{

	List<PropertyValue> findByProductOrderByIdDesc(Product product);
	PropertyValue getByPropertyAndProduct(Property property, Product product);

}

步骤 6 :

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);
	List<Property> findByCategory(Category category);

}

步骤 7 :

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);
    	
	}

	public List<Property> listByCategory(Category category){
		return propertyDAO.findByCategory(category);
	}

}

步骤 8 :

PropertyValueService

edit 顶折

纠问

增值内容，请先登录

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

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

package com.how2java.tmall.service;

import com.how2java.tmall.dao.PropertyValueDAO;
import com.how2java.tmall.pojo.Product;
import com.how2java.tmall.pojo.Property;
import com.how2java.tmall.pojo.PropertyValue;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class PropertyValueService  {

	@Autowired PropertyValueDAO propertyValueDAO;
	@Autowired PropertyService propertyService;

	public void update(PropertyValue bean) {
		propertyValueDAO.save(bean);
	}

	public void init(Product product) {
		List<Property> propertys= propertyService.listByCategory(product.getCategory());
		for (Property property: propertys) {
			PropertyValue propertyValue = getByPropertyAndProduct(product, property);
			if(null==propertyValue){
				propertyValue = new PropertyValue();
				propertyValue.setProduct(product);
				propertyValue.setProperty(property);
				propertyValueDAO.save(propertyValue);
			}
		}
	}

	public PropertyValue getByPropertyAndProduct(Product product, Property property) {
		return propertyValueDAO.getByPropertyAndProduct(property,product);
	}

	public List<PropertyValue> list(Product product) {
		return propertyValueDAO.findByProductOrderByIdDesc(product);
	}
	
}

步骤 9 :

PropertyValueController

edit 顶折

纠问

增值内容，请先登录

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

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

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

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;

import com.how2java.tmall.pojo.Product;
import com.how2java.tmall.pojo.PropertyValue;
import com.how2java.tmall.service.ProductService;
import com.how2java.tmall.service.PropertyValueService;
 
@RestController
public class PropertyValueController {
	@Autowired PropertyValueService propertyValueService;
	@Autowired ProductService productService;

    @GetMapping("/products/{pid}/propertyValues")
    public List<PropertyValue> list(@PathVariable("pid") int pid) throws Exception {
    	Product product = productService.get(pid);
    	propertyValueService.init(product);
    	List<PropertyValue> propertyValues = propertyValueService.list(product);
    	return propertyValues;
    }
        
    @PutMapping("/propertyValues")
    public Object update(@RequestBody PropertyValue bean) throws Exception {
    	propertyValueService.update(bean);
        return bean;
    }
    
}

步骤 10 :

editPropertyValue.html

edit 顶折

纠问

增值内容，请先登录

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

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

<!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 pid = getUrlParms("pid");
        var data4Vue = {
            uri:'propertyValues',
            beans: [],
            product: '',
            category:'',
        };

        //ViewModel
        var vue = new Vue({
            el: '#workingArea',
            data: data4Vue,
            mounted:function(){ //mounted　表示这个 Vue 对象加载成功了
                this.getProduct(pid);
                this.list();
            },
            methods: {
                list:function(){
                    var url = "products/"+pid+"/"+ this.uri;
                    axios.get(url).then(function(response) {
                        vue.beans = response.data;
                    });
                },
                getProduct:function(pid){
                    var url = "products/"+pid;
                    axios.get(url).then(function(response) {
                        vue.product = response.data;
                        vue.category = vue.product.category;
                    })
                },
                update:function(bean){
                    var url =  this.uri;
                    var id = bean.id;
                    $("#pvid"+bean.id).css("border","2px solid yellow");
                    axios.put(url,bean).then(function(response) {
                        if(bean.id==response.data.id)
                            $("#pvid"+bean.id).css("border","2px solid green");
                        else
                            $("#pvid"+bean.id).css("border","2px solid red");
                    });
                }
            }

        });
    });

</script>

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

    <div class="editPVDiv">
        <div v-for="bean in beans" class="eachPV">
            <span class="pvName" >{{bean.property.name}}</span>
            <span class="pvValue"><input class="pvValue" :id="'pvid'+bean.id" type="text" v-model="bean.value" @keyup="update(bean)"></span>
        </div>
        <div style="clear:both"></div>
    </div>

</div>

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

步骤 11 :

编辑功能讲解

edit 顶折

纠问

增值内容，请先登录

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

PropertyValueController代码片段
editPropertyValue.html代码片段

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

    @GetMapping("/products/{pid}/propertyValues")
    public List<PropertyValue> list(@PathVariable("pid") int pid) throws Exception {
    	Product product = productService.get(pid);
    	propertyValueService.init(product);
    	List<PropertyValue> propertyValues = propertyValueService.list(product);
    	return propertyValues;
    }

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


                list:function(){
                    var url = "products/"+pid+"/"+ this.uri;
                    axios.get(url).then(function(response) {
                        vue.beans = response.data;
                    });
                },

        <div v-for="bean in beans" class="eachPV">
            <span class="pvName" >{{bean.property.name}}</span>
            <span class="pvValue"><input class="pvValue" :id="'pvid'+bean.id" type="text" v-model="bean.value" @keyup="update(bean)"></span>
        </div>

步骤 12 :

修改功能讲解

edit 顶折

纠问

增值内容，请先登录

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

editPropertyValue.html代码片段
PropertyValueController代码片段

                update:function(bean){
                    var url =  this.uri;
                    var id = bean.id;
                    $("#pvid"+bean.id).css("border","2px solid yellow");
                    axios.put(url,bean).then(function(response) {
                        if(bean.id==response.data.id)
                            $("#pvid"+bean.id).css("border","2px solid green");
                        else
                            $("#pvid"+bean.id).css("border","2px solid red");
                    });
                }


    @PutMapping("/propertyValues")
    public Object update(@RequestBody PropertyValue bean) throws Exception {
    	propertyValueService.update(bean);
        return bean;
    }

步骤 13 :

删除，增加功能不需要

edit 顶折

纠问

增值内容，请先登录

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

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

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

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

问答区域

2021-10-25 更新属性值时是否有必要判断bean.id==response.data.id

njhougy

关于实践项目-天猫整站Springboot-产品属性值设置的提问

请问更新属性值的时候判断了bean.id==response.data.id，这是否是多此一举呢，通常情况下更新列表不会返回不一样的id吧

axios.put(url,bean).then(function(response) {
            if(bean.id==response.data.id)
              $("#pvid"+bean.id).css("border","2px solid green");
            else
              $("#pvid"+bean.id).css("border","2px solid red");
          });

1 个答案

how2j
答案时间：2021-11-02

红色表示服务端可能出了问题了，导致更新失败了。

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

2020-07-21 editPropertyValue.html的function list()和getProduct(pid)，函数体内都需要pid，为什么getProduct需要形参pid，而list()则不需要？

居居的拳击手套

关于实践项目-天猫整站Springboot-产品属性值设置 -editPropertyValue.html 的提问

相应的代码如下： list:function(){ var url = "products/"+pid+"/"+ this.uri; axios.get(url).then(function(response) { vue.beans = response.data; }); }, getProduct:function(pid){ var url = "products/"+pid; axios.get(url).then(function(response) { vue.product = response.data; vue.category = vue.product.category; }) }, 而 update:function(bean)的形参设定可能容易理解一些，后面的监听部分需要传入将要更新的bean： <span class="pvValue"><input class="pvValue" :id="'pvid'+bean.id" type="text" v-model="bean.value" @keyup="update(bean)"></span> 那getProduct(pid)的形参传入是为什么呢，还是说不加也可以？

1 个答案

how2j
答案时间：2020-07-21

这个，你讲得有道理呀，好像getProduct这里不要pid参数也可以的呢

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

2020-05-23 如果删除分类管理里面的某一项属性property，然后再来展示产品的propertyValue，会不会出现问题

helloa

关于实践项目-天猫整站Springboot-产品属性值设置的提问

如果删除分类管理里面的某一项属性property，然后再来展示产品的propertyValue，会不会出现问题

1 个答案

how2j
答案时间：2020-05-24

在创建表结构的时候，有外键约束，导致当存在从表数据的时候，主表数据无法被删除。为什么会这样呢？假设即使有从表数据，主表也允许被删除，那么那些从表数据就变成脏数据了。对于这个问题通常有两种解决办法： 1. 使用级联删除。即删除主表的时候，从表自动删除。这样做在技术上最简单，但是在业务上最危险，不推荐。 2. 删除有从表数据的主表时，提醒用户依然有从表数据，建议用户一条一条删除从表数据，再删除主表数据。这样技术上无改动，业务上最安全。建议采纳此种方案。附：主从表概念——以分类和产品而言，他们是一对多关系，分类就是主表，产品就是从表。

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

2020-05-21 关于图片资源

这昵称没人用了吧

关于实践项目-天猫整站Springboot-产品属性值设置 -修改功能讲解的提问

有一个地方有异常，当productSingle目录下没有0.jpg 时添加产品，会有报404错误，图片资源找不到，此时点击属性管理后再回退，再点击删除商品时，服务器端会发生异常，解决，添加0.jpg图片，不知道是不是只有我的会这样，反正先说一下

3 个答案

这昵称没人用了吧
答案时间：2020-05-23

我也不知道，我是无意中按了f12看到的404

how2j
答案时间：2020-05-22

。。。。没有get到问题呢，怎么会有 0.jpg呢

这昵称没人用了吧
答案时间：2020-05-21

进入产品页面时，当然再不进行其他操作时，点击图片管理添加图片后就不会报错了，

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

2020-05-08 PropertyValue这里覆写的tostring方法是用来干嘛的呢

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

提问之前请登陆

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

关于实践项目-天猫整站Springboot-产品属性值设置的提问

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

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

上传截图