day80 路由、仓库、前后台交互、跨域问题、Vue操作cookie
一、路由文件：router.js <router-link>详解
前台路由： 页面组件与路径对应的关系【类比后台中路由与view函数的对应关系】
import Vue from 'vue' # 因为router 依赖于Vue
import Router from 'vue-router'
import Home from './views/Home.vue' # 组件取别名，
import User from './views/User'
Vue.use(Router);
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/', # http://localhost:8080/ 前缀由base补充了
name: 'home',
component: Home # 组件页面
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
}
]
})
1. App.js之router-link中的to跳转，to不写具体路径就会默认跳转到当前页面，点了哪个页面就在哪个页面，相当于给自身再发送一次请求
<router-link to >主页</router-link>
2. 路由的name使用：【需绑定to属性，大括号中为key,value形式】
<router-link :to="{name: 'home'}" >主页</router-link>
注：router-link与系统a标签的区别
router-link: 会被vue渲染成a标签，但是点击这样的a标签不能发生页面的转跳，只会出现组件的替换
a: 也可以完成同样的效果，但是会发生页面的转跳
Link与a标签的区别，Link是组件的替换，而a 标签是页面的跳转【自我刷新效率是底的，Link是从缓存中获取数据】
3. 路由重定向：
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/home',
redirect:'/', ==> 路由重定向
}]
4. 路由参数
1）. 获取url后面的参数【this.$route】: http://localhost:8080/course/detail/1
let index = this.$route.params.id
if (index < 0 || index >= course_detail_list.length) index =0;
this.crx = course_detail_list[index]
router.js文件配置
routes: [
{path: '/course/detail/:id',
name: 'course-datail',
component: CourseDatail
},
]
Course.vue
<router-link :to="'/course/detail/'+ course.id " >{{course.title}}</router-link>
注：url后冒号：放在params: {} 中
2）. 获取url? 面的参数
路由：router.js
{
path: '/course/detail',
name: 'course-datail',
component: CourseDatail
},
跳转页面：
<!--<router-link :to="'/course/detail/' + course.id" >{{course.title}}</router-link>-->
<router-link :to="'/course/detail?id=' + course.id" >{{course.title}}</router-link>
渲染页面：
//管理数据[url后面冒号的参数]
// console.log(this.$route);
// let index = this.$route.params.id;
// // console.log(index);
// if (index < 0 || index >= course_detail_list.length) index =0;
// this.crx = course_detail_list[index]
console.log(this.$route);
let index = this.$route.query.id;
// console.log(index);
if (index < 0 || index >= course_detail_list.length) index =0;
this.crx = course_detail_list[index]
注：？号后的参数放在query: {id: "1"}中
3）. 逻辑转跳：router.js不写冒号参数接收，跳转页面绑定事件，添加path或name及参数
router.js页面：
{
path: '/course/detail',
name: 'course-datail',
component: CourseDatail
},
跳转页面：
<li v-for="course in courses" :key="course.title" @click="toDetail(course.id)">
methods:{
toDetail (id){
方式一，给path
// this.$router.push({path:'/course/detail?id=' + id})
方式二：push给name[渲染页course-datail是从params拿的]
// this.$router.push({
// name:'course-datail',
// params:{
// id:id
// }
//
// })
方式三：push给name [渲染页面course-datail是从query拿的]
this.$router.push({
name: 'course-datail',
query:{
id:id
}
})
}
}
渲染页面：
created (){
console.log('详情页面被渲染了');
//router管理路径
// console.log(this.$router);
//管理数据[url后面冒号的参数]
// console.log(this.$route);
// let index = this.$route.params.id;
// // console.log(index);
// if (index < 0 || index >= course_detail_list.length) index =0;
// this.crx = course_detail_list[index]
console.log(this.$route);
let index = this.$route.query.id;
// console.log(index);
if (index < 0 || index >= course_detail_list.length) index =0;
this.crx = course_detail_list[index]
this.&router方法：
this.$router.go(-1) ==> A 页面 ==> B 页面 ==>点击C页面的时候直接跳转到 A页面
this.$router.replace() ===> A 页面 ==> B 页面 ==>点击C页面, 点击<--返回的时候直接跳转到 A页面
this.$router.replace({
name: 'course-datail',
query:{
id:id
}
})
二、仓库：全局的单例
1）数据：子子组件点击事件提交新值给store.js中 mutations的特定函数UpdateTitle
methods:{
btnchange (){
this.$store.commit('UpdateTitle', this.val)
}
或者：自己监听
watch:{
val (){
this.$store.commit('updateTitle', this.val)
}
}
2）仓库： UpdateTitle接收新值，更新数据
//全局可以访问的变量 -- 获取值
state: {
title:"123"
},
//全局可以访问的方法 --- 修改值
mutations: {
UpdateTitle (state, new_val){
state.title = new_val
}
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
export default new Vuex.Store({
// 全局可以访问的变量 - 获取值
// 组件内：this.$store.state.title
state: {
title: '主页'
},
// 全局可以访问的方法 - 修改值
// 组件内：this.$store.commit('updateTitle', '新值')
mutations: {
updateTitle (state, newValue) {
state.title = newValue
}
},
actions: {}
})
3） 父组件： 监听stor数据并渲染新值
computed:{
title (){
return this.$store.state.title
}
},
例子代码：
MainSubSub
<template> <div> <input type="text" v-model="val"> <button @click="btnchange">修改</button> </div> </template> <script> export default { name: "MainSubSub", data (){ return{ val:"" } }, methods:{ btnchange (){ this.$store.commit('UpdateTitle', this.val) } }, watch:{ val (){ this.$store.commit('updateTitle', this.val) } } } </script> <style scoped> </style>
store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
export default new Vuex.Store({
state: {
title:"123"
},
mutations: {
UpdateTitle (state, new_val){
state.title = new_val
}
},
actions: {
}
})
Main.vue
<template> <div class="main"> {{ title}} <MainSub></MainSub> </div> </template> <script> import MainSub from '../components/MainSub' export default { name: "Main", data (){ return { // title:this.$store.state.title } }, components:{ MainSub, }, computed:{ title (){ return this.$store.state.title } }, } </script> <style scoped> .main a{ font-size: 100px; color: #f00; } </style>
三、前后台交互
1.安装
cd 项目目录
cnpm install axios
2.配置main.js
ajax - vue的axios
import Axios from 'axios'
Vue.prototype.$axios = Axios 【this后面的名字通常加一个$符】
Vue.prototype原型，给它赋值的变量，在任何地方通过this.都可以点出来
首先Vue创建的对象就是一个个的实例,this就是全局的，任何地方都通过this可以获取到这个属性
3. axios发送get请求
this.$axios({
url: 'http://localhost:8000/test/data/',
method:"get",
}).then((response) => {
console.log(response.data)
})
}
4. axios发送post请求
this.$axios({
url: 'http://localhost:8000/test/data/',
method:"post",
}).then((response) => {
console.log(response.data)
})
}
简写：
this.$axios.get('http://localhost:8000/test/data/').then((response) => {
console.log(response.data)
});
this.$axios.post('http://localhost:8000/test/data/').then((response) => {
console.log(response.data)
})
5. axios携带带参数发送请求
this.$axios.get('http://localhost:8000/test/data/', {
params:{
username:'owen',
pwd:'123'
}
}).then((response) => {
console.log(response.data)
});
注：post不能像get一样发送数据，在后端我们服务端要求Content-Tyoe：‘application/x-www-form-urlencoded’
而axios帮我们做了一个stringify的处理，默认会把json放到请求体中提交到后端的。
this.$axios.post('http://localhost:8000/test/data/',"username='admin'&pwd='000'").then((response) => {
console.log(response.data)
})
post请求中如果是放在{}中，后端收到数据后默认放在body中
this.$axios.post('http://localhost:8000/test/data/',{
username:"admin",
pwd:"123"
}).then((response) => {
console.log(response.data)
})
后端： print('body', request.body) =>body b'{"username":"admin","pwd":"123"}'
四、跨域问题（同源策略）：Access-Control-Allow-Origin =>CORS
前提：前台向后台请求数据
1）服务器不一致 --- ip
2) 应用不一致 --- 端口
3）协议不一致 -- http <--> https
django解决跨域
1）安装django-cors-headers模块
2）在settings.py中配置
# 注册app
INSTALLED_APPS = [
...
'corsheaders'
]
3）添加中间件
MIDDLEWARE = [
...
'corsheaders.middleware.CorsMiddleware'
]
4）允许跨域源， settings:
CORS_ORIGIN_ALLOW_ALL = True
五、前台操作Cookie：vue-cookie
注：前后台分离时，后台需要在响应的字典中添加token, 前台需要自己处理cookie
return JsonResponse({'msg': 'post ok',
'token':'asdfsdafsdfsadf'
})
安装
>: cd 项目目录
>: cnpm install vue-cookie --save
配置：main.js
import cookie from 'vue-cookie'
Vue.prototype.$cookie = cookie;
使用：在任何方法中
// token是后台返回的
// 设置cookie
// this.$cookie.set(key, value, time)
this.$cookie.set('token', token, 1);
// 取出cookie
// this.$cookie.get(key)
console.log(this.$cookie.get('token'));
// 删除cookie
// this.$cookie.delete(key)
this.$cookie.delete('token');
