JFinal3.0快速上手，遇见模板引擎（十七）

2017-05-10 本文已影响1923人葉糖糖

首先得感谢一下各位支持的朋友，因为你们的支持与鼓励，自己才得以坚持利用时间分享一些小知识。非常感谢，因为你们让我少玩了王者农药，把时间用来做一些有意义的事情。

在本小节中，我们将一起学习JFinal的模板引擎的相关知识，因为内容比较多，所以我会分为几个小节讲解，当然也会有重点的讲解，忽略的地方还请各位道友自行查看文档。

一、本节摧毁目标

本节的目标主要是1、学会使用include 、define指令的使用；2、学会模板函数的调用。结合Db + Record进行数据操作，实现一个添加操作。

今天演示使用的依然是一个用户登录页面，知识稍微做了一些美化。我们在登录的时候去填写用户信息，然后点击登录按钮保存用户信息，因为节约时间就不直接在数据中添加数据。

二、所需材料

1、一个数据库实例，一张数据表，演示所用表名t_user；表结构如下：

SET FOREIGN_KEY_CHECKS=0;

-- ----------------------------
-- Table structure for t_user
-- ----------------------------
DROP TABLE IF EXISTS `t_user`;
CREATE TABLE `t_user` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键id',
  `email` varchar(255) NOT NULL DEFAULT '' COMMENT '邮箱',
  `pwd` varchar(255) NOT NULL COMMENT '密码',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8;

2、JFinal3.0相关的jar包和手册；
3、网络（因为html页面使用了一些CDN服务）；

三、写点html页面

下图就是要实现的页面效果，接下来我们将一起使用模板引擎玩一遍。这个页面分为2个组件部分，第一部分是系统名称部分，这部分使用#define指令完成；第二部分是数据表单部分，我们将表单存放在单独的页面，然后使用#include指令引入页面。敲黑板，╭(╯^╰)╮本次使用的模板引擎不是freemarker，所以请你不要好心去设置viewType，本节演示所用的是JFinal提供的模板引擎。

就是这么棒

1、定义登录也top区域，这样定义的好处是，如果有多个地方需要使用到这样一个top区域的内容，我们不需要粘贴复制，只要通过一个调用指令就能完成；其次是便于维护，如果需求变更了，不需要一个个的去修改页面内容，只要修改一处就搞定。这样的场景能够理解吧？先创建一个html文件，命名为_login.html，然后编写如下代码，复制也行。

<!--使用#define 定义login函数-->
#define login()
<div class="top"><h2>欢迎登录M9星球车辆信息管理系统    1.0</h2></div>
<!--#end结束定义-->
#end

2、编写login_form.html页面

真的只是html页面内容。

<!--form表单，action指定到userLogin-->
<form class="form-horizontal" action="/login/userLogin">

    <!--email（用户账号）-->
    <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
        <div class="col-sm-8">
            <input type="email" class="form-control" id="inputEmail3" placeholder="Email" name="email">
        </div>
    </div>
    
    <!--账户密码-->
    <div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
        <div class="col-sm-8">
            <input type="password" class="form-control" id="inputPassword3" placeholder="Password" name="password">
        </div>
    </div>
    
    <!--登录按钮-->
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-8">
            <button type="submit" class="btn btn-primary btn-lg btn-block">登录</button>
        </div>
    </div>
    
</form>

3、组装login.html页面

看起来很好玩O(∩_∩)O哈哈~

<!--调用模板函数login-->
#@login()
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>登录页面</title>

    <!-- Bootstrap -->
    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet">
    <!--引入login.css文件-->
    <link href="../css/login.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->
</head>
<body>
<!--引入form表单页面-->
#include("login_form.html")
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
</body>
</html>

四、编写LoginController并配置路由

1、编写登录控制器，假装就是真实的登录，虽然这里是添加数据，⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄

package com.demo.login;

import com.jfinal.core.Controller;
import com.jfinal.plugin.activerecord.Db;
import com.jfinal.plugin.activerecord.Record;

public class LoginController extends Controller {

    //默认方法
    public void index() {
        render("login.html");
    }

    /**
     * @author sugarYe
     * @date 2017/05/10
     * @desc 用户登录
     */
    public void userLogin() {
        // 获取登录参数
        String email = getPara("email");
        String password = getPara("password");
        // 封装数据对象
        Record user = new Record().set("email", email).set("pwd", password);
        // 持久化数据并接收处理状态
        Boolean result = Db.save("t_user", user);
        // 判断执行结果
        if (!result) {
            // 处理你自己的业务
            render("erro.html"); //自己随意编写这个页面
        } 
      
        //跳转到清单页面，这个页面请先自行编写
        render("userList.html");
        
    }

}

2、配置路由

    /**
     * 配置路由
     */
    public void configRoute(Routes me) {
        me.add("/login",LoginController.class,"/login");
    }

五、配置共享函数模板

使用addSharedFunction即可配置共享的模板函数信息，此处接收的参数是字符串类型的路径信息。也就是你编写的模板函数的页面地址。

    /**
     * 配置模板信息
     */
    public void configEngine(Engine me) {
        me.addSharedFunction("/common/_login.html");
    }

恭喜你，你已经完成了第一小节的所有的修炼，接下来就可以测试编写的成果了。加油！

六、函数使用回顾

使用define 指令，可以在jfinal中定义模板函数。使用时以#define 函数名()开始，如#define login();以#end结束。

include 指令用于将外部模板内容包含进来，被包含的内容会被解析成为当前模板中的一部分进行使用。

PS：故事还长，请别失望。模板只是刚开始(^__) 嘻嘻……