对框架基本理解以及解决跨域的问题

最新推荐文章于 2023-02-23 23:57:38 发布

六_

最新推荐文章于 2023-02-23 23:57:38 发布

阅读量204

点赞数 1

文章标签：对框架基本理解以及解决跨域的问题

本文链接：https://blog.csdn.net/weixin_45667413/article/details/103192600

版权

对MVC、MVVM、MVP的理解

MVC

模型（Model）:数据
视图（View）:界面显示
控制器（Controller）:业务逻辑

MVP

模型（Model）:负责存储、检索、操纵数据视图（View）:负责绘制UI元素、与用户进行交互
主持者（Presenter）:作为View与Model交互的中间纽带，处理与用户交互的负责逻辑。

mvvm

MVVM ViewModel是一个同步view和model的对象

组件通信

1). 父传子第一步：在子组件的标签上面以自定义属性名 + 数据的形式（），进行数据的绑定；
第二步：然后在子组件内部通过props进行接收（props:[‘list’]），就可以直接在template中进行数据的使用了
2).子传父第一步：在子组件上通过this下面的$emit(第一个参数是自定义事件，第二个参数要传递的数据)
第二步：在子组件的组件标签上通过@自定义事件名，等于回调函数的形式进行数据的处理
3).兄弟组件第一：兄弟组件通信是利用父组件作为中转；第二：子 -> 父 -> 子

生命周期（keep-alive）

beforeCreate 实例创建之前调用
created 实例创建成功，此时 data 中的数据显示出来了
beforeMount 数据中的 data 在模版中先占一个位置
mounted 模版中的 data 数据直接显示出来了
beforeUpdate 当 data 数据发生变化调用，发生在虚拟 DOM 重新渲染和打补丁之前
updated 数据更改导致的虚拟 DOM 重新渲染和打补丁
beforeDestroy 在 vue 实例销毁之前调用，此时实例任然可用
destroyed 在 vue 实例销毁之后调用，vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁
activated 来缓存组件状态，这个时候created钩子就不会被重复调用了，如果我们的子组件需要在每次加载的时候进行某些操作，可以使用activated钩子触发
deactivated 组件移除时触发

常见的解决跨域的方式

发生跨域的前提是：

跨域问题来源于JavaScript的同源策略，为了防止某域名下的接口被其他域名下的网页非法调用，是浏览器对JavaScript施加的安全限制

浏览器的同源策略：

就是协议、域名和端口号。若地址里面的协议、域名和端口号均相同则属于同源。
一般情况下我们决绝跨域的问题用的有三种是常用的但是方法有很多提供大家借鉴使用

具体的解决方案
jsonp

是利用script标签他不受浏览器的同源策略的限制，但是直接发送get请求还需要后台的配合，将返回的结果以callback的形式返回的；

	$.ajax({ 
	      url: '地址', 
	      type: 'GET', 
	      dataType: 'JSONP', 
	      success: function (res) { 
	       console.log(res)
	      } 
	    })

Cors

服务器设置HTTP响应头中Access-Control-Allow-Origin值，解除跨域限制。CORS
是一个W3C标准,全称是"跨域资源共享"（Cross-origin resource
sharing），他允许浏览器向跨源服务器发送XMLHttpRequest请求，从而克服 AJAX 只能同源使用的限制
缺点是：目前所有最新浏览器都支持该功能，但是万恶的IE不能低于10 Access-Control-Allow-Origin
这个字段是必须的,表示接受那些域名的请求(*为所有)、Access-Control-Allow-Credentials 该字段可选,
表示是否可以发送cookie、Access-Control-Expose-Headers
该字段可选,XHMHttpRequest对象的方法只能够拿到六种字段:
Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma
,如果想拿到其他的需要使用该字段指定。

反向代理（Reverse Proxy）

指以代理服务器来接受internet上的连接请求，然后将请求转发给内部网络上的服务器，并将从服务器上得到的结果返回给internet上请求连接的客户端，此时代理服务器对外就表现为一个反向代理服务器。
在vue的config下的index文件的proxyTable中配置如下代码

		 proxyTable: {
		     '/api': {  //使用"/api"来代替"http://f.apiplus.c" 
		      target: '', //源地址    这里是你的源地址就是及请求额跨域的接口
		       changeOrigin: true, //改变源 
		      pathRewrite: {
		           '^/api': '/' //路径重写 
		        }
		       }
		    }