天猫项目（9）产品属性管理

突然发现自己很憨批的没有看er图就开始撸项目，怪不得搞得云里雾里，补充在(0)那篇里面了，可以随时参阅

这里的产品属性呢，是一对多分别引用产品和属性，做出来是这样一个样子，我渐渐发觉，想做一个模块，得先搞清楚需求，然后再去设计具体的业务逻辑，以后做一个模块之前，就先对这些进行分析

上述是做出来的效果图，这个模块是从产品的这个界面进去的，传入了产品的pid，进入到这个产品属性的编辑页面而产品属性的项目是在category的属性管理中定义的，这里需要填充的是，propertyValue的value值，按我的分析呢，需要通过product的pid首先查出所在的product，这是value绑定的对象，然后还要根据product查出其所属的category，找出属性list出来。

这里的功能设计呢，大体上来说只有两个，一个就是从属性的category list出来属性，第二个呢，就是对属性进行填充(这就决定了第一次还未创建的时候需要初始化操作)或者更新绑定在产品上

下面给出具体的实现代码

1.pojo

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

    
}

2.dao

public interface PropertyValueDAO extends JpaRepository<PropertyValue,Integer>{

    List<PropertyValue> findByProductOrderByIdDesc(Product product);

    PropertyValue getByPropertyAndProduct(Property property,Product product);
}

3.service

@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> properties = propertyService.listByCategory(product.getCategory());
        for (Property property : properties) {
            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);
    }
}

4.controller

@RestController
public class PropertyValueController {

    @Autowired
    PropertyValueService propertyValueService;

    @Autowired
    ProductService productService;

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

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

    }
}

5.editPropertyValue

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="include/admin/adminheader::html('产品属性管理')">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div th:replace="include/admin/adminNavigator::html"></div>
<script>
    $(function () {
        var pid = getUrlParms("pid");
        var data4Vue  = {
            uri: 'propertyValues',
            product: '',
            beans: [],
            category: ''
        };
        //ViewModel
        var vue = new Vue({
            el: '#workingArea',
            data: data4Vue,
            mounted:function () {
                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>

这里的实现很有意思，选用的是监听的方式，很有vue的特点

谢谢观看

来源：CSDN

作者：周周写不完的代码

链接：https://blog.csdn.net/qq_39007838/article/details/104786173

标签

产品属性

bean