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

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

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

    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 我也是想转前端,感觉现在前端很丰富,但是现在我已经卡在布局了
    Tomotoes
        18
    Tomotoes  
       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
    mway
        33
    mway  
       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 开发也会,但是后台,超级讨厌.不要做自己不合适或不喜欢的事情,那样只会给自己挖坑罢了
    janus77
        51
    janus77  
       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%,足够写页面,剩下的一些就需要工作中积累了,一次性背的话是背不住的。。。前端后端,其实难点都在于业务逻辑和框架使用上了
    jiangwei2222
        91
    jiangwei2222  
       2019-05-07 17:56:09 +08:00
    绝对定位一把梭,什么,你看着乱了?你换 xxx 手机看看
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3377 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 34ms · UTC 11:20 · PVG 19:20 · LAX 04:20 · JFK 07:20
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.