Vue各种配置

小知识

Vue.prototype和Vue.use的区别

这个是全局可以通过Vue对象获取serring的值
Vue.prototype.$settings = settings;

这个是配置全局环境，不需要取用，就已经存在了
Vue.use(ElementUI);

配置全局样式

1.在assets里创建样式

注意

样式不能直接控制router-link标签，但是可以控制a标签，因为router-link最终会在浏览器渲染成a标签

2.配置全局css样式

// import '@/assets/css/global.css'
require('@/assets/css/global.css');
推荐使用第二种，因为第二种是函数，它的容错率高

配置全局js

以配置公共url为例子

1.在assets里创建js文件

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

2.配置全局js

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

//调用的时候
this.$setting

#一般可以用在数据请求
$.ajax({
	url: this.$settings.base_url + '/cars/',
	type: 'get',
	success(response) {
		console.log(response)
	}
	});

单页面数据库-store

配置默认值

在store的index.js中

    state: {
        car:{
            name:"待定",
            price:"0"
        }
    },

使用

在任何一个组件逻辑中：this.$store.state.car 访问或是修改
在任何一个组件模板中：$store.state.car 访问或是修改

注意

界面刷新数据就会重置到初始值，所以这个数据库更适合用在移动端的开发

配置Element ui

安装

到项目所在目录执行

cnpm install element-ui

配置全局环境

在main.js里配置

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

this问题

函数中的this

面向对象函数：this为调用者

面向过程和面向对象：this可能为调用者

面向过程：没有this（箭头函数）

正常写法

        created(){
        	//这个this是vue对象，调用ele的组件，所以在ele组件内是拿不到vue对象的
            this.$message({
                message:'这个ele的弹出框',
                type:'success',
                duration:'1000',
                onClose(){
                	//这里没有拿到ele对象，为undefind，这个方法既属于面向过程也属于面向对象所以this异常
                    alert(this)
                }
            })
        }

在ele组件内部获取vue对象

1.在外部定义个变量存储vue的this

        created(){
            let zx=this
            this.$message({
                message:'这个ele的弹出框',
                type:'success',
                duration:'1000',
                onClose(){
                    alert(zx)
                }
            })
        }

2.使用箭头函数

因为使用箭头函数，函数内部根本没有this，就会往外找

        created(){
            this.$message({
                message:'这个ele的弹出框',
                type:'success',
                duration:'1000',
                onClose:()=>{
                    alert(this)
                }
            })
        }

vue配置bootstrap

安装jquery

cnpm install jquery

安装bootstrap

cnpm install bootstrap@3

配置环境

// 加载bs的逻辑
import "bootstrap"
//配置bs的样式
import "bootstrap/dist/css/bootstrap.css"

配置jquery

如果项目没有默认生成项目配置文件vue.config.js，那么就自己手动新建

// 修改该文件内容后，只有重启，才能同步配置
const webpack = require("webpack");

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

前后端分离-数据请求

首先不推荐使用jq的ajax，因为它的特点是dom操作有点不合适

axios

安装

cnpm install axios

配置

main.js配置

import Axios from 'axios'
Vue.prototype.axios = Axios;

使用

注意，get只会使用params传参

而post两个都会使用

            this.axios({
                url:this.$settings.base_url+'/cars/',
                method:'get',
                params:{
                    //url凭借的数据
                },
                data:{
                    //请求携带的数据
                }
            }).then(response => {
                this.cars_data = response.data
            }).catch(error =>{
                alert(error)
            })

django跨域问题

安装插件

pip intstall django-cors-headers

配置

#注册app
INSTALLED_APPS= [
	'corsheaders'
]

#添加中间件
MIDDLEWARE = [
	'corsheaders.middleware.CorsMiddleware'
]

#允许跨域源
CORS_ORIGIN_ALLOW_ALL = True

关于CSRF问题

因为前后端分离，界面不由后端提供，所以无法支持csrf，可以通过其他方式来保障安全，所以django中的csrf的中间件可以直接注释掉

vue使用cookies

安装

cnpm install vue-cookies

配置环境

import Cookies from 'vue-cookies'
Vue.prototype.$cookies = Cookies;

设置cookies

//设置
this.$cookies.set('token', token, 2 * 24 * 3600 * 365);
//删除
this.$cookies.remove('token');