作为一个后端,写前端好难,怎么写好前端? - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
请不要在回答技术问题时复制粘贴 AI 生成的内容
Caojx
V2EX    程序员

作为一个后端,写前端好难,怎么写好前端?

  •  
  •   Caojx 2019-05-03 09:21:09 +08:00 13454 次点击
    这是一个创建于 2357 天前的主题,其中的信息可能已经有所发展或是发生改变。

    html+css 的布局都觉得好难,还有好多的样式,记不住,最近又要写小程序,布局我都不会

    91 条回复    2019-05-07 17:56:09 +08:00
    q8164305
        1
    q8164305  
       2019-05-03 09:23:22 +08:00 via Android   1
    那就找个前端
    chwech
        2
    chwech  
       2019-05-03 09:28:27 +08:00 via iPhone
    后端为啥要写前端
    licoycn
        3
    licoycn  
       2019-05-03 09:29:29 +08:00
    表示前后通吃
    Caojx
        4
    Caojx  
    OP
       2019-05-03 09:29:57 +08:00
    @chwech 公司人手不够,后端也要做前端的活
    Caojx
        5
    Caojx  
    OP
       2019-05-03 09:30:37 +08:00
    @licoycn 有什么学习心得,这个布局我都写不出来,
    lhx2008
        6
    lhx2008  
       2019-05-03 09:32:27 +08:00   3
    lhx2008
        7
    lhx2008  
       2019-05-03 09:33:11 +08:00
    而且用框架可以自动支持响应式
    MiRECoFu
        8
    MiRECoFu  
       2019-05-03 09:34:39 +08:00 via Android
    感觉现如今布局掌握 flex 就基本够用了?小程序也基本都用 flex 布局
    Caojx
        9
    Caojx  
    OP
       2019-05-03 09:35:36 +08:00
    @lhx2008 我写 css 好痛苦啊
    Caojx
        10
    Caojx  
    OP
       2019-05-03 09:36:24 +08:00
    @MiRECoFu 学习下,一周写出一个小程序吗
    lhx2008
        11
    lhx2008  
       2019-05-03 09:41:13 +08:00 via Android
    @Caojx 把框架的布局部分的 css 引进去就行了
    zy445566
        12
    zy445566  
       2019-05-03 09:43:18 +08:00 via Android
    我原来是后端,现在在公司做前端。

    其实 css 记住一个选择器就行,其实这个有点像后端的正则表达式,只不过正则表达式是匹配字符串,选择器是匹配元素。后面写其实就百度或谷歌了,记住基本的 margin 和 padding 区别和学下布局就 OK。

    HTML 语义化都设计的很好,现在 CSS 框架又多比如 anti 和 element 和 bootstrap,多查查应该是不难的。

    最后就是 js 框架问题,就看你是否用 jq 还是现代框架了,jq 其实就是个 js 版本的 CSS 选择器,主要是操控元素。而 vue 或 ng 或 react 则是通过改变数据,使得元素改变,熟悉 js 应该秒上手。

    写了前端我倒觉得前端比后端至少方便 2 倍,bug 的不确定性也低至少 2 倍,至少我现在下班时间是可以做到准点了。
    enaxm
        13
    enaxm  
       2019-05-03 09:43:27 +08:00
    不要写前端。。。学会甩锅
    Nimrod
        14
    Nimrod  
       2019-05-03 09:45:26 +08:00 via Android
    后端写前端直接套 bootstrap?
    Caojx
        15
    Caojx  
    OP
       2019-05-03 09:46:42 +08:00
    @enaxm 锅子已经在手里了,甩不出去了
    Caojx
        16
    Caojx  
    OP
       2019-05-03 09:47:20 +08:00
    @Nimrod bootstrap 写后台可以,前台难看的
    Caojx
        17
    Caojx  
    OP
       2019-05-03 09:48:17 +08:00
    @zy445566 我也是想转前端,感觉现在前端很丰富,但是现在我已经卡在布局了
    J0G57faC6uPo75W0
        18
    J0G57faC6uPo75W0  
       2019-05-03 09:57:26 +08:00 via Android   2
    不怪你,css 是世界上最难的语言。。
    ksedz
        19
    ksedz  
       2019-05-03 10:00:30 +08:00   1
    我是通过不断模仿已有已有页面来学前端的,效果还挺好
    https://github.com/shapled/csspro
    https://juejin.im/post/5cc111a5f265da036023b4a4
    ecrazy
        20
    ecrazy  
       2019-05-03 10:18:20 +08:00 via iPhone
    抄页面啊
    Caojx
        21
    Caojx  
    OP
       2019-05-03 10:36:36 +08:00
    设计图是不是靠 ps 切图啊
    hpj
        22
    hpj  
       2019-05-03 11:03:39 +08:00
    等你学会前端,你就成功晋级全栈了!
    leafre
        23
    leafre  
       2019-05-03 11:11:58 +08:00
    用框架,反正 CSS 我是不会写的
    qianmeng
        24
    qianmeng  
       2019-05-03 11:15:51 +08:00 via Android
    用了你就知道 css 用起来真爽
    Caojx
        25
    Caojx  
    OP
       2019-05-03 11:28:02 +08:00
    @hpj 没办法,公司要求会前端,额,头疼
    shuax
        26
    shuax  
       2019-05-03 11:31:04 +08:00
    直接用现成框架
    weixiangzhe
        27
    weixiangzhe  
       2019-05-03 11:46:47 +08:00 via iPhone
    可以看看 张鑫旭 老哥的博客 css 相关的内容很多
    hpj
        28
    hpj  
       2019-05-03 11:54:06 +08:00
    @Caojx 只要钱到位了,就当作是一个提升自己能力的机会。
    Foreverdxa
        29
    Foreverdxa  
       2019-05-03 12:01:05 +08:00
    还是要多联系吧,css 基础最好全部过一遍,有笔记整理没事复习一下,然后就是练习,熟能生巧(我搞单片机的,不过也在学习呢,布局页面一点小东西,我往往调半天,还是没有掌握到精髓。。。)
    Eugene1024
        30
    Eugene1024  
       2019-05-03 12:11:16 +08:00
    没啥诀窍,多花点时间
    zhuzhibin
        31
    zhuzhibin  
       2019-05-03 12:16:58 +08:00
    我是后端 但是这几个月都在跟前端的项目 当然接口也要写 一开始我也跟你差不多 其实用心去看一下 flex 布局其实很简单的 撸写页面很容易上手的
    Huelse
        32
    Huelse  
       2019-05-03 12:21:25 +08:00
    viWww0vvxmolvY5p
        33
    viWww0vvxmolvY5p  
       2019-05-03 12:24:45 +08:00 via Android
    我也是这么觉得,前端忒费时间了,学的东西又记不住
    mzsongyan
        34
    mzsongyan  
       2019-05-03 12:38:38 +08:00 via Android
    会前端的后端,感觉 css 不难
    luozic
        35
    luozic  
       2019-05-03 12:55:00 +08:00 via iPhone
    兼容和效果问题 为啥要兼容那么多,需要兼容这么多 还兼职个 JB
    mumbler
        36
    mumbler  
       2019-05-03 13:00:41 +08:00
    你的后端技术是在哪培训的?
    youyaang
        37
    youyaang  
       2019-05-03 13:10:24 +08:00
    组件化开发,可以了解下 https://ice.work/的整套解决方案
    fcoolish
        38
    fcoolish  
       2019-05-03 13:11:29 +08:00
    同感觉,以前我也得写,没系统的学过,写写 ajax 还行,布局调样式真心难受。
    还好换了家公司专心写后端。
    gy134340
        39
    gy134340  
       2019-05-03 13:13:13 +08:00
    practice
    glfpes
        40
    glfpes  
       2019-05-03 13:14:00 +08:00 via Android
    我用的 antdesign,很适合不会前端的后端去写内部系统能用的前端。
    kingsleydon
        41
    kingsleydon  
       2019-05-03 13:34:49 +08:00
    flex 一把梭完事
    6260628
        42
    6260628  
       2019-05-03 13:37:13 +08:00 via iPhone
    前端对后端也这么认为
    Mutoo
        43
    Mutoo  
       2019-05-03 13:43:08 +08:00
    后端的平台是服务器,选一个发行版即可。
    前端的平台是浏览器,各种各样的兼容性问题,而且控制权还不在你手上。
    gramyang
        44
    gramyang  
       2019-05-03 13:47:52 +08:00 via Android
    前端不难,前端主要是很麻烦,很多 api 要记,很多特性和坑要踩
    python30
        45
    python30  
       2019-05-03 13:54:17 +08:00
    说好听点可以仿啊
    不好听。。。直接另存为,套上就可以
    我就是这样前后端通吃了
    zjsxwc
        46
    zjsxwc  
       2019-05-03 13:58:27 +08:00
    楼主的问题只是调样式

    那么推荐用 DreamWeaver 这类软件拖 bootstrap 搞样式一把梭

    JS 对应后端来说都不是问题
    demonzoo
        47
    demonzoo  
       2019-05-03 14:05:41 +08:00
    @Tomotoes CSS 是世界最难的语言?那前端岂不是世界上最聪明的程序员?
    1002149271
        48
    1002149271  
       2019-05-03 14:08:23 +08:00 via Android
    @python30 兄弟握手
    zqx
        49
    zqx  
       2019-05-03 14:29:01 +08:00 via Android
    js 对后端很是问题,js 和所有面向对象语言的底层原理都不同,相当于 java 和汇编的区别那么大。
    danjk159
        50
    danjk159  
       2019-05-03 14:32:11 +08:00
    android 前端我写得很习惯,后台也会,但是网页前端,超级讨厌,我有个朋友,前端写得好,ios 开发也会,但是后台,超级讨厌.不要做自己不合适或不喜欢的事情,那样只会给自己挖坑罢了
    rb6221
        51
    rb6221  
       2019-05-03 14:41:28 +08:00 via iPhone
    各种抄,用第三方库
    其实和后端一样,纯自己完整实现的东西很少,只不过后端可以抄的就是那几家(比如 java 的 spring 系),前端可抄的无数(因为每天都有新的 ui 被设计出来)。
    abcbuzhiming
        52
    abcbuzhiming  
       2019-05-03 14:41:52 +08:00   1
    @Tomotoes CSS 不是难,它的思维方式不是逻辑方式,而是查表方式,需要背组合,这也是为啥很多后端程序员面对前端无所适从的原因。后端程序说对前端搞不定,其实就是死在对 CSS 的理解上,CSS 不能作为“编程语言”去思考
    learnshare
        53
    learnshare  
       2019-05-03 14:46:47 +08:00
    Bootstrap 比较合适
    Caojx
        54
    Caojx  
    OP
       2019-05-03 14:47:22 +08:00
    写前端 html+css 的时候,特别是页面布局各种懵逼,写 js 还好
    sannyzeng
        55
    sannyzeng  
       2019-05-03 15:31:40 +08:00
    一个前端表示,后端怎么要学那么多东西。。。
    EvilCult
        56
    EvilCult  
       2019-05-03 16:16:01 +08:00 via iPhone
    后端表示:前端实在是太好玩了,react 写起来舒服的不要不要的…………恨自己当初入错行
    stevexu
        57
    stevexu  
       2019-05-03 17:00:13 +08:00
    请把学习 c++ 的热情学习 css,学不好才怪
    zy445566
        58
    zy445566  
       2019-05-03 17:21:12 +08:00 via Android
    @Caojx 布局慢慢谷歌也还好,前后端都会,我觉得还挺有优势的
    zjsxwc
        59
    zjsxwc  
       2019-05-03 17:22:44 +08:00
    @zjsxwc #46

    写了个使用 DW 的例子 https://segmentfault.com/a/1190000019061266
    iszengmh
        60
    iszengmh  
       2019-05-03 18:21:38 +08:00 via Android
    不是框架模板,你不会连基础都没有吧
    rrfeng
        61
    rrfeng  
       2019-05-03 18:39:49 +08:00
    后端写前端请用 angular,然后选个合适的 UI 框架
    BaiLinfeng
        62
    BaiLinfeng  
       2019-05-03 18:41:23 +08:00
    整准备入坑前端忐忑。。
    ppwangs
        63
    ppwangs  
       2019-05-03 18:44:06 +08:00
    写过一段时间 css,感觉挺有意思的
    crackhopper
        64
    crackhopper  
       2019-05-03 19:06:28 +08:00   3
    从基本概念上理解了,问题也就容易搞定了吧。
    css 主要就几个:inline 和 block 模型,文档流和 float,优先级计算,flex 布局确实可以学一下比较简单能解决很多问题。
    html 那种东西就是个数据承载体,知道个 DOM 常用操作,事件的 bubble 之类的流程也差不多了,其实都是浏览器的规范。
    js 貌似也没什么很难的点,反正基本都是异步封装了,后台不也是异步来写么,感觉一样的道理。

    要说难一点的,也就是适配(其实只要你写代码多动脑子,布局多用百分比,合理应用 margin 和 padding 等 css 属性,基本不会出什么问题);优化 SEO 和首屏速度(基本就是 SSR,也是后端的,还有买 CDN,对象存储);

    3D 还算有点难,不过也就那样了,一堆封装好的引擎,把变换、相机、光照、材质什么的都构建好了,所以也没多难;很多也做不到写 shader 的程度。

    说起来后台也没什么特别难的,基本上数据库优化好,性能问题都比较少。也就基础架构会难一些吧,主要是对业务的理解和对各种后台服务特性的了解。不过前端做底层也比较难。做业务嘛,前后端都不难。
    reus
        65
    reus  
       2019-05-03 19:36:08 +08:00
    如果你没学过,说明你懒
    如果你没学会,说明你傻
    Actrace
        66
    Actrace  
       2019-05-03 21:22:55 +08:00
    这一套东西很适合后端切入到前端,楼主有兴趣可以看看。
    bootstrap4 的中文文档,和一个模块化前端组件。
    https://github.com/tmplink
    U2Fsd
        67
    U2Fsd  
       2019-05-03 21:25:02 +08:00
    @zy445566

    现在流行 Flex 布局了
    yifeng1212
        68
    yifeng1212  
       2019-05-03 21:44:03 +08:00
    后端为什么写前端?术业有专攻呀,这样效率低
    ibugeek
        69
    ibugeek  
       2019-05-03 21:58:43 +08:00
    兼容 ie8
    chuhemiao
        70
    chuhemiao  
       2019-05-03 22:57:02 +08:00
    nuxt+vue+iview
    llbbzh
        71
    llbbzh  
       2019-05-03 23:47:55 +08:00   1
    强烈推荐使用 Bootstrap 4
    然后拿这个 argon 设计系统(其实就是一个写得漂亮的模板)来改一改: https://github.com/creativetimofficial/argon-design-system#demo
    xpresslink
        72
    xpresslink  
       2019-05-04 00:00:14 +08:00
    一般来说做服务后端的人也要多少明白一些前端基础的东西。不然前端接口设计之类会迷糊,和前端撕逼时候很吃亏。
    再说相对于后端技术而言,前端入门要容易多了,主要因为学习的内容比较少。主要就是三部分:HTML 组件,CSS 样式,JS 逻辑。
    最容易就学个 bootstrap,主要是成熟,网上现成的例子不要太多,大部分需求只要复制粘贴改改变量名子。把 jquery 和 ajax 弄明白了,90%的前端需求就都能搞定了。
    allen945
        73
    allen945  
       2019-05-04 00:21:30 +08:00
    现在有很多 UI 库,直接用就 OK 了,一把梭~https://webjike.com/web.html#row-8
    Raisu
        74
    Raisu  
       2019-05-04 00:27:56 +08:00
    百度术前端学院?免费的大概就之个水平了
    autogen
        75
    autogen  
       2019-05-04 01:13:43 +08:00
    窍门就是,别管一大堆前端框架,一种用熟了一直用到底
    KasuganoSoras
        76
    KasuganoSoras  
       2019-05-04 01:19:39 +08:00
    一头秀发进前端,一顶光头带回家。
    bootstrap 大法好,jquery 顶呱呱。
    学完还有 Vue,React 来一发。
    还要兼容 IE 6,项目经理打死他。
    一个文档查半天,论坛百度问贴吧。
    最后套一套模板,网站前端做好啦。

    yuekcc
        77
    yuekcc  
       2019-05-04 02:25:39 +08:00
    首先推荐 bootstrap 大法,然后上 react,最后开启新世纪之门。前端娱乐圈欢迎你。
    avenger
        78
    avenger  
       2019-05-04 06:28:13 +08:00 via iPhone
    liuxue
        79
    liuxue  
       2019-05-04 07:50:50 +08:00
    我就是写前端的,如果是着急的话还是用框架吧。不然兼容性,响应式的问题就够头疼了。
    lenling
        80
    lenling  
       2019-05-04 08:17:48 +08:00   1
    https://www.layui.com/ 前后通用,非常方便
    zgl263885
        81
    zgl263885  
       2019-05-04 09:01:26 +08:00 via iPhone
    其实实现特定功能,学起来也没有特别难,但是要想做漂亮,有用户体验,真需要有相关经验(设计,美工,前端,这些也是有一些章法的,比如排版,比如配色,比如交互等)才行,否则真就是完成功能而已,只能指哪打哪。如果用户是企业内部使用还好,面相搜索引擎,只要实现功能就可以。但如果互联网应用,前端最好还是专人负责好些,实在不行外包出去吧。
    suzic
        82
    suzic  
       2019-05-04 09:03:39 +08:00 via Android
    学会 flex 和 grid 足够了
    kljsandjb
        83
    kljsandjb  
       2019-05-04 09:05:00 +08:00 via iPhone
    从模仿开始学起就好了,框架选好,反正你也只是用用能做出东西,不用死磕的就不死磕了,我就是这样对前端本无兴趣,纯粹为了做而做
    kljsandjb
        84
    kljsandjb  
       2019-05-04 09:06:57 +08:00 via iPhone
    @yuekcc #77 同意,coursera 上港科技有门前端课程,跟着课程的前两部分:1. bootstrap 4 ; 2. react 相关。

    你基本就能开搞了,其实你可以一边学一边开搞,很快的!
    eagleweb
        85
    eagleweb  
       2019-05-04 10:52:27 +08:00 via Android
    首先我相信你是会 HTML 的。
    可能 css 对你来说陌生了点,但是并没有关系,你可以用框架,把最终的重点放在 HTML 和效果上。
    至于 Javascript,因该是前端最难的一部分,你不要急着去为了适应你项目的某些需求(前后端分离之类的)去学习某些难学的框架,更不要低估了某些 JS 工具库,十二楼说的 jQuery 只是一个 JS 版的 css 选择器是完全不对的,jQuery 生态非常强大,用处非常广泛,只是有些古老了。
    别听他们的什么“先学 JS 框架”“ JS 框架都是有 JS 基础秒上手的”之类的话,根本不是那样,你作为一名后端,开发思维与前端肯定不一样,要进阶全栈工程师需要时间与毅力,而不是他们说的那样简单。
    (若有错误,麻烦指出)
    cookey39
        86
    cookey39  
       2019-05-04 11:54:34 +08:00 via Android
    术业有专攻楼主,但只要钱给够了弄几个开源框架拼一个也行
    lozzow
        87
    lozzow  
       2019-05-04 13:03:03 +08:00 via iPhone
    Vue+iview 一把梭
    coderY
        88
    coderY  
       2019-05-05 09:00:23 +08:00
    基本的 CSS 布局,position,display,float 这三个属性算是难点和重点,好好看下这些属性的原理,推荐《 CSS 权威指南》里面各个属性讲的很透彻。其实 CSS 不难,主要是不重视,没有去深入理解
    whevether
        89
    whevether  
       2019-05-05 09:18:14 +08:00
    @Caojx css 比 js 难多了
    hyy1995
        90
    hyy1995  
       2019-05-06 11:29:06 +08:00
    css+html 不难,静下心来不到半个月就能会 70~80%,足够写页面,剩下的一些就需要工作中积累了,一次性背的话是背不住的。。。前端后端,其实难点都在于业务逻辑和框架使用上了
    AutumnVerse
        91
    AutumnVerse  
       2019-05-07 17:56:09 +08:00
    绝对定位一把梭,什么,你看着乱了?你换 xxx 手机看看
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     1529 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 92ms UTC 16:38 PVG 00:38 LAX 09:38 JFK 12:38
    Do have faith in what you're doing.
    ubao msn 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