目录
加载全局css文件我们需要配置两个内容
我们需要建立全局css文件,位置在src/assets/css/
新建一个global.css
文件,里面可以写我们对全局标签的一些配置
写完全局css文件之后,在main.js文件中导入该全局配置即可,导入语句如下
import '@/assets/css/global.css'
require('@/assets/css/global.css');
方式与加载css文件相似:
'''
#导入
import settings from '@/assets/js/settings'
#配置
Vue.prototype.$settings = settings;
'''
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: {}
})
>: 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"
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后端用来给前端发送信息的一个插件
# 我们先安装该插件
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后台了.
当前后台分离的时候,后台登录通过的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年,从而使其失效.
手机扫一扫
移动阅读更方便
你可能感兴趣的文章