这个小dome简单来说的前后端分离,通过跨域调用接口来显示数据。
前端用到mui框架,主要来显示数据。
后端用到Java的springMVC,restful服务来做增删改查管理,
这里主要实现动态显示商品,剩下那些数据都是写固定的,不是动态的。
先看没有数据的的样子
前端的商品显示:
后台的管理:
核心代码
package com.lch.kyu.Controller; import com.lch.kyu.entity.Hungry; import com.lch.kyu.service.HungryService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.*; import java.util.List; @RestController @RequestMapping(path = "/hungry") public class HungryCo { @Autowired HungryService hungryService; //查询 @RequestMapping(path = "", method = RequestMethod.GET) public AjaxState getAllHung() { List<Hungry> hungries=(hungryService.queryAllHungry()); for (Hungry h:hungries ) { System.out.println(h.getName()); } boolean result=hungries!=null; return new AjaxState(result?"success":"error",hungries,result?"获得数据成功!":"获得数据失败!"); } //添加 @RequestMapping(path = "", method = RequestMethod.POST) public AjaxState addhungry(@RequestBody Hungry hungry) { boolean result=hungryService.addHungry(hungry); return new AjaxState(result?"success":"error",hungry,result?"添加成功!":"添加失败"); } //修改 @RequestMapping(path = "", method = RequestMethod.PUT) public AjaxState updatehungry(@RequestBody Hungry hungry) { boolean result=hungryService.editHungry(hungry); return new AjaxState(result?"success":"error",hungry,result?"修改成功!":"修改失败"); } //删除 @RequestMapping(path = "/{id}", method = RequestMethod.DELETE) public AjaxState deleteHungryid(@PathVariable int id) { Boolean result=hungryService.deleteHungry(id); return new AjaxState(result?"success":"error",id,result?"删除成功!":"删除失败"); } } class AjaxState{ public String state; public Object data; public String message; public AjaxState(String state, Object data, String message) { this.state = state; this.data = data; this.message = message; } public AjaxState(){} }