Python vueルーティングジャンプのいくつかの方式ルーティングパラメトリックジャンプjs付きforループ補完コンポーネント間パラメータ伝達方式axiosプラグインドメイン間問題element-uiプラグイン

15821 ワード

ルーティング固定ジャンプのいくつかの方法

#1,2          
1.this.$router.push('    ');
this.$router.push('/course');

2.this.$router.push({name: '     '});
this.$router.push({name: course});

#    a  
1."    ">
"/course">   

2."{name: '    '}">
"{name: 'course'}">   

#      
this.$router.go(-1);
this.$router.go(1);

jqのforサイクル補完

#for of      | for in          (arr   ，obj key)

 for (let course of course_list) {
                if (id == course.id) {
                    this.course = course;
                    break
                }
            }
 
 for (let index in course_list) {
                console.log(index)
            }

ルーティングパラメータジャンプの一般的な方法(第2の方法を推奨)
1つ目の方法(一方が$router.pushジャンプをルーティングするときにparamsまたはqueryにパラメータを追加し、他方が$route.paramsまたはqueryで値を取得する)
router.js
routes: [//... { path: '/course/detail', name: 'course-detail', component: CourseDetail },]
跳转vue(イベント関数ジャンプまたはラベルジャンプのいずれかを選択できます)



    //<span style="color: #000000;"> ...<br> mehods:{</span></pre> 
  <pre><span>  goDetail() {
        //<span>     
        this.$router.push({
            name: 'course-detail'<span>,
            query: {
                id: this.course.id
            }
        });
    }</span></span></span></pre> 
  <pre><span style="color: #000000;">} </span>

受信vue

created() {
    let id = this.$route.query.id;
}

第2の方式(ルーティングマッチングは有名なパケットの形式を採用する)
router.js(:idは有名なグループ)

routes: [
    // ...
    {
        path: '/course/:id/detail',
        name: 'course-detail',
        component: CourseDetail
    },
]

跳转vue(イベント関数ジャンプまたはラベルジャンプのいずれかを選択できます)



    //<span style="color: #000000;"> ...<br></span></pre> 
  <pre> methods: {</pre> 
  <pre><span>　　 goDetail() { //<span>      this.$router.push(`/course/${this.course.id}/<span>detail`); } <br></span></span></span> }</pre> 
  <pre>

接收.vue

created() {
    let id = this.$route.params.id;
}

コンポーネント間でパラメータを伝達できる4つの方法

// 1) localStorage：      
// 2) sessionStorage：      (         ，              )
// 3) vuex   (store.js)：      (        ，           )
// 4) cookie：         (       )

vuex倉庫プラグイン
store.jsプロファイル

export default new Vuex.Store({
    state: {
        title: '   '
    },
    mutations: {
        // mutations   state       setter  
        // setter     ，          ：state, newValue
        setTitle(state, newValue) {
            state.title = newValue;
        }
    },
    actions: {}
})

任意のコンポーネントに倉庫変数を割り当てる(2の方法)

this.$store.state.title = 'newTitle'
this.$store.commit('setTitle', 'newTitle') # （   ，     ）

任意のコンポーネントから倉庫変数の値を取得

console.log(this.$store.state.title)

vue-cookiesプラグイン
インストール:pycharmに付属のcmdウィンドウ

>: cnpm install vue-cookies

main.js構成

//    
import cookies from 'vue-cookies'      //     
Vue.use(cookies);                    //     
new Vue({
    // ...
    cookies,                        //          $cookies
}).$mount('#app');

//    
import cookies from 'vue-cookies'    //     
Vue.prototype.$cookies = cookies;    //          $cookies

使用

//  ( ): key，value，exp(    )
// 1 = '1s' | '1m' | '1h' | '1d'
this.$cookies.set('token', token, '1y');

//  ：key
this.token = this.$cookies.get('token');

//  ：key
this.$cookies.remove('token');

注意:クッキーは一般的にtokenを格納するために使用されます

// 1)    token：        
// 2)     ：    
// 3)     ：    （session 、  、    ），    （cookie）
// 4)     ：           (      )，           (        )
// 5)        ：    token，      =>       ，    token   =>     token   =>

axiosプラグイン(ajaxのような前後のインタラクション)
インストール(pycharmはcmdウィンドウ付き)

>: cnpm install axios

main.js構成

import axios from 'axios'    //     
Vue.prototype.$axios = axios;    //          $axios

使用

this.axios({
    url: '    ',
    method: 'get|post  ',
    data: {post      ，   body    },
    params: {get     ，   GET    }
}).then(         ).catch(         )

ケース

// get  
this.$axios({
    url: 'http://127.0.0.1:8000/test/ajax/',
    method: 'get',
    params: {
        username: this.username
    }
}).then(function (response) {
    console.log(response)
}).catch(function (error) {
    console.log(error)
});

// post  
this.$axios({
    url: 'http://127.0.0.1:8000/test/ajax/',
    method: 'post',
    data: {
        username: this.username
    }
}).then(function (response) {
    console.log(response)
}).catch(function (error) {
    console.log(error)
});

ドメイン間問題(同源ポリシー)

//           ，             ，                   ，      ，        -     （     CORS）

//          
// 1)      
// 2) IP   
// 3)      

// Django     - django-cors-headers  
// 1)   （django pycharm  cmd  ）：pip3 install django-cors-headers
##        settings.py   ，       csrf
// 2)   ：
INSTALLED_APPS = [
    ...
    'corsheaders'
]
// 3)      ：
MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware'
]
// 4)     ：
CORS_ORIGIN_ALLOW_ALL = True

Element-uiプラグイン(bootに類似)
インストール:pycharmにcmdウィンドウが付属

>: cnpm i element-ui -S

main.js構成

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

使用

     https://element.eleme.cn/#/zh-CN/component/installation api

ActionScript 3 Cookbookからの抜粋(六)

AutoHotkeyで3キー同時押しをトリガーにショートカットを設定