day 75

1、vue项目配置全局css文件：在main.js中用import导入或是require()加载 .css 文件

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

2、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',
}

3、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: {}
})

4、vue项目配置axios可以完成前后台交互：this.$axios({}).then(response=>{}).catch(error=>{})

 配置axios来完成前后台ajax请求
 1、安装：cnpm install axios
 2、配置环境
　　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;        #response 是对象，{data: "ok", status: 200, statusText: "OK", headers: {…}, config: {…}, …}
}).catch(error => {
    console.log(error)
})

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

6、前台两种提交数据的方式：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');
    }
})

7、前后台分类，后台登录通过的token会返回给前台，前台自己处理存储在cookie中：vue-cookies插件操作cookie

main.js
配置cookie操作插件
1、安装：cnpm install vue-cookies
2、配置环境
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插件
// 1、安装：cnpm install element-ui
// 2、配置环境
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样式