JFinal与bootstrap实现简单的增删改功能

本示例是在idea下实现的。

1、新建一个项目jfinal-demo

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

package 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;//女性
}

5、新建一个Controller，名字为UserController

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 = true

7、在src目录下新建一个log4g.properties

log4j.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%n

8、在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>

10、在数据库中新建表

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