关于springboot:SpringBootSpringMyBatisVueBootStrap

81次阅读

共计 3523 个字符，预计需要花费 9 分钟才能阅读完成。

基于 10-springboot-goods 的批改应用 vue 实现 CRUD，并应用 bootstrap 进行优化

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

第一步：创立 Controller

package com.cy.pj.goods.controller;
import com.cy.pj.goods.pojo.Goods;
import com.cy.pj.goods.service.GoodsService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
@RestController
public class GoodsController{
    @Autowired
 private GoodsService goodsService;
 @RequestMapping("doFindById/{id}")
    public Goods doFindById(@PathVariable Integer id){return goodsService.findById(id);
 }
    @RequestMapping("doUpdateGoods")
    public String doUpdateGoods(@RequestBody Goods entity){goodsService.updateGoods(entity);
 return "save ok";
 }
    @RequestMapping("doSaveGoods")
    public String doSaveGoods(@RequestBody Goods entity){goodsService.saveGoods(entity);
 return "save ok";
 }
    @RequestMapping("doDeleteById/{id}")
    public String doDeleteById(@PathVariable Integer id){goodsService.deleteById(id);
 return "delete ok";
 }
    @RequestMapping("/doFindGoods")
    public List<Goods> doFindGoods(){List<Goods> goodsList=goodsService.findGoods();
 return goodsList;
 }
}

第二步：增加 bootstrap 的文件

第三步：创立 goods-vue-01.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>Title</title>
     <style> 
        ul>li{list-style-type: none}
     </style>
</head>
<body>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
     <div id="app">
         <h1>The Goods Page</h1>
         <form> 
             <ul> 
                 <li><input type="hidden" v-model="id"></li>
                 <li>name</li>
                 <li><input v-model="name"></li>
                 <li>remark</li>
                 <li><textarea v-model="remark" rows="3" cols="50"></textarea></li>
                 <li><input type="button" v-on:click="doSaveOrUpdata" value="Save Goods"/></li>
             </ul> 
         </form>
         <table class="table table-bordered">
             <thead>
                 <tr> 
                     <th>id</th>
                     <th>name</th>
                     <th>remark</th>
                     <th>createdTime</th>
                     <th colspan="2">operation</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>
                     <td><a @click="doDeleteById(g.id)">delete</a></td>
                     <td><a @click="doFindById(g.id)">update</a></td>
                 </tr> 
             </tbody> 
         </table>
     </div> <script src="js/axios.min.js"></script>
     <script src="js/vue.js"></script>
     <script> var vue=new Vue({//vue 对象是 vue.js 的入口函数
         el:"#app",//Vue 对象要监控的区域（底层会对这块区域的内容构建一个虚构的 dom 树）data:{// 此对象用于同步页面数据的一个对象
             id:"",
             name:"",
             remark:"",
             goods:[]},
         methods:{// 同步与页面元素事件处理函数
         doFindById:function (id){let url=`doFindById/${id}`;
            axios.get(url).then(function (result){console.log(result.data);
                 this.vue.id=result.data.id;
                 this.vue.name=result.data.name;
                 this.vue.remark=result.data.remark;
         })
                        },
         doSaveOrUpdata:function (){
             let url=this.id?"http://localhost:1314/doUpdateGoods":"http://localhost:1314/doSaveGoods";
            var params={"id":this.id,"name":this.name,"remark":this.remark};
             console.log(params);
            axios.post(url,params)
                 .then(function (result){alert(result.data);
                 this.vue.doFindGoods();
                 this.id="";
                 this.vue.name="";
                 this.vue.remark="";
         })
                 .catch()},
         doDeleteById:function (id){
            let Url="http://localhost:1314/doDeleteById/"+id;
            axios.get(Url).then(function (result){alert(result.data);
            this.vue.doFindGoods();})
                        },
         doFindGoods:function (){
            let Url="http://localhost:1314/doFindGoods";
            axios.get(Url)
                 .then(function (result){
                this.vue.goods=result.data;
                console.log(result.data);
         })
                .catch()}
                    },
         mounted:function (){this.doFindGoods();
         }
                })
    </script>
</body>
</html>

第四步：启动服务器进行测试
http://localhost:1314/goods-vue-01.html

正文完