|
1
2
3
4
5
6
|
this.$router.push(
'/course'
);
this.$router.push({name: course});
this.$router.go(
-
1
);
this.$router.go(
1
);
<router
-
link to
=
"/course"
>课程页<
/
router
-
link>
<router
-
link :to
=
"{name: 'course'}"
>课程页<
/
router
-
link>
|
第一种
router.js
|
1
2
3
4
5
6
7
8
|
routes: [
/
/
...
{
path:
'/course/:id/detail'
,
name:
'course-detail'
,
component: CourseDetail
},
]
|
跳转.vue
|
1
2
3
4
5
6
7
8
9
10
11
|
<template>
<!
-
-
标签跳转
-
-
>
<router
-
link :to
=
"`/course/${course.id}/detail`"
>{{ course.name }}<
/
router
-
link>
<
/
template>
<script>
/
/
...
goDetail() {
/
/
逻辑跳转
this.$router.push(`
/
course
/
${this.course.
id
}
/
detail`);
}
<
/
script>
|
接收.vue
|
1
2
3
|
created() {
let
id
=
this.$route.params.
id
;
}
|
第二种
router.js
|
1
2
3
4
5
6
7
8
|
routes: [
/
/
...
{
path:
'/course/detail'
,
name:
'course-detail'
,
component: CourseDetail
},
]
|
跳转.vue
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<template>
<!
-
-
标签跳转
-
-
>
<router
-
link :to
=
"{
name:
'course-detail'
,
query: {
id
: course.
id
}
}">{{ course.name }}<
/
router
-
link>
<
/
template>
<script>
/
/
...
goDetail() {
/
/
逻辑跳转
this.$router.push({
name:
'course-detail'
,
query: {
id
: this.course.
id
}
});
}
<
/
script>
|
接收.vue
|
1
2
3
|
created() {
let
id
=
this.$route.query.
id
;
}
|
可以完成跨组件传参的四种方式
|
1
2
3
4
|
/
/
1
) localStorage：永久存储数据
/
/
2
) sessionStorage：临时存储数据(刷新页面数据不重置，关闭再重新开启标签页数据重置)
/
/
3
) cookie：临时或永久存储数据(由过期时间决定)
/
/
4
) vuex的仓库(store.js)：临时存储数据(刷新页面数据重置)
|
vuex仓库插件
store.js配置文件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
export default new Vuex.Store({
state: {
title:
'默认值'
},
mutations: {
/
/
mutations 为 state 中的属性提供setter方法
/
/
setter方法名随意，但是参数列表固定两个：state, newValue
setTitle(state, newValue) {
state.title
=
newValue;
}
},
actions: {}
})
|
在任意组件中给仓库变量赋值
|
1
2
|
this.$store.state.title
=
'newTitle'
this.$store.commit(
'setTitle'
,
'newTitle'
)
|
在任意组件中取仓库变量的值
|
1
|
console.log(this.$store.state.title)
|
vue-cookie插件
安装
|
1
|
>: cnpm install vue
-
cookies
|
main.js 配置
|
1
2
3
4
5
6
7
8
9
10
11
|
/
/
第一种
import
cookies
from
'vue-cookies'
/
/
导入插件
Vue.use(cookies);
/
/
加载插件
new Vue({
/
/
...
cookies,
/
/
配置使用插件原型 $cookies
}).$mount(
'#app'
);
/
/
第二种
import
cookies
from
'vue-cookies'
/
/
导入插件
Vue.prototype.$cookies
=
cookies;
/
/
直接配置插件原型 $cookies
|
使用
|
1
2
3
4
5
6
7
8
9
|
/
/
增(改): 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
2
3
4
5
|
/
/
1
) 什么是token：安全认证的字符串
/
/
2
) 谁产生的：后台产生
/
/
3
) 谁来存储：后台存储（session表、文件、内存缓存），前台存储（cookie）
/
/
4
) 如何使用：服务器先生成反馈给前台(登陆认证过程)，前台提交给后台完成认证(需要登录后的请求)
/
/
5
) 前后台分离项目：后台生成token，返回给前台
=
> 前台自己存储，发送携带token请求
=
> 后台完成token校验
=
> 后台得到登陆用户
|
axios插件
安装
|
1
|
>: cnpm install axios
|
main.js配置
|
1
2
|
import
axios
from
'axios'
/
/
导入插件
Vue.prototype.$axios
=
axios;
/
/
直接配置插件原型 $axios
|
使用
|
1
2
3
4
5
6
|
this.axios({
url:
'请求接口'
,
method:
'get|post请求'
,
data: {post等提交的数据},
params: {get提交的数据}
}).then(请求成功的回调函数).catch(请求失败的回调函数)
|
案例
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
/
/
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)
});
|
跨域问题（同源策略）
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
/
/
后台接收到前台的请求，可以接收前台数据与请求信息，发现请求的信息不是自身服务器发来的请求，拒绝响应数据，这种情况称之为
-
跨域问题（同源策略 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
|
element-ui插件
安装
|
1
|
>: cnpm i element
-
ui
-
S
|
main.js配置
|
1
2
3
|
import
ElementUI
from
'element-ui'
;
import
'element-ui/lib/theme-chalk/index.css'
;
Vue.use(ElementUI);
|
使用
|
1
|
依照官网 https:
/
/
element.eleme.cn
/
#/zh-CN/component/installation api
|
|
1
2
3
4
5
6
|
this.$router.push(
'/course'
);
this.$router.push({name: course});
this.$router.go(
-
1
);
this.$router.go(
1
);
<router
-
link to
=
"/course"
>课程页<
/
router
-
link>
<router
-
link :to
=
"{name: 'course'}"
>课程页<
/
router
-
link>
|
第一种
router.js
|
1
2
3
4
5
6
7
8
|
routes: [
/
/
...
{
path:
'/course/:id/detail'
,
name:
'course-detail'
,
component: CourseDetail
},
]
|
跳转.vue
|
1
2
3
4
5
6
7
8
9
10
11
|
<template>
<!
-
-
标签跳转
-
-
>
<router
-
link :to
=
"`/course/${course.id}/detail`"
>{{ course.name }}<
/
router
-
link>
<
/
template>
<script>
/
/
...
goDetail() {
/
/
逻辑跳转
this.$router.push(`
/
course
/
${this.course.
id
}
/
detail`);
}
<
/
script>
|
接收.vue
|
1
2
3
|
created() {
let
id
=
this.$route.params.
id
;
}
|
第二种
router.js
|
1
2
3
4
5
6
7
8
|
routes: [
/
/
...
{
path:
'/course/detail'
,
name:
'course-detail'
,
component: CourseDetail
},
]
|
跳转.vue
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<template>
<!
-
-
标签跳转
-
-
>
<router
-
link :to
=
"{
name:
'course-detail'
,
query: {
id
: course.
id
}
}">{{ course.name }}<
/
router
-
link>
<
/
template>
<script>
/
/
...
goDetail() {
/
/
逻辑跳转
this.$router.push({
name:
'course-detail'
,
query: {
id
: this.course.
id
}
});
}
<
/
script>
|
接收.vue
|
1
2
3
|
created() {
let
id
=
this.$route.query.
id
;
}
|
可以完成跨组件传参的四种方式
|
1
2
3
4
|
/
/
1
) localStorage：永久存储数据
/
/
2
) sessionStorage：临时存储数据(刷新页面数据不重置，关闭再重新开启标签页数据重置)
/
/
3
) cookie：临时或永久存储数据(由过期时间决定)
/
/
4
) vuex的仓库(store.js)：临时存储数据(刷新页面数据重置)
|
vuex仓库插件
store.js配置文件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
export default new Vuex.Store({
state: {
title:
'默认值'
},
mutations: {
/
/
mutations 为 state 中的属性提供setter方法
/
/
setter方法名随意，但是参数列表固定两个：state, newValue
setTitle(state, newValue) {
state.title
=
newValue;
}
},
actions: {}
})
|
在任意组件中给仓库变量赋值
|
1
2
|
this.$store.state.title
=
'newTitle'
this.$store.commit(
'setTitle'
,
'newTitle'
)
|
在任意组件中取仓库变量的值
|
1
|
console.log(this.$store.state.title)
|
vue-cookie插件
安装
|
1
|
>: cnpm install vue
-
cookies
|
main.js 配置
|
1
2
3
4
5
6
7
8
9
10
11
|
/
/
第一种
import
cookies
from
'vue-cookies'
/
/
导入插件
Vue.use(cookies);
/
/
加载插件
new Vue({
/
/
...
cookies,
/
/
配置使用插件原型 $cookies
}).$mount(
'#app'
);
/
/
第二种
import
cookies
from
'vue-cookies'
/
/
导入插件
Vue.prototype.$cookies
=
cookies;
/
/
直接配置插件原型 $cookies
|
使用
|
1
2
3
4
5
6
7
8
9
|
/
/
增(改): 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
2
3
4
5
|
/
/
1
) 什么是token：安全认证的字符串
/
/
2
) 谁产生的：后台产生
/
/
3
) 谁来存储：后台存储（session表、文件、内存缓存），前台存储（cookie）
/
/
4
) 如何使用：服务器先生成反馈给前台(登陆认证过程)，前台提交给后台完成认证(需要登录后的请求)
/
/
5
) 前后台分离项目：后台生成token，返回给前台
=
> 前台自己存储，发送携带token请求
=
> 后台完成token校验
=
> 后台得到登陆用户
|
axios插件
安装
|
1
|
>: cnpm install axios
|
main.js配置
|
1
2
|
import
axios
from
'axios'
/
/
导入插件
Vue.prototype.$axios
=
axios;
/
/
直接配置插件原型 $axios
|
使用
|
1
2
3
4
5
6
|
this.axios({
url:
'请求接口'
,
method:
'get|post请求'
,
data: {post等提交的数据},
params: {get提交的数据}
}).then(请求成功的回调函数).catch(请求失败的回调函数)
|
案例
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
/
/
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)
});
|
跨域问题（同源策略）
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
/
/
后台接收到前台的请求，可以接收前台数据与请求信息，发现请求的信息不是自身服务器发来的请求，拒绝响应数据，这种情况称之为
-
跨域问题（同源策略 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
|
element-ui插件
安装
|
1
|
>: cnpm i element
-
ui
-
S
|
main.js配置
|
1
2
3
|
import
ElementUI
from
'element-ui'
;
import
'element-ui/lib/theme-chalk/index.css'
;
Vue.use(ElementUI);
|
使用
|
1
|
依照官网 https:
/
/
element.eleme.cn
/
#/zh-CN/component/installation api
|