day 75

一、vue項目配置全局css文件：在main.js中用import導入或是require()加載 .css 文件

main.js
import '@/assets/css/global.css'
require('@/assets/css/global.css');

二、vue項目配置全局js文件：在main.js中用import導入 .js 文件，並將其設置給 Vue 原型

main.js
import settings from '@/assets/js/settings'
Vue.prototype.$settings = settings;

settings.js

export default {
    base_url: 'http://localhost:8000',
}

 

三、vuex提供的store倉庫存儲，能夠完成組件間的傳參(瞭解)

在任何一個組件邏輯中：this.$store.state.car 訪問或是修改
在任何一個組件模板中：$store.state.car 訪問或是修改
頁面從新加載，數據就重置（面向移動端開發）
localStore
sessionStore
store
cookie

export default new Vuex.Store({
    state: {
        car: {
            name: '默認',
            price: 0
        }
    },
    mutations: {},
    actions: {},
    modules: {}
})

 

四、vue項目配置axios能夠完成先後臺交互：this.$axios({}).then(response=>{}).catch(error=>{})

 配置axios來完成先後臺ajax請求
 一、安裝：cnpm install axios
 二、配置環境
　　import Axios from 'axios'
　　Vue.prototype.$ajax = Axios;
　　// Vue.prototype.$axios = Axios;
　　$ajax名字能夠隨便起，建議$axios
　　　

this.$ajax({
    url: this.$settings.base_url + '/cars/',
    method: 'get',
    params: {
        // url拼接的數據
    },
    data: {
        // 請求攜帶的數據報數據
    }
}).then((response) => {
    console.log(response);
    this.cars_data = response.data;
}).catch(error => {
    console.log(error)
})

 

五、django利用django-cors-headers插件解決先後臺分類項目跨越問題(重點)

安裝插件

>: pip install django-cors-headers

插件參考地址：https://github.com/ottoyiu/django-cors-headers/

 

配置插件

settings.py
INSTALLED_APPS = [
  '...'
    'corsheaders',
]

MIDDLEWARE = [
 　　　　'...'
    # 'django.middleware.csrf.CsrfViewMiddleware', #先後端分離確定要註銷csrf
　　　　 '...'
    'corsheaders.middleware.CorsMiddleware',

　# 容許跨域源
　CORS_ORIGIN_ALLOW_ALL = True

 

六、前臺兩種提交數據的方式：url拼接參數，數據包參數

this.$ajax({
    url: this.$settings.base_url + '/login/',
    method: 'post',
    params: { // url拼接參數
 p1: '123'
    },
    // data: { // 數據包參數
 // d1: 'xyz'
    // }
    data: this.form
}).then(response => {
    this.$message({
        message: response.data.msg,
        type: 'warning'
    });

    // 有響應的登陸認證碼，存儲在cookie中
 // 設置：set(key, val, exp)
 // 取值：get(key)
 // 刪除：remove(key)
    let token =  response.data.result;
    if (token) {
        // this.$cookies.set('token', token, '2d');
        // this.$cookies.set('token', token, 2 * 24 * 3600 * 365);
        // console.log(this.$cookies.get('token'));
        // this.$cookies.remove('token');
    }
})

 

七、先後臺分類，後臺登陸經過的token會返回給前臺，前臺本身處理存儲在cookie中：vue-cookies插件操做cookie

main.js
配置cookie操做插件
一、安裝：cnpm install vue-cookies
二、配置環境
import Cookies from 'vue-cookies'
Vue.prototype.$cookies = Cookies;

 // 有響應的登陸認證碼，存儲在cookie中
 // 設置：set(key, val, exp)
 // 取值：get(key)
 // 刪除：remove(key)
    let token =  response.data.result;
    if (token) {
        // this.$cookies.set('token', token, '2d');
        // this.$cookies.set('token', token, 2 * 24 * 3600 * 365);
        // console.log(this.$cookies.get('token'));
        // this.$cookies.remove('token');

 

8. this相關問題

在例子中，是在elment組件中使用created方法

created() {
    /*
    let _this = this;
    this.$message({
        message: '這是el-ui插件的彈出框',
        type: 'success',
        duration: 1000,
        // onClose() {  // 內部方法屬於element插件的
        //     console.log(this);
        //     console.log(_this);
        //     _this.$router.push('/');
        // },
        // onClose: function () {  // function內部this默認跟隨其調用者(element)
        //     console.log(this);
        //     console.log(_this);
        // }
        onClose: () => {  // 箭頭函數不能產生this，因此this往上找
            console.log(this);
            console.log(_this);
            // this.$router.push('/');
        }
    })

9.在vue配置使用elementui

main.js
配置element-ui插件
// 一、安裝：cnpm install element-ui
// 二、配置環境
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

10.在vue配置使用bootstrap

Query

cnpm install jquery

vue/cli 3 配置jQuery：在vue.config.js中配置(沒有，手動項目根目錄下新建)

const webpack = require("webpack");
​
module.exports = {
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                "window.jQuery": "jquery",
                Popper: ["popper.js", "default"]
           })
       ]
   }
};

BootStrap

cnpm install bootstrap@3

vue/cli 3 配置BootStrap：在main.js中配置

import "bootstrap" // 加載bs的邏輯

import "bootstrap/dist/css/bootstrap.css" //加載bs樣式