zoukankan      html  css  js  c++  java
  • 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"
    

    配置axios来完成前后台ajax请求

    // 1、安装:cnpm install axios
    // 2、配置环境
    import Axios from 'axios'
    Vue.prototype.$ajax = Axios;
    

    配置cookie操作插件

    // 1、安装:cnpm install vue-cookies
    // 2、配置环境
    import Cookies from 'vue-cookies'
    Vue.prototype.$cookies = Cookies;
    

    后台处理跨域

    解决前后台交互跨越的问题:CORS

    分离的前后台交互

    后台处理跨域

    安装插件
    >: 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
    
  • 相关阅读:
    POJ 2029 (二维树状数组)题解
    HDU 4819 Mosaic (二维线段树&区间最值)题解
    HDU 1823 Luck and Love (二维线段树&区间最值)题解
    POJ1061 青蛙的约会(扩展欧几里得)题解
    POJ 2155 Matrix (二维树状数组)题解
    POJ 1751 Highways(最小生成树&Prim)题解
    HDU 6148 Valley Numer (数位DP)题解
    HDU3652 B-number(数位DP)题解
    HDU 4734 (数位DP)题解
    HDU 2089 不要62 (数位DP)题解
  • 原文地址:https://www.cnblogs.com/jhpy/p/11870146.html
Copyright © 2011-2022 走看看