• 请不要在回答技术问题时复制粘贴 AI 生成的内容
donggua997
V2EX  ›  程序员

请教前端同胞,如何快速搭建一个后台管理的前端项目

  •  
  •   donggua997 · Mar 8, 2023 · 13359 views
    This topic created in 1337 days ago, the information mentioned may be changed or developed.
    如题,我是后端,最近想做个简单后台项目,顺便熟悉一下:
    前后端打包、部署、devops 到 k8s ,整个流程。

    目前困难是:前端的 vue 项目很难开始。
    也在 b 站看了 vue 教程,但是毕竟练习少 看完了依然不好上手;
    最近看了 github 上有模版项目如 vue-admin-template ,通过这种方式上手合适么,有没有效率更高的学习方式
    87 replies  •  2023-03-09 18:27:53 +08:00
    xiaoxiaoming01
    xiaoxiaoming01
    Mar 8, 2023❤️40
    1
    如果你愿意放弃 vue 教,而加入我们 react 教我就告诉你😇😇
    yhxx
    yhxx
    Mar 8, 2023
    2
    建议看这个
    https://element-plus.org/zh-CN/guide/quickstart.html#%E5%BF%AB%E6%8D%B7%E6%90%AD%E5%BB%BA%E9%A1%B9%E7%9B%AE%E6%A8%A1%E6%9D%BF

    一路下一步可以体验一下从头开始堆起来的感觉

    vue-admin-template 这种模板我觉得不太合适,里面有太多作者的个人风格,而且太大了,对新人不太友好
    wildnode
    wildnode
    Mar 8, 2023
    3
    模板项目应该是最快的了吧,毕竟 router 和 layout 等等一些基础的已经帮你弄好了。
    donggua997
    donggua997
    OP
    Mar 8, 2023
    4
    @xiaoxiaoming01 #1 不到啊 vue 不是简单易上手么,react 有人带也行哈哈
    Morriaty
    Morriaty
    Mar 8, 2023❤️1
    5
    写 python 的话,就 Django 一把梭🤣
    donggua997
    donggua997
    OP
    Mar 8, 2023
    6
    @yhxx #2 这个链接什么框架呀
    jamosLi
    jamosLi
    Mar 8, 2023
    7
    vue-admin 改改不就行了

    antd pro 改改不就行了

    别啥都自己从零开始,做不好的。
    BiChengfei
    BiChengfei
    Mar 8, 2023
    8
    前端工程化,本来就是把前端复杂化,提高门槛。最快速的管理后台,还是前后端一体的 jQuery 生态框架更便捷
    pengtdyd
    pengtdyd
    Mar 8, 2023❤️3
    9
    如果你愿意放弃 vue ,而加入我们 react 我就告诉你

    希望 OP 能早日弃暗投明,不要做无谓的抵抗!!!
    Zchary
    Zchary
    Mar 8, 2023 via iPhone
    10
    这个流程前端写个 index.html 不就行了吗🧐
    um1ng
    um1ng
    Mar 8, 2023❤️2
    11
    试试这个? https://pro.arco.design/,脚手架快速搭建
    wu67
    wu67
    Mar 8, 2023❤️1
    12
    差不多得了, vue 都没法快速上手, react 门槛更高...
    94
    94
    Mar 8, 2023
    13
    所以你的主力语言是啥? Java 的话,可以选择这两个平台 [JeecgBoot]( https://github.com/jeecgboot/ant-design-vue-jeecg)、[RuoYi]( https://github.com/yangzongzhuan/RuoYi-Vue),直接整合了前端的 Admin 版本,然后后端可以直接生成前端模板了。其他的语言应该也有类似差不多的平台可以选择。
    donggua997
    donggua997
    OP
    Mar 8, 2023
    14
    @pengtdyd #9 小弟能力不配 react 惭愧
    knightdf
    knightdf
    Mar 8, 2023
    15
    做为一名后端,为啥我感觉 react 比 vue 更好上手?
    litchinn
    litchinn
    Mar 8, 2023
    16
    最简单的办法,你找一个前端项目,然后去适配它,比如 ruoyi 这种,其次是用 vue-admin-template 这类模板

    其实后端我觉得用 freemarker+tailwindcss 也不错
    ymy3232
    ymy3232
    Mar 8, 2023
    17
    用 ruoyi 改 写多了就熟悉了
    hzxxx
    hzxxx
    Mar 8, 2023
    18
    推荐 gva-admin ,功能挺好的,也有完整的部署流程( nginx 、docker )
    hzxxx
    hzxxx
    Mar 8, 2023
    19
    @hzxxx 噢,没看到你是初学者,初学者不建议上来就搞比较复杂的,可以先 github 搜索关键字找个简单点的练练手
    sofukwird
    sofukwird
    Mar 8, 2023 via Android
    20
    如果你愿意放弃 vue 教,而加入我们 svelte 教我就告诉你😇😇
    点击一键加入 https://kit.svelte.dev/
    Jtyczc
    Jtyczc
    Mar 8, 2023 via Android
    21
    @xiaoxiaoming01 你告诉我吧,大哥
    JerryY
    JerryY
    Mar 8, 2023
    22
    如果你愿意放弃 vue 教,而加入我们 vanillajs 教我就告诉你
    basefas
    basefas
    Mar 8, 2023
    23
    Dragonphy
    Dragonphy
    Mar 8, 2023
    24
    如果你愿意放弃 Vue 教,而加入我们 SolidJS 教,我就告诉你
    leeggco
    leeggco
    Mar 8, 2023❤️4
    25
    如果你愿意放弃 Vue 教,而加入我们 Angular 教,我就告诉你
    dengshen
    dengshen
    Mar 8, 2023
    26
    @xiaoxiaoming01 react 不行了吧?/狗头 需要用这种方式拉新 哈哈哈😄
    dengshen
    dengshen
    Mar 8, 2023
    27
    @dengshen 看了上面的安利顿时感觉 vue 更香了🐶
    westoy
    westoy
    Mar 8, 2023
    28
    如果你愿意放弃 Vue 教,而加入我们 Backbone 教,我就告诉你
    jasonlwy
    jasonlwy
    Mar 8, 2023
    29
    @xiaoxiaoming01 哈哈哈哈哈哈
    zeonll
    zeonll
    Mar 8, 2023
    30
    我也是后端,前段时间在学前端,搞死我了。和写后端逻辑完全不一样。

    我学的 React ,跟着 B 站上的视频敲了一个后台管理系统,,只能说摸到套路了。但是一堆奇奇乖乖的 API 和什么组组件 勾子还没太懂
    coldmonkeybit
    coldmonkeybit
    Mar 8, 2023
    31
    如果你愿意以后只忠于 vue 教,其他框架看都不看一眼,我就告诉你
    liuxu
    liuxu
    Mar 8, 2023
    32
    可笑,Vue 教怎么一个能打的都没有,用 layui 就行了,剩下的疯狂堆 div
    Q4h7388nR28s95fa
    Q4h7388nR28s95fa
    Mar 8, 2023
    33
    后端的话,用这一个比较适合 https://gitee.com/tengzhinei/ly-admin-ui

    不需要用 node.js ,直接上手就用。

    过段时间我也想搞一个类似的项目。
    jaywhen
    jaywhen
    Mar 8, 2023 via iPhone
    34
    传统三大前端框架都挺好的,都能解决问题,这三个在工作中都写过,恕我直言,玩烂梗大可不必
    antowa
    antowa
    Mar 8, 2023
    35
    你到市场,买一只活鸡,然后拿电脑,往键盘上撒一把米,鸡很快就能 coding 出来了
    fo0o7hU2tr6v6TCe
    fo0o7hU2tr6v6TCe
    Mar 8, 2023
    36
    @xiaoxiaoming01 哦~尊贵的 react 门,我是你最忠实的信徒,快告诉我😇😇
    living9696
    living9696
    Mar 8, 2023
    37
    后端 go 的话 gin-vue-admin 可以的 该有的基本都有了
    tkHello
    tkHello
    Mar 8, 2023
    38
    空手传经 后人当饿死了
    darkengine
    darkengine
    Mar 8, 2023
    39
    如果你愿意放弃 Vue 教,而加入我们 VanillaJS 教,我就告诉你
    azui999
    azui999
    Mar 8, 2023
    40
    要说后端,其实 angular 更友好,哈哈
    justin2018
    justin2018
    Mar 8, 2023
    41
    Strapi - Open source Node.js Headless CMS 🚀
    https://strapi.io/

    Appwrite - Open-Source End-to-End Backend Server
    https://appwrite.io/
    webfamer
    webfamer
    Mar 8, 2023
    42
    我用的 react ,直接 umi 配置一下就好了
    smilingsun
    smilingsun
    Mar 8, 2023
    43
    前一段时间看到这个项目(虽然是 React 的,但是感觉 Vue 应该也可以这么做),感觉不错,在灵活和约定俗成之间尝试找平衡

    https://github.com/refinedev/refine

    https://user-images.githubusercontent.com/18739364/200257209-8fc0c8b1-2568-453e-873f-00513434deed.png
    xqk111
    xqk111
    Mar 8, 2023
    44
    React ,直接看 antd pro ,生成写好的,省事
    xqk111
    xqk111
    Mar 8, 2023
    45
    https://pro.ant.design/zh-CN
    IamCyborg
    IamCyborg
    Mar 8, 2023
    46
    @xiaoxiaoming01 好了 我脱离 vue 教,遁入 react 教了,大哥教教我 8
    isbase
    isbase
    Mar 8, 2023
    47
    了解一下 umi max
    42vov
    42vov
    Mar 8, 2023
    48
    @Dragonphy 好,我加入👻
    heng1025
    heng1025
    Mar 8, 2023
    49
    好巧,我不是 vue 教,为了侵入内部,我也造了一个 starter, 看这里 https://github.com/heng1025/vue-admin-vite
    ZoeeoZ
    ZoeeoZ
    Mar 8, 2023
    50
    如果会 vue,vue-element-admin 应该就是最快的了,vue 的模板语法最简单,简单的增删改查逻辑也不需要像 react 需要额外付出精力
    Ufo666
    Ufo666
    Mar 8, 2023
    51
    我直接用的 antd-vue-admin
    lete
    lete
    Mar 8, 2023
    53
    svelte 和 solid 才是未来的方向,vue 也在筹备无 runtime 目前貌似是处于私有仓库的状态
    lueluev
    lueluev
    Mar 8, 2023❤️1
    54
    后端上手 angular 最快啊 真的
    lizy0329
    lizy0329
    Mar 8, 2023
    55
    1. 不建议使用那些 XXX-ADMIN 的管理模板,学习成本十分高
    2. 使用 astro 作为引擎,vue + tailwind/windi/unocss + zag/headlessUI 作为核心
    3. 去一些 tailwind 模板里拷贝模块,你需要用什么就拷什么
    4. 提交你的代码
    jry
    jry
    Mar 8, 2023
    56
    可以试试我的框架,专门为后端而生的 vue 自动渲染后台,https://uiadmin.net ,无需学习任何前端知识。
    chrosing
    chrosing
    Mar 8, 2023
    57
    @xiaoxiaoming01 #1 我后端,我愿意加入 react 教,请(恩赐)学习方法 :doge
    SilentDepth
    SilentDepth
    Mar 8, 2023
    58
    @lizy0329 #55 Astro 搞后台项目?选错技术方向了吧
    fackVL
    fackVL
    Mar 8, 2023 via iPhone
    59
    ruoyi 分离版欢迎你
    SilentDepth
    SilentDepth
    Mar 8, 2023
    60
    楼主这个要求有点难。快速搭建一个管理后台那肯定是用工程模板最快,element-admin 、AntD Pro 啥的都行。但如果想同时学习前端技术(比如 Vue ),这反而不是推荐的方法,因为管理后台这种项目往往隐含着一大堆各个方面的工程实践经验,零基础进去容易出不来。打包部署这些倒不是问题。

    如果楼主就是想快速出东西,对工作原理、机制哲学无所谓或者不急着弄明白,那先对一些核心概念产生感性的认识,知道怎么用就行了。比如以 Vue 为例,最核心的就是组件化和状态管理,具体实践上能用现成的库就不造轮子,先整出一个看得到的东西出来,然后在这个基础上一步步加其他业务,比如用户验证、角色管理等。这个过程中,但凡能在后端实现的先丢给后端,减少前端部分的复杂度。毕竟是学习,没必要上来就挑战高难度。把前端的玩法搞明白后再移回来就是了。当然,这一切的前提是 JS 基础要有,不然先抛开一切学一下 Vanilla JS 比较好。

    如果想要更高效地学习,建议找个老师带,可以事半功倍。
    yuhuanxi
    yuhuanxi
    Mar 8, 2023
    61
    @xiaoxiaoming01 我愿意
    vone
    vone
    Mar 8, 2023
    62
    如果你愿意放弃 Vue 教,而加入我们 jQuery 教,我就告诉你
    lzblalala
    lzblalala
    Mar 8, 2023
    63
    @jaywhen 说得很好,评论区都是什么妖魔鬼怪
    nzbin
    nzbin
    Mar 8, 2023❤️1
    64
    后端还犹豫啥,直接 Angular 一把梭,三步搞定
    https://github.com/ng-matero/ng-matero

    $ ng new <project-name>
    $ cd <project-name>
    $ ng add ng-matero
    javen73
    javen73
    Mar 8, 2023
    65
    只是增删改查的话。Django 爽的一批
    ColdBird
    ColdBird
    Mar 8, 2023
    66
    如果你愿意放弃 Vue 教,而加入我们 js 教,我就告诉你
    wellerman
    wellerman
    Mar 8, 2023
    67
    antd
    cheng6563
    cheng6563
    Mar 8, 2023
    68
    学学 vue 基础,然后下个 ruoyi 分离版,看看他代码生成器生成出来的代码咋样的,照着抄抄改改就能做业务了。

    打包部署要稍微学学 Linux shell ,学会常用的文件操作控制进程操作,以及 ssh 命令也就行了。

    其他的靠面向 stackoverflow 开发就行了
    webcape233
    webcape233
    Mar 8, 2023 via iPhone
    69
    你可以加入我们 svelte 教,用 sveltekit ,
    dddd1919
    dddd1919
    Mar 8, 2023❤️1
    70
    不如直接 jquery+bootstrap ,简单方便
    ThinkPad93
    ThinkPad93
    Mar 8, 2023
    71
    后端是 php 吗,如果是推荐用
    https://www.fastadmin.net/
    以前看同事用过,或者是 layuiAdmin
    https://dev.layuion.com/themes/layuiAdmin/
    jikeytang
    jikeytang
    Mar 8, 2023
    72
    可以从这两个网站看看:
    http://vue-admin.cn
    vue 管理模板合集
    http://react-admin.cn
    react 管理模板合集
    zhennann
    zhennann
    Mar 8, 2023
    73
    如果追求更高效率,就选一个功能相对完整又扩展性强的框架,比如 CabloyJS 开源全栈框架: https://github.com/zhennann/cabloy
    cz5424
    cz5424
    Mar 8, 2023
    74
    我是后端,已经可以熟练的写 vue 了,前后端打包、部署、devops 到 k8s ,整个流程都会了;会前端是从 vue-admin-template 开始的
    catch
    catch
    Mar 8, 2023 via Android
    75
    要不安卓也你做了
    poporange
    poporange
    Mar 8, 2023
    76
    python django
    fate
    fate
    Mar 8, 2023
    77
    naive-admin 这个开源的后台模板,我直接套上就用了,慢慢的前端就懂了。
    kingfalse
    kingfalse
    Mar 8, 2023 via Android
    78
    大兄弟看看 vaadin 吧!这玩意真舒服
    starAllNull
    starAllNull
    Mar 9, 2023 via iPhone
    79
    同样的问题困扰,关注一下
    starAllNull
    starAllNull
    Mar 9, 2023 via iPhone
    80
    @xiaoxiaoming01
    大佬 求带路
    v2er4241
    v2er4241
    Mar 9, 2023
    81
    同后端,第一次用前端框架用的 angularjs ,上手非常顺利,后面用 vue 的很别手,最后用 react 十分顺手,以后的项目几乎都用 react 了,个人觉得 react 的写法更适合后端开发。
    keenkiller
    keenkiller
    Mar 9, 2023
    82
    后端的话 angular 上手应该最快(尤其是 java 后端)

    不过直接学的话,vue+ElementUI 其实也很快。。
    DetectiveBoy
    DetectiveBoy
    Mar 9, 2023
    83
    同样是后端,用 RuoYi 帮亲戚做个了库存管理系统(花时间学了点 Android ,还做了个 PDA 端)。
    优点:
    1. RuoYi 包含了前后端项目。如果你找个单独的前端项目(比如 vue-admin-template ),还需要花时间去对接后端。
    2. 文档很详细。比如文档里会告诉你服务器如何配置,前后端如何打包发布到服务器上。这些东西网上都能查到,但集合在一篇文档里能帮你节约很多时间。
    3. 自动生成代码功能很好用。只要设计好表结构,能自动生成基础的前后端代码。像我的场景,前端没啥太复杂的功能,自动生成的前端代码稍微改改就能用了。
    缺点:
    文档部分收费
    fo0o7hU2tr6v6TCe
    fo0o7hU2tr6v6TCe
    Mar 9, 2023
    84
    @tkHello 我是真想学点... 有没有什么路子,请大佬喝杯咖啡能传授一下方法么 VXppRXRlcm5hbEdvZF8=
    donggua997
    donggua997
    OP
    Mar 9, 2023
    85
    @hzjseasea #84 一杯咖啡 后人当饿死了
    fo0o7hU2tr6v6TCe
    fo0o7hU2tr6v6TCe
    Mar 9, 2023
    86
    @donggua997 老哥联系我了,沟通的很愉快
    winglight2016
    winglight2016
    Mar 9, 2023
    87
    agnular 1.x 其实是最适合后端程序员的,我当初钻研很深入,没想到 2.x 直接 180 度大转弯,我再也不用 angular 了

    同样是想做个后台管理,我发现 react-admin 非常适合后台开发,前端代码量非常少,适配了很多后台 API ,我用 parse 做后端很省事儿
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   2935 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 159ms · UTC 11:23 · PVG 19:23 · LAX 03:23 · JFK 06:23
    ♥ Do have faith in what you're doing.