V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
gransh
V2EX  ›  Java

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

  •  1
     
  •   gransh · 2020-09-25 15:16:00 +08:00 · 7905 次点击
    这是一个创建于 1525 天前的主题,其中的信息可能已经有所发展或是发生改变。
    想自己独立完成一个 web 项目,自己对后端比较熟悉,前端那些一知半解。用的 springboot 框架,搭配什么前端 ui 类框架比较好,易于学习,界面美观的。
    有推荐 vue-element-admin,查了查好像过于复杂(功能上的),而且还得单独部署的样子。
    bootstrap 好像又过于简单了。
    是不是 layui elementui 这种会比较合适一些?
    另外对于前端的打包也不太了解,有没有集成到 springboot 项目里直接调用的?
    49 条回复    2020-10-12 11:15:29 +08:00
    misaka19000
        1
    misaka19000  
       2020-09-25 15:20:18 +08:00
    jQuery
    coang
        2
    coang  
       2020-09-25 15:20:34 +08:00
    去看看 guns 吧.. 有分离有不分离..
    sambawy
        3
    sambawy  
       2020-09-25 15:20:48 +08:00
    H+
    oma1989
        4
    oma1989  
       2020-09-25 15:22:51 +08:00
    jQuery EasyUI
    lipcao
        5
    lipcao  
       2020-09-25 15:27:49 +08:00   ❤️ 3
    thymeleaf 就够用了吧,画个页面直接 thymeleaf 渲染
    tangkaichuan
        6
    tangkaichuan  
       2020-09-25 15:27:50 +08:00 via Android
    springboot 中可以放前端资源不用单独部署。还可以配置成打包的时候把前端部分分离出来,和 jar 包同目录,直接跑起来就能访问,方便前端资源更新
    gransh
        7
    gransh  
    OP
       2020-09-25 15:36:23 +08:00
    @lipcao thymeleaf 好像没组件
    fallinlovewith
        8
    fallinlovewith  
       2020-09-25 15:47:34 +08:00   ❤️ 1
    @gransh
    她的 th:fragment 算不?
    lower
        9
    lower  
       2020-09-25 15:56:07 +08:00
    不想打包,直接引用 ui 库的 js 也可以的呀
    idoggy
        10
    idoggy  
       2020-09-25 16:02:14 +08:00 via Android
    前端 npm 打包后就是传统的静态资源,放在 Java 的资源目录里就可以了。jQuery 除非你急着赶作业,不然还是了解下主流前端更好。
    binbinyouliiii
        11
    binbinyouliiii  
       2020-09-25 16:07:34 +08:00
    thymeleaf 我记得好难用的,写完第二天就看不懂了。
    用 freemarker 。
    liqingcan
        12
    liqingcan  
       2020-09-25 16:29:54 +08:00
    目前自己的项目 www.3kkg.com 没有前后端分离,前端模板使用的是 jfinal 的 enjoy 。用习惯了感觉贼好用。没错。我是来贴一个自己的链接的。哈哈
    lipcao
        13
    lipcao  
       2020-09-25 16:36:17 +08:00
    @binbinyouliiii 以前搞过 jsp EL 表达式,java 小脚本。。thymeleaf 和 jsp 差不多的,后端拿数据去前端填数据就可以了,不需要前端参与,很适合楼主啊
    Cbdy
        14
    Cbdy  
       2020-09-25 17:33:00 +08:00
    Ariver
        15
    Ariver  
       2020-09-25 17:34:32 +08:00
    ming168
        16
    ming168  
       2020-09-25 17:51:56 +08:00
    情况一样,前端真的一窍不通
    cmdOptionKana
        17
    cmdOptionKana  
       2020-09-25 17:59:56 +08:00
    不想深入研究前端的话,最好还是用 bootstrap,简单易用节省时间,简单网站完全够用。
    gransh
        18
    gransh  
    OP
       2020-09-25 18:02:03 +08:00
    @cmdOptionKana bootstrap 还需要搭配模板吗?
    sdbybyd
        19
    sdbybyd  
       2020-09-25 18:13:15 +08:00
    react 挺简单的
    cmdOptionKana
        20
    cmdOptionKana  
       2020-09-25 18:49:40 +08:00
    @gransh 模板搭不搭都行,有些框架比如 symfony ( PHP )直接从后端支持 bootstrap 。

    但其实差别不大,我自己喜欢单独用 bootstrap,后端一律返回 json 给前端,不管什么东西都转成 json 塞给前端,然后前端只要拿到一个 json,用 JavaScript 就非常容易处理了。
    EminemW
        21
    EminemW  
       2020-09-25 22:42:09 +08:00
    还是分离吧,不要学 java 那些有的没的模板语言,没意义。vue 用 cdn 引入挺简单的
    yeqizhang
        22
    yeqizhang  
       2020-09-25 22:46:37 +08:00 via Android
    elementUI 够简单的了,vue 真的是香。

    我之前是在 jsp 里面用 jstl 和 easyUI 以及原生 js 的码农,后面半天就简单上手了 vue,去 tm 的操作 dom
    MoreSunshine
        23
    MoreSunshine  
       2020-09-25 22:47:12 +08:00
    react 或 vue 前端发展必然趋势,越逃避越不会 越不会越会被淘汰
    yeqizhang
        24
    yeqizhang  
       2020-09-25 22:52:46 +08:00 via Android
    @EminemW 我就说用引入方式的,作为后端开发还真不会模块化开发……
    zzl22100048
        25
    zzl22100048  
       2020-09-26 02:14:48 +08:00
    AlpineJS + TailWindCSS
    fox0001
        26
    fox0001  
       2020-09-26 08:09:55 +08:00 via Android
    不推荐 jQuery 了,还不如直接 JavaScript 原生。简单项目的话,找个开源的 CSS 项目就好了
    heiybb
        27
    heiybb  
       2020-09-26 08:56:21 +08:00 via Android
    Vuetify 自己手动撸一个 很快的
    KuroNekoFan
        28
    KuroNekoFan  
       2020-09-26 08:59:31 +08:00
    gwt
    xgq89757
        29
    xgq89757  
       2020-09-26 09:18:41 +08:00
    ant design pro
    ghost024
        30
    ghost024  
       2020-09-26 09:35:15 +08:00
    bootstrap+themeleaf 我一般都是找一个人家写好的 bootstrap 模板,然后用 themeleaf 改一下,超级好用
    securityCoding
        31
    securityCoding  
       2020-09-26 10:04:55 +08:00
    应该前后端分离 , 你提到的 vue-element-admin 单页面应用部署起来前端挂一个 ng 也很简单的
    libook
        32
    libook  
       2020-09-26 10:21:45 +08:00
    没有明确需求就直接选型是大忌。

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

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

    前端开发的知识可以去 MDN 上看,大多都有中文教程。
    leafre
        33
    leafre  
       2020-09-26 10:26:42 +08:00
    不分离就 jquery bootstrap/layui freemarker
    huayumo
        34
    huayumo  
       2020-09-26 12:43:32 +08:00
    同意楼上的,jquery 和 bootstrap,这些东西对以后装组件很方便的
    1oNflow
        35
    1oNflow  
       2020-09-26 13:15:31 +08:00 via iPhone
    jQuery bootstrap mustache,我觉得是最简单的一套组合
    40EaE5uJO3Xt1VVa
        36
    40EaE5uJO3Xt1VVa  
       2020-09-26 13:17:59 +08:00
    clf
        37
    clf  
       2020-09-26 13:21:06 +08:00
    前后端分离其实可以不需要单独部署的,把打包完的前端页面整合到 Springboot 里就好了。开发的时候前端用一下前端代理,部署直接 build 到项目的指定目录即可。

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

    如果还在大学,方向是 Web 相关的,建议 Vue 、React 一定要学,毕竟不懂前端的后端以及不懂后端的前端,都是有一定发展限制的。
    youla
        38
    youla  
       2020-09-26 13:24:18 +08:00
    可以引用 vue.min.js 做开发,比 jquery 方便感觉。
    angryfish
        39
    angryfish  
       2020-09-26 13:49:06 +08:00 via iPhone
    我感觉楼主更想要的是 ui 组件,那用 lanui 吧
    MisakaMikoto
        40
    MisakaMikoto  
       2020-09-26 14:29:27 +08:00
    用 parcel 打包,写个 main 文件,然后 import 按需加载模块页面文件。这样就可以写新特性了,也能用 npm 直接 import $ from 'jquery'
    chinaq
        41
    chinaq  
       2020-09-26 14:35:52 +08:00
    最简单的就是 layui-admin,另外像 vue-admin 、Ant Design Pro 也可以去 github 上找管理后台,各种 ui 框架都上手一遍,不费事的。
    kanepan19
        42
    kanepan19  
       2020-09-26 14:46:16 +08:00
    老:
    模板引擎: 个人很不习惯 thymeleaf 模板的方式, 可以用 freemarker 和 velocity
    自用 springboot + velocity
    velocity 官方不支持了,可以用 velocity-spring-boot-starter
    前端用 bootstrap

    新:
    springboot + elementUI 或者 ant design
    hdfg159
        43
    hdfg159  
       2020-09-26 15:36:08 +08:00 via Android
    明显 jquery
    EminemW
        44
    EminemW  
       2020-09-27 00:06:38 +08:00
    @yeqizhang vue 可以直接用 cdn 引入使用的,不需要用 npm 那些,你看一下 vue 很简单的,我感觉比 jQuery 好理解多了
    zlllllei
        45
    zlllllei  
       2020-09-27 09:57:08 +08:00
    vue 看官网教程,配上 element,半天就可以上手开撸了。 不过我以前的前端同事告诉我,element 已经停止维护很久了,有些 bug,但问题不大。
    yunyi93
        46
    yunyi93  
       2020-09-27 11:41:33 +08:00
    用 springboot 自带的 Thymeleaf,再加上 javascript 足以。
    suzic
        47
    suzic  
       2020-09-27 12:51:54 +08:00 via Android
    mdui
    chachae
        48
    chachae  
       2020-09-29 00:55:11 +08:00 via iPhone
    不分离我推荐 beetl+bootstrap+jq,当然不分离的话 vue 搭配 element 也是可以的,只不过跟前者比起来就毫无优势
    liuxiaohua
        49
    liuxiaohua  
       2020-10-12 11:15:29 +08:00
    layui 吧
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   4625 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 10:05 · PVG 18:05 · LAX 02:05 · JFK 05:05
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.