springboot整合vue2实现简单的新增删除，整合ECharts实现图表渲染

先看效果图：

1.后端接口

 //    查询所有商品信息
//    @CrossOrigin(origins = "*")
    @RequestMapping("/list1")
    @ResponseBody
    public List list1(){
        List list = goodsService.list();
        return list;
    }


//    删除
//    @CrossOrigin(origins = "*")
    @RequestMapping("/del")
    @ResponseBody
    public String del(int id){
        try {
            goodsService.removeById(id);
            return "删除成功";
        }catch (Exception e){
            return "删除失败";
        }
    }

//    根据条件查询
    @RequestMapping("/search")
    @ResponseBody
    public List search(String goodsname,String goodsType){
        System.out.println(goodsname+","+goodsType);
        QueryWrapper wrapper = new QueryWrapper<>();
        wrapper.like(StringUtils.isNotBlank(goodsname),"name",goodsname).like(StringUtils.isNotBlank(goodsType),"goods_type",goodsType);
        List list = goodsService.list(wrapper);
        for (Goodsinfo goodsinfo : list) {
            System.out.println(goodsinfo);
        }
        return list;
    }

// 添加数据
    @RequestMapping("/add")
    @ResponseBody
    public String add(@RequestBody Goodsinfo goodsinfo){
        System.out.println(goodsinfo);
        goodsService.save(goodsinfo);
        return "添加成功";
    }

2.前端页面：

  
    
    
    
    
    
    
  
  
    

      

        
        


          
          

            
            
			
			
			
			
            添加账单
          

          
                <

            

              

                
编号
                
名称
                
价格
                
简介
				
库存
				
类别
				
备注
				
操作
              
            
            

              

                
{{index+1}}
{{item.name}}
                
{{item.price}}
				
{{item.intro}}
				
{{item.amount}}
				
{{item.goodsType}}
				
{{item.remark}}
                
删除
              
             
            
            

              

                
消费总计： {{totalPrice}}