目录
Vue项目的配置项
配置项
加载全局css文件
加载全局css文件我们需要配置两个内容
- 我们需要建立全局css文件,位置在
src/assets/css/新建一个global.css文件,里面可以写我们对全局标签的一些配置 - 写完全局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年,从而使其失效.