CrazyAirhead

疯狂的傻瓜,傻瓜也疯狂——傻方能执著,疯狂才专注!

0%

Jfinal前后端分离项目指南

概要

本指南只针对使用jfinal开发后端,vue开发前端,使用undertow方式部署的项目。对于非undertow部署项目,可能有所区别,可参考本文自行调整。对使用了Ningx的用户,可以参看Vue文档进行配置。

本文主要针对vue-router采用不同的HTML5 History 模式时的不同处理方法。此处假定你已按undertow方式正常运行后台项目。

hash模式

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。

jfinal默认不会对静态页面进行处理(严格一点来说是不会对有“.”路由进行处理)。所以对于hash模式时,你只要把前端页面放置到webapp目录下即可,为了更好管理可以增加个目录,如web

为了可以直接访问根路径,可以增加一个IndexController,并增加路由。

1
2
3
4
5
6
7
8
9
10
11
12
13
public class IndexController extends Controller {
@Clear
public void index() {
render("index.html");
}
}

public class DemoConfig extends JFinalConfig {
@Override
public void configRoute(Routes me) {
me.add("/", IndexController.class, "/web");
}
}

history模式

当你使用 history 模式时,URL 就像正常的 url,例如 http://yoursite.com/user/id,也好看!不过这种模式要玩好,还需要后台配置支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404,这就不好看了。

对于Jfinal官网中反馈(详见参考链接),发现更简单的方式还是增加Handler定向转发。此时需要和前端约定好转发路由,如/web

前端配置

需要参考publicPath,将发布目录配置成/web(该值默认为/)。

1
2
3
module.exports = {
publicPath: "/web"
}

后端修改

参考FakeStaticHandler(com.jfinal.ext.handler),实现FakeIndexHandler并增加配置。

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
26
27
28
29
30
31
32
33
34
35
36
37
38
public class FakeIndexHandler extends Handler {
protected static final RenderManager renderManager = RenderManager.me();
private String route;
private String viewPath;

public FakeIndexHandler(String route, String viewPath) {
this.route = route;
this.viewPath = viewPath;
}

@Override
public void handle(
String target,
HttpServletRequest request,
HttpServletResponse response,
boolean[] isHandled) {
if (!target.startsWith(route)) {
next.handle(target, request, response, isHandled);
return;
}

if (target.indexOf('.') != -1) {
return;
}

isHandled[0] = true;
renderManager.getRenderFactory().getRender(viewPath).setContext(request, response).render();
}
}

public class DemoConfig extends JFinalConfig {
@Override
public void configHandler(Handlers me) {
me.add(new FakeIndexHandler("/web", "/web/index.html"));
}
}


小结

Jfinal-undertow可以轻松应对HTML5 History的不同模式,如果是hash模式,可以说是原生支持,如果是History模式,也相对简单。但对于初次使用者来说,可能还是会碰上问题。对于我来说写FackIndexHandler时,就忘记处理静态资源和设置isHandled[0]=true

希望本文对你有帮助,本文首发https://l4qiang.me/2020/02/18/java/frontend/

参考链接

波总您好,jfinal-undertow下前后端分离项目合并部署访问不到页面

欢迎关注我的其它发布渠道