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 doFindGoods(){
        List goodsList=goodsService.findGoods();
 return goodsList;
 }
}

第二步：添加bootstrap的文件

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

     
     
     


    
     

         
The Goods Page
         
 
             
 
                 

                 
name
                 

                 
remark
                 

                 

             
 
         
         

             

                 
 
                     
id
                     
name
                     
remark
                     
createdTime
                     
operation
                 
 
             
 
             
 
                 

                     
{{g.id}}
                     
{{g.name}}
                     
{{g.remark}}
                     
{{g.createdTime}}
                     
delete
                     
update
                 
 
             
 
         
     
 
     
     

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