Vue项目搭建与请求生命周期

复习

"""
1、箭头函数 let fn = (a, b) => a + b;
    let 函数名 = (参数列表) => {函数体}

2、函数原型：给函数设置原型 Fn.prototype.变量 = 值，那么Fn new出来的对象都可以共用 原型变量
    function Fn() {}
    let f1 = new Fn()
    let f2 = new Fn()
    Fn.prototype.fn = () => {}
    Fn.prototype.fn2 = function () {}
    f1.fn()
    f2.fn()

3、vue项目的请求生命周期：main.js完成环境的加载与根组件的渲染；router的index.js完成路由映射
    项目启动：加载main.js：index.html、new Vue()、Vue、router、store、完成App.vue的挂载
    请求：请求路径 => router路由 => 页面组件(小组件) => 替换<router-view />完成页面渲染 => <router-link>（this.$router.push()）完成请求路径的切换
    
4、<router-view />标签作为路由映射的页面组件占位符
5、<router-link></router-link>来完成路由的跳转
    <router-link to="/1" :to="{name:'home', params={arg: 1}}">主页</router-link>
    
    {
        path: '/:arg',
        name: 'home',
        component: Home
    }
    
6、this.$router来完成路由的跳转：push() | go()
    this.$router.push('/1');
    this.$router.push({name:'home', params={arg: 1}});
    this.$router.go(-1);
    this.$router.go(1);

7、this.$route来完成路由的传参
    this.$route.params.arg
    this.$route.params['arg']
    
8、资源的加载
    require(资源的相对路径)
"""

Vue配置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"
import "bootstrap/dist/css/bootstrap.css"

分离的前后台交互

后台处理跨域

安装插件

>: 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

总结

"""
1、vue项目配置全局css文件：在main.js中用import导入或是require()加载 .css 文件
    assets/css/global.css
    import '@/assets/css/global.css' | require('@/assets/css/global.css')

2、vue项目配置全局js文件：在main.js中用import导入 .js 文件，并将其设置给 Vue 原型
    settings.js => export default {base_url='http://127.0.0.1:8000'}
    import settings from '@/assets/js/settings.js'
    Vue.prototype.$settings = settings => this.$settings.base_url
    
3、vuex提供的store仓库存储，可以完成组件间的传参(了解)
    store/index.js => state: {num: 0}
    this.$store.state.num

4、vue项目配置axios可以完成前后台交互：this.$axios({}).then(response=>{}).catch(error=>{})
    import axios from 'axios'
    Vue.prototype.$axios = axios
    this.$axios({
        url: '后台接口',
        method: 'get|post',
        params: {},
        data: {},
        headers: {},
    }).then(response=>{
        response.data
    }).catch(error=>{
        error.response.data
    })

5、django利用django-cors-headers插件解决前后台分类项目跨越问题(重点)
    注册corsheaders => 添加中间件 => 允许跨越

6、前台两种提交数据的方式：url拼接参数，数据包参数
7、前后台分离，后台登录通过的token会返回给前台，前台自己处理存储在cookie中：vue-cookies插件操作cookie
    token = response.data.token
    
    this.$cookies.set(k, v, exp);
    this.$cookies.get(k);
    this.$cookies.remove(k);
    
8、全局应用配置element-ui、bootstrap
    import ElementUi from 'element-ui'
    Vue.use(ElementUi)
"""

Vue项目搭建与请求生命周期

原文：https://www.cnblogs.com/aden668/p/11884264.html