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配置路由：
	<router-link to=""></router-link> | this.$router.push() 完成跳转
	<router-view /> 完成页面组件的占位
	在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;
    } 
<router-link to=""></router-link> 行标签 假设里面套有       要加display:black

.car-detail {
         /*vw：屏幕宽度  vh：屏幕高度*/
         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<path>.*',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)