springcloud+layui前后端分离数据的传输

  • Post author:
  • Post category:其他


由于是使用layui作为前端,便需使用layui可以接收的json数据格式,便自己写了个封装类。



AjaxResultVO封装类

public class AjaxResultVO<T> {
    private Integer code = 0;   //返回的状态码 0为正常,1为失败
    private String msg = "ok";   //返回的信息(一般错误的信息或者异常信息)
    private Long count;   //数据条数
    private List<Bill> data;   //响应数据

    public Integer getCode() {
        return code;
    }

    public void setCode(Integer code) {
        this.code = code;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }

    public Long getCount() {
        return count;
    }

    public void setCount(Long count) {
        this.count = count;
    }

    public List<Bill> getData() {
        return data;
    }

    public void setData(List<Bill> data) {
        this.data = data;
    }

    public AjaxResultVO() {
    }

    public AjaxResultVO(Integer code, String msg, Long count, List<Bill> data) {
        this.code = code;
        this.msg = msg;
        this.count = count;
        this.data = data;
    }
}



控制层:(我采用的是restful风格去写)

@RestController
@RequestMapping("/bill")
@RefreshScope  //刷新
public class BillController {

    @Resource
    private BillService billService;

    /**
     * 查询
     * @param b
     * @return
     */
    @GetMapping("/list")
    public String list(Bill b) {
        List<Bill> list = billService.list(b);
        AjaxResultVO vo = new AjaxResultVO();
        if(list != null) {
            vo.setMsg("查询成功");
            vo.setCount(list.stream().count());
            vo.setData(list);
            return JSON.toJSONString(vo);
        }
        vo.setCode(1);
        vo.setMsg("查询失败");
        vo.setCount(list.stream().count());
        vo.setData(list);
        return JSON.toJSONString(vo);
    }
    /**
     * 添加
     * @param b
     * @return
     */
    @PostMapping("/add")
    public String add(Bill b) {
        int add = billService.add(b);
        AjaxResultVO vo = new AjaxResultVO();
        if (add<=0){
            vo.setCode(1);
            vo.setMsg("添加失败");
            return JSON.toJSONString(vo);
        }
        vo.setMsg("添加成功");
        return JSON.toJSONString(vo);
    }
    /**
     * 删除
     * @param id
     * @return
     */
    @DeleteMapping("/delete/{id}")
    public String delete(@PathVariable("id") Long id) {
        int delete = billService.delete(id);
        AjaxResultVO vo = new AjaxResultVO();
        if (delete<=0){
            vo.setCode(1);
            vo.setMsg("删除失败");
            return JSON.toJSONString(vo);
        }
        vo.setMsg("删除成功");
        return JSON.toJSONString(vo);
    }

    /**
     * 修改
     * @param
     * @return
     */
    @PutMapping("/update")
    public String update(Bill bill) {
        int update = billService.update(bill);
        AjaxResultVO vo = new AjaxResultVO();
        if (update<=0){
            vo.setCode(1);
            vo.setMsg("更新失败");
            return JSON.toJSONString(vo);
        }
        vo.setMsg("更新成功");
        return JSON.toJSONString(vo);
    }
}

由于涉及了跨域,且采用了restful风格,网关配置如下:

server:
  port: 8086  
spring:
  application:
    name: api-gateway #网关服务名
  cloud:
    gateway:
      routes:
        - id: bill-route   #路由名
          uri: lb://bill-manager  #代理的服务地址(你要配置的服务的地址),假设你要配的服务地址为http://127.0.0.1:8090,便也可写成uri: http://127.0.0.1:8090
          predicates: 
            - Path=/api/bill/**   #映射路径
          filters:
            - StripPrefix=1   #表示过滤一个路径,如:api/bill  会过滤成bill
      globalcors:   #跨域配置
        cors-configurations:
          '[/**]':     #表示对所有访问到网关服务器的请求地址进行配置
            allowedOrigins:
              - "http://localhost:8080"   #允许来自localhost:8080的请求
            allowedMethods:	 #允许的请求方式如:post,get,put,delete,options
              - POST
              - GET
              - PUT
              - DELETE
              - OPTIONS
eureka:		#注册中心
  client:
    service-url:
      defaultZone: http://127.0.0.1:10086/eureka



前端layui:

将从服务端发出的json数据接收,且显示在数据表格中。

在这里插入图片描述

当点击前端页面的删除时,使用ajax发送数据

在这里插入图片描述

由于前端给后端传输的data.field值为[object Object],便不可以在写contentType:‘application/json’,不然便会出现跨域的错误。如若指定了contentType:‘application/json’,那么发送给后端的数据便应该是json字符串,即JSON.stringify(data.field)这便是转换为json字符串。

在这里插入图片描述

在这里插入图片描述



版权声明:本文为qq_41486333原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。