后端如何学前端?不求精,求快就行 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
opengps
0.01D
V2EX    前端开发

后端如何学前端?不求精,求快就行

  •  
  •   opengps
    null 2021-07-27 21:36:50 +08:00 9485 次点击
    这是一个创建于 1537 天前的主题,其中的信息可能已经有所发展或是发生改变。

    最近需要接触一些前端的代码,无奈一直写后端,受不了 js 的各种奇葩问题、另类语法、各种封装。。。。

    第 1 条附言    2021-07-30 22:49:55 +08:00
    我勒个去,两天没用工具打开 v 站,这么多回复,感谢大家回复,一会我逐条学习下
    75 条回复    2021-07-30 07:40:25 +08:00
    erenming
        1
    erenming  
       2021-07-27 21:49:07 +08:00 via iPhone
    同求
    jiyinyiyong
        2
    jiyinyiyong  
       2021-07-27 21:54:02 +08:00
    我看聊天时候听到的是说后端直接找个牛逼的全家桶的框架然后直接学框架, 然后框架连 Javascript 的语法都封装掉.... 然后就不用碰 React 那些奇奇怪怪的设计了.

    问下楼主后端的, 学的哪些语言?
    learningman
        3
    learningman  
       2021-07-27 21:57:48 +08:00
    前端是吧,直接 vue
    js 都不会都能写 vue
    TypeError
        4
    TypeError  
       2021-07-27 22:07:39 +08:00
    JS 框架加上 UI 框架?
    GG668v26Fd55CP5W
        5
    GG668v26Fd55CP5W  
       2021-07-27 22:08:05 +08:00 via iPhone
    我以前也很排斥,但发现用上 es6 之后,js 写得还挺爽的…
    harde
        6
    harde  
       2021-07-27 22:10:46 +08:00
    技术发展到今天,前端的碎片化比后端严重得多,你得告诉大家你想学哪方面的?
    Kaciras
        7
    Kaciras  
       2021-07-27 22:18:30 +08:00   1
    JS 尽量用新特性,能避免大部分坑
    kiracyan
        8
    kiracyan  
       2021-07-27 22:32:00 +08:00
    直接上手做
    limbo0
        9
    limbo0  
       2021-07-27 22:41:31 +08:00
    ant design pro 上手比较快, 建议试试
    letking
        10
    letking  
       2021-07-27 22:48:15 +08:00   8
    别狭隘地把自己局限于前端、后端或某种语言。
    面对新东西,把自己当成初学者踏踏实实地学,你就能学会,还能发现它设计的精妙之处,而不是只看到缺点。
    ysicing
        11
    ysicing  
       2021-07-27 22:51:33 +08:00
    直接上手
    johnsona
        12
    johnsona  
       2021-07-27 22:59:09 +08:00 via iPhone
    vue
    ericgui
        13
    ericgui  
       2021-07-28 00:49:02 +08:00
    写 react 吧,概念简单,语法就是一个类似 html 或者 xml 的结构,你如果熟悉 xml 和 html,应该很快的,尤其是 xml
    SingeeKing
        14
    SingeeKing  
    PRO
       2021-07-28 01:19:27 +08:00 via iPhone
    我的解决方案是 Web Assembly,但是坑也一堆,今天看阿里好像出了个只用写 JSON 的前端低代码平台可以试试
    hddcpu
        15
    hddcpu  
       2021-07-28 01:41:17 +08:00 via Android
    等 blazor wasm 中
    g079708
        16
    g079708  
       2021-07-28 05:20:48 +08:00 via iPhone
    @SingeeKing 阿里这个叫啥名字
    dayeye2006199
        17
    dayeye2006199  
       2021-07-28 05:48:46 +08:00
    简单的需求,用后端框架+模板引擎 也差不多基本搞定了。
    稍微再复杂点,上点原生 JS 也差不多能搞定了。
    别想着天天写 SPA 上前端框架了。

    实在不想写 JS,激进点 - scala.js, clojurescript, ...
    beginor
        18
    beginor  
       2021-07-28 06:16:20 +08:00 via Android
    angular,全家桶就是香。
    musi
        19
    musi  
       2021-07-28 06:23:30 +08:00
    上 Vue,按照 Vue 的模板写,不会有太大的心智负担。
    一些冷门语法只能去 mdn 上查了
    奇葩封装没有文档的话无解,只能去看源码
    kensoz
        20
    kensoz  
       2021-07-28 07:50:10 +08:00
    wordpress,各种模板不香嘛
    Eyon
        21
    Eyon  
       2021-07-28 07:57:20 +08:00
    我的答案是:

    直接用 Vue 做一个项目,整个项目的那种
    darknoll
        22
    darknoll  
       2021-07-28 07:58:10 +08:00 via Android
    后端都会了,前端还不是分分钟的事
    murmur
        23
    murmur  
       2021-07-28 08:06:34 +08:00
    es6 可以不用,有些开发就是每个函数之前都 var self = this 。然后各种 self,也挺好

    不要拘泥于语法糖,能用库就库,比如闭包这些东西,不是有 bind 了么
    silencil
        24
    silencil  
       2021-07-28 08:10:22 +08:00 via iPhone
    我是看了 js 红宝书,然后根据需求直接搜解决方法,跟着写,现在基本用 vue 写前端大部分时候不需要搜索了,除了样式。
    silencil
        25
    silencil  
       2021-07-28 08:11:14 +08:00 via iPhone
    如果不想学前端,推荐一个谷歌出品的框架,vaddin 。哈哈,谁用谁知道
    maobukui
        26
    maobukui  
       2021-07-28 08:21:14 +08:00
    和楼主类似,花了些时间学了下 ios,做了个天气 app,学了下 react,做了个小图床

    图床: https://img.mengma021.com
    iamv2er
        27
    iamv2er  
       2021-07-28 08:49:10 +08:00 via iPhone
    vue 找个视频直接写 很快
    Imindzzz
        28
    Imindzzz  
       2021-07-28 09:16:10 +08:00   1
    @letking 比较同意。
    我觉得后端们学习一个新的领域要摆正心态,

    “前端这么简单,我应该看两眼就学会了嘛。这个写的这么 low,肯定是前端全都这么写” 这种心态不要有。

    你觉得是奇葩的写法那就去找更优的写法,又不是没有。
    Imindzzz
        29
    Imindzzz  
       2021-07-28 09:17:47 +08:00
    @darknoll 忘记加狗头了
    Maboroshii
        30
    Maboroshii  
       2021-07-28 09:19:32 +08:00
    js 感觉和后端差不多 ,if else for 循环就能搞定大部分需求了吧... 麻烦的是布局
    wellsc
        31
    wellsc  
       2021-07-28 09:20:14 +08:00
    @harde 求数据出处
    Yrobot
        32
    Yrobot  
       2021-07-28 09:30:13 +08:00 via Android
    前端又不仅仅是 js,还有 css 。想要快的实现,还是上框架得了,antd pro 啥的,自己往里加点简单业务逻辑就能用了。
    oppoic
        33
    oppoic  
       2021-07-28 09:33:18 +08:00
    5 年以上的码农,谁还不会点 jQuery 啊
    exploreexe
        34
    exploreexe  
       2021-07-28 09:35:51 +08:00
    难道只有我一个人觉得学前端最难的是 CSS 吗
    janxin
        35
    janxin  
       2021-07-28 09:45:11 +08:00 via iPhone
    jquery 一把梭
    bsulike
        36
    bsulike  
       2021-07-28 09:47:39 +08:00
    低代码的话,也可以看下百度开源的 amis
    PHPJit
        37
    PHPJit  
       2021-07-28 10:02:03 +08:00
    @exploreexe #34 +1
    x66
        38
    x66  
       2021-07-28 10:32:07 +08:00
    上低代码框架,推荐 amis
    murmur
        39
    murmur  
       2021-07-28 10:34:33 +08:00
    @exploreexe css 不会是模块和布局拆解不熟练,flex 布局+不需要 ie 可以解决以前老前端 80%的工作量

    最早的前端圆角都得自己贴图,现在 css 全搞定
    samin
        40
    samin  
       2021-07-28 10:34:57 +08:00
    @harde 我愿称之为组件化、模块化 (目的,让这位后端小伙伴打消念头)
    sudoy
        41
    sudoy  
       2021-07-28 10:44:13 +08:00
    我一直觉得 vue 好奇怪,明明是一个 js 框架,并且官方文档也写了 “官方指南假设你已了解关于 HTML 、CSS 和 Javascript 的中级知识...”,可是学完 js 去学 vue 各种不习惯
    luozejian
        42
    luozejian  
       2021-07-28 10:46:18 +08:00
    从 Angular 入手?
    murmur
        43
    murmur  
       2021-07-28 10:48:14 +08:00
    @sudoy vue 只是把 html css js 分三段放在一个文件里,css 单独拿出来 include 也可以,有什么不习惯

    都是模板引擎过来的人,还是太嫩
    simo
        44
    simo  
       2021-07-28 10:49:59 +08:00
    看大家推荐吧,我只是来吐槽前端的。
    搞过各种语言项目,在我学过的这些语言范围内,前端绝对是自己卷自己最猛的。虽然浏览器说不要你了,轰死一片,但杀伤力完全不如自己玩自己来得狠。
    在前端这片松散、自由、是个人都能生存的土壤上,刷 kpi 出来的东西就像比蟑螂还要多。
    piping
        45
    piping  
       2021-07-28 10:56:17 +08:00
    quasar 框架(基于 vue js), 强力推荐!!你想做的基本官网文档都能找到,大部分功能写一些 html 就能实现了,无论是做 SPA,Mobile Web, PWA, SSR 都很方便
    wangyzj
        46
    wangyzj  
       2021-07-28 11:38:54 +08:00
    vue
    Frytea
        47
    Frytea  
       2021-07-28 11:54:10 +08:00
    框架三千,只取一瓢饮
    inhal
        48
    inhal  
       2021-07-28 11:56:44 +08:00
    学 Svelte
    zhaol
        49
    zhaol  
       2021-07-28 12:00:59 +08:00
    接触过模版引擎的后端直接来 vue,上手应该很快,ui 框架 antd for vue 或者 elementUI
    micean
        50
    micean  
       2021-07-28 12:43:38 +08:00
    当然是直接上 jquery 啦,写起来快,改起来快,查起来也快
    charexcalibur
        51
    charexcalibur  
       2021-07-28 13:06:33 +08:00
    搞 vue admin,antd pro,把后端接口可视化配置,基本上就差不多了
    shintendo
        52
    shintendo  
       2021-07-28 13:16:17 +08:00
    楼上全是推荐这框架那框架的,楼主是要接触一些前端代码,当然代码用的什么框架就学什么框架
    zxCoder
        53
    zxCoder  
       2021-07-28 13:42:29 +08:00
    写 vue 吧,概念简单,语法就是一个类似 html 或者 xml 的结构,你如果熟悉 xml 和 html,应该很快的,尤其是 xml
    thtznet
        54
    thtznet  
       2021-07-28 13:45:29 +08:00
    后端要写前端?太好了,C#一把梭适合你。
    abcbuzhiming
        55
    abcbuzhiming  
       2021-07-28 14:00:35 +08:00
    js 有啥难度?直接堆代码就行,发现不对再去搜特性就好。前端的天坑是 CSS 好吧,这玩意,真前端都没几个真的搞的很明白的
    nexo
        56
    nexo  
       2021-07-28 14:04:51 +08:00
    同问 前端怎么快速学后端
    zoharSoul
        57
    zoharSoul  
       2021-07-28 14:19:30 +08:00
    建议踏踏实实的学, 这样最省时间
    libook
        58
    libook  
       2021-07-28 14:25:33 +08:00   4
    JS 的问题其实不是奇葩,而是一方面自己不理解 JS 的一些基本原理,另一方面是 JS 是极其灵活的一门语言,特别是语法和类型上,语言不负责对开发人员的代码质量进行约束,对开发人员的水平要求很高。这个是类似于 C/C++的,不能说看不懂调不通就是语言本身的问题,比如也有人说 Java 的注解是奇葩语法,C/C++/Rust 的宏是奇葩语法,C#的委托是奇葩语法,Go 的异常处理是奇葩语法,但这些其实都是先入为主的问题。

    后端知识比较成体系以及环环相扣,而前端知识非常分散,而且例外情况很多,这其实是与各技术栈受环境因素的影响程度来决定的,比如后端程序会跑在统一可控的环境中,前端程序会跑在不统一、不可控的环境中,所以造成了这种差异。

    所以要学习前端技术,难以有速成方法,需要见多识广。

    简单给几条学习建议 ,MDN 上关于 Web 基本原理、JS 、CSS 、HTML 、BOM 、DOM 的文档都看一遍,然后就是去看 vue 、react 、angular 等框架极其相关思想的文档。
    kingme
        59
    kingme  
       2021-07-28 15:42:39 +08:00
    精通的前端,从业 7 年,就没见过几个
    caoyouming
        60
    caoyouming  
       2021-07-28 16:09:24 +08:00
    vuetify 一个框架就够了
    breezeFP
        61
    breezeFP  
       2021-07-28 16:24:23 +08:00   3
    百度的 amis,基本不需要写前端
    BQsummer
        62
    BQsummer  
       2021-07-28 17:24:24 +08:00
    我最近也是因为前端资源不够,帮忙改前端的,以前会点 jquery,react 、vue 完全不会。发现基本改不动,推荐 https://fullstackopen.com/ 这个网站(这个网站也是在 v 站搜出来的),学完虽然还是有地方改不动(组件继承、嵌套,一个模态框嵌套了 4 层,完全不知道 props 里的一个参数是从哪传过来的),但是现在能看懂,稍微简单的页面能改了。
    konakona
        63
    konakona  
       2021-07-28 17:35:26 +08:00
    你别看 js 了,直接看 ts 吧,然后看下 ES5-ES11 新增的几个特性,目前一些新的框架一般都已经支持 ES11 了,老项目( 3-5 年之前)也一般有 ES5/6 的支持度。

    js 那德行我也不太行,直接跳过 jquery 时代吧!
    zone10
        64
    zone10  
       2021-07-28 17:36:17 +08:00
    说真的,js 还好, 用 es6 没那么恶心,css 才难倒你,需要记的东西太多了,都是经验,我觉得学个那种原子化的 ui 框架好一点,几乎 0 css
    justfun
        65
    justfun &nbp;
       2021-07-28 18:02:59 +08:00
    @breezeFP 看了下文档 真的简单到哭
    4BVL25L90W260T9U
        66
    4BVL25L90W260T9U  
       2021-07-28 18:27:14 +08:00
    TypeScript + React + tailwind 一把梭,相当好使。尤其要提下 tailwind,直接把我从 CSS 中解放出来了呀,不然我一个后端对 CSS 真是感觉按下葫芦起了瓢
    hedwi
        67
    hedwi  
       2021-07-28 20:56:36 +08:00
    angular 一把梭
    JustRuning
        68
    JustRuning  
       2021-07-28 21:44:12 +08:00
    早 hxAngular typescript 风格标准,再找个
    KMpAn8Obw1QhPoEP
        69
    KMpAn8Obw1QhPoEP  
       2021-07-28 22:11:45 +08:00 via Android
    @murmur 请教一下怎样练习布局拆解 尤其是要考虑自适应的那种
    initd
        70
    initd  
       2021-07-28 22:52:03 +08:00
    mdn 文档
    mdn.moz.one

    html 元素
    he.moz.one
    html 元素示例
    he.fib.one

    sololearn css js 课程
    solo.moz.one

    tailwind css
    tcss.moz.one

    vue3 CN
    v3c.moz.one

    Typescript
    mlts.moz.one

    vitejs
    vite.moz.one

    nuxtjs
    nuxt.moz.one
    murmur
        71
    murmur  
       2021-07-29 07:49:52 +08:00   1
    @enchilada2020 自适应有毒,除非你的页面经过特别的设计,比如苹果网站一张图一段字

    其余的时候最好做 2 套页面,不要考虑什么自适应
    murmur
        72
    murmur  
       2021-07-29 09:13:32 +08:00   1
    @enchilada2020 说的有点草了,自适应可以做,但是前提
    1 、自适应的规律必须明确的可以让需求用语言描述出来,比如哪个部位 4 列变 5 列,什么地方拉长,什么地方填充,不要让开发自己脑补
    2 、自适应后的效果必须至少你们自己能接受,尤其是简单的拉长、放大,你们自己都觉得丑怎么拿给用户看
    3 、必须能接受自适应带来的代价,为了适应各种屏幕宽度,还得保证清晰度,放到 pc 上现在至少要做 1920 的宽度,你们的美工干不

    综合几点,你就发现,在 pc 上,两边留白居中显示,也就是放弃挣扎是最简单的,手机上当然类似,放弃横屏简单缩放

    至于手机 pc 自适应,就是我刚才说的,除非你的布局非常简单,否则建议放弃,直接做两套

    如果还是不懂,你就打开手机淘宝和 pc 淘宝,去比较,仔细想,这俩玩意能通过做自适应无缝切换么??
    murmur
        73
    murmur  
       2021-07-29 09:16:49 +08:00   1
    @enchilada2020 我还是拿淘宝举例,你可以在 pc 上拖动他的页面,他是有最小宽度的,浏览器小于这个宽度就放弃挣扎了,从大到小,你可以发现他

    1 、推荐商品少了一列
    2 、少了一栏广告位
    3 、上面的链接因为放不下也少了几个

    1 很好理解,加长就可以了,少一列不影响内容数量
    2 就很严重了,首页的顶栏广告位直接少了一个,这就是曝光率和钱的问题,不是说做就能做的,这个就得让需求去排版了
    ChrisV5
        74
    ChrisV5  
       2021-07-29 16:41:49 +08:00
    直接 react + bootstrap
    bluehammer2019
        75
    bluehammer2019  
       2021-07-30 07:40:25 +08:00 via iPhone
    没人用 layui ?
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     2541 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 30ms UTC 01:58 PVG 09:58 LAX 18:58 JFK 21:58
    Do have faith in what you're doing.
    ubao snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86