vue之同源策略
vue请求方式(axios)
axios.get('资源服务器'，{
params:{ //get参数 如https：//www.badu.comid=(参数)
id:参数
}
}).then(function(response){ //response是请求成功后返回的数据
console.log(response)
}).catch(function(error){ //error是请求失败后的返回数据
console.log(error) //无法显示服务端的错误，只会接收服务端的错误
})
同源策略报错
Access to XMLHttpRequest at 'http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.search.catalogSug&query=%E6%88%91%E7%9A%84%E4%B8%AD%E5%9B%BD%E5%BF%83' from origin 'http://localhost:63342' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
关键词：Access-Control-Allow-Origin
只要出现这个错误，就是访问受限。出现策略的拦截问题
同源策略报错解决方式
同源策略：是浏览器的一种保护用户数据的一种安全机制，浏览器会限制ajax不能跨域访问其他源的数据地址。
同源：判断两个同心地址之间，是否协议，域名[ip]，端口一致
同源策略报错原因也是协议，域名和端口有其一不一致的问题
解决方式
ajax跨域(跨源)方案之CORS
CORS是一个W3C标准，全称是"跨域资源共享"，他允许浏览器向跨源的后端服务器发出ajax请求，从而克服ajax只能同源使用的限制
实现CORS主要依靠后端服务器中相应数据中在响应头信息返回信息的
CORS在django中的使用
#django视图
def post(request):
response = new HttpResponse()
response.set_header("Access-Control-Allow-Origin","http://localhost:63342")
return response;
//在响应行信息里面设置一下内容：
Access-Control-Allow-Origin：ajax所在的域名地址
Access-Control-Allow-Origin：www.oldboy.cn #
vue中设置
待更新
jsonp
利用跨域标签来解决的
jsonp可以实现跨域，但是并非ajax技术
核心是利用script标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="text" id="content">
<button onclick="get_data()">翻译</button>
<p id="p1"></p>
</div>
<script>
// jsonp本身并不是ajax
// jsonp利用的是script标签的本身特性
// 实现json需要客户端和服务端配合
function hello(data){
// 自定义业务
//当点击之后，发送请求服务器，js会自动调用这个函数(函数名必须和请求连接中的callback参数一致，传入的参数就是请求响应的参数)
var p1 = document.getElementById("p1");
p1.innerHTML = data.data;
console.log(data);
}
function get_data(){
// 通过js的DOM操作创建一个script标签
var script = document.createElement("script");
var content = document.getElementById("content");
// 给script标签设置src属性为服务端的js脚本
script.src = "https://api.asilu.com/fanyi/?callback=hello&q="+content.value;
console.log(script);
// 把新建的script标签追加到网页给浏览器识别
//通过将处理好的script标签交给document的head处理，让浏览器识别
document.head.append(script);
}
</script>
</body>
</html>
服务端代理
普通组件
组件有两种全局组件和单文件组件
普通组件与通常vue相同，都是可以拥有data和methods,以下是写法
<html lang="en">
<head>
<meta charset="utf-8">
<title>普通组件</title> <!--网页名称--->
<script src="js/vue.js"></script>
</head>
<style>
button{
background-color:red
}
</style>
<body>
<div id="app">
</div>
</body>
<script>
//创建一个普通组件
//template的模板中内容必须有div标签包含
Vue("mycomponent",{
template:`
<div>
<button @click="add">＋</button>
<input type="text" v-model="num"/>
<button @click="substract">－</button>
</div>`,
data(){
return{} //组件中使用的数据，组件之间的数据是隔离的相互独立
},
methods:{
add(){
num++;
},
substract(){
num--;
}
}
});
var vm = new Vue({
el:"#app",
});
</script>
</html>
单文件组件
单文件组件的代码，是需要保存到vue文件中
例如，我们希望创建一个单文件组件，则需要创建一个vue组建的代码。浏览器默认不识别vue文件。所以需要vue-cli这个工具
vue-cli如何搭建项目
vue-cli官网：https://cli.vuejs.org/zh/
在安装vue-cli之前需要安装node.js
Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本。
nvm工具的下载和安装： https://www.jianshu.com/p/d0e0935b150a
https://www.jianshu.com/p/622ad36ee020
安装记录:
打开:https://github.com/coreybutler/nvm-windows/releases
安装完成以后,先查看环境变量是否设置好了.
nvm
可以使用nvm下载node和node的npm
如果使用nvm工具，则直接可以不用动手下载，如果使用下载安装的npm比较慢，可以修改nvm的配置文件
# settings.txt
root: C:\tool\nvm [这里的目录地址是安装nvm时自己设置的地址,要根据实际修改]
path: C:\tool\nodejs
arch: 64
proxy: none
node_mirror: http://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/
常用命令
nvm list #列出目前在nvm里面安装的所有node版本
nvm install node版本号 #安装指定版本的node.js
nvm uninstall node版本号 #卸载指定版本的node.js
nvm use node版本号 #切换当前使用的node.js
安装好node.js
使用命令查看 node -v
npm
在安装node.js之后，同时node.js会同时帮我们那幢一个npm包管理器npm,我们可以借助npm命令安装node.js的包，这个相当于python的pip管理包
npm install -g 包名 # 安装模块 -g表示全局安装，如果没有-g，则表示在当前项目安装
npm list # 查看当前目录下已安装的node包
npm view 包名 engines # 查看包所依赖的Node的版本
npm outdated # 检查包是否已经过时，命令会列出所有已过时的包
npm update 包名 # 更新node包
npm uninstall 包名 # 卸载node包
npm 命令 -h # 查看指定命令的帮助文档
配置npm下载源
//临时使用
nom install jquery --registry https://registry.npm.taobao .org
//配置这个选型到文件中
npm config set registry hhttps://registry.npm.taobao.org
//验证是否配置成功
npm config list或者npm cofig get registry
安装vue-cli
npm install -g vue-cli
使用vue-cli初始化创建项目
在保存项目文件夹下
创建项目命令 vue init webpack 项目目录名
创建项目过程
? Project name project
? Project description 一个很牛逼的网站
? Author oldboy
? Vue build (Use arrow keys)
❯ Runtime + Compiler: recommended for most users
? Install vue-router? (Y/n) n
? Set up unit tests? (Y/n) n # 是否安装单元测试组建
? Setup e2e tests with Nightwatch? (Y/n)n
? Should we run `npm install` for you after the project has been created? (recom
mended) npm
创建项目后，在项目目录下
执行 npm run dev 执行虚拟服务器
单文件组件使用
组件有两种：普通组件、单文件组件
普通组件的缺点：
- html代码是作为js的字符串进行编写，所以组装和开发的时候不易理解，而且没有高亮效果。
- 普通组件用在小项目非常合适，但是复杂的大项目中，如果把更多的组件组件放在html中，那么维护成本就变得非常昂贵。
- 普通组件只是整合了js和html，但是css代码被剥离出去了。使用的时候不好处理
将一个组件相关的html结构，css样式，以及交互的JavaScript代码从HTML文件中剥离出来，合成一个文件，这种文件就是单文件组件，相当于一个组件具有了结构、表现和行为的完整功能，方便组件之间随意组合的复用，这种文件的扩展名为“.vue”