SpringBoot-Spring+MyBatis+Vue+BootStrap

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

基于10-springboot-goods项目进行修改

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

vue实现

第一步：创建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

SpringBoot-Spring+MyBatis+Vue+BootStrap

基于10-springboot-goods项目进行修改

vue实现

木安

引用和评论

Spring Cloud-Eureka

开发插件集合

Vue.js-方法与事件

状态码 406， Not Acceptable, (Spring Boot)

Vue使用mixins

AES 加密和解密demo

这个前端神器，竟让滴滴、美团都爱不释手？！