V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
5261
V2EX  ›  程序员

后端要咋快速入门前端开发呢?

  •  
  •   5261 · 15 天前 · 4208 次点击

    需求背景 1 、主业 java 后端开发,项目空窗期比较多 2 、想再掌握一点前端开发技能,不敢说可以单独开发、有些 bug 或者前端功能可以自己独立上手处理 3 、目前项目中是用 nodejs 、ts 、nextjs 、react 都有用

    现在情况 1 、上周开始 大概 review 一遍 js 基础知识点,然后了解到 nodejs 、react 、nextjs 、typescript 2 、上周按 nextjs 那个教程动手撸了一遍 demo ,对这些个框架稍微有些了解是干啥的 3 、因为看 nodejs 、react 、nextjs 、typescript 这些文档的过程中,交叉的太多,有点懵逼了,那最后到底该按啥顺序入门好些呢?

    第 1 条附言  ·  14 天前
    收藏主题的人也太多了点吧?

    收藏主题的这波人务必结合自身情况行动起来
    57 条回复    2024-12-11 14:57:52 +08:00
    ericguo
        1
    ericguo  
       15 天前
    可以暂时放弃 typescript ,react 的核心知识最重要,建议学 The Road to React ,Hook 版本就很好,免费的。
    to
    Vipcw95
        2
    Vipcw95  
       15 天前
    基础是 html css javascript XMLHttpRequest
    一把梭就 vite+vue 配合 vue 的各种生态,ui 组件库,npm 上的轮子
    qhd1988
        3
    qhd1988  
       15 天前
    建议先试试 ai,想做啥先让 ai 做个初版,看自己能不能看明白&改明白,
    明白了你就学会了前端了😅
    https://v0.dev/
    slert
        4
    slert  
       15 天前
    哪不懂问 ai 就好了吧
    5261
        5
    5261  
    OP
       15 天前
    @Vipcw95 vue 可能暂时不考虑,主要结合公司的前端项目用到的框架来走,不然没办法学以致用
    5261
        6
    5261  
    OP
       15 天前
    @ericguo 好的,我调整下优先级
    5261
        7
    5261  
    OP
       15 天前
    @slert ai 固然好,但还是想了解下前端的这些知识
    ripperdev
        8
    ripperdev  
       15 天前
    我也是后端,最近也在学 vue 。
    大概就是在 B 站找一个 24 年的对应框架的视频,跟着做一遍就好了
    5261
        9
    5261  
    OP
       15 天前
    @ripperdev 哈哈,前后端互相卷了 ,我们是没办法,后端人多,前端人少,只能想办法去学起前端知识,分摊点活
    neptuno
        10
    neptuno  
       15 天前   ❤️ 3
    学习的话建议不要看公司前端的框架,会把你带跑偏。直接看 vue 、react 的官方文档。然后 css 用 tailwind (他的文档写的很好,对你学习 css 很有帮助)
    JoeDH
        11
    JoeDH  
       15 天前
    @ericguo #1 为啥要放弃 ts
    NoOneNoBody
        12
    NoOneNoBody  
       15 天前
    转换阶段,语言是次要的,选定一个加 gpt 辅助一下也能入门,完全 0 接触的建议还是原生 js 入手
    重要的是思想,前后端完全不同
    后端一般直接就是数据驱动,是明显可见的,变化的是当前状态和数据的呼应,纯数据计算状态不多,做硬件或系统级的状态才多,所以难点的更多是数据量(数量或频次)
    前端是用户的操作事件驱动,不可预料的事情很多,变化的就是这个事件,要做很多“确认”步骤才能得出状态,然后才是产生数据,所以很重要的点是了解用户的操作事件,以及这个事件如何确认状态;例如鼠标动作是左键单击、右键单击、左键双击、按下、释放回弹(两者共同才构成 click)、滑入、滑出(两者共同构成一个滑过)……要做确认状态,还要做排除状态,例如按下是先于 click ,两个都响应的话就要厘清,如拖放操作是必须判断按下事件的

    上述说的是 client 端,纯 web 端没这么复杂,因为 web 端思想是一次提交,client 端是每个操作各自提交,只是可能提交对象是给富客户端而不是后台,所以现在很多开发都转 web UI 就是简化事件来开发(懒?)
    5261
        13
    5261  
    OP
       15 天前
    @neptuno 可能 css 相关的会往后放,我后端 主要任务就是 新需求的页面、组件化、还有就是和后端数据的请求交互上要我们干,样式啥的还是前端自己负责
    ytmsdy
        14
    ytmsdy  
       15 天前
    @neptuno 可能 css 相关的会往后放,我后端 主要任务就是 新需求的页面、组件化、还有就是和后端数据的请求交互上要我们干,样式啥的还是前端自己负责
    ----------------------
    如果这样的话,简单学一学前端工程的页面加载逻辑,以及数据请求方式就可以了。
    最好是先让前端打一个脚手架,写几个 demo ,我们后端把数据请求逻辑写完,其他的都交给前端。这样效率很高非常多
    neptuno
        15
    neptuno  
       15 天前
    @5261 #13 不学 css 的话,那前端不是超级简单吗,什么框架都是那几件事情,只需要定义数据、调用接口、定义一些方法就好了。还是建议你尽早学习 css ,这玩意不难,但是能提升你对前端整体的认知
    5261
        16
    5261  
    OP
       15 天前
    @neptuno 收到,感谢建议! 一步一步来,我先完成基本的前端开发任务先,再去折腾 css , 目前还在学习 react
    KSroido
        17
    KSroido  
       15 天前
    mark, 我最近也是在学习前端, 一开始想和之前的 rust 经验相结合, (但是感觉有点困难), 目前已经看了 react 和 vue 的入门, 分别写了一个井字棋
    我感觉最难受的一点是, 后端的既往开发经验能让我看到一个问题大概就能猜到解决思路,哪怕不动态调试代码都可以(只要是和我目前方向相关的开发问题)

    但是前端让我感觉就是, 跟着教程学会之后, 自己想做东西做不出来, 还是得问 ai
    遇到一些问题, 很喜欢自己问自己刨根问题, 但前端就是很多事情没那么多原理, 就是一些规定性的东西多, 这个字段就是这个字段这类的
    另外就是, 问 AI 的话, 有些概念性的东西还没发确认他说的对不对, 得自己反复验证一下,(不过还是比没有 AI 的时期好一些了)
    最后就是, 可能会经常性发生解决 A 问题最好用 B 方案, 但是我以为是 C 方案更好,这类事情.
    虽然可以通过更改问 AI 的 prompt 从而一定程度上解决, 但是就让人感觉无头苍蝇吧, 看到一个问题的时候, 后端的开发经验, 没法特别好的为我提供解决眼前问题的思路
    zjiajun
        18
    zjiajun  
       15 天前
    时间多的话,还是建议从头开始系统性学习,html 、css 、js 、react 、ts 。
    目前正在经历这个过程,html 过了一遍,css layout 学习中。
    虽然一开始就跟着 react 官网写了个井字棋,官网文档是挺不错的
    zjsxwc
        19
    zjsxwc  
       15 天前 via Android
    《深入解析 css 》
    rimwindy
        20
    rimwindy  
       15 天前   ❤️ 1
    可以花两三天时间看看这个,了解一下前端工程化。
    对于后端来说前端的各种名词太多了,需要先整理下框架体系。
    你只学 React 的话 Vue 的部分可以跳过,当然看一下也无妨,框架都是相通的:

    https://vue3.chengpeiquan.com/engineering.html
    mogutouer
        21
    mogutouer  
       15 天前
    咋这么想不开,Cursor Windsurf 不让用了?
    abcbuzhiming
        22
    abcbuzhiming  
       15 天前
    前端不管 CSS 的话,和后端思路没区别。问题就在于前端有 CSS 这个深坑
    windliang
        23
    windliang  
       14 天前
    ibegyourpardon
        24
    ibegyourpardon  
       14 天前
    typescript 不要放弃,不会多浪费你超过 3 小时。

    你不需要学习复杂的类型体操,掌握 interface type 的区别。

    当一个对象,学会联合类型,做一点点最最最最简单的推导,不可能超过 3 个小时。

    然后你在学习别人的代码的时候,包括自己写,受益无穷,省下来不止 3 个小时。

    你根本无需学习那么复杂的内容。但你不能不接触。

    哦,额外花一个小时看下配置什么的,学会自己走通它的编译。然后以后实际开发中,你基本上也用不到,但你得学会和理解。
    5261
        25
    5261  
    OP
       14 天前
    @ibegyourpardon 好的,收到
    5261
        26
    5261  
    OP
       14 天前
    @KSroido 同样在学习 rust 中~
    sss393
        27
    sss393  
       14 天前
    步子迈太大了,先学 Vue ,然后 css 、tailwind 。最后 ts 。react 和 next 是用来进阶的。next 还不稳定,你学了也没用,更新几个版本之后写法又变了。
    magewu1223ll
        28
    magewu1223ll  
       14 天前
    前端最难的是 CSS
    5261
        29
    5261  
    OP
       14 天前
    @sss393 vue 啥的 我司目前项目框架中没用到,主要是 react 和 nextjs ,所以起步就只能从这里开始了,咱也不是要转前端开发,其实就是要能兼顾前端功能开发
    flytsuki
        30
    flytsuki  
       14 天前
    html 可以 div 一把梭,js 是基本功,css 是魔法(入个门就行) 学完后直接上手 vue
    sss393
        31
    sss393  
       14 天前
    @5261 #29 原来如此,那其实推荐用 cursor 或者 windsurf 写,react,next 没必要学
    kapaseker
        32
    kapaseker  
       14 天前
    既然 java 的话,我感觉可以看看 wasm 相关的 UI 。
    html 本身没难度,但是那个 CSS ,真是太难搞定了。
    Kotlin 有 wasm 的支持,使用 compose web 也能开发出 UI 。
    https://wancool.vercel.app/
    我有个实例网站,这个网站你可以 F12 看看,没有使用任何 html 节点。全是 wasm 里面用 cavans 绘制的。我觉得也是一个思路。
    jjx
        33
    jjx  
       14 天前
    理论上像 extjs 这种是最适合后端的
    5261
        34
    5261  
    OP
       14 天前
    @sss393 cursor 这玩意在用了,我司前端建议我们用上! react 、next 有没有必要学,我感觉是后端开发的弊病,凡是技术相关的都喜欢去整体了解一遍 ,总感觉不捋一遍心里不放心,我大抵是病了,病的不清
    lasuar
        36
    lasuar  
       14 天前
    lasuar
        37
    lasuar  
       14 天前
    https://img.so/image/2RXG5C

    这图就发不了是吧
    anyscript
        38
    anyscript  
       14 天前
    ai 辅助一下 感觉看课有点浪费时间. 也不用学太深吧 写多了看多了就会了..
    vacuitym
        39
    vacuitym  
       14 天前
    找个项目做就可以了
    location123
        40
    location123  
       14 天前
    我一直做的是 Android 开发 今年想在 uTools 上面上一款插件 学前端的时候 看 Vue Vite ant design 的官方文档 一开始就硬写 写的多了 就理解了
    love2328
        41
    love2328  
       14 天前
    可视化 做界面, 不过好像没有比较好用的
    wryyyyyyyyyyyy
        42
    wryyyyyyyyyyyy  
       14 天前
    @ibegyourpardon 0 基础 1 个小时看配置肯定搞不明白,我在配置这里浪费了最少 1 天时间。
    xuanbg
        43
    xuanbg  
       14 天前
    先去请教产品或 UI ,弄明白几种通常使用的界面布局结构。然后学习和理解白 MVC 的概念,了解啥叫组件,如何封装组件,什么叫数据绑定。如何实现事件驱动、局部刷新、懒加载、预加载。最后随便学下 JS 语法什么的,就可以开干了。
    lasuar
        44
    lasuar  
       14 天前
    楼主开个群,同后端,搭个伙,顺道分享一些学习资源和心得
    wangyzj
        45
    wangyzj  
       14 天前
    前端东西很多
    如果只是写逻辑,看看 nodejs 啥的,ts 可以后看
    如果页面也包括,那么就多了
    hunterzhang86
        46
    hunterzhang86  
       14 天前
    推荐直接 nextjs 的官方文档入门: https://nextjs.org/learn?utm_source=next-site&utm_medium=homepage-cta&utm_campaign=home

    然后就是推荐用 AI 的工具开发一些小 demo: https://www.myaiexp.com/zh?category=dev-tools&subcategory=code-assist

    学习不是目的,能做出来的想要的东西才是目的,能拿到正反馈才能坚持下去。
    Rust2015
        47
    Rust2015  
       14 天前
    @magewu1223ll

    倒不是 css 有多难,不就两个 layout ,flex 和 grid
    关键耗时,导致的啰嗦
    Jtyczc
        48
    Jtyczc  
       14 天前
    打开油管,找个播放量不错的,用最新技术栈的,跟着写几次不就好了吗
    l4ever
        49
    l4ever  
       13 天前
    你是 java, 写 js 应该很简单了.
    打开 ant 组件库照着 demo 撸一下, 很快. 但是不建议用 antd pro

    基本就是:
    vite 构建
    ESLint 检查
    Prettier 格式化
    Stylelint 样式检查
    Tailwindcss
    Vitest 测试
    hwb
        50
    hwb  
       13 天前
    随便你用啥,总之前端的话,面向 cursor 编程就够了
    HeyCaptainJack
        51
    HeyCaptainJack  
       13 天前
    可以找个搭档,找个前端想学后端的人,然后用项目实操去落地,不然光看光学,忘得倍儿快
    PeiXyJ
        52
    PeiXyJ  
       13 天前
    不知道为啥我觉得最难的就是 CSS 了...咋写都写不出我要的样式...
    layxy
        53
    layxy  
       13 天前
    前端 html 和 js(ts)倒还好学,最难的就是 css,尤其是弹性布局还需要考虑浏览器兼容性的时候,处理一些细节总感觉自己的实现很 low,现在浏览器对 flex 和 grid 支持都挺好的,布局相对来说容易一些,不过样式细节啥的感觉还是很麻烦
    5261
        54
    5261  
    OP
       13 天前
    @layxy 看到大家对 css 都说难, 总不至于比 java gc 难吧
    daj2
        55
    daj2  
       13 天前
    个人认为想系统学前端的话,工程化的那些事情可以往后放,先看基础,可以去 mdn 看文档,教程很完善,达到一个页面原生实现个七七八八就可以(包括样式和逻辑),这个阶段不会太长,几周摸鱼应该差不多了。然后是 TS ,只看使用不要深究项目配置那些细节,然后是 React 官方文档和 nextjs 文档,然后就能在公司项目里实现点简单的功能练手,不会就问,剩下的一些 UI 库和工程化,干活的时候都能慢慢接触到

    https://developer.mozilla.org/zh-CN/docs/Learn
    layxy
        56
    layxy  
       13 天前
    @5261 java gc 其实也没有那么复杂,现在监控很全面,分析流程基本都差不多,而且一般应用其实遇到 gc 的问题不多,写了那么多年 java,真正排查 gc 问题并不多,基本就是在一些高性能场景 gc 影响吞吐量,进行特殊场景适当调优,css 这个主要是规范不统一,想要做到多浏览器兼容+自适应其实是有点难度,所幸现在的开源 ui 组件比较多,大部分都可以满足需求,但是一旦涉及到自定义页面,搞起来就费劲了
    KSroido
        57
    KSroido  
       13 天前
    @5261 共勉
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1298 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 17:38 · PVG 01:38 · LAX 09:38 · JFK 12:38
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.