JFinal极速开发框架使用初体验——配置文件与前后端数据交互

最新推荐文章于 2024-07-31 19:38:21 发布

innify

最新推荐文章于 2024-07-31 19:38:21 发布

阅读量1k

点赞数 3

分类专栏： JFinal 文章标签： java

本文链接：https://blog.csdn.net/innify/article/details/109987128

版权

JFinal 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

2. 配置文件与前后端数据交互

在上一篇文章中我们已经搭建了JFinal的开发环境，从启动类方法可以看出我们使用的是undertow容器作为服务器，JFInal也整合了服务器的配置，在resource文件夹下创建undertow.txt文件，其中使用key=value的形式进行配置，JFinal会在项目启动时自动加载该文件。
在这里插入图片描述
在配置文件中写入以下内容

# true 值支持热加载
undertow.devMode=true
undertow.port=80
undertow.host=0.0.0.0
# 配置静态资源文件路径
undertow.resourcePath = src/main/webapp, classpath:static

IDEA使用热加载需要开启项目的自动编译，方法为Settings–Build,Execution,Deployment–Compiler–Build project automatically
在这里插入图片描述
静态资源路径默认为src/main/webapp，系统默认从该路径下加载文件，直接上个登陆页面login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <link rel="stylesheet" href="//cdn.bootcss.com/zui/1.9.2/css/zui.min.css">
    <style>
        .panel {
            width: 30%;
            margin: 100px auto;
        }
    </style>
</head>
<body>
<div class="panel">
    <div class="panel-heading">
        用户登录
    </div>
    <div class="panel-body">
        <div class="with-padding">
            <div class="input-group form-group">
                        <span class="input-group-addon">
                            <label class="icon icon-user" for="username"></label>
                        </span>
                <input type="text" class="form-control" id="username" placeholder="username">
            </div>
        </div>
        <div class="with-padding">
            <div class="input-group form-group">
                        <span class="input-group-addon">
                            <label class="icon icon-lock" for="password"></label>
                        </span>
                <input type="password" class="form-control" id="password" placeholder="password">
            </div>
        </div>
        <div class="with-padding">
            <input type="button" onclick="login()" value="登陆" class="btn btn-primary btn-block">
        </div>
    </div>
</div>
<script src="//cdn.bootcss.com/zui/1.9.2/lib/jquery/jquery.js"></script>
<script src="//cdn.bootcss.com/zui/1.9.2/js/zui.min.js"></script>
<script>
    function login() {
        $.ajax({
            url: 'doLogin',
            type: 'get',
            data: {
                'user.username': $('#username').val(),
                'user.password': $('#password').val()
            },
            dataType: 'JSON',
            success: function (resp) {
                console.log(resp);
            }
        })
    }
</script>
</body>
</html>

启动项目，在浏览器中输入localhost/login.html即可访问静态页面
在这里插入图片描述
接下来使后端部分，在controller包下创建LoginController，继承Controller类来成为一个控制器，在类上添加@Path注解来指定控制器的访问路径，该类下的每个方法都是最小访问单位，即可以通过localhost/类路径/方法名来执行方法中的代码。

@Path("/")
public class LoginController extends Controller {
	public void hello() {
       renderText("Hello");
    }
}

在浏览器中输入localhost/hello即可访问
在这里插入图片描述

render系列方法给前端发送响应

render(String view): 从静态资源路径中加载页面

public void login() {
       render("login.html");
   }

此时localhost/login也能够访问到刚才的登陆页面
在这里插入图片描述

renderJson()：发送JSON格式的字符串
在刚才的登陆按钮中定义了一个异步请求访问doLogin，于是在方法中写入

public void doLogin() {
	renderJson("message", "login success");
}

点击登录按钮，可以在控制台看到以下信息
在这里插入图片描述
方法参数可以使用以下几种

一对key-value
数组
Object类
JSON字符串

get系列方法接受前端参数

在登陆请求中我们向后端传递了两个输入框中的内容

function login() {
    $.ajax({
        url: 'doLogin',
        type: 'get',
        data: {
            'username': $('#username').val(),
            'password': $('#password').val()
        },
        dataType: 'JSON',
        success: function (resp) {
            console.log(resp);
        }
    })
}

我们在doLogin方法中写入以下内容

public void doLogin() {
       System.out.println("get:" + get("username"));
       System.out.println("getInt:" + getInt("password"));
       System.out.println("getBean:" + getBean(User.class, ""));
       renderJson("message", "login success");
   }

点击登录按钮后可以看到控制台中打印一下信息
在这里插入图片描述
也就是说可以通过get(String name)方法来获取值，getInt()，getBoolean()等方法将值转换成对应的数据类型，getBean()与getModel()则是将属性封装成对象，其中getModel()需要有和数据库的映射关系，getBean()需要有自定义的实体类，以下就是User类

public class User extends Model<User> {
    public String getUsername() {
        return get("username");
    }
    public User setUsername(String username) {
        return set("username", username);
    }
    public String getPassword() {
        return get("password");
    }
    public User setPassword(String password) {
        return set("password", password);
    }
}

该类可以通过生成器自动生成，需要注意的是在使用getBean方法的时候前端传递的参数应该是：类名首字母小写.属性，例如前端传递user.username，user.password，后端使用getBean(User.class)接收，或者前端传递username，password，后端使用getBean(User.class, “”)接收。

小结

以上这些基本上可以实现大部分常用的功能了，内容全部由个人总结，如果有错误的地方可以指出，有疑问的地方也欢迎提出一起讨论解决，之后还会发一篇关于数据库的内容，如果对你有帮助可以点个赞，谢谢啦

innify

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JFinal极速开发框架使用初体验——配置文件与前后端数据交互

2. 配置文件与前后端数据交互在上一篇文章中我们已经搭建了JFinal的开发环境，从启动类方法可以看出我们使用的是undertow容器作为服务器，JFInal也整合了服务器的配置，在resource文件夹下创建undertow.txt文件，其中使用key=value的形式进行配置，JFinal会在项目启动时自动加载该文件。在配置文件中写入以下内容# true 值支持热加载undertow.devMode=trueundertow.port=80undertow.host=0.0.0.0# 配
复制链接

扫一扫