路由傳參
類似於django，vue也有路由系統，進行路由的分發，有三種傳參方式
路由傳參方式：<router-link></router-link>
-
第一種：通過有名分組進行傳參
router.js
{ path: '/course/detail/:pk', name: 'course-detail', component: CourseDetail }傳遞層
<!-- card的內容 { id: 1, bgColor: 'red', title: 'Python基礎' } --> <router-link :to="`/course/detail/${card.id}`">詳情頁</router-link>接收層
let id = this.$route.params.pk演變體
""" { path: '/course/:pk/:name/detail', name: 'course-detail', component: CourseDetail } <router-link :to="`/course/${card.id}/${card.title}/detail`">詳情頁</router-link> let id = this.$route.params.pk let title = this.$route.params.name """ -
第二種：通過數據包的方式進行傳參
router.js
{ // 瀏覽器鏈接顯示：/course/detail path: '/course/detail', name: 'course-detail', component: CourseDetail }傳遞層
<router-link :to="{ name: 'course-detail', params:{pk:card.id}, }">詳情頁</router-link>接收層
let id = this.$route.params.pk -
第三種：通過qurey進行傳參，通過路由拼接方式傳參
router.js
{ // 瀏覽器鏈接顯示：/course/detail?pk=1 path: '/course/detail', name: 'course-detail', component: CourseDetail }傳遞層
<router-link :to="{ name: 'course-detail', query:{pk:card.id}, }">詳情頁</router-link>接收層
let id = this.$route.query.pk
邏輯傳參
通過router進行傳參
-
第一種
""" 路由： path: '/course/detail/:pk' 跳轉：id是存放課程id的變量 this.$router.push(`/course/detail/${id}`) 接收： let id = this.$route.params.pk """ -
第二種：通過param數據包的方式
""" 路由： path: '/course/detail' 跳轉：id是存放課程id的變量 this.$router.push({ 'name': 'course-detail', params: {pk: id} }); 接收： let id = this.$route.params.pk """ -
第三種：通過query的方式
""" 路由： path: '/course/detail' 跳轉：id是存放課程id的變量 this.$router.push({ 'name': 'course-detail', query: {pk: id} }); 接收： let id = this.$route.query.pk """
歷史記錄跳轉
"""
返回歷史記錄上一頁：
this.$router.go(-1)
去向歷史記錄下兩頁：
this.$router.go(2)
"""
vuex倉庫
概念
vuex倉庫就是vue全局的數據倉庫，在任何組件中都可以通過this.$store來共享這個倉庫中的數據，完成跨組件間的信息交互，不同於sessionStorage和localStorage，它會在瀏覽器刷新后進行重置
- sessionStorage：頁面關閉，數據清空
- localStorage：數據永久保存
- vuex倉庫：它會在瀏覽器刷新后進行重置
使用
store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
export default new Vuex.Store({
state: {
// 設置任何組件都能訪問的共享數據
course_page: ''
},
mutations: {
// 通過外界的新值來修改倉庫中共享數據的值
updateCoursePage(state, new_value) {
console.log(state);
console.log(new_value);
state.course_page = new_value;
}
},
actions: {}
})
倉庫共享數據的獲取與修改：在任何組件的邏輯中
// 獲取
let course_page = this.$store.state.course_page
// 直接修改
this.$store.state.course_page = '新值'
// 方法修改
this.$store.commit('updateCoursePage', '新值');
axios前后台數據交互
-
安裝：
直接在項目目錄下終端進行安裝
npm install axios --save -
配置：
// main.js // 配置axios，完成ajax請求 import axios from 'axios' Vue.prototype.$axios = axios; -
使用：直接在組件邏輯中使用
created() { // 組件創建成功的鈎子函數 // 拿到要訪問課程詳情的課程id let id = this.$route.params.pk || this.$route.query.pk || 1; this.$axios({ url: `http://127.0.0.1:8000/course/detail/${id}/`, // 后台接口 method: 'get', // 請求方式 }).then(response => { // 請求成功 console.log('請求成功'); console.log(response.data); this.course_ctx = response.data; // 將后台數據賦值給前台變量完成頁面渲染 }).catch(error => { // 請求失敗 console.log('請求失敗'); console.log(error); }) }
跨域問題
主要就是因為前后端分離，前台需要從后台獲取數據，但是后台服務器默認只為自己的程序提供數據，對於其他程序的請求，都會造成跨域問題，瀏覽器會報 CORS 錯誤
只有協議、IP和端口都一樣的時候，才不會造成跨域問題
Django解決跨域問題
-
第一步：安裝插件
pip install django-cors-headers -
第二步：在settings中進行配置
# 注冊app INSTALLED_APPS = [ ... 'corsheaders' ] # 添加中間件 MIDDLEWARE = [ ... 'corsheaders.middleware.CorsMiddleware' ] # 允許跨域源 CORS_ORIGIN_ALLOW_ALL = False # 設置白名單 CORS_ORIGIN_WHITELIST = [ # 本機建議就配置127.0.0.1，127.0.0.1不等於localhost 'http://127.0.0.1:8080', 'http://localhost:8080', ]
原生Django提供后台數據
-
第一步：配置路由
from django.conf.urls import url from app import views urlpatterns = [ url(r'^course/detail/(?P<pk>.*)/', views.course_detail), ] -
第二步：寫視圖函數，返回數據
# 模擬數據庫中的數據 detail_list = [ { 'id': 1, 'bgColor': 'red', 'title': 'Python基礎', 'ctx': 'Python從入門到入土！' }, { 'id': 3, 'bgColor': 'blue', 'title': 'Django入土', 'ctx': '扶我起來，我還能戰！' }, { 'id': 8, 'bgColor': 'yellow', 'title': 'MySQL刪庫高級', 'ctx': '九九八十二種刪庫跑路姿勢！' }, ] from django.http import JsonResponse def course_detail(request, pk): data = {} for detail in detail_list: if detail['id'] == int(pk): data = detail break return JsonResponse(data, json_dumps_params={'ensure_ascii': False})
路由案例
router.js
import Vue from 'vue'
import Router from 'vue-router'
import Course from './views/Course'
import CourseDetail from './views/CourseDetail'
Vue.use(Router);
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/course',
name: 'course',
component: Course,
},
{
path: '/course/detail/:pk', // 第一種路由傳參
// path: '/course/detail', // 第二、三種路由傳參
name: 'course-detail',
component: CourseDetail
},
]
})
components/Nav.vue
<template>
<div class="nav">
<router-link to="/page-first">first</router-link>
<router-link :to="{name: 'page-second'}">second</router-link>
<router-link to="/course">課程</router-link>
</div>
</template>
<script>
export default {
name: "Nav"
}
</script>
<style scoped>
.nav {
height: 100px;
background-color: rgba(0, 0, 0, 0.4);
}
.nav a {
margin: 0 20px;
font: normal 20px/100px '微軟雅黑';
}
.nav a:hover {
color: red;
}
</style>
views/Course.vue
<template>
<div class="course">
<Nav></Nav>
<h1>課程主頁</h1>
<CourseCard :card="card" v-for="card in card_list" :key="card.title"></CourseCard>
</div>
</template>
<script>
import Nav from '@/components/Nav'
import CourseCard from '@/components/CourseCard'
export default {
name: "Course",
data() {
return {
card_list: [],
}
},
components: {
Nav,
CourseCard
},
created() {
let cards = [
{
id: 1,
bgColor: 'red',
title: 'Python基礎'
},
{
id: 3,
bgColor: 'blue',
title: 'Django入土'
},
{
id: 8,
bgColor: 'yellow',
title: 'MySQL刪庫高級'
},
];
this.card_list = cards;
}
}
</script>
<style scoped>
h1 {
text-align: center;
background-color: brown;
}
</style>
components/CourseCard.vue
<template>
<div class="course-card">
<div class="left" :style="{background: card.bgColor}"></div>
<!-- 邏輯跳轉 -->
<div class="right" @click="goto_detail">{{ card.title }}</div>
<!-- 鏈接跳轉 -->
<!-- 第一種 -->
<!--<router-link :to="`/course/detail/${card.id}`" class="right">{{ card.title }}</router-link>-->
<!-- 第二種 -->
<!--<router-link :to="{-->
<!--name: 'course-detail',-->
<!--params: {pk: card.id},-->
<!--}" class="right">{{ card.title }}</router-link>-->
<!-- 第三種 -->
<!--<router-link :to="{-->
<!--name: 'course-detail',-->
<!--query: {pk: card.id}-->
<!--}" class="right">{{ card.title }}</router-link>-->
</div>
</template>
<script>
export default {
name: "CourseCard",
props: ['card'],
methods: {
goto_detail() {
// 注：在跳轉之前可以完成其他一些相關的業務邏輯，再去跳轉
let id = this.card.id;
// 實現邏輯跳轉
// 第一種
this.$router.push(`/course/detail/${id}`);
// 第二種
// this.$router.push({
// 'name': 'course-detail',
// params: {pk: id}
// });
// 第三種
// this.$router.push({
// 'name': 'course-detail',
// query: {pk: id}
// });
// 在當前頁面時，有前歷史記錄與后歷史記錄
// go(-1)表示返回上一頁
// go(2)表示去向下兩頁
// this.$router.go(-1)
}
}
}
</script>
<style scoped>
.course-card {
margin: 10px 0 10px;
}
.left, .right {
float: left;
}
.course-card:after {
content: '';
display: block;
clear: both;
}
.left {
width: 50%;
height: 120px;
background-color: blue;
}
.right {
width: 50%;
height: 120px;
background-color: tan;
font: bold 30px/120px 'STSong';
text-align: center;
cursor: pointer;
display: block;
}
</style>
views/CourseDetail.vue
<template>
<div class="course-detail">
<h1>詳情頁</h1>
<hr>
<div class="detail">
<div class="header" :style="{background: course_ctx.bgColor}"></div>
<div class="body">
<div class="left">{{ course_ctx.title }}</div>
<div class="right">{{ course_ctx.ctx }}</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "CourseDetail",
data() {
return {
course_ctx: '',
val: '',
}
},
created() {
// 需求：獲取課程主頁傳遞過來的課程id，通過課程id拿到該課程的詳細信息
// 這是模擬后台的假數據 - 后期要換成從后台請求真數據
let detail_list = [
{
id: 1,
bgColor: 'red',
title: 'Python基礎',
ctx: 'Python從入門到入土！'
},
{
id: 3,
bgColor: 'blue',
title: 'Django入土',
ctx: '扶我起來，我還能戰！'
},
{
id: 8,
bgColor: 'yellow',
title: 'MySQL刪庫高級',
ctx: '九九八十二種刪庫跑路姿勢！'
},
];
// let id = 1;
// this.$route是專門管理路由數據的，下面的方式是不管哪種傳參方式，都可以接收
let id = this.$route.params.pk || this.$route.query.pk;
for (let dic of detail_list) {
if (dic.id == id) {
this.course_ctx = dic;
break;
}
}
}
}
</script>
<style scoped>
h1 {
text-align: center;
}
.detail {
width: 80%;
margin: 20px auto;
}
.header {
height: 150px;
}
.body:after {
content: '';
display: block;
clear: both;
}
.left, .right {
float: left;
width: 50%;
font: bold 40px/150px 'Arial';
text-align: center;
}
.left { background-color: aqua }
.right { background-color: aquamarine }
.edit {
width: 80%;
margin: 0 auto;
text-align: center;
}
.edit input {
width: 260px;
height: 40px;
font-size: 30px;
vertical-align: top;
margin-right: 20px;
}
.edit button {
width: 80px;
height: 46px;
vertical-align: top;
}
</style>