关于java:14SpringBootMybatisVue-实现商品模块的crud操作

springboot

公布于 10 月 14 日

第一步创立新 module, 名字为 10-springboot-goods-vue.
第二步增加 maven 依赖并进行初步配置 (拷贝即可)
第三步拷贝 pojo,dao,service 包中的所有接口和类.
第四步拷贝动态资源到 static 目录(例如 vue.js,axios.min.js)

创立 GoodsController 并定义相干办法, 代码如下:

package com.cy.pj.goods.controller;
import com.cy.pj.goods.pojo.Goods;
import com.cy.pj.goods.service.GoodsService;
import java.util.List;
@RestController
public class GoodsController {
     @Autowired
     private GoodsService goodsService;
      /** 查问所有商品信息 */
     @GetMapping("/goods/doFindGoods")
      public List<Goods> doFindGoods(){return goodsService.findGoods();
      }
}

在我的项目 static 目录创立 goods-vue.html, 并基于 vue 出现数据，代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <div id="app">
      <h1>The Goods Page</h1>
      <table>
          <thead>
             <tr>
                 <th>id</th>
                 <th>name</th>
                 <th>remark</th>
                 <th>createdTime</th>
             </tr>
          </thead>
          <tbody>
             <tr v-for="g in goods">
                 <td>{{g.id}}</td>
                 <td>{{g.name}}</td>
                 <td>{{g.remark}}</td>
                 <td>{{g.createdTime}}</td>
             </tr>
          </tbody>
      </table>
  </div>
  <script src="js/axios.min.js"></script>
  <script src="js/vue.js"></script>
  <script> var vm=new Vue({//vue 对象时 vue.js 利用的入口对象
             el:"#app",//vue 对象要监控的区域
             data:{// 此对象用于同步页面数据的一个对象
             goods:{}},
             methods:{// 同步与页面元素事件处理函数
                doFindGoods:function(){
                 let url="goods/doFindGoods";
                 axios.get(url)
                      .then(function(result){this.vm.goods=result.data;});
                 }
             },
             mounted:function(){this.doFindGoods();
             }
      }); </script>
</body>
</html>

启动 tomcat 进行拜访测试，如图所示：

在管制层办法中增加，解决删除逻辑的办法，代码如如下：

@RequestMapping("/goods/doDeleteById/{id}")
public String doDeleteById(@PathVariable("id")  Integer id){System.out.println("delete id"+id);
    goodsService.deleteById(id);
    return "delete ok";
}

在商品列表中的 tr 对象外部增加删除元素，代码如下：

<td><a @click="doDeleteById(g.id)"> 删除 </a></td>

在商品模块的 vue 对象中增加执行删除逻辑的办法，代码如下：

doDeleteById:function(id){
    var url="goods/doDeleteById/"+id;
    axios.get(url)
        .then(function(res){alert(res.data);
            this.vm.doFindGoods();})
}

启动服务进行拜访测试，检测其后果。

在 Controller 类中增加用于解决商品增加逻辑的办法，代码如下：

@RequestMapping("/goods/doSaveGoods")
public String doSaveGoods(@RequestBody Goods entity){System.out.println("entity="+entity);
    goodsService.saveGoods(entity);
    return "save ok";
}

在 Goods 页面上增加表单元素，用于实现用户输出，代码如下：

<form>
    <ul>
        <li>name</li>
        <li><input v-model="name"></li>
        <li>remark</li>
        <li><textarea v-model="remark"></textarea></li>
        <li><input type="button" @click="doSaveOrUpdateGoods" value="Save Goods"></li>
    </ul>
</form>

在 vue 对象外部增加用于同步表单数据的 Data 属性内容，代码如下：

data:{
    name:"",
    remark:"",
    goods:"",
}

在 vue 对象外部增加解决增加操作的事件处理函数，代码如下：

doSaveOrUpdateGoods:function(){var params={"name":this.name,"remark":this.remark};
    var url="goods/doSaveGoods";
    axios.post(url,params)
        .then(function(res){alert(res.data);
            this.vm.doFindGoods();
            this.vm.name="";
            this.vm.remark="";
        });
}

启动服务，进行增加操作测试。

在 Controller 中增加基于商品 id 查问和更新商品信息的办法，代码如下：

@RequestMapping("/goods/doFindById/{id}")
public Goods doFindById(@PathVariable("id") Integer id){return goodsService.findById(id);
}

@RequestMapping("goods/doUpdateGoods")
public String doUpdateGoods(@RequestBody Goods entity){goodsService.updateGoods(entity);
    return "update ok";
}

在 Goods 页面表单中增加暗藏的表单元素用于记录 id 值，代码如下：

<li><input type="hidden" v-model="id"></li>

在 Goods 页面记录中增加批改操作的须要的 a 元素，代码如下：

<td><a @click="doFindById(g.id)"> 批改 </a></td>

在 Vue 对象中增加基于 id 查问的办法，代码如下：

doFindById:function(id){
    var url="goods/doFindById/"+id;
    axios.get(url)
    .then(function(res){console.log(res.data);
        this.vm.id=res.data.id;
        this.vm.name=res.data.name;
        this.vm.remark=res.data.remark;
    })
}

批改 Vue 对象中的用于保留和批改数据的办法，代码如下：

doSaveOrUpdateGoods:function(){var params={"id":this.id,"name":this.name,"remark":this.remark};
    var url=this.id?"goods/doUpdateGoods":"goods/doSaveGoods";
    axios.post(url,params)
        .then(function(res){this.vm.doFindGoods();
            alert(res.data);
            this.vm.id="";
            this.vm.name="";
            this.vm.remark="";
        });
}

启动服务进行拜访测试，检测其后果。

本大节次要基于 vue 和 axio 技术实现了商品模块的基本操作，重点把握客户端与服务端的交互和传值过程。

关于java:14SpringBootMybatisVue-实现商品模块的crud操作

14-SpringBoot+Mybatis+Vue 实现商品模块的 crud 操作

筹备工作

商品查问设计及实现

商品删除设计及实现

商品增加设计及实现

商品批改设计及实现

总结(Summary)