VUE(四)

一.路由彙總

import Vue from 'vue'
import Router from 'vue-router'
import PageFirst from './views/PageFirst'
import PageSecond from './views/PageSecond'
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: [
        // 路由就是 url路徑 與 vue組件 的映射關係
        // 映射出的組件會替換 根組件 中的 router-view 標籤
        // 經過 router-link 標籤完成 url路徑 的切換
        {
            path: '/page-first',
            name: 'page-first',
            component: PageFirst
        },
         {
            path: '/page/first',
            redirect:{'name':'page-first'}
        },
        {
            path: '/page-second',
            name: 'page-second',
            component: PageSecond
        },
                {
            path: '/course',
            name: 'course',
            component: Course
        },
 { // path: '/course/detail/:pk',  // 第一種路由傳參
            path: '/course/detail',  // 第2、三種路由傳參
            name: 'course-detail', component: CourseDetail },     ]
})

二.課程詳情頁面組件CourseDetail.vue經過點擊CourseCard.vue中內容獲取id渲染

   let id = this.$route.params.pk || this.$route.query.pk;
  ( $route.params 數據包方式向後臺發送,或者有名分組  $route.query 路由路徑拼接)

<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>

三.CourseCard.vue中的跳轉

      首先,CourseCard中的數據是組件父傳子傳進來的,也就是從Course中拿到的(須要導入,註冊,渲染)

      Course.vue:

<template>
    <div class="course">
        <Nav></Nav>
        <h1>課程主頁</h1>
        <CourseCard :card="card" v-for="card in card_list" :key="card.tytle"></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>

     CourseCard.vue邏輯跳轉(經過go可實現先後跳轉):

<template>
    <div class="course-card">
        <div class="left" :style="{background: card.bgColor}"></div>
        <div class="right" @click="goto_detail">{{ card.title }}</div>
    </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;
    }

    .course-card  div {
        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;
    }
</style>

 CourseCard.vue連接跳轉:

<template>
    <div class="course-card">
        <div class="left" :style="{background: card.bgColor}"></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'],

       
    }
</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;
    }
</style>

連接轉調演變體:

"""
{
    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
"""

四.vuex倉庫

vuex倉庫是vue全局的數據倉庫，比如一個單例，在任何組件中經過this.$store來共享這個倉庫中的數據，完成跨組件間的信息交互。

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', '新值');

案例:

course.vue:

 data() {
            return {
                card_list: [],
                course_page: this.$store.state.course_page || '課程主頁'
                // course_page: sessionStorage.course_page || '課程主頁'
            }
        },

coursedetail.vue

        methods:{
            editAction(){
                if (this.val){
                    console.log(this.val)
                    // sessionStorage.course_page=this.val
                    // this.$store.state.course_page=this.val
                    this.$store.commit('updateCoursePage', this.val);
                    this.$router.push('/course')
                    // this.$router.go(-1)
                }
            }

五.後臺發送數據

url.py:

  url(r'^course/detail/(?P<pk>.*)/', views.course_detail),

views.py:

from django.shortcuts import render,HttpResponse,redirect
from django.http import JsonResponse
detail_list = [
                {
                    'id': 1,
                    'bgColor': 'red',
                    "title": "Python基礎",
                    'ctx': 'Python從入門到入土！'
                },
                {
                    'id': 3,
                    'bgColor': 'blue',
                    'title': 'Django入土',
                    'ctx': '扶我起來，我還能戰！'
                },
                {
                    'id': 8,
                    'bgColor': 'yellow',
                    'title': 'MySQL刪庫高級',
                    'ctx': '九九八十二種刪庫跑路姿式！'
                },
            ]
# Create your views here.
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})

六.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);
    })
}

  七. 跨域問題

後臺服務器默認只爲本身的程序提供數據，其它程序來獲取數據，均可能跨域問題(同源策略)

一個運行在服務上的程序，包含：協議、ip 和 端口，因此有一個成員不相同都是跨域問題

出現跨域問題，瀏覽器會拋 CORS 錯誤

     django解決跨域問題:

      安裝插件:

pip install django-cors-headers

    配置：settings.py

# 註冊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',
]

八.vue-cookie處理cookie

   安裝：前端項目目錄下的終端

cnpm install vue-cookie --save

  配置：main.js

// 配置cookie
import cookie from 'vue-cookie'
Vue.prototype.$axios = cookie;

 使用:組件的邏輯方法中

created() {
    console.log('組件建立成功');
    let token = 'asd1d5.0o9utrf7.12jjkht';
    // 設置cookie默認過時時間單位是1d(1天)
    this.$cookie.set('token', token, 1);
},
mounted() {
    console.log('組件渲染成功');
    let token = this.$cookie.get('token');
    console.log(token);
},
destroyed() {
    console.log('組件銷燬成功');
    this.$cookie.delete('token')
}

 

九.element-ui框架使用

安裝：前端項目目錄下的終端

cnpm i element-ui -S

配置：main.js

// 配置element-ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

使用：任何組件的模板中均可以使用 - 詳細使用見官方文檔

<template>
    <div class="e-ui">
        <Nav></Nav>
        <h1>element-ui</h1>
        <hr>

        <el-row :gutter="10">
            <el-col :span="6">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :span="10" :offset="2">
                <div class="grid-content bg-purple"></div>
            </el-col>
        </el-row>

        <el-container>
            <el-main>
                <el-row :gutter="10">
                    <el-col :sm="18" :md="12" :lg="6">
                        <div class="grid-content bg-purple"></div>
                    </el-col>
                    <el-col :sm="6" :md="12" :lg="18">
                        <div class="grid-content bg-purple"></div>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>

        <el-row>
            <i class="el-icon-platform-eleme"></i>
            <el-button type="primary" @click="alertAction1">信息框</el-button>
            <el-button type="success" @click="alertAction2">彈出框</el-button>
        </el-row>
    </div>
</template>

<script>
    import Nav from '@/components/Nav'

    export default {
        name: "EUI",
        components: {
            Nav
        },
        methods: {
            alertAction1() {
                this.$message({
                    type: 'success',
                    message: 'message信息',
                })
            },
            alertAction2() {
                this.$alert('內容...', '標題')
            },
        }
    }
</script>

<style scoped>
    .e-ui {
        width: 100%;
        height: 800px;
        background: pink;
    }

    h1 {
        text-align: center;
    }

    .grid-content {
        height: 40px;
        background-color: brown;
        margin-bottom: 10px;
    }

    i {
        font-size: 30px;
    }
</style>