前后端分离开发,前端怎么保存没有和后端交互的纯前端界面

[bronana]

如果说前端自己先把前端页面写完,最后再对接接口套数据,这时候是能够保存前端页面的.

不过大多数时候,不是要把页面都写完才开始套接口,而是边写页面边套接口.

所以这样最后想要看静态效果的时候,由于已经套了接口, 如果没有起后端服务,前端就各种 network 5xx 错误,看到的就可能是一片空白.

作为一个前端开发人员,你可能也想要保留工作中的纯前端静态页面去当做面试作品给别人看吧. 但是由于套了接口,这些前端文件就和后端强行绑定了.就不太好去给别人展示了.

有什么办法能边写前端边保留前端静态页面?

[putaozhenhaochi]

mock ?

[Puteulanus]

mock 个 API ，或者在 http 请求库上拦截进行 mock 吧

[Jaufey]

用 firebase 呀

[GoCoV2]

我有一个关于用 mock 的疑问：假设有两个接口 A 和 B ，前端 mock 了 A 和 B ，已开发完；后端刚开发完 A ，若此时想先联调 A ，同时 B 依旧使用 mock 接口，该如何操作？有没有大佬能提供个方案。

[ChefIsAwesome]

举例子，你在 pageA.js 里写页面代码，需要获取数据。
不要在 pageA.js 里直接请求后端。而是把请求的代码写到另一个文件，api.js 里，提供接口给 pageA.js 用。
这样一来，对 pageA.js 来讲，api.js 里如何请求后端，它并不关心。api.js 就算没有请求后端，直接生成数据，对 pageA.js 来讲，也没有区别。

[xuanzizhe]

@GoCoV2 看你 mock 数据的方式吧，如果通过前端直接拦截 XHR 或 fetch 异步请求这种方式，比如 Mockjs ，你一般会写 Mock.mock 来决定拦截哪些请求，不走 mock 的接口开发的时候注释掉就可以了；如果是 YAPI 之类的提供 mock 接口服务的形式，一般都会使用 DevServer 设置 proxy 代理转发来解决跨域的问题，proxy 里的 target 是可以设置不同 url 地址的，不同的接口不同的地址就可以了。不知道你的使用环境具体情况是怎样的了~

[GoCoV2]

@xuanzizhe 多谢！我试试配 proxy

[noobMing]

如果不想改代码的话可以试试这个 chrome 插件：Webrecorder ArchiveWeb.page ，可以完整的录制网页的操作流程，并且是可以点击的状态