layui 图片展示添加一个x_Jfinal结合LayUi2.x快速搭建一个Web项目

引言

创建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()

#@main()

#end

第二步Jfinal中配置模板

Jfinal Config里面配置模板

第三步如何使用

#@layui()

#define main()

• 最新活动
• 产品
• 大数据

• 解决方案

  移动模块

  后台模版

  电商平台

• 社区

#end

2.虽然样式解决了，那数据如何对接呢？

我以对接layui分页表格为例说一下这个问题，因为这个对接里面有很多隐性的东西。

第一步创建前台页面

#@layui()

#define main()

ID服务ip端口号项目名称方法地址模块名称

layui.use('table', function(){

var table = layui.table;

});

#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 result = new HashMap();

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();

}

}

简单的介绍，简单的分享希望能帮到不简单的你！