亚洲香蕉成人av网站在线观看_欧美精品成人91久久久久久久_久久久久久久久久久亚洲_热久久视久久精品18亚洲精品_国产精自产拍久久久久久_亚洲色图国产精品_91精品国产网站_中文字幕欧美日韩精品_国产精品久久久久久亚洲调教_国产精品久久一区_性夜试看影院91社区_97在线观看视频国产_68精品久久久久久欧美_欧美精品在线观看_国产精品一区二区久久精品_欧美老女人bb

首頁 > 編程 > JavaScript > 正文

layui框架與SSM前后臺交互的方法

2019-11-19 09:22:32
字體:
來源:轉載
供稿:網友

采用layui前臺框架實現前后臺交互,數據分頁顯示以及刪除操作,具體方式如下:

一、數據分頁顯示

1.前端

(1)html頁面

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

(2)請求渲染數據

$(function() { /*輪播數據分頁顯示*/ layui.use(['table', 'update'], function() { var table = layui.table,  upload = layui.upload;  table.render({  elem: '#content_lbt',  height: 500  //,url: 'data/content_lbt.json' //數據接口  ,  url: 'http://localhost:9911/cms/queryCarouselList' //數據接口  ,  page: true //開啟分頁  ,  loading: true,//分頁查詢是否顯示等待圖標  text: {//若查詢記錄為空,執行此操作  none: '暫無相關數據'  } //默認:無數據。注:該屬性為 layui 2.2.5 開始新增  ,  cellMinWidth: 80 //全局定義常規單元格的最小寬度,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: '上傳時間',   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);   /**   * 查詢輪播記錄條數   *   * @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

  /**   * 查詢全部輪播信息   *   * @return   */  List<Carousel> queryCarousel(Integer page,Integer size);   /**   * 查詢輪播記錄條數   *   * @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'  }//監聽工具條 table.on('tool(content_lbt_filter)', function(obj) { //注:tool是工具條事件名,test是table原始容器的屬性 lay-filter="對應的值"  var data = obj.data //獲得當前行數據  ,  layEvent = obj.event; //獲得 lay-event 對應的值  if(layEvent === 'detail') {  layer.msg('查看操作');  } else if(layEvent === 'del') {  layer.confirm('真的刪除行么', function(index) {   //obj.del(); //刪除對應行(tr)的DOM結構   delCarouselById(data.id);   layer.close(index);   //向服務端發送刪除指令  });  }  /*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>

補充LayuiReplay類(其中get、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();  }}

補充ReplyCode.java枚舉類

public enum ReplyCode {  NOT_LOGIN(-1,"您尚未登錄或登錄時間過長,請重新登錄或刷新頁面!"),  OK(0, "OK"),  WRONG_URL(400,"請求路徑錯誤"),  WRONG_ROLE(401, "身份錯誤"),  REQUEST_FAILED(500, "請求失敗,請重試"),  NULL_ATTR(30,"屬性不能為空"),  ATTR_WRONG(31, "屬性填寫錯誤"),  WRONG_LENGTH(32, "數據長度不符合要求"),  WRONG_PATTERN(33, "數據格式錯誤"),  VAILD_WRONG(100,"驗證碼錯誤"),  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前后臺交互的方法就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持武林網。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
亚洲香蕉成人av网站在线观看_欧美精品成人91久久久久久久_久久久久久久久久久亚洲_热久久视久久精品18亚洲精品_国产精自产拍久久久久久_亚洲色图国产精品_91精品国产网站_中文字幕欧美日韩精品_国产精品久久久久久亚洲调教_国产精品久久一区_性夜试看影院91社区_97在线观看视频国产_68精品久久久久久欧美_欧美精品在线观看_国产精品一区二区久久精品_欧美老女人bb
奇米成人av国产一区二区三区| 久久精品国产清自在天天线| 91极品视频在线| 在线观看亚洲视频| 亚洲精美色品网站| 欧美成人午夜剧场免费观看| 久久久久久久久久国产| 亚洲精品国精品久久99热一| 欧美日韩一区二区免费视频| 欧美日韩国产一区二区三区| 亚洲一区二区三区四区视频| 欧美性xxxx极品hd欧美风情| 久久久久久网站| 美女视频黄免费的亚洲男人天堂| 久久久国产精品视频| 日韩少妇与小伙激情| 按摩亚洲人久久| 亚洲区一区二区| 久久6精品影院| 亚洲精品美女在线| 97精品视频在线| 国产日韩欧美日韩大片| 欧美日韩一区二区免费视频| 国内精品久久久久久久久| 5566成人精品视频免费| 美日韩精品免费视频| 日韩大陆毛片av| 欧美性xxxxxxxxx| 亚洲欧美中文在线视频| 亚洲最新中文字幕| 亚洲成人a级网| 亚洲国产日韩精品在线| 久久久之久亚州精品露出| 欧美天堂在线观看| 久久久久久久久亚洲| 亚洲一区二区三区四区在线播放| 伊人成人开心激情综合网| 国产久一一精品| 精品久久久久久国产91| 秋霞av国产精品一区| 亚洲欧美中文日韩在线v日本| www.欧美三级电影.com| 国产一区二区三区免费视频| 狠狠躁夜夜躁人人爽天天天天97| 亚洲精品成人久久久| 久久久久久久亚洲精品| 日韩男女性生活视频| 日韩欧美一区二区在线| 久久综合网hezyo| 亚洲成人精品在线| 91影视免费在线观看| 91麻豆桃色免费看| 精品视频在线播放免| 高清日韩电视剧大全免费播放在线观看| 法国裸体一区二区| 国外日韩电影在线观看| 国产91精品久久久| 亚洲午夜精品久久久久久久久久久久| 成人欧美一区二区三区黑人| 国产欧美日韩免费看aⅴ视频| 欧美日韩国产页| 精品国产拍在线观看| 狠狠躁夜夜躁久久躁别揉| 欧美精品久久久久a| 中文字幕精品网| 日韩av在线精品| 欧美一级片一区| 国产亚洲视频在线| 日本久久久a级免费| 91久久精品美女高潮| 九九热这里只有精品免费看| 日韩在线视频观看正片免费网站| 成人精品一区二区三区| x99av成人免费| 精品国产老师黑色丝袜高跟鞋| 日韩av在线最新| 热久久视久久精品18亚洲精品| 久久久久久69| 欧美高跟鞋交xxxxxhd| 日本电影亚洲天堂| 日本久久久久久久久| 精品久久久久久久久久久久久久| 国产成人一区二区| 日韩视频欧美视频| 久久精品国产96久久久香蕉| 国产啪精品视频| 91国内产香蕉| 91产国在线观看动作片喷水| 国产精品久久久久秋霞鲁丝| 亚洲色图美腿丝袜| 久久精品久久久久| 欧美日韩ab片| 国产91精品不卡视频| 国产区精品在线观看| 精品成人av一区| 欧美午夜视频一区二区| 欧美理论电影在线观看| 亚洲欧美另类中文字幕| 欧美成人h版在线观看| 欧美在线xxx| 性欧美xxxx交| 丝袜美腿亚洲一区二区| 日韩视频免费在线| 亚洲va男人天堂| 日本三级久久久| 成人黄色影片在线| 久久久精品一区二区三区| 海角国产乱辈乱精品视频| 中日韩午夜理伦电影免费| 欧美日韩视频免费播放| 亚洲欧洲在线播放| 亚洲视频第一页| 奇米4444一区二区三区| 国产成人在线播放| 中文字幕亚洲欧美日韩高清| 亚洲精品国产精品国自产在线| 久久久日本电影| 亚洲午夜精品久久久久久久久久久久| 亚洲欧美另类自拍| 91国自产精品中文字幕亚洲| 中文字幕一精品亚洲无线一区| 国产精品久久久久久久午夜| 日韩在线免费视频| 亚洲欧美国产日韩天堂区| 中文字幕综合在线| 国产精品成人一区二区| 精品久久久久久中文字幕大豆网| 国产成人亚洲综合91精品| 国产欧美精品久久久| 亚洲色图18p| 欧美猛交ⅹxxx乱大交视频| 国产精品一区二区久久久| 国产精品色午夜在线观看| 91高清在线免费观看| 久久久久成人网| 在线日韩欧美视频| 日韩久久午夜影院| 8090成年在线看片午夜| 久久免费视频在线| 国产午夜精品理论片a级探花| 亚洲免费高清视频| 91精品国产综合久久香蕉的用户体验| 欧美猛男性生活免费| 亚洲国产精品视频在线观看| 欧美亚洲激情在线| 亚洲精品免费一区二区三区| 国产美女直播视频一区| 亚洲一区二区中文字幕| 亚洲欧美国产一区二区三区| 国产一区二区三区网站| 欧美黑人国产人伦爽爽爽| 日韩免费精品视频| 国产精品羞羞答答| 亚洲黄色av网站| 亚洲国产高清福利视频| 欧美大成色www永久网站婷| 国产婷婷成人久久av免费高清| 91香蕉嫩草影院入口| 中文在线资源观看视频网站免费不卡| 国产玖玖精品视频| 欧美成人免费播放| 亚洲男人av电影| x99av成人免费| 97精品视频在线观看|