欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

layui框架與SSM前后臺(tái)交互的方法

 更新時(shí)間：2019年09月12日 09:10:47   作者：知更鳥女孩  
今天小編就為大家分享一篇layui框架與SSM前后臺(tái)交互的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

采用layui前臺(tái)框架實(shí)現(xiàn)前后臺(tái)交互，數(shù)據(jù)分頁顯示以及刪除操作，具體方式如下：

一、數(shù)據(jù)分頁顯示

1.前端

（1）html頁面

<!--輪播數(shù)據(jù)分頁顯示-->
<table class="layui-hide" id="content_lbt" lay-filter="content_lbt_filter"></table>

（2）請(qǐng)求渲染數(shù)據(jù)

$(function() {
 /*輪播數(shù)據(jù)分頁顯示*/
 layui.use(['table', 'update'], function() {
 var table = layui.table,
  upload = layui.upload;
 
 table.render({
  elem: '#content_lbt',
  height: 500
  //,url: 'data/content_lbt.json' //數(shù)據(jù)接口
  ,
  url: 'http://localhost:9911/cms/queryCarouselList' //數(shù)據(jù)接口
  ,
  page: true //開啟分頁
  ,
  loading: true,//分頁查詢是否顯示等待圖標(biāo)
  text: {//若查詢記錄為空，執(zhí)行此操作
  none: '暫無相關(guān)數(shù)據(jù)'
  } //默認(rèn)：無數(shù)據(jù)。注：該屬性為 layui 2.2.5 開始新增
  ,
  cellMinWidth: 80 //全局定義常規(guī)單元格的最小寬度，layui 2.2.1 新增
  ,
  cols: [
  [{
   field: 'id',
   width: '10%',
   title: 'ID',
   sort: true
  }, {
   field: 'posterId',
   width: '10%',
   title: '上傳者ID',
   sort: true
  }, {
   field: 'posterName',
   width: '15%',
   title: '上傳者姓名'
  }, {
   field: 'description',
   width: '28%',
   title: '描述',
   minWidth: 200
  }, {
   field: 'photoPath',
   width: '10%',
   title: '圖片',
   minWidth: 100
  }, {
   field: 'createTime',
   width: '10%',
   title: '上傳時(shí)間',
   minWidth: 100
  }]
  ],
  request: {
  pageName: 'page',
  limitName: 'size'
  },
  limit: 10,
  limits: [10, 20, 30, 40, 50]
 });
   });

2.后端

后端采用SpringBoot，利用SSM框架

（1）mapper：（注意@Mapper注解）

/**
   * 查詢所有輪播圖信息
   *
   * @return
   */
  List<Carousel> queryCarousel(@Param("start") Integer start, @Param("size") Integer size);
 
  /**
   * 查詢輪播記錄條數(shù)
   *
   * @return
   */
  Integer countCarousel();

注意po類采用駝峰式寫法

<select id="queryCarousel" resultType="com.jingling.basic.po.Carousel">
     SELECT id, poster_id AS posterId, poster_name AS posterName, description AS description , photo_path AS photoPath, create_time AS createTime
     FROM carousel
     LIMIT #{start}, #{size}
  </select>
 
  <select id="countCarousel" resultType="int">
    SELECT COUNT(*) FROM carousel
  </select>

（2）service

  /**
   * 查詢?nèi)枯啿バ畔?
   *
   * @return
   */
  List<Carousel> queryCarousel(Integer page,Integer size);
 
  /**
   * 查詢輪播記錄條數(shù)
   *
   * @return
   */
  Integer countCarousel();

（3）serviceImpl（注意要有@Service注解）

 @Autowired
  private CarouselMapper carouselMapper;
 
  @Override
  public List<Carousel> queryCarousel(Integer page,Integer size) {
    if(page == null || page <= 0){
      page = 1;
    }
    if (size == null || size <= 0){
      size = 10;
    }
 
    Integer start = (page - 1) * size;
    return carouselMapper.queryCarousel(start,size);
  }
 
  @Override
  public Integer countCarousel() {
    return carouselMapper.countCarousel();
  }

（4）Controller（注意要有@RequestController注解）

@RestController
@RequestMapping("/cms")
  @Autowired
  public CmsService cmsService;
 
  /**
   * 查詢輪播圖信息
   *
   * @return
   */
  @GetMapping("/queryCarouselList")
  public Object queryCarouselList(HttpServletResponse response, @RequestParam("page") Integer page, @RequestParam("size") Integer size){
    response.setHeader("Access-Control-Allow-Origin", "*");//解決跨域的問題
    List<Carousel> carouselList = cmsService.queryCarousel(page,size);
    if (carouselList == null){
      return RecycleResult.build(500,"輪播圖為空");
    }
    //return RecycleResult.ok(carouselList);
    //return carouselList;
    Integer count = cmsService.countCarousel();
    return new LayuiReplay<Carousel>(0, "OK", count, carouselList);
  }

二、刪除操作

1.前端

<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
  <!--<a class="layui-btn layui-btn-xs" lay-event="edit">編輯</a>-->
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">刪除</a>
 </script>
                {
   fixed: 'right',
   width: '15%',
   align: 'center',
   title: '操作',
   toolbar: '#barDemo'
  }
   fixed: 'right',
   width: '15%',
   align: 'center',
   title: '操作',
   toolbar: '#barDemo'
  }
//監(jiān)聽工具條
 table.on('tool(content_lbt_filter)', function(obj) { //注：tool是工具條事件名，test是table原始容器的屬性 lay-filter="對(duì)應(yīng)的值"
  var data = obj.data //獲得當(dāng)前行數(shù)據(jù)
  ,
  layEvent = obj.event; //獲得 lay-event 對(duì)應(yīng)的值
  if(layEvent === 'detail') {
  layer.msg('查看操作');
  } else if(layEvent === 'del') {
  layer.confirm('真的刪除行么', function(index) {
   //obj.del(); //刪除對(duì)應(yīng)行（tr）的DOM結(jié)構(gòu)
   delCarouselById(data.id);
   layer.close(index);
   //向服務(wù)端發(fā)送刪除指令
  });
  }
  /*else if(layEvent === 'edit'){
    layer.msg('編輯操作');
   }*/
 });
 
 
 //刪除記錄
 function delCarouselById(id) {
  $.get("http://localhost:9911/cms/delCarouselById?id=" + id,
  function(data, status) {
   layer.msg('刪除成功');
  });
 }

2.后端（此處僅顯示controller層和mapper）

 @GetMapping("/delCarouselById")
  public RecycleResult delCarouselById(HttpServletResponse response,@RequestParam("id") Integer id){
    response.setHeader("Access-Control-Allow-Origin", "*");
    cmsService.delCarouselById(id);
    return RecycleResult.ok();
  }
<delete id="delCarouselById">
    DELETE FROM carousel
    WHERE id = #{id}
  </delete>

補(bǔ)充LayuiReplay類（其中g(shù)et、set方法省略）

public class LayuiReplay <T> {
  private int code;
  private String msg;
  private int count;
  private List<T> data;
 
  public LayuiReplay(int code, String msg, int count, List<T> data) {
    this.code = code;
    this.msg = msg;
    this.count = count;
    this.data = data;
  }
 
  public String toJson() {
    Gson gson = new Gson();
    String json = gson.toJson(this);
    return json;
  }
 
  public static <T> String toJson(int count, List<T> data) {
    LayuiReplay<T> replay = new LayuiReplay<>(ReplyCode.OK.getCode(), ReplyCode.OK.getMessage(), count, data);
    return replay.toJson();
  }
}

補(bǔ)充ReplyCode.java枚舉類

public enum ReplyCode {
  NOT_LOGIN(-1,"您尚未登錄或登錄時(shí)間過長(zhǎng),請(qǐng)重新登錄或刷新頁面!"),
  OK(0, "OK"),
  WRONG_URL(400,"請(qǐng)求路徑錯(cuò)誤"),
  WRONG_ROLE(401, "身份錯(cuò)誤"),
  REQUEST_FAILED(500, "請(qǐng)求失敗，請(qǐng)重試"),
  NULL_ATTR(30,"屬性不能為空"),
  ATTR_WRONG(31, "屬性填寫錯(cuò)誤"),
  WRONG_LENGTH(32, "數(shù)據(jù)長(zhǎng)度不符合要求"),
  WRONG_PATTERN(33, "數(shù)據(jù)格式錯(cuò)誤"),
  VAILD_WRONG(100,"驗(yàn)證碼錯(cuò)誤"),
  CUSTOM(999, "")
  ;
 
  ReplyCode(int code, String message) {
    this.code = code;
    this.message = message;
  }
 
  private int code;
  private String message;
 
  public int getCode() {
    return code;
  }
 
  public ReplyCode setCode(int code) {
    this.code = code;
    return this;
  }
 
  public String getMessage() {
    return message;
  }
 
  public ReplyCode setMessage(String message) {
    this.message = message;
    return this;
  }
 
}

以上這篇layui框架與SSM前后臺(tái)交互的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論