天猫项目（6）属性管理

Property是Category的子模块，是多对一的关系，所以，这里的代码，要解决的问题也就是这个。

1.pojo

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

    //省略set,get,tostring
}

在类中加上映射的对象category，并且用@ManyToOne注解修饰，然后用@JoinColumn(name = "cid")给出外键

后面的vue中接受数据的的data，也要如此设计

2.dao

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

给出一个通过category查找对应的property的方法的声明

3.service

@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) {
        //Property对应分类的id
        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);
    }
}

唯一值得一提的service中的方法就是list，因为需要根据category查找property，所以需要注入CategoryService，这也是多对一关系映射业务处理中的一个步骤

3.controller

那个跳转的controller我就不说了，跟之前的规则差不多

说一下PropertyController

@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){
        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) {
        Property bean = propertyService.get(id);
        return bean;
    }

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

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

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

这里需要额外注意的还是list方法，这里的url设计是重点，后面的vue，中的list的ajax请求的url也要如此设计

其他操作其实没有变化，只有list方法的操作是不同的

4.listProperty.html

<script>
    $(function () {
        var cid = getUrlParms("cid");
        var data4Vue = {
            uri: 'properties',
            beans: [],
            pagination: {},
            bean: {id:0,name:'',category:{id:0}},
            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.beans = response.data.content;
                        vue.pagination = response.data;
                    });
                },
                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}};
                    });
                },
                jump: function (page) {
                    jump(page,vue);
                },
                jumpByNumber: function (start) {
                    jumpByNumber(start,vue);
                },
                //delete是保留字
                deleteBean: function (id) {
                    //这里其实会出现一个确认删除的提示框
                    if (!checkDeleteLink())
                        return;
                    //url规范，说实话这里的接口其实是和controller映射一致的吧
                    var url = this.uri + "/" + id;
                    axios.delete(url).then(function (response) {
                        //删除成功会返回一个空字符串
                        if (0!=response.data.length)
                            alert(response.data);
                        else {
                            //删除成功，返回第一页
                            vue.list(0);
                        }
                    })
                }
            }
        });
    });
</script>

其实代替上设计大同小异，我们主要聚焦实现多对一查询的部分，尤其是url，以及list方法的实现，这个是实现这个业务逻辑的重点

data部分，bean中多了一个category对象，这里我突然又想到了一个点，这里出现的对象的属性，其实是和pojo中映射到的属性是一致的，如果没有映射到，就不会出现，具体的理解我也没有形成自己完整的看法，等待后一步的学习吧

这里的url适合mapping绑定的

为了更方便看出整个流程这里，我再把listCategory中的链接代码放出来

<a :href="'admin_property_list?cid=' + bean.id "><span class="glyphicon glyphicon-th-list"></span></a>

get方法，先根据请求的url的cid得到property所属的category对象，然后查询list出所有的property属性，这里有一个想到了，就是ajax的axios的数据绑定机制，下去以后还要查阅资料思考

add方法呢，就是根据已经绑定的bean的category属性，以及提交的bean数据，创建一个新的bean然后post上去，然后初始化掉

<a href="#nowhere"  @click="deleteBean(bean.id)"><span class="   glyphicon glyphicon-trash"></span></a>
               

deleteBean呢，就直接在当前页面调用函数就可以了，突然想到一个点，因为这里实现的是双向的绑定，所以也不用刷新，只要后台删除掉一个property，页面就会自动减少一个bean，感觉自己好像感受到一点点双向绑定的意思了

最后给一下跳转eidt页面的链接，我们就进入下一部分代码

<a :href="'admin_property_edit?id=' + bean.id "></a>

可以看出，传递了id的属性

5.editProperty.html

还是先看vue的部分

<script>
    $(function () {
        var data4Vue  = {
            uri: 'properties',
            listURL: 'admin_property_list',
            bean: '',
            category: ''
        };
        //ViewModel
        var vue = new Vue({
            el: '#workingArea',
            data: data4Vue,
            mounted:function () {
                this.get();
            },
            methods: {
                get: function () {
                    //把id从地址栏中取出来
                    var id = getUrlParms("id");
                    //结果类似/properties/3这种形式
                    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) {
                        //上传后直接跳转到list的URL,通过对location对象的操作
                        location.href = vue.listURL+"?cid="+vue.category.id;
                    });
                }
            }
        })
    })
</script>

这里我想到了一个点，就是如果想通过页面把一个参数传到下一个参数，在下一个页面如果想用到这个就要通过我们自己封装的函数getUrlParams()传入想要从url中提取的PathVariabel来获取

这里在获取到id以后，还是通过查后端的代码，通过ajax请求get到这个property的属性，完成bean的绑定，其实在update框中其实绑定了bean的name属性，默认显示的也是这个，然后实现了一个update方法

在还有一个点，就是vue中的data需要封装哪些的问题，这个其实是由我们需要的数据对象的集合决定的，就好比这里，只需要提取出一个category，然后给出一个bean（只对一个bean进行操作就够了）用来提交就可以了，至于bean中有哪些属性，不知道为何没有给出?是因为上一步已经给出了么，但在进行get方法时，也用到了vue.bean.category啊？这里下一步还需要思考。

属性关系就暂时写到这里，不懂得地方还有很多，自己也才在这条路上刚刚开始

谢谢观看