vue 组件传参及跨域传参
可以完成跨组件传参的四种方式
// 1) localStorage:永久存储数据
// 2) sessionStorage:临时存储数据(刷新页面数据不重置,关闭再重新开启标签页数据重置)
// 3) cookie:临时或永久存储数据(由过期时间决定)
// 4) vuex的仓库(store.js):临时存储数据(刷新页面数据重置)
vuex仓库插件
store.js配置文件
export default new Vuex.Store({
state: {
title: '默认值'
},
mutations: {
// mutations 为 state 中的属性提供setter方法
// setter方法名随意,但是参数列表固定两个:state, newValue
setTitle(state, newValue) {
state.title = newValue;
}
},
actions: {}
})
在任意组件中给仓库变量赋值
this.$store.state.title = 'newTitle'
this.$store.commit('setTitle', 'newTitle')
在任意组件中取仓库变量的值
console.log(this.$store.state.title)
vue-cookie插件
安装
>: cnpm install vue-cookies
main.js 配置
// 第一种
import cookies from 'vue-cookies' // 导入插件
Vue.use(cookies); // 加载插件
new Vue({
// ...
cookies, // 配置使用插件原型 $cookies
}).$mount('#app');
// 第二种
import cookies from 'vue-cookies' // 导入插件
Vue.prototype.$cookies = cookies; // 直接配置插件原型 $cookies
使用
// 增(改): key,value,exp(过期时间)
// 1 = '1s' | '1m' | '1h' | '1d'
this.$cookies.set('token', token, '1y');
// 查:key
this.token = this.$cookies.get('token');
// 删:key
this.$cookies.remove('token');
注:cookie一般都是用来存储token的
// 1) 什么是token:安全认证的字符串
// 2) 谁产生的:后台产生
// 3) 谁来存储:后台存储(session表、文件、内存缓存),前台存储(cookie)
// 4) 如何使用:服务器先生成反馈给前台(登陆认证过程),前台提交给后台完成认证(需要登录后的请求)
// 5) 前后台分离项目:后台生成token,返回给前台 => 前台自己存储,发送携带token请求 => 后台完成token校验 => 后台得到登陆用户
axios插件
安装
>: cnpm install axios
main.js配置
import axios from 'axios' // 导入插件
Vue.prototype.$axios = axios; // 直接配置插件原型 $axios
使用
this.axios({
url: '请求接口',
method: 'get|post请求',
data: {post等提交的数据},
params: {get提交的数据}
}).then(请求成功的回调函数).catch(请求失败的回调函数)
案例
// get请求
this.$axios({
url: 'http://127.0.0.1:8000/test/ajax/',
method: 'get',
params: {
username: this.username
}
}).then(function (response) {
console.log(response)
}).catch(function (error) {
console.log(error)
});
// post请求
this.$axios({
url: 'http://127.0.0.1:8000/test/ajax/',
method: 'post',
data: {
username: this.username
}
}).then(function (response) {
console.log(response)
}).catch(function (error) {
console.log(error)
});
跨域问题(同源策略)
// 后台接收到前台的请求,可以接收前台数据与请求信息,发现请求的信息不是自身服务器发来的请求,拒绝响应数据,这种情况称之为 - 跨域问题(同源策略 CORS)
// 导致跨域情况有三种
// 1) 端口不一致
// 2) IP不一致
// 3) 协议不一致
// Django如何解决 - django-cors-headers模块
// 1) 安装:pip3 install django-cors-headers
// 2) 注册:
INSTALLED_APPS = [
...
'corsheaders'
]
// 3) 设置中间件:
MIDDLEWARE = [
...
'corsheaders.middleware.CorsMiddleware'
]
// 4) 设置跨域:
CORS_ORIGIN_ALLOW_ALL = True
vue 组件传参及跨域传参的更多相关文章
- form上传文件以及跨域异步上传
要设置了enctype属性才能上传,需要使用上传的jar包,这里使用的是cos-26Dec2008.jar, 而且后台获取值的时候,getfile要放在第一位 一次设置好上传格式后没有上传文件,也就没 ...
- easy ui 异步上传文件,跨域
easy ui 跨域上传文件,代码如下: 1.html代码:(这段代码是个win窗体,我在点击上传图片按钮然后弹出一个上传图片的窗体,选择图片再进行上传,这样在form提交时,提交的参数会少一点.) ...
- 解决Django+Vue前后端分离的跨域问题及关闭csrf验证
前后端分离难免要接触到跨域问题,跨域的相关知识请参:跨域问题,解决之道 在Django和Vue前后端分离的时候也会遇到跨域的问题,因为刚刚接触Django还不太了解,今天花了好长的时间,查阅了 ...
- nginx处理vue打包文件后的跨域问题
起因 在vue文件打包后,项目脱离了vue配置的反向代理配置,还是会报跨域的错误,或者直接打不开本地文件, 但是此刻我们想打开打包后的文件,测试一下文件有没有错误,因为经常会存在开发阶段没有问题,打包 ...
- apiCloud中api.ajax方法跨域传参获取数据
apiCloud中的ajax方法,可以自动处理跨域访问数据,不必使用jsonp来处理了. 使用ajax方法,必须要在apiready = function() {}方法中 获取参数 var pageP ...
- SWFUpload多图上传、C#后端跨域传文件带参数
前几天工作中用到了SWFUpload上传图片,涉及到跨域,因为前端无法实现跨域,所以只能把文件传到后端进行跨域请求,整理分享下. 效果图 前端 html部分 <!DOCTYPE html> ...
- flash上传控件跨域
工作中需要使用百度开发的ueditor,但服务器部署中前端代码和后端代码在不同的域名下,现已解决的前端调后端代码的跨域问题.可是,ueditor中的上传图片flash控件也涉及跨域问题,经过查找发现可 ...
- vue组件之间互相传值:父传子,子传父
今看到一篇很不错的vue组件传值文章,便于理解,遂做笔记- 一般页面的视图App.vue应为这样 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.v ...
- SpringCloud入门(九): Zuul 上传&回退&异常处理&跨域
Zuul的上传 1.构建一个上传类 import org.springframework.web.bind.annotation.PostMapping; import org.springframe ...
随机推荐
- 分布式项目开发-spring-dao.xml基础配置
基础步骤: 1 数据源 2 sqlSessionFactory 3 MapperScan 打包. db.properties文件 db.username=root db.password=123456 ...
- 03 . Python入门之运算符
一.什么是运算符? 举个简单的例子** 4 +5 = 9 . 例子中,4** 和 5 被称为操作数,"+" 称为运算符. Python语言支持以下类型的运算符: [算术运算符] [ ...
- Java实现 LeetCode 828 统计子串中的唯一字符(暴力+转数组)
828. 统计子串中的唯一字符 我们定义了一个函数 countUniqueChars(s) 来统计字符串 s 中的唯一字符,并返回唯一字符的个数. 例如:s = "LEETCODE" ...
- Java实现 蓝桥杯 算法提高 合并石子
算法提高 合并石子 时间限制:2.0s 内存限制:256.0MB 问题描述 在一条直线上有n堆石子,每堆有一定的数量,每次可以将两堆相邻的石子合并,合并后放在两堆的中间位置,合并的费用为两堆石子的总数 ...
- Java实现 LeetCode 61 旋转链表
61. 旋转链表 给定一个链表,旋转链表,将链表每个节点向右移动 k 个位置,其中 k 是非负数. 示例 1: 输入: 1->2->3->4->5->NULL, k = ...
- Mac卸载.net core sdk
NET Core cli提供了卸载脚本 https://github.com/dotnet/cli/tree/master/scripts/obtain/uninstall dotnet-uninst ...
- PBFT共识算法
拜占庭将军问题 我们已知的共识算法,Paxos.Raft解决的都是非拜占庭问题,也就是可以容忍节点故障,消息丢失.延时.乱序等,但节点不能有恶意节点.但如何在有恶意节点存在的情况下达成共识呢?BFT共 ...
- 小技巧:如何用 Chrome 将 SVG 转成 PNG
怎么把 SVG 转成 PNG ?用 Chrome 吧,非常好用,还能设定自己想要的尺寸. 什么是 SVG ? SVG (Scalable Vector Graphics,可缩放矢量图形) 是基于 XM ...
- Redis学习笔记(十九) 发布订阅(上)
Redis 发布订阅(pub/sub)是一种消息通信模式:发送者(pub)发送消息,订阅者(sub)接收消息,它的发布与订阅功能由PUBLISH.SUBSCRIBE.PSUBSCRIBE等命令组成. ...
- 如何在VMware中进行创建CentOS虚拟机
今天给大家分享如何在VMware中创建CentOS虚拟机,CentOS6.7为例进行说明,CentOS7版本亦可以参考该教程,具体的教程如下. 1.之后打开VMware,主页面如下图所示.点击第一个框 ...