vue增删改查基础操作页面更新，基于axios的put，delete，get，put，以及对应的spring侧如何接收数据

get操作

get主要是用来获取数据

            var self = this;
            axios.get('/systemconfig/financial/json')
                .then(function (response) {
                    self.items = JSON.parse(response.data);
                })
                .catch(function (error) {
                    console.log(error);
                });

get操作比较简单，只要在网页上绑定好数据items，请求的内容自然会绑定到网页中，有一点一定要注意，就是在axios请求内容之后，不可以直接使用this更新数据了，要先设定好对象，引用this，然后给这个新对象附值就可以了。

然后后台也要用get接收

    @RequestMapping(value = "/financial/json", method = RequestMethod.GET)
    public String toLoginPage( ) {

    }

注意要添加@RequestMapping的method属性。

这个比较简单，没什么看的。

post操作

 axios.post('/systemconfig/financial', {
                    configType: 1,
                    configTypeName: this.SystemConfig.configTypeName,
                    configTypeValue: "NULL",
                    isStart: this.SystemConfig.isStart

                }).then(function (response) {
                    console.log(response);

                    // self.items = JSON.parse(response.data);
                    data = JSON.parse(response.data);

                    // 如果没有插入成功 则放回 failuer 就不要执行了
                    if (data == "nohave") {
                        humane.error("您没有输入正确的内容！");
                        return false;
                    } else if (data == "failuer") {
                        humane.error("插入失败，请检查您输入的数据！");
                        return false;
                    } else {  // 如果插入成功，则返回json，并添加到 items中。
                        console.log(data);
                        self.items.push(data);
                        self.closeAddDiv();
                    }
                })
                    .catch(function (error) {
                        console.log(error);
                    });

post操作是添加数据的，

跟get差不多，但是注意这个self.items.push(data)

要用这个添加数据

JAVA也比较简单，

    @RequestMapping(value = "/financial", method = RequestMethod.POST)
    public String addSystemConfig(ModelAndView mv, @RequestBody SystemConfig systemConfig) {}

注意传入的参数都要是SystemConfig 的属性 然后在前面加上@RequestBody注解，才可以，不然spring接收不到参数

delete操作

 var self = this;
                axios({
                    method: 'delete',
                    url: '/systemconfig/id/' + id,
                    data: {
                        "id": id,
                    }
                })
                    .then(function (response) {
                        data = response.data;
                        if (data < 1) { // 删除失败
                            humane.error("删除失败，您的页面可能已经过期，请更新您的页面！");
                            return;

                        } else {
                            self.items.splice(index, 1);
                            humane.success("操作成功！！！");
                        }

                    })
                    .catch(function (response) {
                        console.log(response);
                    });

这个delete也很简单， 

self.items.splice(index, 1);这个是关键

    @RequestMapping(value = "/id/{urlId}", method = RequestMethod.DELETE)
    public int deleteSystemConfig(@PathVariable Integer urlId,
            @RequestBody SystemConfig systemConfig, HttpSession httpSession) {}

这上面的

@PathVariable  是获取id后面的那个动态id的。剩下的也很简单。

 var self = this;

            axios({
                method: 'put',
                url: '/systemconfig/id/' + self.selectSystemConfig.id,
                data: {
                    "id": self.selectSystemConfig.id,
                    "configTypeName": self.selectSystemConfig.configTypeName,
                    "isStart": self.selectSystemConfig.isStart

                }
            })
                .then(function (response) {

                    data = response.data;
                    if (data < 1) { // 删除失败
                        humane.error("修改失败，您的页面可能已经过期，请刷新您的页面！");
                        return;

                    } else {
                        alert(self.indexflag)


                        self.condition.updatediv = true;
                        self.$set(self.items[self.indexflag], "configTypeName", self.selectSystemConfig.configTypeName);
                        self.$set(self.items[self.indexflag], "isStart", self.selectSystemConfig.isStart);
                        // self.$forceUpdate();
                        humane.success("操作成功！！！");
                    }

                })
                .catch(function (response) {
                    console.log(response);
                });

这个跟上面的差不多。但是下面的是关键

然后是JAVA的。

    @RequestMapping(value = "/id/{urlId}", method = RequestMethod.PUT)
    public int updateSystemConfig(@PathVariable Integer urlId,
            @RequestBody SystemConfig systemConfig, HttpSession httpSession) {}

不错。看着简单，但是这都是我一点点扣出来的，遇见了好多问题，搜了好多博客。