怎样判断一个网站是不是前后端分离的?

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中

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

已标记关键词 清除标记
<div> 适用人群 <p> Java开发人员,Vue开发人员,前后分离开发人员,权限管理和配置开发人员 </p> </div> <div> 课程概述 <div style="color:#666666;"> 【讲师介绍】<br /> 讲师职称:<br />               现某知名大型互联网公司资深架构师,技术总监,职业规划师,首席面试官,曾在某上市培训机构,高校任教多年。<br />             Array(Array老师)10多年互联网公司实战经验,知名的大型互联网公司的架构师,高管等职,在企业长期从事于技术的源码阅读和新技术的研究;擅长于职业规划,面试辅导,从事面试官多年;擅长于JAVA,人工智能AI应用,Xmind等等,曾服役于国内某上市培训机构数年,独特的培训思路,培训体系,培训方式,实践的职场技能,职场现状,职场晋升等让你快速适应企业职场的所需。 <br /> 【课程介绍】<br /> 技术选型<br /> 开发环境:Eclipse/Idea ,JDK 1.8以上 <br /> 后技术<br /> 核心框架:SpringBoot2.x框架系列(同样适用Springcloud F版本以后的版本),如下(节选):    <br /> 持久层框架:MyBatis 3.x + Mybatis-plus 3.x<br /> 日志管理:SLF4J 1.7 + Log4j2 2.7<br /> 工具类:Apache Commons、Jackson 、fastjson、Gson<br /> 权限验证<br /> 前技术  <br /> Vue  <br /> Vue-cli<br /> ElementUI ---https://element.eleme.io/<br /> JSX (JavaScript Xml)<br /> 前台的权限验证和路由设置<br /> 开发模式  <br />      前后分离的开发<br /> 数据库 <br />       Mysql5<br /> IDE<br />     Intellij Idea </div> </div>
相关推荐
<div style="color:#444444;"> 适用人群 <p style="color:#666666;"> 所有的IT从业者,尤其适合快速掌握新技术,快速增长工作经验人群,对教育公平,教育公益,教育爱心公益人士 </p> </div> <p> </p> 课程概述 <p> 该互联网实战项目是基于 Spring Boot 2+ SpringSecurity5+Element UI+Vue Admin Template+蚂蚁可视化AntV 等技术栈开发的项目,采用分布式,多模块,前后分离开发。包括图形展示、权限管理、用户管理等功能。<br /> 【后技术】<br /> 技术 说明<br /> Spring Boot2 MVC框架 开发的一站式解决方案<br /> Spring Security5  认证和授权框架<br /> MyBatisPlus3.3.1  基于 MyBatis 框架的快速研发框架<br /> MyBatisCode工具 生成 MyBatis 相关代码<br /> Jackson 提供了处理 JSON 数据的工具<br /> Lombok 简化对象封装工具 <br /> Druid   数据库连接池 <br /> 【前技术】<br /> Vue        互联网最火的前框架<br /> Vue Router 路由框架<br /> Vuex 全局状态管理框架<br /> Axios 前 HTTP 框架<br /> Element UI 前 UI 框架<br /> Vue Element Admin 前模板<br /> Antv  蚂蚁金服可视化技术,阿里巴巴可视化技术,天猫,淘宝,支付宝,花呗均使用AntV<br /> 【开发工具】<br /> IntelliJ IDEA 开发 IDE<br /> SQLyog 数据库连接客户<br /> Postman HTTP 请求工具<br /> 【开发环境】<br /> 工具 版本<br /> JDK 1.8 </p> <p> MySQL 5.7 </p> <p> <img src="https://img-bss.csdn.net/202004100922276928.png" alt="" /><img src="https://img-bss.csdn.net/202004100922434479.png" alt="" /><img src="https://img-bss.csdn.net/202004100922566924.png" alt="" /><img src="https://img-bss.csdn.net/202004100923062693.png" alt="" /></p> <p> <br /></p> <p> <br /></p>
<p> <span style="font-size:16px;"><br /> </span> </p> <p> <span style="font-size:16px;"><strong>课程简介:<br /> </strong>本课程主要是跟各位小伙伴分享、介绍并实战两大核心的用户身份认证(接口鉴权)模式,即</span><span style="font-size:16px;">基于</span><span style="font-size:16px;">Token</span><span style="font-size:16px;">的认证模式</span><span style="font-size:16px;"> 以及 </span><span style="font-size:16px;">基于</span><span style="font-size:16px;">Session</span><span style="font-size:16px;">的认证模式</span><span style="font-size:16px;">,其中</span><span></span> </p> <p> <span style="font-size:16px;">(1)   </span><span style="font-size:16px;">基于</span><span style="font-size:16px;">Token</span><span style="font-size:16px;">的认证模式</span><span style="font-size:16px;"> 则主要介绍了三种核心、主流的认证模式,即基于</span><span style="font-size:16px;">Token+</span><span style="font-size:16px;">数据库、基于</span><span style="font-size:16px;">Token+</span><span style="font-size:16px;">缓存中间件</span><span style="font-size:16px;">Redis</span><span style="font-size:16px;">、基于</span><span style="font-size:16px;">Token+JWT</span><span style="font-size:16px;">的认证模式。</span><span></span> </p> <p> <span style="font-size:16px;">(2)   </span><span style="font-size:16px;">基于</span><span style="font-size:16px;">Session</span><span style="font-size:16px;">的认证模式 </span><span style="font-size:16px;">也主要介绍了三种核心、主流的认证模式,即基于原生</span><span style="font-size:16px;">Spring Session</span><span style="font-size:16px;">以及</span><span style="font-size:16px;">Session</span><span style="font-size:16px;">共享的认证模式、基于</span><span style="font-size:16px;">Shiro Session</span><span style="font-size:16px;">的认证模式、基于</span><span style="font-size:16px;">Shiro + Redis </span><span style="font-size:16px;">的</span><span style="font-size:16px;">Session</span><span style="font-size:16px;">共享认证模式</span><span></span> </p> <p> <span style="font-size:16px;">即课程的整体介绍如下图所示:</span> </p> <p> <span style="font-size:16px;"><img src="https://img-bss.csdn.net/201909120730297517.png" alt="" /><br /> </span> </p> <p> <span style="font-size:16px;"> </span> </p> <p> 核心技术栈列表: </p> 值得介绍的是,本课程在技术栈层面涵盖了“用户身份认证”、“接口鉴权”等业务场景 常用的大部分技术,包括<span>Spring Boot2.x</span>、<span>Spring MVC</span>、<span>Mybatis</span>、加密解密算法<span>AES</span>、雪花算法<span>Snowflake</span>、统一验参工具<span>ValidatorUtil</span>、<span>JWT</span>(<span>Json Web Token</span>)、缓存中间件<span>Redis</span>、<span>Shiro(</span>身份认证与会话等等<span>)</span>、过滤器<span>Filter</span>、拦截器<span>Interceptor</span>、热部署插件<span>Devtools</span>、等等,如下图所示<br /> <p> <span style="font-size:16px;"><img src="https://img-bss.csdn.net/201909120732073201.png" alt="" /><br /> </span> </p> <p> <span style="font-size:16px;"> </span> </p> <p> <br /> </p> <p> 值得一提的是,本课程所介绍的核心重点在于“仅仅围绕基于<span>Token</span>的认证模式”进行展开讲解与实战,如下图所示为<span>Debug</span>亲自罗列、归纳出来的几大核心要点(面试官就经常喜欢这样面): </p> <img src="https://img-bss.csdn.net/201909120732381227.png" alt="" /><br /> <p> <span style="font-size:16px;"><br /> </span> </p> <p> <span style="font-size:16px;"> </span> </p> <p> 如下图所示为 基于<span>Token</span>认证模式 总体上的时序图:<span></span> </p> <img src="https://img-bss.csdn.net/201909120733009772.png" alt="" /><br /> <p> <br /> </p>
©️2020 CSDN 皮肤主题: 猿与汪的秘密 设计师:白松林 返回首页