用 springboot 写一个简单的 web 项目，不分离，搭配什么前端框架好？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1531 天前的主题，其中的信息可能已经有所发展或是发生改变。

想自己独立完成一个 web 项目，自己对后端比较熟悉，前端那些一知半解。用的 springboot 框架，搭配什么前端 ui 类框架比较好，易于学习，界面美观的。
有推荐 vue-element-admin，查了查好像过于复杂（功能上的），而且还得单独部署的样子。
bootstrap 好像又过于简单了。
是不是 layui elementui 这种会比较合适一些？
另外对于前端的打包也不太了解，有没有集成到 springboot 项目里直接调用的？

springboot

框架

Web

前端

49 条回复 • 2020-10-12 11:15:29 +08:00

misaka19000

2020-09-25 15:20:18 +08:00

jQuery

coang

2020-09-25 15:20:34 +08:00

去看看 guns 吧.. 有分离有不分离..

sambawy

2020-09-25 15:20:48 +08:00

H+

oma1989

2020-09-25 15:22:51 +08:00

jQuery EasyUI

lipcao

2020-09-25 15:27:49 +08:00

thymeleaf 就够用了吧，画个页面直接 thymeleaf 渲染

tangkaichuan

2020-09-25 15:27:50 +08:00 via Android

springboot 中可以放前端资源不用单独部署。还可以配置成打包的时候把前端部分分离出来，和 jar 包同目录，直接跑起来就能访问，方便前端资源更新

gransh

2020-09-25 15:36:23 +08:00

@lipcao thymeleaf 好像没组件

fallinlovewith

2020-09-25 15:47:34 +08:00

@gransh
她的 th:fragment 算不?

lower

2020-09-25 15:56:07 +08:00

不想打包，直接引用 ui 库的 js 也可以的呀

idoggy

2020-09-25 16:02:14 +08:00 via Android

前端 npm 打包后就是传统的静态资源，放在 Java 的资源目录里就可以了。jQuery 除非你急着赶作业，不然还是了解下主流前端更好。

binbinyouliiii

2020-09-25 16:07:34 +08:00

thymeleaf 我记得好难用的，写完第二天就看不懂了。
用 freemarker 。

liqingcan

2020-09-25 16:29:54 +08:00

目前自己的项目 www.3kkg.com 没有前后端分离，前端模板使用的是 jfinal 的 enjoy 。用习惯了感觉贼好用。没错。我是来贴一个自己的链接的。哈哈

lipcao

2020-09-25 16:36:17 +08:00

@binbinyouliiii 以前搞过 jsp EL 表达式，java 小脚本。。thymeleaf 和 jsp 差不多的，后端拿数据去前端填数据就可以了，不需要前端参与，很适合楼主啊

Cbdy

2020-09-25 17:33:00 +08:00

https://github.com/cbdyzj/nano-bot

Ariver

2020-09-25 17:34:32 +08:00

https://www.jhipster.tech/

ming168

2020-09-25 17:51:56 +08:00

情况一样，前端真的一窍不通

cmdOptionKana

2020-09-25 17:59:56 +08:00

不想深入研究前端的话，最好还是用 bootstrap，简单易用节省时间，简单网站完全够用。

gransh

2020-09-25 18:02:03 +08:00

@cmdOptionKana bootstrap 还需要搭配模板吗？

sdbybyd

2020-09-25 18:13:15 +08:00

react 挺简单的

cmdOptionKana

2020-09-25 18:49:40 +08:00

@gransh 模板搭不搭都行，有些框架比如 symfony （ PHP ）直接从后端支持 bootstrap 。

但其实差别不大，我自己喜欢单独用 bootstrap，后端一律返回 json 给前端，不管什么东西都转成 json 塞给前端，然后前端只要拿到一个 json，用 JavaScript 就非常容易处理了。

EminemW

2020-09-25 22:42:09 +08:00

还是分离吧，不要学 java 那些有的没的模板语言，没意义。vue 用 cdn 引入挺简单的

yeqizhang

2020-09-25 22:46:37 +08:00 via Android

elementUI 够简单的了，vue 真的是香。

我之前是在 jsp 里面用 jstl 和 easyUI 以及原生 js 的码农，后面半天就简单上手了 vue，去 tm 的操作 dom

MoreSunshine

2020-09-25 22:47:12 +08:00

react 或 vue 前端发展必然趋势，越逃避越不会越不会越会被淘汰

yeqizhang

2020-09-25 22:52:46 +08:00 via Android

@EminemW 我就说用引入方式的，作为后端开发还真不会模块化开发……

zzl22100048

2020-09-26 02:14:48 +08:00

AlpineJS + TailWindCSS

fox0001

2020-09-26 08:09:55 +08:00 via Android

不推荐 jQuery 了，还不如直接 JavaScript 原生。简单项目的话，找个开源的 CSS 项目就好了

heiybb

2020-09-26 08:56:21 +08:00 via Android

Vuetify 自己手动撸一个很快的

KuroNekoFan

2020-09-26 08:59:31 +08:00

gwt

xgq89757

2020-09-26 09:18:41 +08:00

ant design pro

ghost024

2020-09-26 09:35:15 +08:00

bootstrap+themeleaf 我一般都是找一个人家写好的 bootstrap 模板，然后用 themeleaf 改一下，超级好用

securityCoding

2020-09-26 10:04:55 +08:00

应该前后端分离 , 你提到的 vue-element-admin 单页面应用部署起来前端挂一个 ng 也很简单的

libook

2020-09-26 10:21:45 +08:00

没有明确需求就直接选型是大忌。

如果只是开发一些简单的交互页面的话，原生 JS 足以，document.querySelector()和 document.querySelectorAll()搞定元素选择，Element.classList 、HTMLElement.style 搞定样式变化；如果觉得用 fetch 麻烦的话，顶多加一个 Axios 。

建议以 WebComponents 的方式写，日后需求复杂了想引入框架会比较方便。

前端开发的知识可以去 MDN 上看，大多都有中文教程。

leafre

2020-09-26 10:26:42 +08:00

不分离就 jquery bootstrap/layui freemarker

huayumo

2020-09-26 12:43:32 +08:00

同意楼上的,jquery 和 bootstrap,这些东西对以后装组件很方便的

1oNflow

2020-09-26 13:15:31 +08:00 via iPhone

jQuery bootstrap mustache，我觉得是最简单的一套组合

40EaE5uJO3Xt1VVa

2020-09-26 13:17:59 +08:00

http://lyear.itshubao.com/iframe/

clf

2020-09-26 13:21:06 +08:00

前后端分离其实可以不需要单独部署的，把打包完的前端页面整合到 Springboot 里就好了。开发的时候前端用一下前端代理，部署直接 build 到项目的指定目录即可。

当然，如果是没接触过前端开发，用 jQuery 等挺好，先熟悉传统前端页面开发再去涉及 Vue 、React 、Angular 这些前端框架。

如果还在大学，方向是 Web 相关的，建议 Vue 、React 一定要学，毕竟不懂前端的后端以及不懂后端的前端，都是有一定发展限制的。

youla

2020-09-26 13:24:18 +08:00

可以引用 vue.min.js 做开发，比 jquery 方便感觉。

angryfish

2020-09-26 13:49:06 +08:00 via iPhone

我感觉楼主更想要的是 ui 组件，那用 lanui 吧

MisakaMikoto

2020-09-26 14:29:27 +08:00

用 parcel 打包，写个 main 文件，然后 import 按需加载模块页面文件。这样就可以写新特性了，也能用 npm 直接 import $ from 'jquery'

chinaq

2020-09-26 14:35:52 +08:00

最简单的就是 layui-admin，另外像 vue-admin 、Ant Design Pro 也可以去 github 上找管理后台，各种 ui 框架都上手一遍，不费事的。

kanepan19

2020-09-26 14:46:16 +08:00

老:
模板引擎: 个人很不习惯 thymeleaf 模板的方式, 可以用 freemarker 和 velocity
自用 springboot + velocity
velocity 官方不支持了,可以用 velocity-spring-boot-starter
前端用 bootstrap

新:
springboot + elementUI 或者 ant design