引言
- 创建jfinal项目
- 引入layui插件
- 项目常用配置介绍
废话少叙，下面在此文章多为大家提供可供参考的干货。
首先创建web项目 》引入相应的Jfinal（http://www.jfinal.com/） jar包或者配置maven的依赖包（如下图）。
基本jar包（tomcat启动项目无需引入jetty相关jar包）
然后我准备带着问题去分享一下如何Jfinal如何集成layui（http://www.layui.com）
1. 每个页面都需要引入js（以layUI为例），那么Jfinal3.2又是如何做到的呢？
第一步 创建模板html
我的目录结构
tlayui.html内容
#define layui()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="#(pname)/view/plusin/layui/css/layui.css" media="all" />
<script type="text/javascript">var pname='#(pname)';</script>
<script type="text/javascript" src="#(pname)/view/plusin/layui/layui.js"></script>
<script type="text/javascript" src="#(pname)/view/plusin/pushlet/ajax-pushlet-client.js"></script>
<script type="text/javascript" src="#(pname)/view/template/main.js"></script>
</head>
<body>
#@main()
</body>
</html>
#end
第二步Jfinal中配置模板
Jfinal Config里面配置模板
第三步如何使用
#@layui()
#define main()
<ul class="layui-nav" lay-filter="">
<li class="layui-nav-item"><a href="">最新活动</a></li>
<li class="layui-nav-item layui-this"><a href="">产品</a></li>
<li class="layui-nav-item"><a href="">大数据</a></li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child"> <!-- 二级菜单 -->
<dd><a href="">移动模块</a></dd>
<dd><a href="">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">社区</a></li>
</ul>
#end
2.虽然样式解决了，那数据如何对接呢？
我以对接layui分页表格为例说一下这个问题，因为这个对接里面有很多隐性的东西。
第一步创建前台页面
#@layui()
#define main()
<table class="layui-table" lay-data="{url:'#(pname)/method/getMethods', page:true, id:'test',limits:[10,30,60], limit:10,width:'907'}" lay-filter="test">
<thead>
<tr>
<th lay-data="{field:'id', width:80, sort: true}">ID</th>
<th lay-data="{field:'serverIp', width:200}">服务ip</th>
<th lay-data="{field:'serverPort', width:100, sort: true}">端口号</th>
<th lay-data="{field:'projectName', width:150}">项目名称</th>
<th lay-data="{field:'url', width:220}">方法地址</th>
<th lay-data="{field:'routeName', width:150, sort: true}">模块名称</th>
</tr>
</thead>
</table>
<script type="text/javascript">
layui.use('table', function(){
var table = layui.table;
});
</script>
#end
第二步编写后台的controller
public class MethodController extends BaseController{
private MethodService methodService =Duang.duang(MethodServiceImp.class);
public void getMethods(){
int pageIndex = getParaToInt("page");
int pageSize = getParaToInt("limit");
renderPageForLayUI(methodService.getAllMethod(pageIndex, pageSize));
}
}
import java.util.HashMap;
import java.util.Map;
import com.jfinal.core.Controller;
import com.jfinal.plugin.activerecord.Page;
public class BaseController extends Controller{
public void renderPageForLayUI(Page<?> page){
renderPageForLayUI(page,0,"");
}
/**
* 按照layUI格式分页获取数据
* @param page
* @param code
* @param message
*/
public void renderPageForLayUI(Page<?> page,int code,String message){
Map<String,Object> result = new HashMap<String, Object>();
result.put("code", code);
result.put("msg", message);
result.put("count", page.getTotalRow());
result.put("data", page.getList());
super.renderJson(result);
}
}
细心的注意到了我的controller没有直接集成原生的Controller而是集成了自己的BaseController,好处就是可以根据前端插件能接收格式封装对应的返回格式，这样是不是既可以对接layui也可以对接很多的格式了呢。
实现效果
不得不说一句layUI确实很漂亮，至此我们很轻松的完成了一个分页。:)
对接就是格式的对接重点在格式而不是好不好对接，大家不要因为格式的问题放弃了。
3上文一再出现的#(pname)是什么，在哪里定义比较好呢？
项目中会常用到后台的一些常用变量，tomcat发布多个项目是有项目名的，所以前台根本不知道我后台会不会有项目名，那么我就在后台定义了一个项目名的变量发给前台，提高项目的兼容性。
#(pname)这种写法跟jsp中${pname}是一样的意思
我的做法是定义一个Jfinal的拦截器，然后在JFinalConfig中引入。
import com.jfinal.aop.Interceptor;
import com.jfinal.aop.Invocation;
import com.jfinal.core.Controller;
public class ParameterInterceptor implements Interceptor{
@Override
public void intercept(Invocation inv) {
Controller controller = inv.getController();
controller.setAttr("pname", controller.getRequest().getContextPath());
inv.invoke();
}
}
网友评论