Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷。

一、JFinal整合bootstrap

  1.下載bootstrap包：下載地址：https://v3.bootcss.com/

  2.將jQuery包放在bootstrap的js包下，然後將bootstrap包匯入到專案的webapp下。

二、實現增刪改查功能

1.在resources資料夾在新建檔案 a_little_config.txt  ，進行資料庫的配置。

2.在commonConfig.java對資料庫連線進行配置

package com.config;

import com.controller.BlogController;
import com.controller.IndexController;
import com.controller.UserController;
import com.jfinal.config.*;
import com.jfinal.core.JFinal;
import com.jfinal.kit.PropKit;
import com.jfinal.plugin.activerecord.ActiveRecordPlugin;
import com.jfinal.plugin.druid.DruidPlugin;
import com.jfinal.render.ViewType;
import com.jfinal.template.Engine;

import java.awt.image.IndexColorModel;


public class commonConfig extends JFinalConfig{
    public commonConfig() {
        super();
    }

    /**
     * 配置常量
     * @param constants
     */
    @Override
    public void configConstant(Constants constants) {
        constants.setEncoding("utf-8");
        //配置檢視層，使用freemarker型別
        constants.setViewType(ViewType.FREE_MARKER);
        PropKit.use("a_little_config.txt");
        constants.setDevMode(PropKit.getBoolean("devMode",false));
    }

    @Override
    public void configRoute(Routes routes) {
        routes.add("/", IndexController.class);
        routes.add("blog",BlogController.class);
    }

    @Override
    public void configEngine(Engine engine) {

    }

    //DruidPlugin為資料來源外掛，ActiveRecordPlugin為 ActiveRecord支援外掛
    @Override
    public void configPlugin(Plugins plugins) {
        DruidPlugin druidPlugin=creatDruidPlugins();
        plugins.add(druidPlugin);
        ActiveRecordPlugin arp=new ActiveRecordPlugin(druidPlugin);

        //建立了資料庫表到Model的對映
        _MappingKit.mapping(arp);
        plugins.add(arp);
    }

    @Override
    public void configInterceptor(Interceptors interceptors) {

    }

    @Override
    public void configHandler(Handlers handlers) {

    }

    /**
     * 獲取資料連線池
     * @return
     */
    public static DruidPlugin creatDruidPlugins(){
        return new DruidPlugin(PropKit.get("jdbcUrl"),PropKit.get("user"),PropKit.get("password").trim());
    }

    public static void main(String[] args){
        JFinal.start("src/main/webapp",80,"/");
    }
}
 

3.新建_MappingKit.java類，對資料庫表進行對映

注：當資料庫的主鍵命名為id時，arp.Mapping()中的第二個引數可不寫，JFinal預設id為主鍵。

     若該資料庫表的主鍵名不為id時，則第二個引數需為主鍵名。

4.在model中新建Blog.java類

package com.model;

import com.jfinal.plugin.activerecord.Model;

@SuppressWarnings("serial")
public class Blog extends Model<Blog>{

}
 

5.在service中新建BlogService.java類，SQL與業務邏輯都寫在其中。

package com.service;

import com.model.Blog;
import java.util.List;

public class BlogService {

    private Blog blog=new Blog().dao();


    public Blog queryById(int id){
        return blog.findById(id);
    }

    public List<Blog> queryList(){
        List<Blog> blogList=blog.find("select * from Blog");
        return blogList;
    }


    public void delectById(int id){
        blog.deleteById(id);
    }


}

6.在Controller層中新建BlogController.java控制器，

package com.controller;

import com.jfinal.core.Controller;
import com.jfinal.plugin.activerecord.Db;
import com.jfinal.plugin.activerecord.Record;
import com.model.Blog;
import com.service.BlogService;
import com.sun.prism.impl.Disposer;

import java.util.List;

public class BlogController extends Controller{

    private static final BlogService blogService=new BlogService();

    public void index(){
        render("/user/LoginPage.html");
    }

    /**
     * 新增blog
     */
    public void saveBlog(){
        Blog blog=getModel(Blog.class);
        blog.save();
        redirect("/blog/queryAllBlog");
    }

    /**
     * 查詢所有blog
     */
    public void queryAllBlog(){
        List<Blog> blogs=blogService.queryList();
        setAttr("blogs",blogs);
        render("BlogList.html");
    }

    /**
     * 刪除
     */
    public void deleteBlog(){
        blogService.delectById(getParaToInt());
        redirect("/blog/queryAllBlog");
    }

    /**
     * 修改blog
     */
    public void updateBlog(){
        getModel(Blog.class).update();
        redirect("/blog/queryAllBlog");
    }

    /**
     * 修改blog
     */
    public void edit(){
       setAttr("blog",blogService.queryById(getParaToInt()));
       render("blogUpdate.html");
    }
    
}

7.下面來寫前端頁面

Bootstrap 是一個用於快速開發 Web 應用程式和網站的前端框架。 因此在匯入bootstrap包後，我們直接引用就行。        Bootstrap官方文件：https://v3.bootcss.com/css/

在blog資料夾下新建BlogList.html ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <mate naem="Viewport" content="width=drive-width, user-scalable=no,initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0"></mate>
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.css">
</head>
<body>
<script type="text/javascript" src="/bootstrap/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/bootstrap/js/bootstrap.js"></script>

<ul class="nav nav-pills">
    <li role="presentation" class="active"><a href="/blog/queryAllBlog">Home</a></li>
    <li role="presentation"><a href="/blog/addBlog.html">AddBlog</a></li>
    <li role="presentation"><a href="#">Messages</a></li>
</ul>

<div class="container">
    <table class="table table-hover">
        <tr>
            <th>id</th>
            <th>標題</th>
            <th>內容</th>
            <th>型別</th>
            <th>操作</th>
        </tr>
        <#list blogs as blog>
            <tr>
                <td>${blog.id}</td>
                <td>${blog.title}</td>
                <td>${blog.content}</td>
                <td>${blog.category}</td>
                <td>
                    <a href="/blog/deleteBlog/#{blog.id}">刪除</a>
                    <a href="/blog/edit/#{blog.id}">修改</a>
                </td>
            </tr>
        </#list>
    </table>
</div>
</body>
</html>

然後，我們現在tomcat上執行一下我們的專案：

查詢功能已完成！