国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

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

來源:懂視網 責編:小采 時間:2020-11-27 14:43:11
文檔

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

layui框架與SSM前后臺交互的方法:采用layui前臺框架實現前后臺交互,數據分頁顯示以及刪除操作,具體方式如下: 一、數據分頁顯示 1.前端 (1)html頁面 <!--輪播數據分頁顯示--> <table class=layui-hide id=content_lbt lay-filter=content
推薦度:
導讀layui框架與SSM前后臺交互的方法:采用layui前臺框架實現前后臺交互,數據分頁顯示以及刪除操作,具體方式如下: 一、數據分頁顯示 1.前端 (1)html頁面 <!--輪播數據分頁顯示--> <table class=layui-hide id=content_lbt lay-filter=content

采用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前后臺交互的方法就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

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

layui框架與SSM前后臺交互的方法:采用layui前臺框架實現前后臺交互,數據分頁顯示以及刪除操作,具體方式如下: 一、數據分頁顯示 1.前端 (1)html頁面 <!--輪播數據分頁顯示--> <table class=layui-hide id=content_lbt lay-filter=content
推薦度:
標簽: 交互 框架 后端
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 久久久久无码国产精品一区 | 欧日韩视频 | 91欧美亚洲 | 久久综合爱 | 亚洲一区二区三区中文字幕 | 国产传媒一区二区三区四区五区 | 日韩成人精品在线 | 精品一区 二区三区免费毛片 | 亚洲高清视频在线 | 国自产拍亚洲免费视频 | 亚洲国产成人久久一区www妖精 | 日本a级片免费观看 | 91欧美激情一区二区三区成人 | 日韩毛片在线 | 免费观看国产精品 | 欧美激情一区 | 亚洲欧美日韩在线精品一区二区 | 国产日韩亚洲欧美 | 日韩综合区 | 日韩网站在线观看 | 亚洲伦 | 综合 欧美 亚洲日本 | 久久国产夜色精品噜噜亚洲a | 日韩在线第三页 | 看全黄大色大黄美女 | 在线观看亚洲一区 | 欧美日韩91 | 一区二区三区四区电影 | 亚洲一区二区三区四区在线观看 | 国产精品一区二区久久精品 | 不卡视频在线 | 国产精品第 | 亚洲国产精品一区二区久久 | 交换伦交| 亚洲精国产一区二区三区 | 另类第一页 | 成人精品视频一区二区在线 | 国产啪视频| 日韩欧美精品综合一区二区三区 | 美女一丝不佳一级毛片大屁股 | 欧美日韩在线高清 |