JFinal與bootstrap實現簡單的增刪改功能
阿新 • • 發佈：2019-01-28
本示例是在idea下實現的。
2、將必要的jar包拷貝到lib下面（WEB-INF下沒有lib目錄，自己新建一個lib目錄即可）；
3、新建一個包，包名可以自己取，com.demo;然後在這個包下面新建一個DemoConfig類，在類中新增如下程式碼
package com.demo; import com.demo.controller.IndexController; import com.demo.controller.UserController; import com.demo.model.User; import com.jfinal.config.*; import com.jfinal.core.JFinal; import com.jfinal.kit.PropKit; import com.jfinal.plugin.activerecord.ActiveRecordPlugin; import com.jfinal.plugin.c3p0.C3p0Plugin; import com.jfinal.render.ViewType; /** * @作者 Rainbow 建立時間 2016/3/25 16:12 * 恆之貴，何必三更起五更睡；最無益，只怕一日曝十日寒！！ */ public class DemoConfig extends JFinalConfig { @Override public void configConstant(Constants me) { PropKit.use("config.properties"); me.setBaseViewPath("/template"); me.setDevMode(PropKit.getBoolean("devMode", true)); me.setViewType(ViewType.JSP); } @Override public void configRoute(Routes me) { me.add("/", IndexController.class); me.add("/user", UserController.class); } @Override public void configPlugin(Plugins me) { //載入資料來源 C3p0Plugin c3p0Plugin = new C3p0Plugin(PropKit.get("jdbcUrl"), PropKit.get("user"), PropKit.get("password").trim()); me.add(c3p0Plugin); ActiveRecordPlugin activeRecordPlugin = new ActiveRecordPlugin(c3p0Plugin); me.add(activeRecordPlugin); activeRecordPlugin.setShowSql(true); activeRecordPlugin.addMapping("user",User.class); } @Override public void configInterceptor(Interceptors me) { } @Override public void configHandler(Handlers me) { } public static void main(String[] args) { JFinal.start("web",81,"/",5); } }
4、新建一個Model，名為User
5、新建一個Controller，名字為UserControllerpackage com.demo.model; import com.jfinal.plugin.activerecord.Model; /** * @作者 Rainbow 建立時間 2016/3/30 16:12 * 恆之貴，何必三更起五更睡；最無益，只怕一日曝十日寒！！ */ public class User extends Model<User> { //Model的dao方法 public static final User userDao = new User(); //靜態常量 public static final int SEX_MALE = 1;//男 public static final int SEX_FEMAQL = 2;//女性 }
package com.demo.controller; import com.demo.model.User; import com.jfinal.core.Controller; import java.util.List; /** * @作者 Rainbow 建立時間 2016/3/30 16:18 * 恆之貴，何必三更起五更睡；最無益，只怕一日曝十日寒！！ */ public class UserController extends Controller { /** * 直接訪問user地址進入list.jsp */ public void index(){ List<User> users = User.userDao.find("select * from user"); setAttr("users",users); System.out.print("得到的資料是"+users.size()+"條"); render("list.jsp"); } /** * 訪問user/form進入from.jsp頁面 */ public void form(){ Integer id = getParaToInt(0); if(id!=null&&id>0){ setAttr("user",User.userDao.findById(id)); } render("form.jsp"); } /** * 提交方法 */ public void submit(){ User user = getModel(User.class,"user"); user.save(); redirect("/user"); } /** * 編輯方法 */ public void edit(){ form(); } /** * 刪除方法 */ public void del(){ User.userDao.deleteById(getPara(0)); redirect("/user"); } /** * 更新方法 */ public void update(){ User user = getModel(User.class,"user"); user.update(); redirect("/user"); } }
6、在src路徑下面新建一個連線資料庫的檔案，名字為config.properties
jdbcUrl = jdbc:mysql://localhost:3306/jfinal_demo?characterEncoding=utf8
user = root
password =
devMode = truelog4j.rootLogger=WARN, stdout, file
log4j.appender.stdout=org.apache.log4j.ConsoleAppender
log4j.appender.stdout.layout=org.apache.log4j.PatternLayout
log4j.appender.stdout.layout.ConversionPattern=%n%-d{yyyy-MM-dd HH:mm:ss}%n[%p]-[Thread: %t]-[%C.%M()]: %m%n
# Output to the File
log4j.appender.file=org.apache.log4j.FileAppender
log4j.appender.file.File=F/jfinal-demo.log
log4j.appender.file.layout=org.apache.log4j.PatternLayout
log4j.appender.file.layout.ConversionPattern=%n%-d{yyyy-MM-dd HH:mm:ss}%n[%p]-[Thread: %t]-[%C.%M()]: %m%n8、在web.xml檔案中新增如下程式碼
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
version="3.1">
<filter>
<filter-name>jfinal</filter-name>
<filter-class>com.jfinal.core.JFinalFilter</filter-class>
<init-param>
<param-name>configClass</param-name>
<param-value>com.demo.DemoConfig</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>jfinal</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
</web-app>9、在web目錄下新建一個資料夾路徑template/user
在user下新建兩個jsp檔案，一個是form.jsp,一個是list.jsp
form.jsp
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2016/3/26
Time: 10:17
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<link rel="stylesheet" type="text/css" href="/bootstrap/css/bootstrap.css">
<html>
<head>
<title>使用者註冊</title>
</head>
<body>
<div id="main" class="container">
<div class="row">
<div class="col-lg-6 col-sm-6 col-md-6">
<form action="${user==null?'/user/submit':'/user/update'}" method="post">
<input type="hidden" name="user.id" value="${user.id}">
<div class="form-group">
<label>使用者名稱</label>
<input type="text" name="user.username" value="${user.username}" class="form-control" placeholder="請輸入使用者名稱">
</div>
<div class="form-group">
<label>年齡</label>
<input type="text" name="user.age"value="${user.age}" class="form-control" placeholder="請輸年齡">
</div>
<div class="form-group">
<label>性別</label>
<div class="radio-inline">
<input type="radio" name="user.sex"<c:if test="${user.sex!=null && user.sex==1}">checked="checked" </c:if>value="1">男
</div>
<div class="radio-inline">
<input type="radio"name="user.sex"<c:if test="${user.sex!=null && user.sex==2}">checked="checked" </c:if> value="2">女
</div>
</div>
<div class="form-group">
<label>備註</label>
<textarea name="user.remark" value="${user.remark}" style="height: 70px" class="form-control" placeholder="請輸入備註">${user.remark}</textarea>
</div>
<div style="text-align: center" >
<button type="submit" class="btn btn-primary" style="width: 120px">提交</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>list.jsp
<%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2016/3/25
Time: 17:27
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
<title>使用者列表</title>
</head>
<link rel="stylesheet" type="text/css" href="/bootstrap/css/bootstrap.min.css">
<script src="/bootstrap/js/jquery-2.2.2.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<body>
<div class="pull-left">
<a href="/user/form" class="btn bg-primary">新增使用者</a>
</div>
<table class="table table-bordered table-hover">
<thead>
<tr>
<th colspan="5" align="center">使用者資訊表</th>
</tr>
<tr>
<th>使用者ID</th> <th>姓名</th> <th>性別</th> <th>年齡</th> <th>使用者描述</th><th>操作</th>
</tr>
</thead>
<tbody>
<c:forEach items="${users}" var="user">
<tr>
<td>${user.id}</td> <td>${user.username}</td> <td>${user.sex}</td> <td>${user.age}</td> <td>${user.remark}</td>
<td><a class="btn btn-primary btn-sm" href="/user/edit/${user.id}">修改</a> <a class="btn btn-danger btn-sm" href="/user/del/${user.id}">刪除</a></td>
</tr>
</c:forEach>
</tbody>
</table>
</body>
</html>DROP TABLE IF EXISTS `user`;
CREATE TABLE `user` (
`id` int(10) NOT NULL AUTO_INCREMENT,
`username` varchar(50) NOT NULL,
`password` varchar(20) DEFAULT NULL,
`age` int(5) DEFAULT NULL,
`sex` int(2) DEFAULT NULL,
`remark` varchar(255) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=14 DEFAULT CHARSET=utf8;執行方式，本列採用jetty執行，最好使用這種方式執行，因為這種方式比較簡單，如果你採用tomcat等執行，請先刪除lib中的jetty這個包
點選idea右上角
點選左側加號，新增一個執行服務
然後點選main class後面的瀏覽
會出現之前建立的DemoConfig,這個類，將它新增進去即可
然後點選OK即可。
執行專案：
進入DemoConfig這個檔案中，直接右鍵點選直接run即可。或者是點選右上角的執行也可
如果出現如下提示，說明啟動成功。
在瀏覽器中輸入localhost/user即可出現如下介面
本例使用了bootstrap，所以在介面中先引入bootstrap.css樣式檔案
如果需要原始碼的請與我聯絡，小弟我也是剛開始學習，有很多的不足，望大家提出問題一起交流學習。如果有執行失敗的請與我聯絡QQ：8836908728