Java项目商品管理系统 Java产品管理系统(4)

Java项目商品管理系统

上图左边是页面效果，里面的 提交 按钮可以通过上图右边看出绑定了一个 单击事件，而该事件绑定的是 addBrand 函数，所以添加数据功能的逻辑代码应该写在 addBrand()  函数中。

在此方法中需要发送异步请求并将表单中输入的数据作为参数进行传递。如下

// 添加数据
addBrand() {
    var _this = this;
    // 发送ajax请求，添加数据
    axios({
        method:"post",
        url:"http://localhost:8080/brand-case/addServlet",
        data:_this.brand
    }).then(function (resp) {
        //响应数据的处理逻辑
    })
}

在then函数中的匿名函数是成功后的回调函数，而resp.data就可以获取到响应回来的数据，如果值是success表示数据添加成功。成功后我们需要做一下逻辑处理：

关闭新增对话框窗口

如下图所示是添加数据的对话框代码，从代码中可以看到此对话框绑定了 dialogVisible 数据模型，只需要将该数据模型的值设置为 false，就可以关闭新增对话框窗口了。

重新查询数据

数据添加成功与否，用户只要能在页面上查看到数据说明添加成功。而此处需要重新发送异步请求获取所有的品牌数据，而这段代码在 查询所有 功能中已经实现，所以我们可以将此功能代码进行抽取，抽取到一个 selectAll() 函数中

// 查询所有数据
selectAll(){
    var _this = this;
    axios({
        method:"get",
        url:"http://localhost:8080/brand-case/selectAllServlet"
    }).then(function (resp) {
        _this.tableData = resp.data;
    })
}

那么就需要将 mounted() 钩子函数中代码改进为

mounted(){
    //当页面加载完成后，发送异步请求，获取数据
    this.selectAll();
}

同时在新增响应的回调中调用 selectAll() 进行数据的重新查询。

弹出消息给用户提示添加成功

上图左边就是 elementUI 官网提供的成功提示代码，而上图右边是具体的效果。

综上所述，前端代码如下：

// 添加数据
addBrand() {
    var _this = this;
    // 发送ajax请求，添加数据
    axios({
        method:"post",
        url:"http://localhost:8080/brand-case/addServlet",
        data:_this.brand
    }).then(function (resp) {
        if(resp.data == "success"){
            //添加成功
            //关闭窗口
            _this.dialogVisible = false;
            // 重新查询数据
            _this.selectAll();
            // 弹出消息提示
            _this.$message({
                message: '恭喜你，添加成功',
                type: 'success'
            });
        }
    })
}

4.3、修改数据功能