一：路由跳轉
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：css
（1）query：傳參的時候刷新頁面傳參數據不會消失前端
（2）params：傳參的時候刷新頁面數據會消失vue
（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：ios
（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:vuex
（1）上述課程詳情頁 更改了主頁與課程頁面的名稱 且刷新以後課程名稱不會更改成原有的npm
（2）localstorage存儲的是永久的數據django
（2）方式二：VUE倉庫（store.js）
（1）element-ui
<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:axios
（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);