SpringBoot-Spring+MyBatis+Vue+BootStrap

時間 2020-12-06

標籤 css html vue java ios web spring bootstrap axios springboot 欄目 Spring 简体版

原文原文鏈接

基於10-springboot-goods的修改使用vue實現CRUD，並使用bootstrap進行優化css

基於10-springboot-goods項目進行修改

第一步建立新module,名字爲10-springboot-goods-vue2.
第二步添加maven依賴並進行初步配置(拷貝便可)
第三步拷貝pojo,dao,service包中的全部接口和類.
第四步拷貝靜態資源到static目錄(例如vue.js,axios.min.js)html

vue實現

第一步：建立Controllervue

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文件java

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

更多相關文章...

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。