day69 vue前后端交互

复习

1、环境
    node：官网下载安装包，傻瓜式安装 - https://nodejs.org/zh-cn/ => 附带按照了npm
    cnpm：npm install -g cnpm --registry=https://registry.npm.taobao.org
    vue/cli：cnpm install -g @vue/cli

2、项目创建
    cd 存放项目的目录
    vue create 项目名 => 需要安装的组件babel、vue-router、vuex

3、配置项目启动
    pycharm打开项目，配置npm启动

4、main.js完成vue环境的加载、完成根组件的渲染、加载vue-router、vuex等环境、加载自定义环境

5、vue-router配置路由：
     | this.$router.push() 完成跳转
     完成页面组件的占位
    在router/index.js中 完成路由配置 路径-视图组件 映射关系
    两种路由传参
    配置              跳转              获取
    path:'/user'     to="/user?pk=1"   $route.query.pk
    path:'/user/:pk' to="/user/1"      $route.params.pk
    
    :to="{name: 'user'}"

6、组件生命周期钩子：组件从创建到销毁的整个生命周期中特殊时间节点回调的方法
    created(){完成后台数据的请求}
    mounted(){完成极其耗时的后台数据请求}

.car-tag:nth-child(5n) {//每五个car-tag右边距为0
        margin-right: 0;
    } 
 行标签 假设里面套有       要加display:black

.car-detail {
         /*vw：屏幕宽度  vh：屏幕高度*/
        width: 100vw;
        height: 100vh;
        background-color: orange;
    }

django后台配置

# setting.py
# 国际化配置
LANGUAGE_CODE = 'zh-hans'
TIME_ZONE = 'Asia/Shanghai'
USE_I18N = True
USE_L10N = True
USE_TZ = False

TODO    全局注释

# setting.py
# media配置
MEDIA_URL='/media/'
#项目media文件夹的绝对路径
MEDIA_ROOT=os.path.join(BASE_DIR,'media')
#urls.py
from django.views.static import serve
from django.conf import settings
    url(r'^media/?P.*',serve,{'document_root':settings.MEDIA_ROOT})

vue的ajax插件：axios

'''
1) 安装插件（一定要在项目目录下）
    >:cnpm install axios

2) 在mian.js中配置:
    //配置axios
    import axios from 'axios'
    Vue.prototype.$axios=axios; 

3)在任何一个组件的逻辑中发送ajax请求:
    this.$axios({
                url:'http://127.0.0.1:8000/get_cars/',
                method:'post',
                params:{//url拼接参数：任何请求都可以携带
                    a:1,
                    b:2,
                    c:3,
                },
                data:{ //数据包参数：get请求是无法携带的
                    x:10,
                    y:20
                }
            }).then(response=>{
                this.cars=response.data;
            }).catch(error=>{//网络状态码为4xx  5xx
                console.log('异常',error.response)
            })
'''

CORS跨域问题（同源策略）

'''
同源：http协议相同，ip服务器地址相同 app应用端口相同
跨域：协议 ip地址 应用端口有一个不同，就是跨域

django默认是跨域策略，存在跨域问题
django的解决方案:
        
    1)django安装cors模块:
        >:pip install django-cors-headers
        
    2)在setting注册模块，配置中间件：
        import corsheaders
        
        INSTALLED_APPS = [
        ...
        'corsheaders'
        ]
        
        MIDDLEWARE = [
        ...
        'corsheaders.middleware.CorsMiddleware'
        ]
    
    3）在settings开启允许跨域：
        CORS_ORIGIN_ALLOW_ALL = True
'''

vue配置ElementUI

'''
1）安装插件（一定要在项目目录下）：
    >: cnpm install element-ui
    
2）在main.js中配置：
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    Vue.use(ElementUI);
    
3）使用：
    网址：https://element.eleme.cn/#/zh-CN/component/installation
    复制粘贴
'''

vue配置jq +bs

jq

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

在mian.js中配置

//配置bootstrap,前提是配置jQuery
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.css'
//或者
// import Bootstrap from'bootstrap'
// import 'bootstrap/dist/css/bootstrap.css'
// Vue.use(Bootstrap)