day80-vue
vue路由name的使用
#路由配置 import Main from './views/Main' routes: [ { path: '/main', name: 'main', component: Main } ] #视图使用 <router-link :to="{name: 'main'}">主页</router-link> <!--注：如果to后面没值，路由就变成之前点击的路由-->
router-link与系统a标签的区别
router-link：
会被vue渲染成a标签，但是点击这样的a标签不能发生页面的转跳，只会出现组件的替换
<a>：
也可以完成同样的效果，但是会发生页面的转跳，并且效率低
路由的重定向
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/home',
redirect: '/', // 重定向
}
]
路由传参1
#转跳页面(发送数据id)：Course.vue <template> <div class="course"> <h1>课程</h1> <hr> <ul> <li v-for="course in courses" :key="course.title"> <router-link :to="'/course/detail/' + course.id">{{ course.title }}</router-link> <!--比如这里路由是/course/detail/1--> </li> </ul> </div> </template> <script> let course_list = [ { id: 1, title: '水浒传' }, { id: 2, title: '西游记' }, { id: 3, title: '金梅' }, ]; export default { name: "Course", data () { return { courses: [] } }, created () { <!--组件创建成功去获取数据,完成虚拟DOM--> this.courses = course_list }, } </script> <style scoped> </style> #路由：router.js { path: '/course/detail/:id', <!--:id代表可以完成任意内容匹配，然后用变量id保存 ,--> <!--比如请求/course/detail/1 和 /course/detail/abc，id变量分别存的1和abc--> name: 'course-detail', <!--上面页面使用name相当于Django反向解析--> component: CourseDetail } #渲染页面(展现id对应的数据)：CourseDetail.vue <template> <div class="course-detail"> <h1>课程详情</h1> <hr> <h2>{{ ctx }}</h2> </div> </template> <script> let course_detail_list = [ '数据有误', '水浒传', '西游记', '金梅' ]; export default { name: "CourseDetail", data () { return { ctx: '' } }, created () { <!--this.$route：负责路由的数据--> <!--this.$router：负责路由的路径--> let index = this.$route.params.id; <!--this.$route.params可以拿到链接中变量的数据--> if (index < 0 || index >= course_detail_list.length) index = 0; this.ctx = course_detail_list[index] } } </script> <style scoped> </style>
路由传参2
#转跳页面：Course.vue <router-link :to="'/course/detail?id=' + course.id">{{ course.title }}</router-link> #路由：router.js { path: '/course/detail', name: 'course-detail', component: CourseDetail } #渲染页面：CourseDetail.vue created () { let index = this.$route.query.id; <!--this.$route.params可以拿到链接中？后面的数据--> if (index < 0 || index >= course_detail_list.length) index = 0; this.ctx = course_detail_list[index] }
路由传参(事件传参)3
#转跳页面：Course.vue <li v-for="course in courses" :key="course.title" @click="toDetail(course.id)"> {{ course.title }} </li> export default { name: "Course", data () { return { courses: [] } }, created () { this.courses = course_list }, methods: { toDetail (id) { this.$router.push({ <!--this.$route.params可以拿到链接中？后面的数据--> name: 'course-detail', // params: { <!--第一种传法--> // id: id // }, query: { <!--第二种传法--> id: id } }); this.$router.go(-1) <!--ps:点击页面，前往历史记录的前一页，正数，前往历史记录的后一页--> } } } #路由：router.js { path: '/course/detail', name: 'course-detail', component: CourseDetail } #渲染页面：CourseDetail.vue export default { name: "CourseDetail", data () { return { ctx: '' } }, created () { // let index = this.$route.params.id; <!--第一种接收--> // if (index < 0 || index >= course_detail_list.length) index = 0; // this.ctx = course_detail_list[index] let index = this.$route.query.id; <!--第二种接收--> if (index < 0 || index >= course_detail_list.length) index = 0; this.ctx = course_detail_list[index] } }
仓库的使用
#子组件 <template> <div class="main"> <h1>{{ title }}</h1> <MainSub></MainSub> </div> </template> <script> import MainSub from '@/components/MainSub' export default { name: "Main", components: { MainSub }, computed: { <!--计算属性，监听仓库的值，只要仓库的值发生改变就会激活该方法--> title () { return this.$store.state.title <!--获取仓库的值--> } } } </script> <style scoped> </style> #仓库 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); export default new Vuex.Store({ state: { title: '123' <!--全局可以访问的变量 - 用于获取值 --> }, mutations: { <!--全局可以访问的方法 - 用于修改值 --> updateTitle (state, newValue) { <!--state是title: '123'，newValue是接收的新值 --> state.title = newValue } }, actions: {} }) #子子子组件 <template> <div> <input type="text" v-model="val"> <button @click="btnClick">修改</button> </div> </template> <script> export default { name: "MainSubSub", data () { return { val: '' } }, methods: { btnClick () { this.$store.commit('updateTitle', this.val); <!--给仓库变量传递新值 --> } }, } </script> <style scoped> </style>
前后台交互：axios
准备工作
#安装 >: cd 项目目录 >: cnpm install axios --save #配置：main.js import Axios from 'axios' Vue.prototype.$axios = Axios; <!--在任何地方都能拿到Axios：this.$axios-->
跨域问题(同源策略)：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）允许跨域源
CORS_ORIGIN_ALLOW_ALL = True
前台axios请求方式
get: export default { name: 'home', components: { HelloWorld }, created () { this.$axios({ <!--第一种get--> url: 'http://localhost:8000/test/data/', method: 'get', params: { <!--往后台发送数据--> usr: 'zero', pwd: '000' } }).then((response) => { console.log(response.data) <!--从后台接收数据--> }).error((error) => { console.log(error) }); this.$axios.get('http://localhost:8000/test/data/', { <!--第二种get--> params: { usr: 'zero', pwd: '000' } }).then((response) => { console.log(response.data) }).error((error) => { console.log(error) }); } post： export default { name: 'home', components: { HelloWorld }, created () { this.$axios({ <!--第一种post--> url: 'http://localhost:8000/test/data/', method: 'post', data: { <!--往后台发送数据--> username: 'owen', password: '123' } }).then((response) => { <!--从后台接收数据--> console.log(response.data) }).error((error) => { console.log(error) }); this.$axios.post('http://localhost:8000/test/data/', { <!--第二种post--> username: 'owen', password: '123', headers: { <!--默认发送原生的json,可以自己规定发送的类型--> 'Content-Type': 'urlencoded' } }).then((response) => { console.log(response.data) }).error((error) => { console.log(error) }); }
前台操作Cookie
#安装 >: cd 项目目录 >: cnpm install vue-cookie --save #配置：main.js import cookie from 'vue-cookie' Vue.prototype.$cookie = cookie; #使用：在前端任何方法中 ps：token是后台返回的 // 设置cookie this.$cookie.set('token', token, 1); <!--键，值，过期时间--> // 取出cookie this.$cookie.get('token') // 删除cookie this.$cookie.delete('token');
