SSM框架+layui前端框架整合

在上篇博文中,博主使用bootstrap+SSM实现了商品列表展示效果,从页面上看,其虽然可以加入分页等功能,但不太方便,博主的分页使用的是mybatis的分页插件,今天,博主为大家分享一款功能强大的前端框架—layui
layui

layui(谐音:类 UI) 是一套开源的 Web UI 解决方案,采用自身经典的模块化规范,并遵循原生 HTML/CSS/JS 的开发方式,极易上手,拿来即用。其风格简约轻盈,而组件优雅丰盈,从源代码到使用方法的每一处细节都经过精心雕琢,非常适合网页界面的快速开发。layui 区别于那些基于 MVVM 底层的前端框架,却并非逆道而行,而是信奉返璞归真之道。准确地说,它更多是面向后端开发者,你无需涉足前端各种工具,只需面对浏览器本身,让一切你所需要的元素与交互,从这里信手拈来。

首先看两者页面对比
这个是Bootstrap框架,博主的bootstrap的应用主要表现在其前端样式上
SSM框架+layui前端框架整合_第1张图片
layui项目界面,其为我们封装了很多功能,让我们的项目功能实现起来更加方便,功能也更强大。
SSM框架+layui前端框架整合_第2张图片
那么是如何实现的呢
其后端实现完全相同,只是前端页面上有差距,前端jsp页面

<html>
<head>
<%@include file="common.jspf"%>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <link rel="stylesheet" href="${basePath}/layui/css/layui.css" media="all">
 <style type="text/css"> 
 .layui-table-cell{ text-align:center; height: auto;}
 </style>
</head>
<body>
 <center>
 <script src="${basePath}/layui/layui.js"></script>
<table id="goods" lay-filter="test" ></table>
<script>
layui.use('table', function(){
  var table = layui.table;
  
  //第一个实例
  table.render({
    elem: '#goods'
    ,height: 700
    ,width:1400
    ,cellMinWidth: 80
    ,url: '${basePath}/good/listGood.action' //数据接口
    	,page: { //支持传入 laypage 组件的所有参数(某些参数除外,如:jump/elem) - 详见文档
            layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
            //,curr: 5 //设定初始在第 5 页
            ,limit:10 //一页显示多少条
            ,limits:[5,10,15]//每页条数的选择项
            ,groups: 2 //只显示 2 个连续页码
            ,first: "首页" //不显示首页
            ,last: "尾页" //不显示尾页
        }
    ,cols: [[ //表头
      {checkbox: true},
      {field: 'id', title: 'ID', width:80, sort: true}
      ,{field: 'gname', title: '名称', width:200}
      ,{field: 'price', title: '价格', width:200, sort: true}
      ,{field: 'info', title: '详情', width:400} 
      ,{field:'image',title: '图片',templet:'#pic',height:60}
      ,{field:'edit',title: '操作',templet:'#edit',height:60}
    ]]
  });
  
});
</script>
<script id="pic">
<img src="${basePath}/{{d.image}}" style="height:50px;width:40px">
</script>
<script id="edit">
<button type="button" class="layui-btn layui-btn-sm " onclick="edit({{d.id}})">编辑</button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-danger" onclick="del()">删除</button>
</script>
<script>
	function edit(id){
		alert(id);
	}
</script>

</center>
</body>
</html>

在开始接触layui时,遇到了几个坑,首先是需要在我们的传递参数中设置一个code并置为0,并且要按照他规定的参数格式
七彩便是图片的实现,可以参照博主的实现方法SSM框架+layui前端框架整合_第3张图片

你可能感兴趣的:(SSM框架,javaweb,课程设计)