vue 基本概念
作者: 尤雨溪
渐进式 的 自底向上增量开发的 mvvm框架
渐进式 可以和多种框架进行合并 vue是一个渐进式的框架(vue只会按照我们程序员的需要来进行功能的实现 不会影响到项目中没有用到vue框架的区域)只会做职责以内的事情
自底向上增量开发:先完成最基本的页面 然后再使用vue进行数据的绑定 一步步完成整个项目
mvvm
helloword
1、获取vue库文件(使用npm(包管理工具)来进行获取)
(1)在你要写项目的文件夹 上打开cmd
(2)初始化 npm init -y
(3) 下载 npm install --save xxx (默认最新版 指定版本 npm install --save xxx@你的版本)
如果太慢 可以切换成淘宝镜像 安装:npm i -g cnpm --registry=https://registry.npm.taobao.org
(4)开始编写vue的helloword
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1引用vue -->
<script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<!--
MVVM
M model 模型----》就是存储变量数据的地方
V view 视图----》页面 html所写的那些东西
VM viewModel 视图模型----》就是页面与数据之前桥梁
-->
<!-- 2.创建 v层 -->
<div id="demoDiv">
<h1>{{text}}</h1>
<h1>{{obj.name}}</h1>
</div>
<script>
// 3。vm层创建(就是vue实例)
new Vue({
// 4.创建m层数据
data:{
text:"你好",
num:18,
bool:true,
arr:[111,223,444,555,6,6,7,7],
obj:{
name:"xixi",
age:18
}
},
// 5.关联视图层
el:"#demoDiv"
})
</script>
</body>
</html>
{{}}模板语法
就是把模型数据插入到视图中
语法:
{{表达式}}
表达式: 通过计算返回结果的公式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="node_modules/vue/dist/vue.js"> </script>
</head>
<body>
<div id="demoDiv">
<h1>{{}}中不建议复杂的内容</h1>
{{num+demo}}
<h1>{{bool?"你好":"你坏"}}</h1>
<h1>{{text}}</h1>
<h1>{{text.toUpperCase()}}</h1>
</div>
<script>
new Vue({
el:"#demoDiv",
data:{
num:2,
demo:3,
bool:false,
text:"abcdefghijk"
}
})
</script>
</body>
</html>
数据渲染
声明式渲染
我们只需要告诉程序你要干什么 他就会自动完成
命令式渲染
在js中我们使用的所有变量的插入页面的过程 就是命令式 我们需要指挥程序一步步干什么
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 id="demoh"></h1>
<script>
let text="你好"
document.getElementById("demoh").innerHTML=text
</script>
</body>
</html>
数据驱动
vue就是一个js框架 作用就是把数据用更加简单的方式插入到页面中 vue可以根据数据的改变让页面也随之发生改变
指令
基本概念
在vue中带有v-前缀的html特殊属性
指令的作用:是给html添加特殊的功能
语法:写在html的开标签中 v-指令=“指令值”
v-model
作用: 给表单元素进行数据的
语法:v-model="变量"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="node_modules/vue/dist/vue.js"> </script>
</head>
<body>
<div id="demoDiv">
<h1>v-model</h1>
<!-- 1.v-model可以吧一个变量绑定到表单元素之上 当表单元素的值
改变了 那么这个变量也会随之改变
v层视图层 改变了数据 m层模型层也随之改变了 (视图变 模型变) -->
<input type="text" v-model="text"/>
<!-- 模型变了视图也会随之发生改变 -->
<em>{{text}}</em>
<!--
双向绑定 就是 数据在模型中改变 视图也会改变 反之
视图变了 模型也会改变 -->
</div>
<script>
new Vue({
el:"#demoDiv",
data:{
text:"你好"
}
})
</script>
</body>
</html>
双向绑定的原理
原理:数据劫持与发布者订阅者模式
数据劫持:数据拦截 vue中使用Object.defineProerty() 就是可以监听着我们data中的模型数据 当数据改变的时候 Object.defineProerty() 就会触发 模型改变 他会通知视图改变 视图改变 就会通知模型进行改变 会监听这改变 与修改
发布者订阅者模式:就是一个一对多的关系 发布者变了 所有的订阅者都会随之发生改变
v-show
作用: 就是控制元素的显示和隐藏
语法:v-show="布尔值" true显示 false隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="node_modules/vue/dist/vue.js"> </script>
</head>
<body>
<div id="demoDiv">
<h1>v-show</h1>
<h1 v-show="bool">控制我的显示和隐藏</h1>
</div>
<script>
new Vue({
el:"#demoDiv",
data:{
bool:false
}
})
</script>
</body>
</html>
v-on
作用:就是给dom元素绑定事件
语法: v-on:事件(不加on)=“函数” v-on:click="???" v-on:change="????"
简写语法: @事件="函数"
函数写在那?
函数写在与el data 同级的位置 使用methods进行包裹
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="node_modules/vue/dist/vue.js"> </script>
</head>
<body>
<div id="demoDiv">
<h1>v-on</h1>
<button v-on:click="fun()">点我打印内容</button>
<button @click="funb()">简写</button>
</div>
<script>
new Vue({
el:"#demoDiv",
data:{
},
methods:{
fun(){
console.log("你好")
},
funb(){
console.error("你坏")
}
}
})
</script>
</body>
</html>
v-for
作用: 便利data中的数据
语法: v-for="(便利的值,便利的下表) in 你要便利的数据"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="demoDiv">
<h1>v-for</h1>
<ul>
<li v-for="(v,i) in arr">
{{v}}------{{i}}
</li>
</ul>
</div>
<script>
new Vue({
el:"#demoDiv",
data:{
arr:["EZ","MF","NOC","VN"]
},
methods:{
}
})
</script>
</body>
</html>
便利复杂数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="demoDiv">
<h1>v-for</h1>
<ul>
<li v-for="(v,i) in arr">
{{v}}------{{i}}
</li>
</ul>
<hr/>
<table border="1">
<tr v-for="(v,i) in obj">
<td>{{v.name}}</td>
<td>{{v.age}}</td>
</tr>
</table>
</div>
<script>
new Vue({
el:"#demoDiv",
data:{
arr:["EZ","MF","NOC","VN"],
obj:[
{name:"huanghuang",age:27},
{name:"bilin",age:29},
{name:"xixi",age:26}
]
},
methods:{
}
})
</script>
</body>
</html>
v-bind
作用: 给html的标签属性插入变量
语法: v-bind:html的属性="变量" 简写 :html的属性="变量"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="demoDiv">
<h1>v-bind</h1>
<a v-bind:href="ahref">{{text}}</a>
<a :href="ahref">{{text}}</a>
</div>
<script>
new Vue({
el:"#demoDiv",
data:{
text:"点我去百度",
ahref:"http://www.baidu.com"
},
methods:{
}
})
</script>
</body>
</html>
v-if 全家桶
v-if
作用:判断dom是否加载
语法: v-if="布尔值" true加载 false不加载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="demoDiv">
<h1>v-if</h1>
<input type="checkbox" v-model="bool">
<h1 v-if="bool">我是测试v-if的</h1>
<h1 v-show="bool">我是测试v-show的</h1>
</div>
<script>
new Vue({
el:"#demoDiv",
data:{
bool:true
},
methods:{
}
})
</script>
</body>
</html>
v-if与v-show的区别
v-if 是对dom元素进行添加和移除 v-if 在加载的时候对性能损耗低 v-if在元素频繁切换的时候性能损耗高
v-show 是对dom元素使用css进行显示和隐藏 v-show 在加载的时候对性能损耗高 v-if在元素频繁切换的时候性能损耗低
v-else
作用: v-if不符合的时候执行else
语法:必须配合v-if来进行时候用 不能单独使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="demoDiv">
<h1>v-else</h1>
<input type="checkbox" v-model="bool">
<h1 v-if="bool">你好</h1>
<h1 v-else>你坏</h1>
</div>
<script>
new Vue({
el:"#demoDiv",
data:{
bool:true
},
methods:{
}
})
</script>
</body>
</html>
v-else-if
作用 可以对多个内容进行dom添加的判断
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="demoDiv">
<h1 v-if="num==1">吃</h1>
<h1 v-else-if="num==2">睡</h1>
<h1 v-else-if="num==3">上厕所</h1>
<h1 v-else-if="num==4">在睡</h1>
<h1 v-else>什么也没有干</h1>
</div>
<script>
new Vue({
el:"#demoDiv",
data:{
num:8
},
methods:{
}
})
</script>
</body>
</html>
v-text
作用:在网页中展示纯文本内容 同{{}}类似的功能
语法: v-text="变量"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="demoDiv">
<h1>v-text</h1>
<h1>{{demo}}</h1>
<h1 v-text="demo"></h1>
</div>
<script>
new Vue({
el:"#demoDiv",
data:{
demo:"我是文本"
},
methods:{
}
})
</script>
</body>
</html>
v-text与{{}}的区别
相同点: 都可以向页面中插入内容
不同点:{{}}模板插值得语法 而v-text是指令
v-text可以解决屏幕闪烁问题
屏幕闪烁
当用户网络很慢的时候 由于js没有加载 可能会导致页面出现{{}} 问题 然后js加载成功之后 {{}}消失变成正常的数据展示 可能会在成用户体验不好
解决:
1.使用v-text
2.使用v-cloak指令来解决 当前这个指领的作用是保持元素上直到关联vue实例之后 在进行编译
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.js"></script>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="demoDiv" v-cloak>
<h1>v-text</h1>
<h1>{{demo}}</h1>
<h1 v-text="demob"></h1>
</div>
<script>
new Vue({
el:"#demoDiv",
data:{
demo:"我是文本1",
demob:"我是text"
},
methods:{
}
})
</script>
</body>
</html>
v-html
作用:就是把字符串标签插入页面进行展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="demoDiv">
<div>
{{text}}
</div>
<div v-text="text">
</div>
<!-- 使用v-html -->
<div v-html="text"></div>
</div>
<script>
new Vue({
el:"#demoDiv",
data:{
text:"<em>我是斜体</em>"
},
methods:{
}
})
</script>
</body>
</html>
v-once
作用:一次性差值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="demoDiv">
<input type="text" v-model="text">
<h1>{{text}}</h1>
<h1 v-once>{{text}}</h1>
<h1>{{text}}</h1>
</div>
<script>
new Vue({
el:"#demoDiv",
data:{
text:"你好么么哒"
},
methods:{
}
})
</script>
</body>
</html>
watch监听
监听data中的数据 如果数据改变了 那么watch就会收到通知调用一个函数(我们就可以在这个函数中完成指定的逻辑)
语法:写在与el data methods同级
watch:{
你要监听的数据 ( 新数据, 旧数据 ){
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="demoDiv">
<input type="text" v-model="inputval">
</div>
<script>
new Vue({
el:"#demoDiv",
data:{
inputval:""
},
methods:{
},
// 监听
watch:{
inputval(newval,oldval){
console.log(newval+"----"+oldval)
}
}
})
</script>
</body>
</html>
watch首次加载的时候能触发吗?
首次加载不会触发
我就是想让他首次加载能触发怎么办?
vue-cli 脚手架
安装4x
1.必须有node
2.如果网速慢的话 那么建议大家切换淘宝镜像
3.全局下载脚手架 npm install -g @vue/cli (只需要在 第一次使用的时候才下载 除非你重新装系统或者node 才需要再次下载)
4.查看版本 vue --version
5.创建项目
(5-1)把cmd的路径切换到你要创建项目的文件夹下
(5-2)vue create 项目名(弹出的选择选择第三个 剩下的眼睛一闭 一路回撤直到回车不了)
6.启动项目
(6-1)cd到你创建的项目之下
(6-2)输入npm run serve
拿到别人的项目怎么启动
1.看看有没有以来文件夹 node_modules 如果没有 那么你cd到你向前项目路径下 使用npm install 重新下载依赖
2.公司的项目或者别人的项目 怎么启动?你只需要来到 项目下的package.json文件中去查看 scripts节点即可
所有的命令都需要使用npm run 你的配置项(所有中只有一个是特例 就是start)
拿到空项目怎么办?
1.删除src下components文件夹的helloword.vue文件
2.删除src下app.vue的内容
<template>
<div id="app">
<!-- 删除 -->
<!-- <img alt="Vue logo" src="./assets/logo.png"> -->
<!-- 删除 -->
<!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
</div>
</template>
<script>
// 删除
// import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
// 删除
// HelloWorld
}
}
</script>
<style>
/* 删除 */
/* #app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
} */
</style>
3.在src下的components中创建我们自己的.vue文件(需要下载插件vetur)
4.在app.vue中引用我们自己的文件
<template>
<div id="app">
<!-- 3.使用 -->
<Home />
</div>
</template>
<script>
// 1.引用 但是建议首字母大写
import Home from './components/home.vue'
export default {
name: 'App',
components: {
// 2.调用
Home
}
}
</script>
<style>
</style>
.vue文件-------单文件组件
一个.vue文件有三个部分
template部分 就是今后写html的地方
<template>
<div>
你好
</div>
</template>
<script>
script部分 JS的代码
export default {
}
</script>
//style部分 CSS
<style>
</style>
使用data
<template>
<div>
<h1>{{text}}</h1>
</div>
</template>
<script>
export default {
// 创建模型数据
data(){
return {
text:"么么哒!!!!!"
}
}
}
</script>
<style>
</style>
vue组件的data为什么是一个函数而不是一个对象?
methods
和本地模式一模一样
<template>
<div>
<h1>{{text}}</h1>
<button @click="fun()">点我修改text</button>
</div>
</template>
<script>
export default {
// 创建模型数据
data(){
return {
text:"么么哒!!!!!"
}
},
methods:{
fun(){
this.text="你坏!!!!!"
}
}
}
</script>
<style>
</style>
watch
和本地模式一模一样
<template>
<div>
<h1>{{text}}</h1>
<button @click="fun()">点我修改text</button>
</div>
</template>
<script>
export default {
// 创建模型数据
data(){
return {
text:"么么哒!!!!!"
}
},
methods:{
fun(){
this.text="你坏!!!!!"
}
}
}
</script>
<style>
</style>
watch
和本地模式一模一样
<template>
<div>
<h1>{{text}}</h1>
<button @click="fun()">点我修改text</button>
</div>
</template>
<script>
export default {
// 创建模型数据
data(){
return {
text:"么么哒!!!!!"
}
},
methods:{
fun(){
this.text="你坏!!!!!"
}
},
watch:{
text(newval){
console.log("text被改变了",newval)
}
}
}
</script>
<style>
</style>
事件对象--$event
谁触发这个事件事件对象就是谁
<template>
<div>
<h1>事件对象</h1>
<button @click="fun($event)">点我触发事件对象</button>
</div>
</template>
<script>
export default {
methods:{
fun(xiaoming){
console.log(xiaoming.target)
}
}
}
</script>
<style>
</style>
修饰符
vue中对于事件上面添加了一个新的内容修饰符 通过修饰符可以对当前这个事件来设置更多辅佐性的功能
语法:
v-on:或者@事件.修饰符="函数"
1.按键修饰符
对键盘上面的按键进行指定
.up .down .left .right .ctrl .enter .space
<template>
<div>
<h1>使用修饰符来完成对于指定按键的设置</h1>
<input type="text" @keydown.space="func()">
</div>
</template>
<script>
export default {
methods:{
func(){
console.log("空格被按下了")
}
}
}
</script>
<style>
</style>
2.事件修饰符
1.阻止冒泡 : .stop
2.阻止默认行为 : .prevent
3.与事件冒泡相反 设置捕获 :.capture
4.只触发一次 : .once
5.只出法自己范围内的事件 不包含子元素的 .self
<template>
<div>
<h1>阻止冒泡</h1>
<div class="fu" @click="fu()">
<div class="zi" @click.stop="zi()"></div>
</div>
</div>
</template>
<script>
export default {
methods:{
fu(){
console.log("ffufufufufufufu")
},
zi(){
console.log("zizziziziziziz")
},
}
}
</script>
<style>
.fu{
background-color: pink;
width: 500px;
height: 500px;
}
.zi{
background-color: gray;
width: 200px;
height: 200px;
}
</style>
修饰符同时可以串联
<!-- 修饰符可以串联 -->
<div class="zi" @click.stop.once="zi()"></div>
计算属性----computed
他是一个vue的属性 这个属性是由计算功能的 (对data数据进行计算展示)
语法: 写在与data methods等同级位置
一条数据 在多个位置 展示不同形态的时候 使用计算属性
又或者 一个变量 需要展示之前 进行处理数据 也可以用计算属性
computed:{
计算出的结果变量(){
return 计算内容
}
}
<template>
<div>
<h1>正常展示:{{text}}</h1>
<h1>大写展示:{{textUpper}}</h1>
<h1>大写加截取展示:{{textSub}}</h1>
</div>
</template>
<script>
export default {
data(){
return {
text:"abcdefghijk"
}
},
computed:{
textUpper(){
return this.text.toUpperCase()
},
textSub(){
return this.text.toUpperCase().substr(1,5)
}
}
}
</script>
<style>
</style>
计算属性与方法的区别?
<template>
<div>
你好
<h1>{{newarr}}</h1>
<h1>{{fun()}}</h1>
</div>
</template>
<script>
export default {
data(){
return {
arr:[111,2222,3333,4444,555,666,777,888]
}
},
computed:{
newarr(){
console.log("计算属性")
return this.arr.slice(0,4)
}
},
methods:{
fun(){
return this.arr.slice(0,4)
}
}
}
</script>
<style>
</style>
计算属性与方法最大的区别是
计算属性走缓存 只要计算属性处理过数据之后 数据在没有改变的时候 无论你在页面调用
多少次 他都只执行一次 然后剩下的调用都是从缓存中进行读取的 节省资源
函数 只要被调用那么就会执行 调用多少次执行多少次 比较消耗资源
计算属性与监听有啥区别
首先计算属性和监听都是 对data的数据进行相关的操作
但是计算属性是依赖data的数据 并且对data的数据进行处理返回处理后的结果
而监听 仅仅是监听 当data的数据改变了他会触发一个函数 来完成一些逻辑
前后台交互
axios
axios是一个基于promise的第三方数据请求库
下载: npm install --save axios
<template>
<div>
<h1>axios的基本使用</h1>
<button @click="fun()">点我</button>
</div>
</template>
<script>
import axios from "axios"
export default {
methods:{
fun(){
axios({
url:"http://www.weather.com.cn/data/cityinfo/101320101.html",
// 请求方式默认get
method:"GET"
}).then((ok)=>{
console.log(ok)
}).catch((err)=>{
console.log(err)
})
}
}
}
</script>
<style>
</style>
跨域
就是浏览器的安全机制 不同源 (不同端口 不同协议 不同域名) 就会造成跨域
1.jsonp
2.代理跨域
devServer代理跨域
方式:
(1) 需要在vue项目的根路径下创建一个vue.config.js的文件
(2)写入如下内容
module.exports={
devServer:{
proxy:{
"/api":{
target:"http://www.weather.com.cn/",
changeOrigin:true,
pathRewrite:{
"^/api":""
}
}
}
}
}
(3)千万不要忘了
(3)千万不要忘了
(3)千万不要忘了
(3)千万不要忘了
(3)千万不要忘了
(3)千万不要忘了
(3)千万不要忘了
修改我们的请求路径为/api
(4)因为我们修改了配置文件 那么项目必须重启
nginx反向代理
3.cors
拦截器
在发送请求的时候 但是每次如果在进行项目中 我们每请求都要携带一些参数据的时候 那么这个时候就可以使用拦截器 把每次需要在发送请求的时候携带的数据 使用拦截器 给请求进行添加 减少重复代码的编写
请求拦截
相应拦截
使用:
(1)在src文件夹下新建 api(封装数据请求的文件夹) util(工具文件夹)
(2) 创建拦截器 在util下新建一个文件 写入如下内容
import axios from "axios"
// 创建axios实例
let service=axios.create()
// 设置拦截器
// 添加请求拦截器
service.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
service.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
export default service
请求封装
(1)在api文件夹下创建一个文件荣来容纳数据请求的封装
import service from "@/util/service.js"
// 开始封装数据请求
function getlink(url){
return new Promise((resolve,reject)=>{
// 开始写你的数据请求
service.request({
url,
method:"GET"
}).then((ok)=>{
resolve(ok)
}).catch((err)=>{
reject(err)
})
})
}
export default getlink