vuex、axios、element-ui

打开前端项目v-proj和后端项目d-proj

 

 修改django源码

一、Django国际化配置

settings 文件中

项目上线时：

 

 二、前后台项目初始化

   1、v-proj前台项目初始化

   01、App.vue 文件中，只留

<template>
    <div id="app">
        <router-view/>
    </div>
</template>

  02、views文件加中的About.vue文件删除，Home.vue文件，只留

<template>
    <div id="home">
       
    </div>
</template>

03、把小组件components文件夹中的都删掉

创建Nav.vue文件

04、路由router文件夹下的index.js文件中，只留

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter);

const routes = [

    {
        path: '/',
        name: 'Home',
        component: Home
    },
];

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
});

export default router

05、把小组件assets文件夹中的都删掉，创建img、css 、js 三个文件夹

css文件夹下global.css文件中

html, body, h1, h2, h3, h4, h5, h6, ul, p {
    margin: 0;
    padding: 0;
}

ul {
    list-style: none;
}

a {
    color: black;
    text-decoration: none;
}

图片

 js文件夹下settings.js文件中

export default {
    base_url: 'http://localhost:8000'
}

06、main.js文件中，只留

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false;

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app');

注意：在main.js文件中配置全局css和js时：

           若用 import '@/assets/css/global.css'   @表示src 。'@/assets/css/global.css' 表示css文件的绝对路径。没有提示

           若用 import './assets/css/global.css'    表示 css文件的相对路径。有提示

 07、public中的favicon.ico 可以替换成自己的

2、d_proj后端项目初始化

     01、在settings文件中，注册app

    02、把中间件  'django.middleware.csrf.CsrfViewMiddleware', 给注释掉

03、

 04、

三、第三方插件：

 一、vuex：组件间交互的（移动端）在创建项目时，就带着呢。不需再安装

      1）vuex是实现任何组件间的信息交互的，可以理解为全局的一个单例，为任何一个组件共享vue仓库里的数据。类似于生产者与消费者。
      2）在任何一个组件的逻辑里，都可以访问仓库
       i）现在仓库里(store/index.js)定义变量，用来存储共享数据
           state: {
           info: '共享数据的初始值'
                    },
      ii）在组件逻辑中获取仓库值
           let 变量 = this.$store.state.info
      iii）在组件逻辑中更新仓库值
           this.$store.state.info = '新值'

          注：vuex通常运用在开发移动端项目，pc端项目可以用localStorege和localStorege数据库来替换
         原因：vuex中的数据，会在页面刷新后，重置到store/index.js配置的默认值

案例：views文件夹下的 FreeCourse组件和Home组件的交互

图中是store中的index.js

 

 $Store是FreeCourse中的  FreeCourse是创建在views文件夹中的

 

 FreeCourse中的数据可以存在前端数据库LocalStorage中

Home页面

二、axios ： 用来前后台交互的（类似于django中的ajax）

1）安装：在前端项目根目录下的终端
                cnpm install axios

 

 

2）项目配置：main.js
      import axios from 'axios'
      Vue.prototype.$axios = axios;

3）在任何一个组件的逻辑中，都可以访问 this.$axios()
       beforeMount() {
       // 请求后台
       this.$axios({
       url: this.$settings.base_url + '/test/',
       method: 'delete',
                      })
                   }

例如在 Home组件中

三、element-ui：页面布局

       element-ui就类似于BootStrap框架，前者是在vue项目中运用，后者是在原生项目中运用，当然也可以在vue项目中运用

       环境搭建：
       1）安装：在前端项目根目录下的终端（与安装axios 一样，在终端里）
            cnpm install element-ui

       2）配置：main.js
            import ElementUI from 'element-ui'
            Vue.use(ElementUI);
           import 'element-ui/lib/theme-chalk/index.css';

       3）使用：根据视频和官方API接口

 

 

 

 

四、jq+bs：jQuery+BootStrap

1、jq环境搭建：
    1）安装：在前端项目根目录下的终端（与安装axios 一样，在终端里）
         cnpm install jquery

   2）配置：自己在项目根目录下新建 vue.config.js
        const webpack = require("webpack");
        module.exports = {
        configureWebpack: {
        plugins: [
       new webpack.ProvidePlugin({
       $: "jquery",
       jQuery: "jquery",
      "window.$": "jquery",
      "window.jQuery": "jquery",
      Popper: ["popper.js", "default"]
      })
      ]
      }
      };

2、bs环境搭建：
      1）安装：在前端项目根目录下的终端（与安装axios 一样，在终端里）
           cnpm install bootstrap@3          @3表示版本  bs3

     2）配置：自己在项目根目录下新建 vue.config.js
          import BootStrap from "bootstrap"
          import "bootstrap/dist/css/bootstrap.css"
          Vue.use(BootStrap)

五、同源策略 - 跨域问题

1、django默认是同源策略，所以前后台分离项目，访问django会出现CORS跨域问题的报错

2、什么叫跨域
      i）ip不同：前后台（两个服务器）不在一台主机上运行的
     ii）port不同：前后台（两个服务器）是相互独立的，运行在不同的端口之上
    iii）协议不同：http与https之间也同样是跨域问题
    注：三者满足一个，就是跨域

3、解决跨域问题
     i）伪装：将前台请求伪装成后台自己对自己发生的请求
     ii）后台主动允许跨域：后台配置允许跨域即可（在响应头中处理）

4、Django解决跨域
      i）安装模块：
          pip install django-cors-headers
     ii）注册app：
         INSTALLED_APPS = [
         'corsheaders'
         ]
      iii）添加中间件
         MIDDLEWARE = [
         'corsheaders.middleware.CorsMiddleware'
         ]
       iv）settings文件中：允许跨域源
         CORS_ORIGIN_ALLOW_ALL = True