验证中...
片段 1 片段 2 片段 3 片段 4 片段 5 片段 6 片段 7 片段 8 片段 9 片段 10 片段 11 片段 12 片段 13 片段 14 片段 15 片段 16 片段 17 片段 18 片段 19 片段 20 片段 21 片段 22 片段 23 片段 24 片段 25
第一步: jarDescription jar包的描述
原始数据 复制代码
搭建Jfinal项目需要导入的jar包说明
第一要有jfinal-3.3-bin-with-src.jar
通过这个jar包可以更方便的查看源码。
第二要有jetty-server-8.1.8.jar
通过这个jar来当做web容器,也是apache的,和tomcat作用
差不多,jetty和tomcat在jfianl项目中只能用一个,不能同时使用
强烈注意 ,要想让jfina显示页面的时候,支持jsp
那么,就必须得有javax.servlet.jsp.jstl-12.0和
org.apache.taglibs.stadart.glassfish这两个jar
这个真的很重要!
明白这些就需要知道,在哪能找到这些jar包,
可以通过在jfinal官网,下载 jfinal-3.3-all的名字的文件,
一般在右边菜单会看到,下载需要登录,
下载后,解压,在文件列表的第一个 jfianl-3.3-lib的文件夹
会看到一个名为JSTL_for_JSP的文件夹,将里面的两个jar包导入即可。
第三要有想使用mysql数据库,则必须有
mysql-connector-java-5.1.55-bin.jar这个jar包和
mchange-commons-java-0.2.10.jar
第四要想使用c3p0数据源 那就导入c3p0-0.9.5.1.jar 这样的jar包
第五要想使用Druid数据源 那就导入druid-1.0.29.jar 这样的jar
注意 他们两个不能同时使用
Jfinal的基础配置 只需导入这些jar包 就足够了,加油,小伙伴们! 你们是最棒的^_^
jarDesci.jpg
第二步: web.xml的基础配置
原始数据 复制代码
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
<filter>
<filter-name>jfinal</filter-name>
<filter-class>com.jfinal.core.JFinalFilter</filter-class>
<init-param>
<param-name>configClass</param-name>
<param-value>com.cheng.common.MainConfig</param-value>
</init-param>
</filter>
<!-- 在没有配置路由时,访问index.jsp 需要这样写localhost/index.jsp -->
<!-- 如果想通过输入localhost 直接访问index.jsp-->
<!-- 需要在Config中配置路由,和创建对应的Controller -->
<!-- 这样配置所有的请求都会被jfianl来处理 -->
<filter-mapping>
<filter-name>jfinal</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
</web-app>
第三步 主页 index.jsp 注意要先把流程跑通,先确保jsp的页面的都能跳转,再开始写后台,在公司这叫先做原型。
原始数据 复制代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet"
href="/publicresource/plugins/layui/css/layui.css" media="all" />
<link rel="stylesheet"
href="/publicresource/plugins/font-awesome/css/font-awesome.min.css">
<script type="text/javascript"
src="/publicresource/plugins/layui/layui.js"></script>
<script type="text/javascript"
src="/publicresource/public/jquery/jquery-1.4.4.min.js"></script>
<script type="text/javascript"
src="/publicresource/public/jqueryLayout/source/stable/jquery.layout.min.js"></script>
<title>Insert title here</title>
</head>
<body>
<center>
<h1>Hello Jfinal!</h1>
</center>
<div class="layui-container">
<fieldset class="layui-elem-field layui-field-title">
<legend>我的案例</legend>
<div class="layui-field-box">
<a class="layui-btn layui-btn-sm" href="user">案例一</a>
<a class="layui-btn layui-btn-sm" href="routes">案例二</a>
<a class="layui-btn layui-btn-sm" href="globalInterceptor">案例三</a>
<a class="layui-btn layui-btn-sm" href="urlparam">案件四</a>
</div>
</fieldset>
<!-- <div class="list-group"> -->
<!-- </div> -->
</div>
</body>
</html>
小伙伴注意了,在index.jsp里我引入了layui的js和css的前台样式,我通过一个文件夹把它们都放到一块了,小伙伴们可以单独使用哦^_^
第四步 : header.jsp 我把所有的头文件都放到的了一个jsp里,在下面的list.jsp和form.jsp 都会引用。
原始数据 复制代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<title>成成学堂</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet"
href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- 新 Bootstrap 核心 CSS 文件 -->
<!-- <link rel="stylesheet" href="static/css/style.css"> -->
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet"
href="/publicresource/plugins/layui/css/layui.css" media="all" />
<link rel="stylesheet"
href="/publicresource/plugins/font-awesome/css/font-awesome.min.css">
<script type="text/javascript"
src="/publicresource/plugins/layui/layui.js"></script>
<!-- <script type="text/javascript"
src="/publicresource/public/jquery/jquery-1.4.4.min.js"></script> -->
<script type="text/javascript"
src="/publicresource/public/jqueryLayout/source/stable/jquery.layout.min.js"></script>
</head>
<body>
第五步: list.jsp 我的展示数据的页面,这个很重要的! 没这个页面 修改 删除 都做不了,小编可是用了很长时间研究这个 ^_^
原始数据 复制代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- 引入jsp页面的头文件 -->
<jsp:include page="../common/header.jsp"></jsp:include>
<header class="navbar navbar-static-top" id="top" role="banner">
<div class="container">
<div class="navbar-header" style="text-align: center;">
<a href="/" class="navbar-brand">成成学堂JFinal课程案例-用户管理之快速实现CURD</a>
</div>
</div>
</header>
<!-- <html> -->
<!-- <body> -->
<div class="layui-container" id="main">
<div class="layui-row">
<div class="layui-col-xs6">
<div class="jumbotron">
<h1 class="display-4">Jfinal HelloWorld!</h1>
<p class="lead">It's So Easy</p>
<hr class="my-4">
<p>Welcome to Visit!</p>
</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-xs12">
<!-- <div class="layui-field-box layui-form"> -->
<div>
<a href="user/form" class="btn btn-danger btn-lg">
<i class="layui-icon">&#xe608;</i> 新增用户
</a>
</div>
<table class="layui-table">
<colgroup>
<col width="150">
<col width="150">
<col width="200">
<col>
</colgroup>
<thead>
<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.name }</td>
<td>${user.age }</td>
<td>${user.sex }</td>
<td>${user.beizhu }</td>
<td><a href="user/edit/${user.id }"
class="btn btn-success btn-sm">修改</a><a
href="user/del/${user.id }" class="layui-btn layui-btn-sm">删除</a></td>
</tr>
</c:forEach>
</tbody>
</table>
<!-- </div> -->
<!-- 注释的form -->
</div>
</div>
</div>
<%-- <jsp:include page="../common/footer.jsp"></jsp:include> --%>
<!-- </body> -->
<!-- </html> -->
第六步: form.jsp 添加 和 修改的页面 也很重要 都分享给大家!
原始数据 复制代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- <html> -->
<!-- 引入jsp页面的头文件 -->
<jsp:include page="../common/header.jsp"></jsp:include>
<header class="navbar navbar-static-top" id="top" role="banner">
<div class="container">
<div class="navbar-header" style="text-align: center;">
<a href="/" class="navbar-brand">成成学堂JFinal课程案例-用户管理之快速实现CURD</a>
</div>
</div>
</header>
<!-- <body> -->
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-xs12">
<form class="layui-form"
action="${user==null?'user/submit':'user/update' }" method="post">
<input type="hidden" name="user.id" value="${user.id }">
<div class="layui-form-item">
<label class="layui-form-label">姓名</label>
<div class="layui-input-block">
<input type="text" name="user.name" value="${user.name}" lay-verify="name"
autocomplete="off" placeholder="请输入姓名" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">年龄</label>
<div class="layui-input-block">
<input type="text" name="user.age" value="${user.age }" lay-verify="age"
autocomplete="off" placeholder="请输入年龄" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">性别</label>
<div class="layui-input-block">
<input type="text" name="user.sex" value="${user.sex }" lay-verify="sex"
autocomplete="off" placeholder="请输入性别" class="layui-input">
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">备注</label>
<div class="layui-input-block">
<textarea name="user.beizhu" placeholder="请输入备注信息"
class="layui-textarea">${user.beizhu }</textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<!-- 注意提交按钮的类型 -->
<button class="layui-btn" type="submit">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- </body> -->
<!-- </html> -->
第七步: application.properties 创建source 包 在 里面放这个文件 在这里指定数据库和 账号密码以及是否开启开发模式
原始数据 复制代码
jdbcUrl = jdbc:mysql://localhost:3306/huo?characterEncoding=utf8&zeroDateTimeBehavior=convertToNull
user = root
password = 123
devMode = true
第八步: 创建一个com.cheng.common包 里面放这个类 MainConfig ,在这里使用刚刚创建的applcation.properties文件
原始数据 复制代码
package com.cheng.common;
import com.cheng.common.model.User;
import com.cheng.handler.LogHandler;
import com.cheng.intercepter.GlobalInterceptor;
import com.jfinal.config.Constants;
import com.jfinal.config.Handlers;
import com.jfinal.config.Interceptors;
import com.jfinal.config.JFinalConfig;
import com.jfinal.config.Plugins;
import com.jfinal.config.Routes;
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;
import com.jfinal.template.Engine;
public class MainConfig extends JFinalConfig {
@Override
public void configConstant(Constants me) {
// Jfinal常量配置讲解
// 常量配置就是第一个被加载的 因为后面的一些配置都需要这里配置的常量作为基础
// 1.加载数据库配置 读取配置文件使用loadPropertyFile 或者PropKit
/// loadPropertyFile("application.properties");
PropKit.use("application.properties");
// 2.设置开发模式
// me.setDevMode(getPropertyToBoolean("devMode"));
// me.setDevMode(PropKit.getBoolean("devMode"));
me.setDevMode(true);
// 3.设置ActionReport 什么时候出现 默认为true
// me.setReportAfterInvocation(false);
// 4.配置默认的视图类型 默认是FreeMarker
me.setViewType(ViewType.JSP);
// 5.设置默认上传路径 cos组件有效 jfianl默认有值 相对绝对都可以
// me.setBaseUploadPath("/chengupload");
}
@Override
public void configRoute(Routes me) {
me.add(new FrontRoutes());
me.add(new AdminRoutes());
// 配置路由
// me.add("/", IndexController.class);
// me.add("/user", UserController.class);
// 路由配置测试案例专用
// me.add("/routes",RoutesController.class);
}
@Override
public void configEngine(Engine me) {
// TODO Auto-generated method stub
}
/*
* public static DruidPlugin createDruidPlugin() { // 获取连接数据的四大参数 return new
* DruidPlugin(PropKit.get("jdbcUrl"), PropKit.get("user"),
* PropKit.get("password").trim()); }
*/
@Override
public void configPlugin(Plugins me) {
// c3p0数据库连接池
C3p0Plugin c3p0Plugin = new C3p0Plugin(PropKit.get("jdbcUrl"), PropKit.get("user"), PropKit.get("password"));
// ORM Activerecord
ActiveRecordPlugin arp = new ActiveRecordPlugin(c3p0Plugin);
arp.setShowSql(true);
arp.addMapping("user", User.class); // 这块 添加映射 对应的是user表
// 在Plguins 配置中 添加c3p0Plugin和arp 在初始化时启动配置
me.add(c3p0Plugin);
me.add(arp);
// 注意 小伙伴们 这个是alibaba的Druid的连接池 需要配置的东西 最基础的
// 注意 此处的createDruidPlugin()是 自定的一个方法 用于获取连接数据库的必要的key
// 别忘了加上哦!!! 在上方 ^_^
// 配置Druid数据库连接池插件
/*
* DruidPlugin druidPlugin = createDruidPlugin(); me.add(druidPlugin);
*
* // 配置ActiveRecord插件 ActiveRecordPlugin arp = new
* ActiveRecordPlugin(druidPlugin);
*
* // 这个是自定义的一个plugin ChengPlugin cc = new ChengPlugin(); me.add(cc);
*
* // 所有映射在 MappingKit 中自动化搞定 arp.addMapping("user", User.class);
* me.add(arp);
*/
}
@Override
public void configInterceptor(Interceptors me) {
// Jfinal配置拦截器
me.add(new GlobalInterceptor());
}
@Override
public void configHandler(Handlers me) { // 此方法用来配置JFinal的Handler
// Jfinal配置处理器
me.add(new LogHandler());
}
@Override
public void afterJFinalStart() {
System.out.println("系统启动之后回调afterJFinalStart");
}
@Override
public void beforeJFinalStop() {
System.out.println("系统启动之前回调beforeJFinalStop");
}
public static void main(String[] args) {
JFinal.start("WebRoot", 80, "/", 5);
}
}
第九步: 创建BaseUser实体类
原始数据 复制代码
package com.cheng.common.model.base;
import com.jfinal.plugin.activerecord.IBean;
import com.jfinal.plugin.activerecord.Model;
@SuppressWarnings({"serial", "unchecked"})
public abstract class BaseUser<M extends BaseUser<M>> extends Model<M> implements IBean {
public M setId(java.lang.Integer id) {
set("id", id);
return (M)this;
}
public java.lang.Integer getId() {
return getInt("id");
}
public M setName(java.lang.String name) {
set("name", name);
return (M)this;
}
public java.lang.String getName() {
return getStr("name");
}
public M setAge(java.lang.String age) {
set("age", age);
return (M)this;
}
public java.lang.String getSex() {
return getStr("sex");
}
public M setSex(java.lang.String sex) {
set("sex", sex);
return (M)this;
}
public java.lang.String getAge() {
return getStr("age");
}
public M setBeizhu(java.lang.String beizhu) {
set("beizhu", beizhu);
return (M)this;
}
public java.lang.String getBeizhu() {
return getStr("beizhu");
}
}
第十步: 创建User类 来 继承BaseUser类
原始数据 复制代码
package com.cheng.common.model;
import com.cheng.common.model.base.BaseUser;
@SuppressWarnings("serial")
public class User extends BaseUser<User>{
public static final User dao = new User().dao();
}
第十一步: 单独创建的访问主页的routes类,也可以在MainConfig中配置,那块我注释了。
原始数据 复制代码
package com.cheng.common;
import com.cheng.controller.IndexController;
import com.jfinal.config.Routes;
public class AdminRoutes extends Routes {
@Override
public void config() {
// 访问主页的路由类
this.add("/", IndexController.class);
}
}
第十二步: 其他非 主页的路由类
原始数据 复制代码
package com.cheng.common;
import com.cheng.controller.GlobalInterceptorController;
import com.cheng.controller.URLParamController;
import com.cheng.controller.UserController;
import com.jfinal.config.Routes;
public class FrontRoutes extends Routes {
@Override
public void config() {
// 访问user管理列表的路由类
this.add("/user", UserController.class);
this.add("/globalInterceptor",GlobalInterceptorController.class);
this.add("/urlparam", URLParamController.class);
}
}
第十三步: 主页的Controller
原始数据 复制代码
package com.cheng.controller;
import com.jfinal.core.Controller;
public class IndexController extends Controller{
public void index(){
render("index.jsp");
}
}
第十四步: 用户管理增删改查的Controller
原始数据 复制代码
package com.cheng.controller;
import java.util.List;
import com.cheng.common.model.User;
import com.jfinal.core.Controller;
public class UserController extends Controller {
/**
* 直接访问user地址进入list.jsp
* */
public void index(){
// 将数据显示到页面上
List<User> users = User.dao.find("select * from user");
setAttr("users", users);
System.out.println("得到数据" + users.size() + "个");
render("list.jsp");
}
/**
* 访问 user/form 进入form.jsp
* */
public void form(){
Integer id=getParaToInt(0);
if(id!=null&&id>0){
setAttr("user", User.dao.findById(id));
}
render("form.jsp");
}
/**
* 数据提交
* */
public void submit(){
User user = getModel(User.class,"user");
// 在这块调用save方法就可以把数据保存到数据库中
user.save();
redirect("/user");
}
public void update(){
User user = getModel(User.class,"user");
user.update();
redirect("/user");
}
public void edit(){
form();
}
public void del(){
User.dao.deleteById(getPara(0));
redirect("/user");
}
}
第十五步: 路由配置测试Controller
原始数据 复制代码
package com.cheng.controller;
import com.jfinal.core.Controller;
/**
* 路由配置测试
* */
public class RoutesController extends Controller{
/**
* 路由配置案例页面首页
* */
public void index(){
Integer p1 = getParaToInt(0);
Integer p2 = getParaToInt(1);
if(p1!=null){
setAttr("p1", "index参数1" + p1);
}
if(p2!=null){
setAttr("p2", "index参数2" + p2);
}
if(p1!=null){
setAttr("msg", "获取RoutesController.index()方法");
render("result.jsp");
}else{
render("index.jsp");
}
}
}
第十六步: URL key value 传参 测试Controller
原始数据 复制代码
package com.cheng.controller;
import com.jfinal.core.Controller;
//URL key value 传参 测试Controller
public class URLParamController extends Controller{
public void index(){
renderJsp("index.jsp");
}
/**
* url 参数 key-value类型
* */
public void keyvalue(){
setAttr("msg", "使用getParam(\"p1\")得到p1的参数值:getParam(key)");
setAttr("p1", "p1=" + getPara("p1"));
setAttr("p2", "p2=" + getPara("p2"));
setAttr("p3", "p3=" + getPara("p3"));
renderJsp("result.jsp");
}
}
第十七步: 全局拦截器 测试 Controller
原始数据 复制代码
public class GlobalInterceptorController extends Controller{
public void index(){
System.out.println("GlobalInterceptorController index");
renderHtml("<center><h1>你妹的! 请查看控制台</h1></center>");
}
}
第十八步: 全局处理器 测试Controller
原始数据 复制代码
package com.cheng.handler;
import java.text.SimpleDateFormat;
import java.util.Date;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.jfinal.handler.Handler;
public class LogHandler extends Handler {
@Override
public void handle(String target, HttpServletRequest request, HttpServletResponse response, boolean[] isHandled) {
// TODO Auto-generated method stub
System.out.println("====Log:" + new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date()) + ":" + target);
next.handle(target, request, response, isHandled);
}
}
第十九步: 全局拦截器
原始数据 复制代码
package com.cheng.intercepter;
import com.jfinal.aop.Interceptor;
import com.jfinal.aop.Invocation;
public class GlobalInterceptor implements Interceptor{
@Override
public void intercept(Invocation inv) {
// TODO Auto-generated method stub
System.out.println("全局拦截器 前拦截");
inv.invoke();
System.out.println("全局拦截器 后拦截");
}
}
第二十步:全局配置 测试类
原始数据 复制代码
package com.cheng.plugin;
import com.jfinal.plugin.IPlugin;
public class ChengPlugin implements IPlugin {
@Override
public boolean start() {
System.out.println("ChengPlugin start!");
return true;
}
@Override
public boolean stop() {
System.out.println("ChengPlugin stop!");
return true;
}
}
后台的所有文件示意图
前台的所有文件示意图
最终展示效果图

评论列表( 4 )

1681293_duolajiangmayun
硬硬火哆啦 2018-01-29 01:16

小伙伴们,多多支持,多多点赞哦 :laughing: :heart_eyes:

840_jfinal
JFinal 2018-01-29 14:23

感谢分享,点赞支持 :thumbsup:

1681293_duolajiangmayun
硬硬火哆啦 2018-01-31 19:01

:+1:

红左黑右 2018-02-08 08:57

能不能把源代码分享给我们啊,谢了```

你可以在登录后,对此项目发表评论

6_float_left_people 6_float_left_close