vue project to install plug-in configuration

vue installation ajax plugin: axios

• Install plug-ins installed in the project directory

  cnpm install axios

• In the configuration main.js

  import axios from 'axios'
  Vue.prototype.$axios = axios

• A logical component of the transmission request ajax

  // 完成ajax请求后台，获取数据库中的数据
  this.$axios({
    url: this.$settings.base_url + '/cars/',
    method: 'post',
    params: {  // url拼接参数：任何请求都可以携带
        a:1,
        b:2,
        c:3
    },
    data: {   // 数据包参数：get请求是无法携带的
        x: 10,
        y: 20
    }
  }).then(response => {
    // console.log(response);
    this.cars = response.data;
  }).catch(error => {
    console.log(error);
  })

CORS cross-domain problem (same origin policy)

Homologous: http same protocol, the same server ip address, application port the same app

Cross-domain: protocol, ip addresses, use a different port, that is, cross-domain

django default same-origin policy, cross-domain problems.

solution:

• Installation module django cors:

  pip install django-cors-headers

• Registration module in settings files, configure the middleware:

  INSTALLED_APPS = [
      ....
      'corsheaders'
  ]
  
  MIDDLEWARE = [
      ....
      'corsheaders.middleware.CorsMiddleware'
  ]

• In turn allow cross-domain settings:

  CORS_ORIGIN_ALLOW_ALL = True

Vue placed ElementUI

• Install the plug (in the project directory)

  cnpm install element-ui

• In main.js configure:

  import ElementUI from 'element-ui';
  import 'element-ui/lib/theme-chalk/index.css';
  Vue.use(ElementUI);

• Use: see official documents copy and paste

JQuery + bootstrap configuration Vue

• Install jQuery

  cnpm install jquery

• JQuery vue configuration in the project, in vue.config.jsthe configuration file

  const webpack = require("webpack");
  
  module.exports = {
      configureWebpack: {
          plugins: [
              new webpack.ProvidePlugin({
                  $: "jquery",
                  jQuery: "jquery",
                  "window.jQuery": "jquery",
                  Popper: ["popper.js", "default"]
              })
          ]
        }
  };

• Installation bootstrap plugin

  cnpm install bootstrap@3

• Vue bootstrap configuration in the project, in the configuration in main.js

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