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

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

  •  
  •   5261 · 8 天前 · 4086 次点击

    需求背景 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 条附言  ·  8 天前
    收藏主题的人也太多了点吧?

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

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

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

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

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

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

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

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

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

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

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

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

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