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

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

  •  
  •   donggua997 · 2023-03-08 09:59:00 +08:00 · 10307 次点击
    这是一个创建于 579 天前的主题,其中的信息可能已经有所发展或是发生改变。
    如题,我是后端,最近想做个简单后台项目,顺便熟悉一下:
    前后端打包、部署、devops 到 k8s ,整个流程。

    目前困难是:前端的 vue 项目很难开始。
    也在 b 站看了 vue 教程,但是毕竟练习少 看完了依然不好上手;
    最近看了 github 上有模版项目如 vue-admin-template ,通过这种方式上手合适么,有没有效率更高的学习方式
    87 条回复    2023-03-09 18:27:53 +08:00
    xiaoxiaoming01
        1
    xiaoxiaoming01  
       2023-03-08 10:02:26 +08:00   ❤️ 40
    如果你愿意放弃 vue 教,而加入我们 react 教我就告诉你😇😇
    yhxx
        2
    yhxx  
       2023-03-08 10:04:58 +08:00
    建议看这个
    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
        3
    wildnode  
       2023-03-08 10:05:03 +08:00
    模板项目应该是最快的了吧,毕竟 router 和 layout 等等一些基础的已经帮你弄好了。
    donggua997
        4
    donggua997  
    OP
       2023-03-08 10:08:18 +08:00
    @xiaoxiaoming01 #1 不到啊 vue 不是简单易上手么,react 有人带也行哈哈
    Morriaty
        5
    Morriaty  
       2023-03-08 10:09:35 +08:00   ❤️ 1
    写 python 的话,就 Django 一把梭🤣
    donggua997
        6
    donggua997  
    OP
       2023-03-08 10:14:43 +08:00
    @yhxx #2 这个链接什么框架呀
    jamosLi
        7
    jamosLi  
       2023-03-08 10:15:06 +08:00
    vue-admin 改改不就行了

    antd pro 改改不就行了

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

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

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

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

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

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

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

    https://github.com/refinedev/refine

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

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

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

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

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

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

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

    同样是想做个后台管理,我发现 react-admin 非常适合后台开发,前端代码量非常少,适配了很多后台 API ,我用 parse 做后端很省事儿
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2381 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 33ms · UTC 06:01 · PVG 14:01 · LAX 23:01 · JFK 02:01
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.