vue和django前后端交互前戏
Posted jhpy
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue和django前后端交互前戏相关的知识,希望对你有一定的参考价值。
前端配置插件
全局静态文件配置
css文件,js文件
css样式文件
加载
// 配置全局css样式
// import '@/assets/css/global.css'
require('@/assets/css/global.css');
settings.js文件**
$按时成员
prototype就是给类属性添加属性
// 配置全局settings.js
import settings from '@/assets/js/settings'
Vue.prototype.$settings = settings;
配置element-ui插件
// 1、安装:cnpm install element-ui
// 2、配置环境
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
配置jq+bs环境
jQuery
>: 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"
后台处理跨域
解决前后台交互跨越的问题:CORS
安装插件
>: pip install django-cors-headers
插件参考地址:https://github.com/ottoyiu/django-cors-headers/
分离的前后台交互
后台处理跨域
安装插件
>: pip install django-cors-headers
插件参考地址:https://github.com/ottoyiu/django-cors-headers/
项目配置:dev.py
# 注册app
INSTALLED_APPS = [
...
'corsheaders'
]
# 添加中间件
MIDDLEWARE = [
...
'corsheaders.middleware.CorsMiddleware'
]
# 允许跨域源
CORS_ORIGIN_ALLOW_ALL = True
以上是关于vue和django前后端交互前戏的主要内容,如果未能解决你的问题,请参考以下文章
前后端分离之使用axios进行前后端交互实现评论显示——django+mysql+vue+element
前端Vue框架 05 第三方插件(vuex: 组件间交互的(移动端), axios - 前后台(django): ajax, element-ui: 页面布局, jq+bs: jQuery+Boo