JFinal框架學習------整合bootstrap前端框架,實現簡單的增刪改查功能
阿新 • • 發佈:2018-11-25
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上執行一下我們的專案:
查詢功能已完成!