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

自学前端的时候,关于联调的知识要怎么学

  •  
  •   godbasin ·
    godbasin · 2021-12-03 10:07:14 +08:00 · 4316 次点击
    这是一个创建于 1122 天前的主题,其中的信息可能已经有所发展或是发生改变。

    之前有小伙伴问我,前端自学的时候学会了写页面,但是还是距离很多公司要求的“来了直接干活”有点距离,问关于登录态管理、前后端联调的知识要去了解哪些。 我想了下,这块内容的确网上比较少,所以就简单整理了下,包括 HTTP 请求相关的,还有我们工作中经常会说到的代理配置、接口定义等等,还有前端编写异步请求、自学的时候怎么练习等等。 视频地址: https://www.bilibili.com/video/BV1dq4y1B7jn/

    30 条回复    2021-12-03 23:24:29 +08:00
    zcf0508
        1
    zcf0508  
       2021-12-03 10:09:53 +08:00 via Android
    mock.js 模拟后端返回结果
    phub2020
        2
    phub2020  
       2021-12-03 10:11:45 +08:00
    mock 正解
    di1012
        3
    di1012  
       2021-12-03 10:17:48 +08:00
    还好我是写后端的,学 vue 的时候自己造数据
    godbasin
        4
    godbasin  
    OP
       2021-12-03 10:21:35 +08:00
    mock 只是一个点,对于自学前端的人来说,如果没有前后端配合的经验,对于整个前后端联调到底是指什么、要做什么、要学什么的都是很迷茫的,我以前自己学的时候也是哈哈
    SakuraPGH
        5
    SakuraPGH  
       2021-12-03 10:24:43 +08:00
    学会看接口文档和学会要接接口文档 (
    PerFectTime
        6
    PerFectTime  
       2021-12-03 10:25:45 +08:00   ❤️ 4
    联调吗?就是前后端口口相传啊 (doge
    debuggerx
        7
    debuggerx  
       2021-12-03 10:28:03 +08:00
    没事自己写写后端 在一个小项目中打通整个流程 之后就了然了
    整体流程包括:需求分析-产品原型设计-技术选型-前端页面拆分(既然主要是前端视角,那么可以把这一步提前放在这里)-数据库建模-后端接口设计-代码编写-接口对接-项目部署和监控
    能把这一套完整搞完八成以上的中小厂工作就没啥问题了
    看上去又多又杂又难 但只要有毅力 方法对 一两个月也就差不多了 关键是带着兴趣去弄 多看多学多思考 不要过分陷入细节
    javon
        8
    javon  
       2021-12-03 10:31:16 +08:00
    html 基础吧,比如 div 、css 之类的,icon 以及图片的日常处理,比如图片要 base64 存入 html 里面之类的,页面字体的加载与使用.

    然后是 js 基础,之后是 JQ 之类的,然后是框架 比如 vue 啥的

    后端造数据我觉得不难,都是标准 json,或者也就是数据是加密的,你需要根据加密方式写个解密的部分,每次拿到数据进行解密的对称加密算法.

    其他的感觉没有了....
    libook
        9
    libook  
       2021-12-03 10:34:03 +08:00
    这是经验,是需要实践的,不同团队工作流程不一样,联调的细节也可能是不一样的。

    我个人倾向于前后端彻底解耦,开发前前后端商定 API ,然后各自根据商定好的 API 来进行开发和测试,最终合一下就好了,商定 API 的过程中能覆盖多少细节,就看前后端开发人员的经验,一般磨合几个月就差不多了。

    在此基础上,前端方面就是有一套基于既定 API 开发和测试方法,比如用哪些工具。
    dfkjgklfdjg
        10
    dfkjgklfdjg  
       2021-12-03 10:37:48 +08:00
    mockjs 调试接口数据和页面内容展示,
    在此基础上你可以使用 mock 数据生成接口文档,这个接口文档就是大部分前后端联调的关键所在。
    口口相传大部分时间并没有文档来的效率高,虽然大部分公司如果不是跨部门都是直接喊....
    Jooooooooo
        11
    Jooooooooo  
       2021-12-03 10:41:16 +08:00
    这是要和公司工具紧密结合的, 公司工具做的好联调就轻松.
    tediorelee
        12
    tediorelee  
       2021-12-03 11:09:37 +08:00
    群主🤣
    wa143825
        13
    wa143825  
       2021-12-03 11:45:03 +08:00
    我刚学的时候,接口是什么概念都不知道,几个月都搞不懂,同学带了我一下,一两天就明白了
    Justin13
        14
    Justin13  
       2021-12-03 13:43:32 +08:00 via Android
    4 年了,从来没有联调过。。。
    godbasin
        15
    godbasin  
    OP
       2021-12-03 14:22:17 +08:00
    @Justin13 哇,全干工程师吗??
    godbasin
        16
    godbasin  
    OP
       2021-12-03 14:22:36 +08:00
    @wa143825 是呀,就是得有人点一下就好了的
    godbasin
        17
    godbasin  
    OP
       2021-12-03 14:22:49 +08:00
    @tediorelee 你怎么也来划水了
    MonkeyD1
        18
    MonkeyD1  
       2021-12-03 14:25:07 +08:00
    昨晚刚看了你呢视频
    qrobot
        19
    qrobot  
       2021-12-03 14:39:02 +08:00
    @godbasin 如果你真的想系统的学习一下前后端联调。 那么我建议你看看 http 协议 和 websocket 协议

    大部分常见的协议就是这些 http and websocket.

    如果你 http 协议基础很牢固,那么所谓的

    ``
    代理配置、接口定义等等,还有前端编写异步请求
    ```

    所谓的这些基本上就不是问题了。


    什么叫做前端 or 后端, 这种区分是非常不合理的。

    例如在前端中的 webassembly 就需熟悉 rust or 其他, webgl 就需要学习 C or C++.

    例如 webpack vite ...,就需要 go rust or nodejs ....
    Desiree
        20
    Desiree  
       2021-12-03 14:47:52 +08:00
    既然是这样,为什么不把后端也学了?后端很难吗
    shengchao
        21
    shengchao  
       2021-12-03 14:50:13 +08:00
    晚上找免费的 api
    thetbw
        22
    thetbw  
       2021-12-03 14:59:19 +08:00
    github 上找项目,后端直接起,然后自己写前端?
    pengtdyd
        23
    pengtdyd  
       2021-12-03 16:19:59 +08:00
    mock 正解
    liuchengfeng1
        24
    liuchengfeng1  
       2021-12-03 16:30:10 +08:00
    我学的时候,为了造接口数据,又去学了 php
    hhyygg
        25
    hhyygg  
       2021-12-03 17:09:34 +08:00
    前端要会 Mock 模拟 API 接口返回数据、会读 API 文档、可以了解一下 REST 规范
    caooooooooo
        26
    caooooooooo  
       2021-12-03 17:48:01 +08:00
    用 strapi 这个无头的 cms 框架 不用写代码 node 环境就可直接用
    Renco
        27
    Renco  
       2021-12-03 17:57:36 +08:00
    怎么说呢,感觉比起自己一个人鼓捣,可能实际工作联调后才会更清晰。虽然有公司要求的“来了直接干活”这个限定狠蛋疼。
    Renco
        28
    Renco  
       2021-12-03 17:58:15 +08:00
    其实大多数感觉是工作遇到问题 然后去解决问题,然后掌握了这些知识。
    violetlai
        29
    violetlai  
       2021-12-03 18:00:14 +08:00
    用 express 简单写几个接口 或者 网上有模拟 api 的网站类似于 dog api cat api 这些
    Charrlles
        30
    Charrlles  
       2021-12-03 23:24:29 +08:00 via iPhone
    上 GitHub 找个后端项目,比如网易云什么的,用那些接口写一下前端就知道了。联调的意思基本上就是,前端传参有没有问题,后端返回的数据类型和结构是不是和文档一样,报错有哪几种情况之类之类的,就是一个协作调试的过程,没什么神奇的
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2457 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 02:38 · PVG 10:38 · LAX 18:38 · JFK 21:38
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.