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

一个很老的话题,但还是想问问大家,后端搞前端怎么选

  •  
  •   XinPingQiHe · 18 天前 · 3973 次点击

    场景:后端老手。正规应用,前端都是有人用。 但偶尔一些应用场景还是需要自己能鼓捣出来页面展示,不能所有的全依赖于前端。 前端目前能力:之前的数十个大小前端项目,vue 项目居多。也就是会看看代码,看看前后交互,改改配置项,编译部署。react nextjs 也有几个项目,修改各类 js 代码可以。紧急情况下,也可以写一些 js 。 前端水平,如果有人把页面搭建搞好了,自己能完成剩下所有事情。 主要困惑:1.css 难读难写。2.如果要设计一个稍微复杂一点的页面,觉得无从下手。 不知是否有一种快速搭建页面的技术存在? 形势所需,自我要求多掌握游一些技能,请各位有类似经验的指点一二,谢谢!

    45 条回复    2024-10-16 09:20:12 +08:00
    ZztGqk
        1
    ZztGqk  
       18 天前
    css 难读难写:tailwind ?不用的话,用它的文档学 CSS 也不错。
    稍微复杂一点的页面:flex 或 grid 嗦到底?不知道这里的复杂是状态复杂、动画复杂还是布局复杂。
    快速搭建:ai? v0.dev ?
    qviqvi
        2
    qviqvi  
       18 天前
    直接用 template engine ,最简单,无需 node 环境,比如 thymeleaf
    shizhibuyu2023
        3
    shizhibuyu2023  
       18 天前
    Cursor 解君愁
    aababc
        4
    aababc  
       18 天前
    @ZztGqk #1 多年后端,写前端遇到的最大的问题就是不会布局,一个单位就搞的自己晕头转向,px, rem, vh ... ,每次写起来都焦头烂额的,感觉现在唯一能写的就是 管理后台了,就这样也是照葫芦画瓢,不过更大的可能是自己太菜了。
    XinPingQiHe
        5
    XinPingQiHe  
    OP
       18 天前
    @ZztGqk tailwind 在一个 nicegui 的项目里 全程用过它,很好。还不知道在 nextjs 或者 vue 里面怎么用它,回头我查查资料 @qviqvi 哦,多年前用过,我原以为这是一种过时的技术,如果现在有新的能用,我也看看 @shizhibuyu2023 AI 编程插件我只用于部分独立的语句。 全局方面 还是想自己先掌握了。
    studyingss
        6
    studyingss  
       18 天前
    我遇到的困惑跟你一模一样,总结出两条重点:

    1. 布局 flex 套 flex ,别想别的。

    2. css 用 tailwind ,全交给 ai 。

    无从下手的问题:选一个抄,直接网页截图发给 chatgpt 让他帮你写好框架,然后用 flex 套 flex 的思路一把梭。

    要避坑的点:

    太早考虑适配不同尺寸的问题,直接先按自己屏幕大小写死尺寸,写完再慢慢调。
    jlkm2010
        7
    jlkm2010  
       18 天前
    推荐 vue3 一把梭,或者用 layui
    XinPingQiHe
        8
    XinPingQiHe  
    OP
       18 天前
    @aababc 可能不是菜 而是思路没跟上前端的思路,管理后台也是后端最需要的 @studyingss 确实是这样的后端困惑,你说的思路我会试试 @jlkm2010 知道这个好,就还是不知道怎么梭 vue3 技术栈先后看了不少 改写一点东西基本能搞定,要开个新项目或搭建歌新页面 就呆住了。
    studyingss
        9
    studyingss  
       18 天前
    @XinPingQiHe 骨架让 ai 帮忙写没问题的,不用担心 ai 让你掌握不了细节,你可以这么用:先让他给你生成一个参考,然后你基于它的一点一点,我刚开始就是这样,改到最后跟它生成的一点关系都没有了,但起码会有个着手点,不至于抓瞎。

    另外我个人觉得,vue 比较好入门,它整套都是定好的,更容易集中注意力在重点上,react 太灵活,初学很容易纠结在一些无关紧要的小事情上。
    taotaodaddy
        10
    taotaodaddy  
       18 天前
    投 tailwind 一票
    cmdOptionKana
        11
    cmdOptionKana  
       18 天前   ❤️ 2
    > 如果要设计一个稍微复杂一点的页面,觉得无从下手

    如果不打算花很多时间精力做前端,其实还不如不做复杂的页面,就做简单的。其实复杂也没啥好处,很多设计都是过度设计。

    另外,可以先做一个最最最简单的页面,再慢慢改复杂。不要一开始就做复杂。
    captain55
        12
    captain55  
       18 天前   ❤️ 1
    难道我真的老了吗?竟然没看到 #Bootstrap
    taogen
        13
    taogen  
       18 天前   ❤️ 1
    1. CSS 基础书籍学起来啊。
    2. 复杂的页面,也是一点一点堆起来的。先布局,调样式,加特效等等。不懂的 CSS 搜一下。

    我看你基础太弱了。系统的学下 CSS 和 JavaScript 吧!别上来就框架。
    XinPingQiHe
        14
    XinPingQiHe  
    OP
       18 天前
    @taotaodaddy @cmdOptionKana @captain55 @taogen 谢谢各位的建议
    yinmin
        15
    yinmin  
       18 天前 via iPhone
    css 不难,快速上手的方式是买一本 css 的书,花个 3-5 天时间通读一遍,遇到问题向 gpt 请教。对于编程老手,估摸着也就 1 周时间能基本精通了
    yudoo
        16
    yudoo  
       18 天前
    @yinmin 有推荐的 吗
    0xD800
        17
    0xD800  
       18 天前
    对前端感觉复杂会不会是因为你布局系统没掌握,直接学习 flex ,position 的使用,可以实现 99%的界面,js 的话是编程语言学起来简单
    0xD800
        18
    0xD800  
       18 天前
    可以自己思考实现一个后台管理的骨架出来,做完基本掌握前端的布局了 0.0
    byj66
        19
    byj66  
       18 天前 via iPhone
    CSS 一个难点在有很多属性要记。多看几本书,MDN 经常看看。
    一些参考资料
    1. MDN - https://developer.mozilla.org/en-US/docs/Web/CSS
    2. CSS roadmap - https://roadmap.sh/r/css-6nqag
    3. 深入研究 CSS 的英文博主: https://ishadeed.com/
    kpsanmao
        20
    kpsanmao  
       18 天前
    看你后端语言啊,我主要用 laravel ,基于后端的全栈技术很完善,不需要学太多前端的东西了。
    zy0829
        21
    zy0829  
       18 天前
    别学
    ma836323493
        22
    ma836323493  
       18 天前
    最近学前端做了个服务号, 用 padding 用的真爽
    qweruiop
        23
    qweruiop  
       18 天前
    @studyingss 哈哈,一样的,现在基本上都是 flex 套 flex+tailwind ,再复杂点的页面,就花几十块钱,淘宝让 人工 gpt 上了。。。
    cnhongwei
        24
    cnhongwei  
       18 天前   ❤️ 2
    后端能写好的人,前端是没有问题的,你把前端页面划分为几个层次,层->块-元素
    层是指你的页面中会有多少层,主要是对话框,遮罩层,这些层在什么什么时候显示隐藏。
    块就是把每个页面按功能分多少块,如果在页面宽度或内容多少发生变化的时候,每个块的大小如何发生变化,使用 flex 布局很简单,只通过 padding 或 marging 来间隔块就行了,如果还复杂,就多套一个 div 。
    元素就是 html 元素,你使用合适的元素和事件就行了。
    使用现在的框架来组合上面说的就行了,现在基本没有框架完不成,需求直接手搓 css 的了。
    luojianxhlxt
        25
    luojianxhlxt  
       18 天前
    C#准备研究一下 Blazor ,不过也只能跳过 js

    html 和 css 还是跳不过
    guanzhangzhang
        26
    guanzhangzhang  
       18 天前
    @cnhongwei 层是怎么体现的,也是 div 和全局 className 实现吗
    XinPingQiHe
        27
    XinPingQiHe  
    OP
       18 天前
    谢谢各位的建议,用新思维,再挑战一下自己
    leaveeel
        28
    leaveeel  
       18 天前
    @guanzhangzhang 层是指 position 产生的 z 轴,正常布局都在同一层,层互相独立。块就是 y 轴自动向下沿伸,块互相独立。元素是块里的 x ,水平排列会换行。然后整个页面就是坐标系的俯视图。也有属性可以改他们的相对关系,比如 transform 、float ,想进一步了解需要看文档+多用
    shuyunquan
        29
    shuyunquan  
       18 天前
    1. 好多朋友讲的很对,css 必须要掌握 flex 布局,grid 布局 这俩会了你发现写页面布局很简单
    2. 但是非常复杂的页面,用这俩写 css 就感觉很啰嗦,很繁琐, 这个时候就可以使用 tailwinds, 可以省去写大量 css 的时间
    3. 复杂的页面可以想想能不能用 vue 的组件思想,搞些组件复用
    4. 如果是 ERP 这种项目,那有些页面确实很复杂,也不好组件复用, 就复制粘贴呗,反正大部分都是列表的增删改查,小部分复杂的就让前端同事处理
    Ayanokouji
        30
    Ayanokouji  
       18 天前   ❤️ 1
    如果只做 web 端,真心觉得 htmx 很棒。如果要支持多端,还是前后端分离吧,用 react/vue/ng 。
    svtter
        31
    svtter  
       18 天前 via Android
    nextjs 加上 tailwind ,大概学一周,就能做挺好的东西了。贴一下自己的水文: https://svtter.github.io/post/2024-03-12-react-for-old-django/
    lancelock
        32
    lancelock  
       18 天前
    页面设计是 ui 的活吧,前端也没几个会设计的
    shadowyue
        33
    shadowyue  
       18 天前
    管什么前端后端,不都是搞开发,抽时间选一个主流框架学就行了
    angryfish
        34
    angryfish  
       18 天前
    作为一个后端,觉得前端的难点主要在以下方面:
    1.布局难搞,没法随心所欲的安放元素位置。
    2.效果不会实现
    目前我得解决方法就是,尽量用 ui 库。像 elementui,vant 啥的。没有这些东西,我一个功能都实现不了
    layxy
        35
    layxy  
       18 天前
    可以稍微学习一下,而且后端搞前端基本都是用的现成的 ui 库,自己稍微调整下排版就可以,复杂组件就只能甩给前端了
    guanzhangzhang
        36
    guanzhangzhang  
       18 天前
    @svtter 你文章里的 next.js 没提到需要学哪些基础内容,还是不用管直接写吗
    svtter
        37
    svtter  
       18 天前
    @guanzhangzhang 建议是读官方的 tutorial 。读不下去就直接跟着感觉写(说出这句话感觉自己相当不专业)。
    XuHuan1025
        38
    XuHuan1025  
       18 天前
    我感觉挺简单... 我直接 gpt 直接整个页面就有了
    learnshare
        39
    learnshare  
       18 天前
    动手写 CSS 之前,应该先熟练使用现代化的 UI 设计工具(比如 Sketch/Figma 等)
    CSS 是一种通过代码绘制 UI 的工具,与设计工具里的布局、图层、组件化等概念基本一致
    svtter
        40
    svtter  
       18 天前
    @learnshare 请教一下,css 哪里体现了图层?
    ccpp132
        41
    ccpp132  
       18 天前
    建议套现成的组件库就行了
    learnshare
        42
    learnshare  
       18 天前
    @svtter
    HTML 的嵌套结构带来了默认的图层
    CSS 里可以通过定位等方式调整图层
    jones2000
        43
    jones2000  
       18 天前
    某宝或海鲜市场,找个前端搞一个毛胚的。每个人的精力是有限的,做好,做精自己的核心模块, 其他都交给互联网。什么都自己搞,多麻烦,关键还都不是自研的,大都是用第 3 方的插件,学这些基本就是浪费时间。
    visper
        44
    visper  
       17 天前
    css 最主要是布局。去上网查一下各种 css 布局的方式。然后 margin padding 类的基本属性看看就知道了。可以直接叫 AI 写。 现在基本不需要支持 ie 了还好点。否则都要考虑一下这个 css 属性是否支持 IE. 甚至以前哪个版本的 ie 支持哪些属性。
    INTOX8O
        45
    INTOX8O  
       16 天前
    @aababc
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5518 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 08:22 · PVG 16:22 · LAX 01:22 · JFK 04:22
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.