VUE框架之路由层，仓库层
一：路由跳转
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>
<template> <div class="nav"> <ul> <li :class="{active: currentPage === '/'}"> <router-link to="/">主页</router-link> </li> <li :class="{active: currentPage === '/course'}"> <router-link to="/course">课程</router-link> </li> <li :class="{active: currentPage === '/course_detail'}"> <!-- 路由跳转--> <router-link :to="{name: 'course_detail'}">课程详情页</router-link> </li> </ul> </div> </template> <script> export default { name: "Nav" } </script> <style scoped> .nav { width: 100%; height: 60px; background-color: black; } .nav li { float: left; font: normal 20px/60px '微软雅黑'; padding: 0 30px; } .nav li:hover { cursor: pointer; background-color: aquamarine; } .nav li.active { cursor: pointer; background-color: aquamarine; } </style>
<template> <div> <Nav></Nav> <button type="button" @click="goPage('/course')">跳转课程页面</button> <button type="button" @click="gocourse_detail('/course_detail')">跳转课程详情页面</button> <button type="button" @click="goPage('/')">跳转主页</button> <button type="button" @click="goBack">页面前进返回</button> </div> </template> <script> import Nav from "../components/Nav"; let course_list = [ { id: 1, name: 'Python入门到入土' }, { id: 2, name: '前端放弃攻略' }, { id: 3, name: '你最棒，他最强' }, { id: 4, name: '基佬修炼法则' }, ]; export default { name: "course", components: { Nav }, data() { return { course_list } }, methods: { goPage(path) { let current_path = this.$route.path; if (current_path != path) { this.$router.push(path) } }, goBack() { this.$router.go(-1); this.$router.go(1) }, gocourse_detail(){ // this.$router.push({name:'course_detail'}) this.$router.push({name: 'course_detail'}); } }, } </script> <style scoped> </style>
<template> <div class=""> <Nav></Nav> <button type="button" @click="goPage('/course')">跳转课程页面</button> <button type="button" @click="gocourse_detail('/course_detail')">跳转课程详情页面</button> <button type="button" @click="goPage('/')">跳转主页</button> <button type="button" @click="goBack">页面前进返回</button> </div> </template> <script> import Nav from "../components/Nav"; export default { name: 'home', components: { Nav, }, methods: { goPage(path) { let current_path = this.$route.path; if (current_path != path) { this.$router.push(path) // 跳转到页面 } }, goBack() { this.$router.go(-1); // 返回上一页 this.$router.go(-2); // 返回上两页 this.$router.go(1) // 前进一页 }, gocourse_detail(){ this.$router.push({name: 'course_detail'}); // 路由跳转 } } } </script>
二：路由传参
（1）方式一
<template> <div class="course-card"> <h3 @click="goDetail">{{course.name}}</h3> </div> </template> <script> export default { name: "CourseCard", props: ['course'], methods:{ goDetail(){ this.$router.push({ name:'course_detail', query:{id:this.course.id}, // 页面刷新传参不会消失 params:{id:this.course.id} // 页面刷新传参会消失 }) } } } </script> <style scoped> .course-card h3, .course-card a { width: 200px; height: 200px; border-radius: 50%; background-color: coral; font: normal 20px/200px 'STSong'; float: left; text-align: center; cursor: pointer; display: block; } </style>
<template> <div class="nav"> <ul> <li :class="{active: currentPage === '/'}"> <router-link to="/">主页</router-link> </li> <li :class="{active: currentPage === '/course'}"> <router-link to="/course">课程</router-link> </li> <li :class="{active: currentPage === '/course_detail'}"> <!-- 路由跳转--> <router-link :to="{name: 'course_detail'}">课程详情页</router-link> </li> </ul> </div> </template> <script> export default { name: "Nav", data(){ return{ currentPage:'' } }, created() { this.currentPage = this.$route.path } } </script> <style scoped> .nav { width: 100%; height: 60px; background-color: black; } .nav li { float: left; font: normal 20px/60px '微软雅黑'; padding: 0 30px; } .nav li:hover { cursor: pointer; background-color: aquamarine; } .nav li.active { cursor: pointer; background-color: aquamarine; } </style>
<template> <div> <Nav></Nav> <button type="button" @click="goPage('/course')">跳转课程页面</button> <button type="button" @click="gocourse_detail('/course_detail')">跳转课程详情页面</button> <button type="button" @click="goPage('/')">跳转主页</button> <button type="button" @click="goBack">页面前进返回</button> <h2>课程页</h2> <hr> <div> <CourseCard v-for="course in course_list" :key="course.name" :course="course"></CourseCard> </div> </div> </template> <script> import Nav from "../components/Nav"; import CourseCard from '@/components/CourseCard' let course_list = [ { id: 1, name: 'Python入门到入土' }, { id: 2, name: '前端放弃攻略' }, { id: 3, name: '你最棒，他最强' }, { id: 4, name: '基佬修炼法则' }, ]; export default { name: "course", components: { Nav, CourseCard }, data() { return { course_list } }, methods: { goPage(path) { let current_path = this.$route.path; if (current_path != path) { this.$router.push(path) } }, goBack() { this.$router.go(-1); this.$router.go(1) }, gocourse_detail() { this.$router.push({name: 'course_detail'}); } }, } </script> <style scoped> </style>
<template> <div> <Nav></Nav> <button type="button" @click="goPage('/course')">跳转课程页面</button> <button type="button" @click="goPage('/')">跳转主页</button> <button type="button" @click="goBack">页面前进返回</button> <h2>课程详情页</h2> <hr> <p> {{course.name}} </p> <p> {{course.info}}</p> <p> {{course.price}}</p> </div> </template> <script> import Nav from "../components/Nav"; let course_list = [ { id: 1, name: 'Python入门到入土', price: 6.66, info: '三分钟入门，一分钟入土！学了你不吃亏，不学你就废了！' }, { id: 2, name: '前端放弃攻略', price: 3.66, info: '学习前端，忘掉所有痛苦！' }, { id: 3, name: '你最棒，他最强', price: 5.22, info: '别做梦了！' }, { id: 4, name: '基佬修炼法则', price: 80000, info: '就是他，错不了！' }, ]; export default { name: "Course-detail", components: { Nav }, data() { return { course: {}, } }, methods: { goPage(path) { let current_path = this.$route.path; if (current_path != path) { this.$router.push(path) } }, goBack() { this.$router.go(-1); this.$router.go(1); } }, created() { let id = this.$route.query.id; // 接受传参值 // let id = this.$route.query.id; // 接受传参值 for (let courses of course_list) { // 便利所有的值 if (id == courses.id) { this.course = courses; break } } } } </script> <style scoped> </style>
<template> <div class=""> <Nav></Nav> <button type="button" @click="goPage('/course')">跳转课程页面</button> <button type="button" @click="gocourse_detail('/course_detail')">跳转课程详情页面</button> <button type="button" @click="goBack">页面前进返回</button> <h2>主页</h2> <hr> </div> </template> <script> import Nav from "../components/Nav"; export default { name: 'home', components: { Nav, }, methods: { goPage(path) { let current_path = this.$route.path; if (current_path != path) { this.$router.push(path) // 跳转到页面 } }, goBack() { this.$router.go(-1); // 返回上一页 this.$router.go(-2); // 返回上两页 this.$router.go(1) // 前进一页 }, gocourse_detail() { this.$router.push({name: 'course_detail'}); // 路由跳转 } } } </script>
PS：
（1）query：传参的时候刷新页面传参数据不会消失
（2）params：传参的时候刷新页面数据会消失
（2）方式二
<template> <div class="nav"> <ul> <li :class="{active: currentPage === '/'}"> <router-link to="/">主页</router-link> </li> <li :class="{active: currentPage === '/course'}"> <router-link to="/course">课程</router-link> </li> <li :class="{active: currentPage === '/course_detail'}"> <!-- 路由跳转--> <router-link :to="{name: 'course_detail'}">课程详情页</router-link> </li> </ul> </div> </template> <script> export default { name: "Nav", data(){ return{ currentPage:'' } }, created() { this.currentPage = this.$route.path } } </script> <style scoped> .nav { width: 100%; height: 60px; background-color: black; } .nav li { float: left; font: normal 20px/60px '微软雅黑'; padding: 0 30px; } .nav li:hover { cursor: pointer; background-color: aquamarine; } .nav li.active { cursor: pointer; background-color: aquamarine; } </style>
<template> <div class="course-card"> <h3 @click="goDetail">{{course.name}}</h3> </div> </template> <script> export default { name: "CourseCard", props: ['course'], methods:{ goDetail(){ this.$router.push( this.$router.push(`/course_detail/${this.course.id}`) // 通过传参id 需要使用``这个双引号可以添加变量 ) } } } </script> <style scoped> .course-card h3, .course-card a { width: 200px; height: 200px; border-radius: 50%; background-color: coral; font: normal 20px/200px 'STSong'; float: left; text-align: center; cursor: pointer; display: block; } </style>
<template> <div> <Nav></Nav> <button type="button" @click="goPage('/course')">跳转课程页面</button> <button type="button" @click="gocourse_detail('/course_detail')">跳转课程详情页面</button> <button type="button" @click="goPage('/')">跳转主页</button> <button type="button" @click="goBack">页面前进返回</button> <h2>课程页</h2> <hr> <div> <CourseCard v-for="course in course_list" :key="course.name" :course="course"></CourseCard> </div> </div> </template> <script> import Nav from "../components/Nav"; import CourseCard from '@/components/CourseCard' let course_list = [ { id: 1, name: 'Python入门到入土' }, { id: 2, name: '前端放弃攻略' }, { id: 3, name: '你最棒，他最强' }, { id: 4, name: '基佬修炼法则' }, ]; export default { name: "course", components: { Nav, CourseCard }, data() { return { course_list } }, methods: { goPage(path) { let current_path = this.$route.path; if (current_path != path) { this.$router.push(path) } }, goBack() { this.$router.go(-1); this.$router.go(1) }, gocourse_detail() { this.$router.push({name: 'course_detail'}); } }, } </script> <style scoped> </style>
<template> <div> <Nav></Nav> <button type="button" @click="goPage('/course')">跳转课程页面</button> <button type="button" @click="goPage('/')">跳转主页</button> <button type="button" @click="goBack">页面前进返回</button> <h2>课程详情页</h2> <hr> <p> {{course.name}} </p> <p> {{course.info}}</p> <p> {{course.price}}</p> </div> </template> <script> import Nav from "../components/Nav"; let course_list = [ { id: 1, name: 'Python入门到入土', price: 6.66, info: '三分钟入门，一分钟入土！学了你不吃亏，不学你就废了！' }, { id: 2, name: '前端放弃攻略', price: 3.66, info: '学习前端，忘掉所有痛苦！' }, { id: 3, name: '你最棒，他最强', price: 5.22, info: '别做梦了！' }, { id: 4, name: '基佬修炼法则', price: 80000, info: '就是他，错不了！' }, ]; export default { name: "Course-detail", components: { Nav }, data() { return { course: {}, } }, methods: { goPage(path) { let current_path = this.$route.path; if (current_path != path) { this.$router.push(path) } }, goBack() { this.$router.go(-1); this.$router.go(1); } }, created() { let id = this.$route.params.id; // 接受传参值 for (let courses of course_list) { // 便利所有的值 if (id == courses.id) { this.course = courses; break } } } } </script> <style scoped> </style>
<template> <div class=""> <Nav></Nav> <button type="button" @click="goPage('/course')">跳转课程页面</button> <button type="button" @click="gocourse_detail('/course_detail')">跳转课程详情页面</button> <button type="button" @click="goBack">页面前进返回</button> <h2>主页</h2> <hr> </div> </template> <script> import Nav from "../components/Nav"; export default { name: 'home', components: { Nav, }, methods: { goPage(path) { let current_path = this.$route.path; if (current_path != path) { this.$router.push(path) // 跳转到页面 } }, goBack() { this.$router.go(-1); // 返回上一页 this.$router.go(-2); // 返回上两页 this.$router.go(1) // 前进一页 }, gocourse_detail() { this.$router.push({name: 'course_detail'}); // 路由跳转 } } } </script>
{
path: '/course_detail/:id', // 类似于正则表达式
name: 'course_detail',
component: course_detail
},
PS：
（1）此种方式使用了正则表达式 通过匹配正则传递的参数 进行数据的筛选
三：VUE跨组件传参
（1）方式一：localstorage
<template> <div class="course-card"> <h3 @click="goDetail">{{course.name}}</h3> </div> </template> <script> export default { name: "CourseCard", props: ['course'], methods:{ goDetail(){ this.$router.push( { name:'course_detail', query:{id:this.course.id} } // 通过传参id 需要使用``这个双引号可以添加变量 ) } } } </script> <style scoped> .course-card h3, .course-card a { width: 200px; height: 200px; border-radius: 50%; background-color: coral; font: normal 20px/200px 'STSong'; float: left; text-align: center; cursor: pointer; display: block; } </style>
<template> <div class="nav"> <ul> <li :class="{active: currentPage === '/'}"> <router-link to="/">主页</router-link> </li> <li :class="{active: currentPage === '/course'}"> <router-link to="/course">课程</router-link> </li> <li :class="{active: currentPage === '/course_detail'}"> <!-- 路由跳转--> <router-link :to="{name: 'course_detail'}">课程详情页</router-link> </li> </ul> </div> </template> <script> export default { name: "Nav", data(){ return{ currentPage:'' } }, created() { this.currentPage = this.$route.path } } </script> <style scoped> .nav { width: 100%; height: 60px; background-color: black; } .nav li { float: left; font: normal 20px/60px '微软雅黑'; padding: 0 30px; } .nav li:hover { cursor: pointer; background-color: aquamarine; } .nav li.active { cursor: pointer; background-color: aquamarine; } </style>
<template> <div> <Nav></Nav> <button type="button" @click="goPage('/course')">跳转课程页面</button> <button type="button" @click="gocourse_detail('/course_detail')">跳转课程详情页面</button> <button type="button" @click="goPage('/')">跳转主页</button> <button type="button" @click="goBack">页面前进返回</button> <h2>{{cTitle}}</h2> <hr> <div> <CourseCard v-for="course in course_list" :key="course.name" :course="course"></CourseCard> </div> </div> </template> <script> import Nav from "../components/Nav"; import CourseCard from '@/components/CourseCard' let course_list = [ { id: 1, name: 'Python入门到入土' }, { id: 2, name: '前端放弃攻略' }, { id: 3, name: '你最棒，他最强' }, { id: 4, name: '基佬修炼法则' }, ]; export default { name: "course", components: { Nav, CourseCard }, data() { return { course_list, cTitle: '课程页' } }, methods: { goPage(path) { let current_path = this.$route.path; if (current_path != path) { this.$router.push(path) } }, goBack() { this.$router.go(-1); this.$router.go(1) }, gocourse_detail() { this.$router.push({name: 'course_detail'}); } }, created() { localStorage.cTitle && (this.cTitle = localStorage.cTitle) } } </script> <style scoped> </style>
<template> <div> <Nav></Nav> <button type="button" @click="goPage('/course')">跳转课程页面</button> <button type="button" @click="goPage('/')">跳转主页</button> <button type="button" @click="goBack">页面前进返回</button> <h2>课程详情页</h2> <p> 主页:<input type="text" v-model="hTitle"> <!-- 点击修改主页的名称会发生改名--> <button @click="changehTitle">修改主页</button> </p> <p> 课程页:<input type="text" v-model="cTitle"> <!-- 点击修改课程页的名称会发生改名--> <button @click="changecTitle"> 修改课程页</button> </p> <hr> <p> {{course.name}} </p> <p> {{course.info}}</p> <p> {{course.price}}</p> </div> </template> <script> import Nav from "../components/Nav"; let course_list = [ { id: 1, name: 'Python入门到入土', price: 6.66, info: '三分钟入门，一分钟入土！学了你不吃亏，不学你就废了！' }, { id: 2, name: '前端放弃攻略', price: 3.66, info: '学习前端，忘掉所有痛苦！' }, { id: 3, name: '你最棒，他最强', price: 5.22, info: '别做梦了！' }, { id: 4, name: '基佬修炼法则', price: 80000, info: '就是他，错不了！' }, ]; export default { name: "Course-detail", components: { Nav }, data() { return { course: {}, hTitle: '', cTitle: '', } }, methods: { goPage(path) { let current_path = this.$route.path; if (current_path != path) { this.$router.push(path) } }, goBack() { this.$router.go(-1); this.$router.go(1); }, changehTitle() { this.hTitle && (localStorage.hTitle = this.hTitle); // 只有this.hTitle为真（也就是输入的有值） 后面的才会成立 }, changecTitle() { this.cTitle && (localStorage.cTitle = this.cTitle) // 只有this.cTitle为真（也就是输入的有值） 后面的才会成立 }, }, created() { let id = this.$route.query.id; // 接受传参值 for (let courses of course_list) { // 便利所有的值 if (id == courses.id) { this.course = courses; break } } } } </script> <style scoped> </style>
<template> <div class=""> <Nav></Nav> <button type="button" @click="goPage('/course')">跳转课程页面</button> <button type="button" @click="gocourse_detail('/course_detail')">跳转课程详情页面</button> <button type="button" @click="goBack">页面前进返回</button> <h2>{{hTitle}}</h2> <hr> </div> </template> <script> import Nav from "../components/Nav"; export default { name: 'home', components: { Nav, }, data() { return { hTitle: '主页' } }, methods: { goPage(path) { let current_path = this.$route.path; if (current_path != path) { this.$router.push(path) // 跳转到页面 } }, goBack() { this.$router.go(-1); // 返回上一页 this.$router.go(-2); // 返回上两页 this.$router.go(1) // 前进一页 }, gocourse_detail() { this.$router.push({name: 'course_detail'}); // 路由跳转 } }, created() { localStorage.hTitle && (this.hTitle = localStorage.hTitle) // 如果localStorage有值 则使用仓库的 没有值使用默认值 } } </script>
PS:
（1）上述课程详情页 更改了主页与课程页面的名称 且刷新之后课程名称不会更改为原有的
（2）localstorage存储的是永久的数据
（2）方式二：VUE仓库（store.js）
（1）
<template> <div> <Nav></Nav> <button type="button" @click="goPage('/course')">跳转课程页面</button> <button type="button" @click="gocourse_detail('/course_detail')">跳转课程详情页面</button> <button type="button" @click="goPage('/')">跳转主页</button> <button type="button" @click="goBack">页面前进返回</button> <h2>{{cTitle}}</h2> <hr> <div> <CourseCard v-for="course in course_list" :key="course.name" :course="course"></CourseCard> </div> </div> </template> <script> import Nav from "../components/Nav"; import CourseCard from '@/components/CourseCard' let course_list = [ { id: 1, name: 'Python入门到入土' }, { id: 2, name: '前端放弃攻略' }, { id: 3, name: '你最棒，他最强' }, { id: 4, name: '基佬修炼法则' }, ]; export default { name: "course", components: { Nav, CourseCard }, data() { return { course_list, cTitle: '课程页' } }, methods: { goPage(path) { let current_path = this.$route.path; if (current_path != path) { this.$router.push(path) } }, goBack() { this.$router.go(-1); this.$router.go(1) }, gocourse_detail() { this.$router.push({name: 'course_detail'}); } }, created() { this.cTitle = this.$store.state.cTitle // 获取仓库数据 } } </script> <style scoped> </style>
<template> <div> <Nav></Nav> <button type="button" @click="goPage('/course')">跳转课程页面</button> <button type="button" @click="goPage('/')">跳转主页</button> <button type="button" @click="goBack">页面前进返回</button> <h2>课程详情页</h2> <p> 主页:<input type="text" v-model="hTitle"> <!-- 点击修改主页的名称会发生改名--> <button @click="changehTitle">修改主页</button> </p> <p> 课程页:<input type="text" v-model="cTitle"> <!-- 点击修改课程页的名称会发生改名--> <button @click="changecTitle"> 修改课程页</button> </p> <hr> <p> {{course.name}} </p> <p> {{course.info}}</p> <p> {{course.price}}</p> </div> </template> <script> import Nav from "../components/Nav"; let course_list = [ { id: 1, name: 'Python入门到入土', price: 6.66, info: '三分钟入门，一分钟入土！学了你不吃亏，不学你就废了！' }, { id: 2, name: '前端放弃攻略', price: 3.66, info: '学习前端，忘掉所有痛苦！' }, { id: 3, name: '你最棒，他最强', price: 5.22, info: '别做梦了！' }, { id: 4, name: '基佬修炼法则', price: 80000, info: '就是他，错不了！' }, ]; export default { name: "Course-detail", components: { Nav }, data() { return { course: {}, hTitle: '', cTitle: '', } }, methods: { goPage(path) { let current_path = this.$route.path; if (current_path != path) { this.$router.push(path) } }, goBack() { this.$router.go(-1); this.$router.go(1); }, changehTitle() { this.hTitle && (localStorage.hTitle = this.hTitle); // 只有this.hTitle为真（也就是输入的有值） 后面的才会成立 }, changecTitle() { console.log(this.$store); // 查看仓库数据存储在哪个目录下 this.$store.state.cTitle = this.cTitle; // 数据更改 }, }, created() { let id = this.$route.query.id; // 接受传参值 for (let courses of course_list) { // 便利所有的值 if (id == courses.id) { this.course = courses; break } } } } </script> <style scoped> </style>
import Vue from 'vue'
import Vuex from 'vuex'
import cookies from 'vue-cookies'
Vue.use(Vuex);
Vue.use(cookies);
export default new Vuex.Store({
state: {
cTitle:'课程页'
},
mutations: {
},
actions: {
}
})
PS:
（1）如上述课程详情页从仓库获取数据更改了课程页的名称
（2）刷新更改名称之后的页面 页面名称又恢复之前的页面
（3）vue通过仓库存储的数据 不会临时有效刷新就没了
（2）仓库插件
export default new Vuex.Store({
state: {
title: '默认值'
},
mutations: {
// mutations 为 state 中的属性提供setter方法
// setter方法名随意，但是参数列表固定两个：state, newValue
setTitle(state, newValue) {
state.title = newValue;
}
},
actions: {}
})
任意组件给变量赋值
this.$store.state.title = 'newTitle'
this.$store.commit('setTitle', 'newTitle')
任意组件获取变量的值
console.log(this.$store.state.title)
（3）方式三：cookie
（1）安装
cnpm install vue-cookies // 安装cookie插件
（2）配置
// 第一种
import cookies from 'vue-cookies' // 导入插件
Vue.use(cookies); // 加载插件
new Vue({
// ...
cookies, // 配置使用插件原型 $cookies
}).$mount('#app');
// 第二种
import cookies from 'vue-cookies' // 导入插件
Vue.prototype.$cookies = cookies; // 直接配置插件原型 $cookies
PS：推荐使用第二种
<template> <div class="tst-page"> <Nav></Nav> <h2>测试页面</h2> <p> <input type="text" v-model="token"> <button @click="setToken">设置token</button> </p> <p> <button @click="getToken">获取token</button> </p> <p> <button @click="delToken">删除token</button> </p> </div> </template> <script> import Nav from '@/components/Nav.vue' export default { name: "TestPage", components: { Nav }, data() { return { token: '' } }, methods: { setToken() { if (this.token) { let token = this.token; this.$cookies.set('token', token, '1d'); // 设置token 第一个参数是key 第二个参数是值 第三个参数是token生存时间 默认一天 console.log(token); this.token = '' } }, getToken() { this.$cookies.get('token') // 获取token }, delToken() { this.$cookies.remove('token') // 删除token }, } } </script> <style scoped> </style>
PS：
（1）token：用来认证的字符串
（2）产生：后台产生
（3）存储：后台存储（session表 文件 缓存） 前台存储：cookie
（4）使用：服务器生成返回给前台 前台进行认证的时候携带cookie进行认证
（5） 前后台分离项目：后台生成token，返回给前台 => 前台自己存储，发送携带token请求 => 后台完成token校验 => 后台得到登陆用户
四：axios
（1）作用：前后台数据进行交互
（2）安装
cnpm install axios
（3）main.js
import axios from 'axios'
Vue.prototype.$axios = axios;
（3）
<template> <div class="tst-page"> <Nav></Nav> <h2>测试页面</h2> <p> 用户名称: <input type="text" v-model="username"> </p> <p> 用户密码: <input type="text" v-model="password"> </p> <button type="button" @click="axiosAction">后台提交数据</button> </div> </template> <script> import Nav from '@/components/Nav.vue' export default { name: "TestPage", components: { Nav }, data() { return { username: '', password: '' } }, methods: { axiosAction() { // this.$axios({ // url: 'http://127.0.0.1:8000/test/', // 因为不在一个服务器必须写全路径 // method: 'get', // get请求 // params: { // username: this.username, // password: this.password, // } // }) this.$axios({ url: 'http://127.0.0.1:8000/test/', // 因为不在一个服务器必须写全路径 method: 'post', // get请求 params: { username: this.username, password: this.password, } }, this.username = '', this.password = '' ) .then(function (response) { // 回调函数 成功 console.log(response) }).catch(function (response) { console.log(response) }) }, } } </script> <style scoped> </style>
五：域间同源问题
// 后台接收到前台的请求，可以接收前台数据与请求信息，发现请求的信息不是自身服务器发来的请求，拒绝响应数据，这种情况称之为 - 跨域问题（同源策略 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
六：
>: cnpm i element-ui -S
（2）main.js配置
import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);
