JFinal框架學習------整合bootstrap前端框架，實現簡單的增刪改查功能

時間 2019-11-13

標籤 jfinal 框架學習整合 bootstrap 前端實現簡單增刪功能欄目 Java開源简体版

原文原文鏈接

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

1、JFinal整合bootstrap

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

2.將jQuery包放在bootstrap的js包下，而後將bootstrap包導入到項目的webapp下。html

2、實現增刪改查功能

1.在resources文件夾在新建文件 a_little_config.txt ，進行數據庫的配置。前端

2.在commonConfig.java對數據庫鏈接進行配置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類，對數據庫表進行映射jquery

注：當數據庫的主鍵命名爲id時，arp.Mapping()中的第二個參數可不寫，JFinal默認id爲主鍵。web

若該數據庫表的主鍵名不爲id時，則第二個參數需爲主鍵名。數據庫

4.在model中新建Blog.java類bootstrap

package com.model;

import com.jfinal.plugin.activerecord.Model;

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

}

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

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上運行一下咱們的項目：

查詢功能已完成！