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