Vue项目的配置项

目录

• Vue项目的配置项
  • 配置项
    • 加载全局css文件
    • 加载全局js文件
    • store仓库的配置和简单用法
    • BootStrap环境和jQuery的配置
  • 前端后端交互(CORS问题)
    • axios配置项(前端配置)
    • django-cors-headers插件(后端配置,django)
    • 前端对csrf-token的处理(对cookie的操作)

Vue项目的配置项

配置项

加载全局css文件

加载全局css文件我们需要配置两个内容

1. 我们需要建立全局css文件,位置在src/assets/css/新建一个global.css文件,里面可以写我们对全局标签的一些配置
2. 写完全局css文件之后,在main.js文件中导入该全局配置即可,导入语句如下

# main.js
# 配置全局css文件以下两种方式都可以

# 方式一:
import '@/assets/css/global.css'

# 方式二:
require('@/assets/css/global.css');

加载全局js文件

方式与加载css文件相似:

'''
#导入
import settings from '@/assets/js/settings'

#配置
Vue.prototype.$settings = settings;
'''

store仓库的配置和简单用法

Vue的项目自带一个store仓库,类似于数据库,但不完全相同,该store仓库同样可以存储数据,但是当页面重新加载的时候仓库里的数据都会丢失,所以仅仅是相当于一个临时仓库,用法如下:

//在下面的文件里配置选项,然后就可以在任意文件里面直接使用store了
//src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

// 在任何一个组件逻辑中：this.$store.state.car 访问或是修改
// 在任何一个组件模板中：$store.state.car 访问或是修改
export default new Vuex.Store({
    state: {
        car: {
            name: '默认',
            price: 0
        }
    },
    mutations: {},
    actions: {},
    modules: {}
})

BootStrap环境和jQuery的配置

>: cnpm install jquery
>: cnpm install bootstrap@3

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"]
            })
        ]
 		}
};

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

import "bootstrap"
import "bootstrap/dist/css/bootstrap.css"

前端后端交互(CORS问题)

axios配置项(前端配置)

Vue的项目可以配置axios从而完成前后台的交互,其实axios就相当于再包装一层的ajax,配置如下:

// 安装cnpm install axios
// /src/main.js,在此文件中配置
import Axios from 'axios'
Vue.prototype.$axios = Axios;

//配置完以后,我们就可以在视图函数的方法中来使用axios来向后端发送消息.具体格式和ajax十分相似,有些细微区别

this.$axios({}).then(response=>{}).catch(error=>{})
	import axios from 'axios'
    Vue.prototype.$axios = axios
    this.$axios({
        url:'发送给后台的接口',
        method:'get|post',	//这里和ajax不一样,ajax的是type用来表示发送方式
        params:{},			//params里面是携带的参数,url拼接的数据
        data:{},			//要发送的数据
        headers:{},			//要发送的报文头
    }).then(response=>{		//当后端返回成功的标识时,会触发.then方法
        response.data
    }).catch(error=>{		//当后端返回失败的标识时,会触发.catch方法
        error.response.data
    })

django-cors-headers插件(后端配置,django)

该插件是django后端用来给前端发送信息的一个插件

# 我们先安装该插件
pip install django-cors-headers
# 然后通过三步操作,就可以完成该插件的配置
# settings.py,下面三步都是在该文件中配置的,其中INSTALLEN_APPS和MIDDLEWARE是本就存在的,直接在列表里添加就好了,CORS_ORIGIN_ALLOW_ALL则是需要直接添加的
# 1. 注册
INSTALLEN_APPS = [
    ...
    'corsheaders'
]
# 2. 添加中间件
MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware'
]
# 3. 允许跨域源
CORS_ORIGIN_ALLOW_ALL = True

配置完以上三步之后我们就可以用正常的方式去写django后台了.

前端对csrf-token的处理(对cookie的操作)

当前后台分离的时候,后台登录通过的token,或者说cookie会返回给前台,前台自己处理存储在cookie中,而前台通过vue-cookie插件来操作cookie

# 配置cookie操作插件
# 1. 安装:cnpm install vue-cookies
# 2. 在main.js里面配置
import Cookies from 'vue-cookies'
Vue.prototype.$cookies = Cookies;

# 配置完后,可以在逻辑或者组件中使用vue-cookie插件存cookie信息
token = response.data.token
this.$cookies.set(key,value,exp)	//key为关键字,value为cookie的内容,exp为该cookie的过期时间,如果不带单位默认是秒
this.$cookies.get(key);		//查询cookies
this.$cookies.remove(key);	//移除cookies,实际上只是自动将其有效时间重置为1970年,从而使其失效.