首先得感謝一下各位支持的朋友，因為你們的支持與鼓勵，自己才得以堅持利用時間分享一些小知識。非常感謝，因為你們讓我少玩了王者農(nóng)藥，把時間用來做一些有意義的事情。
在本小節(jié)中，我們將一起學習JFinal的模板引擎的相關(guān)知識，因為內(nèi)容比較多，所以我會分為幾個小節(jié)講解，當然也會有重點的講解，忽略的地方還請各位道友自行查看文檔。
一、本節(jié)摧毀目標
本節(jié)的目標主要是1、學會使用include 、define指令的使用；2、學會模板函數(shù)的調(diào)用。結(jié)合Db + Record進行數(shù)據(jù)操作，實現(xiàn)一個添加操作。
今天演示使用的依然是一個用戶登錄頁面，知識稍微做了一些美化。我們在登錄的時候去填寫用戶信息，然后點擊登錄按鈕保存用戶信息，因為節(jié)約時間就不直接在數(shù)據(jù)中添加數(shù)據(jù)。
二、所需材料
1、一個數(shù)據(jù)庫實例，一張數(shù)據(jù)表，演示所用表名t_user；表結(jié)構(gòu)如下：
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相關(guān)的jar包和手冊；
3、網(wǎng)絡(luò)（因為html頁面使用了一些CDN服務(wù)）；
三、寫點html頁面
下圖就是要實現(xiàn)的頁面效果，接下來我們將一起使用模板引擎玩一遍。這個頁面分為2個組件部分，第一部分是系統(tǒng)名稱部分，這部分使用
#define指令完成；第二部分是數(shù)據(jù)表單部分，我們將表單存放在單獨的頁面，然后使用#include指令引入頁面。敲黑板，╭(╯^╰)╮本次使用的模板引擎不是freemarker，所以請你不要好心去設(shè)置viewType，本節(jié)演示所用的是JFinal提供的模板引擎。
1、定義登錄也top區(qū)域，這樣定義的好處是，如果有多個地方需要使用到這樣一個top區(qū)域的內(nèi)容，我們不需要粘貼復制，只要通過一個調(diào)用指令就能完成；其次是便于維護，如果需求變更了，不需要一個個的去修改頁面內(nèi)容，只要修改一處就搞定。這樣的場景能夠理解吧？先創(chuàng)建一個html文件，命名為_login.html，然后編寫如下代碼，復制也行。
<!--使用#define 定義login函數(shù)-->
#define login()
<div class="top"><h2>歡迎登錄M9星球車輛信息管理系統(tǒng) 1.0</h2></div>
<!--#end結(jié)束定義-->
#end
2、編寫login_form.html頁面
真的只是html頁面內(nèi)容。
<!--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哈哈~
<!--調(diào)用模板函數(shù)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標簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ -->
<title>登錄頁面</title>
<!-- Bootstrap -->
<link 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、編寫登錄控制器，假裝就是真實的登錄，雖然這里是添加數(shù)據(jù)，?(? ???ω??? ?)?
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() {
// 獲取登錄參數(shù)
String email = getPara("email");
String password = getPara("password");
// 封裝數(shù)據(jù)對象
Record user = new Record().set("email", email).set("pwd", password);
// 持久化數(shù)據(jù)并接收處理狀態(tài)
Boolean result = Db.save("t_user", user);
// 判斷執(zhí)行結(jié)果
if (!result) {
// 處理你自己的業(yè)務(wù)
render("erro.html"); //自己隨意編寫這個頁面
}
//跳轉(zhuǎn)到清單頁面，這個頁面請先自行編寫
render("userList.html");
}
}
2、配置路由
/**
* 配置路由
*/
public void configRoute(Routes me) {
me.add("/login",LoginController.class,"/login");
}
五、配置共享函數(shù)模板
使用
addSharedFunction即可配置共享的模板函數(shù)信息，此處接收的參數(shù)是字符串類型的路徑信息。也就是你編寫的模板函數(shù)的頁面地址。
/**
* 配置模板信息
*/
public void configEngine(Engine me) {
me.addSharedFunction("/common/_login.html");
}
恭喜你，你已經(jīng)完成了第一小節(jié)的所有的修煉，接下來就可以測試編寫的成果了。加油！
六、函數(shù)使用回顧
使用define 指令，可以在jfinal中定義模板函數(shù)。使用時以
#define 函數(shù)名()開始，如#define login();以#end結(jié)束。
include 指令用于將外部模板內(nèi)容包含進來， 被包含的內(nèi)容會被解析成為當前模板中的一部分進行使用。
PS：故事還長，請別失望。模板只是剛開始(__) 嘻嘻……
