1.页面右击选择【检查】或者打开谷歌开发者模式
2.选择【NetWork】,重新刷新页面
3. 选择XHR  全称(xmlhttprequest),后,下面会有地址列表;查看页面的数据是从页面渲染的数据还是通过后端api接口获取的
4.左侧点击第一个链接,右侧,点击Preview(预览模式),如果显示页面的数据,说明页面渲染的数据通过后端api接口获取的
5.点击【All】查看看html源码,左侧点击访问的域名(一般是第一个),右侧点击Response,都是一些html源码,没有页面上的数据。

这里拿仿小米商城慕课网进行演示

一、前后端分离网站

1. 开发者模式_上路

在这里插入图片描述

2. 选择【NetWork】,重新刷新页面

在这里插入图片描述

3. 页面数据判断

选择XHR 全称(xmlhttprequest),后,下面会有地址列表;查看页面的数据是从页面渲染的还是通过后端api接口获取的
在这里插入图片描述

4. Preview模式显真伪

在这里插入图片描述

5. 源码深入

在这里插入图片描述

得出结论:
页面的数据是通过调用后端api接口返回的数据,后端返回的json数据,前端拿到这些数据,渲染到页面上

这种网站:属于前后端分离的架构

二、非前后端分离网站

1. 开发者模式_上路

在这里插入图片描述

2. 选择【NetWork】,重新刷新页面

在这里插入图片描述

3. 页面数据判断

选择XHR 全称(xmlhttprequest),后,下面会有地址列表;查看页面的数据是从页面渲染的还是通过后端api接口获取的?
在这里插入图片描述

4. Preview模式显真伪

在这里插入图片描述

5. 源码深入

在这里插入图片描述
在这里插入图片描述

得出结论:
页面的数据是都写到了html中

这种网站:不属于前后端分离的架构

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐