10 – springboot + mybatis + Vue to implement crud operation of commodity module

Time:2020-11-22

preparation

The first step is to create a new module named 10 – springboot – goods – Vue
The second step is to add Maven dependency and make preliminary configuration (copy is enough)
The third step is to copy all interfaces and classes in POJO, Dao and service packages
Step 4 copy the static resources to the static directory (for example vue.js , axios.min.js )

Design and implementation of commodity query

Create goodscontroller and define relevant methods. The code is as follows:

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;
      /**Query all product information*/
     @GetMapping("/goods/doFindGoods")
      public List<Goods> doFindGoods(){
          return goodsService.findGoods();
      }
}

Create goods in the project static directory- vue.html And render the data based on Vue. The code is as follows

<!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></script>
  <script></script>
  < script > var VM = new Vue ({// Vue object) vue.js The entry object of the application
             El: "ාapp", // Vue object to monitor the area
             Data: {// an object used to synchronize page data
             goods:{}
             },
             Methods: {// synchronization and page element event handling function
                doFindGoods:function(){
                 let url="goods/doFindGoods";
                 axios.get(url)
                      .then(function(result){
                            this.vm.goods=result.data;
                       });
                 }
             },
             mounted:function(){
                 this.doFindGoods();
             }
      }); </script>
</body>
</html>

Start Tomcat for access test, as shown in the figure:
10 - springboot + mybatis + Vue to implement crud operation of commodity module

Design and implementation of commodity deletion

Add a method to control layer method to handle deletion logic. The code is as follows:

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

Add a delete element inside the TR object in the commodity list. The code is as follows:

<td>< a @ Click = "dodeletebyid (g.id)" > delete</a></td>

Add a method to execute the deletion logic in the Vue object of the commodity module. The code is as follows:

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

Start the service for access test and test the results.

Design and implementation of commodity addition

Add a method to the controller class to handle the commodity addition logic. The code is as follows:

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

Add a form element to the goods page for user input. The code is as follows:

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

Add the data attribute content to synchronize the form data inside the Vue object. The code is as follows:

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

Add an event handling function inside the Vue object to handle the add operation. The code is as follows:

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="";
        });
}

Start the service and test the adding operation.

Design and implementation of commodity modification

Add a method to query and update the product information based on the commodity ID in the controller. The code is as follows:

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

Add a hidden form element to the goods page form to record the ID value. The code is as follows:

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

Add the a element needed for modification in the records of the goods page. The code is as follows:

<td>< a @ Click = "dofindbyid (g.id)" > Modify</a></td>

Add an ID based query method to the Vue object. The code is as follows:

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;
    })
}

Modify the methods used to save and modify data in Vue objects. The code is as follows:

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="";
        });
}

Start the service for access test and test the results.

Summary

This section mainly realizes the basic operation of commodity module based on Vue and Axio technology, focusing on the interaction and value transfer process between client and server.

Recommended Today

Explain module, import and export in JavaScript

Author: Tania rascia Crazy technology house Original text:https://www.taniarascia.com/j… In the era of the Internet, websites are mainly developed with HTML and CSS. If you load JavaScript into a page, it usually provides effects and interactions in the form of small fragments. Generally, all JavaScript code is written in a file and loaded into a filescriptTag. […]