《Vue.js前端开发技术与实践（第二版）》 课件 第11章 前后端数据交互技术

第11章前后端数据交互技术前后端设备前后端设备客户端和服务器端客户端：在浏览器中运行的部分。使用HTML、CSS、JavaScript构建服务器端：在服务器中运行的部分。负责存储数据和处理应用逻辑用户交互的界面使用node.js、Java、.net等构建网站服务器能够提供网站访问服务的机器就是网站服务器。它能够接收客户端的请求，能够对请求做出响应。服务器相关概念IP地址：是互联网设备的唯一标识域名：由于IP地址难于记忆，所以产生了域名的概念，所谓域名就是平时上网所使用的网址。

开发过程，使用本机作为服务器：特定IP为，特定域名为localhost端口：使用端口区分不同的服务。URL：统一资源定位符，又叫URL，是专为标识internet网上资源位置而设的一种编址方式。传输协议：//服务器ip或域名:端口/资源所在位置标识/cup/?sort=students_count&category_id=3https:///blog/2014/05/restful_api.htmlRESTfulAPI规范开发者工具中查看报文json-server可以指定一个json文件作为api的数据源网址：/typicode/json-server安装：npminstall-gjson-server启动服务：json-server--watchdb.json

必须在.json数据所在的目录下运行启动命令axios

一、定义Axios是一个基于promise的HTTP库，可以用在浏览器和node.js中。二、原理axios本质上也是对原生XHR（）的封装，只不过它是Promise的实现版本，符合最新的ES规范。三、主要特点（1）从浏览器创建XMLHttpRequests（2）从node.js创建http请求（3）支持PromiseAPI（4）拦截请求和响应（5）转换请求和响应数据（6）取消请求（7）自动转换JSON数据（8）客户端支持防御XSRF[2]“CSRF/XSRF(Cross-siterequestforgery),中文名称:跨站请求伪造四、axios开发网址（1）axios中文文档|axios中文网/zh-cn/docs/（2）github/axios/axios（3）CDN国内引用地址（CDN的全称是ContentDeliveryNetwork，即内容分发网络。）//axios/五、应用axios1、安装2、基本使用3、axios的api4、默认配置5、拦截器6、取消请求7、封装8、跨域Axios封装1、每次客户端与服务器连接只处理一个事务，就断开连接。2、http协议是无状态的，没有记忆能力。http协议特性：https:///weixin_45070175/article/details/118559272

利用token进行用户身份验证的流程：1、客户端使用用户名和密码请求登录2、服务端收到请求，验证用户名和密码3、验证成功后，服务端会签发一个token，再把这个token返回给客户端4、客户端收到token后可以把它存储起来，比如放到cookie中5、客户端每次向服务端请求资源时需要携带服务端签发的token，可以在cookie或者header中携带6、服务端收到请求，然后去验证客户端请求里面带着的token，如果验证成功，就向客户端返回请求数据tokenJWT就是上述流程当中token的一种具体实现方式，其全称是JSONWebToken

浏览器的同源策略同源：是指协议，域名，端口都要相同，其中有一个不同都会产生跨域。跨域：是指协议，域名，端口都要相同，其中有一个不同都会产生跨域。同源策略：在没有明确授权的情况下，禁止页面加载或执行与跨域的任何脚本。同源策略限制的行为：1.)不同源的Cookie、LocalStorage和IndexDB无法读取2.)不同源DOM和Js对象无法获得3.)不同源AJAX请求不能发送跨域资源共享（CORS）跨域资源共享（corss-originresourcesharing）：CORS需要浏览器和服务器同时支持。当浏览器进行跨域请求的时候，会在请求里添加头部origin，表明自己协议，主机，端口。当服务器收到这个客户端发送的请求之后，如果需要允许能够访问，就需要添