vue_day05

目录

• vue前后端交互：
  • vue 分离前后端交互：
  • vue前端发送请求：
  • vue请求插件--axios:
  • main.js配置:
  • 前端朝后端请求传参方式:
  • django后端返回数据样式：
  • vue配置ElementUI:
  • Vue配置jq+bs：

vue前后端交互：

vue 分离前后端交互：

后端处理跨域 （CORS问题）：
	- 跨域问题？？？ 接收请求，不响应（同源策略）

同源策略：  http 协议 ，ip / 服务器地址相同 （app应用端口相同）
跨域：协议、ip地址、应用端口有一个不同，就是跨域

django  默认只对同源策略 响应

跨域问题解决：

	django  :  pip3 install django-cors-headers

插件参考地址：https://github.com/ottoyiu/django-cors-headers/

    项目配置：
        python-- settings.py
    # 注册app
    INSTALLED_APPS = [
        ...
        'corsheaders'
    ]

    # 添加中间件
    MIDDLEWARE = [
        ...
        'corsheaders.middleware.CorsMiddleware'
    ]

    # 允许跨域源
	CORS_ORIGIN_ALLOW_ALL = True

vue前端发送请求：

eg:
    <script>
        export default {
            name: "CarDetail",
            data() {
                return {
                    car: {}
                }
            },
            created() {
                // 拿到路由传递来的car主键
                let pk = this.$route.query.pk || this.$route.params.pk;
                // 主键不存在，就直接结束方法
                if (!pk) return false;
                // 主键存在才请求后台
                this.$axios({
                    url: this.$settings.base_url + `/car/${pk}/`,
                }).then(response => {
                    this.car = response.data
                }).catch(error => {
                    console.log(error.response)
                })
            }
        }
    </script>

this.axios({
    url: '请求接口',
    method: 'get|post请求',
    data: {post等提交的数据},
    params: {get提交的数据}
}).then(请求成功的回调函数).catch(请求失败的回调函数)

vue请求插件--axios:

三部曲：
	1.安装( --》安装在项目目录下)
	  --》cnpm install axios
        
	2.配置环境 (main.js)
    	import axios from 'axios'
		Vue.prototype.$axios = axios
    
    3.使用方式(组件的逻辑中发送ajax请求):
        
     this.$axios({
        url: 'http://127.0.0.1:8000/cars/',
        method: 'get',
    }).then(response => {
        console.log(response);
        // this.cars = response.data;
    }).catch(error => {  // 网络状态码为4xx、5xx
        console.log(error);

main.js配置:

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

Vue.config.productionTip = false;

// 全局css
require('@/assets/css/global.css');

// 全局js
import settings from '@/assets/js/settings'
Vue.prototype.$settings = settings;

// 配置axios
import axios from 'axios'
Vue.prototype.$axios = axios;  //定义vue实列的属性

// 配置element-ui--》vue文件样式模板
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

// 配置bootstrap，前提要配置jQuery
import "bootstrap"
import "bootstrap/dist/css/bootstrap.css"

前端朝后端请求传参方式:

<script>
    import Nav from '@/components/Nav'
    import CarTag from '@/components/CarTag'

    export default {
        name: "Car",
        components: {
            Nav,
            CarTag,
        },
        data() {
            return {
                cars: []
            }
        },
        created() {
            // 完成ajax请求后台，获得数据库中的数据
            this.$axios({
                url: this.$settings.base_url + '/cars/',
                method: 'post',
                params: {  // url拼接参数：任何请求都可以携带
                    a: 1,
                    b: 2,
                },
                data: {  // 数据包参数：get请求是无法携带的
                    x: 10,
                    y: 20,
                }
            }).then(response => {
                // console.log('正常', response);
                this.cars = response.data;
            }).catch(error => {  // 网络状态码为4xx、5xx
                console.log('异常', error.response);
            });
        }
    }
</script>


数据传参数方式：
	拼接参数：post  （后端获取-->body内 （没有解析的数据）） 
    		data ： {
               // --》post 请求参数
        }
    
    数据包参数： get 后台： request.GET 获取参数
            params: {
                a: 1,
            }
get 没有安全认证 （速度快）
app 注册--》 反射关联()

django后端返回数据样式：

#样式一：
def get_cars(request, *args, **kwargs):
    car_query = models.Car.objects.values('id', 'title', 'img')
    car_list = list(car_query)
    for car in car_list:
        car['img'] = '%s%s%s' % ('http://localhost:8000', settings.MEDIA_URL, str(car.get('img')))
    return JsonResponse(car_list, safe=False)

#样式二：
def get_car(request, *args, **kwargs):
    pk = kwargs.get('pk')
    car_obj = models.Car.objects.filter(pk=pk).values('id', 'title', 'img', 'price', 'info').first()
    if car_obj:
        car_obj['img'] = '%s%s%s' % ('http://localhost:8000', settings.MEDIA_URL, str(car_obj.get('img')))
        return JsonResponse(car_obj, json_dumps_params={'ensure_ascii': False})
    return JsonResponse({'msg': '数据不存在'})

vue配置ElementUI:

ElementUI介绍：
	一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库  （类似于bootstarp 样式组件 （本身就是vue组件））

----》https://element.eleme.cn/#/zh-CN/component/installation    官网地址
三部曲：
	1.安装插件：（在该项目下）
		cnpm install element-ui

	2.配置环境：
    	import ElementUI from 'element-ui';
        import 'element-ui/lib/theme-chalk/index.css';
        Vue.use(ElementUI);
	
    3.使用：
    	直接选定需要的样式模板 （复制粘贴----》在进行修改）

Vue配置jq+bs：

jquery :
    cnpm install jquery
    
配置jQuery：在vue.config.js中配置  (创建配置文件)  

const webpack = require("webpack");

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

使用： $ ; 单个$ 表示特殊字符（jquery）
	
    
bootstarp:
    cnpm install bootstrap@3

 配置BootStrap：在main.js中配置
    import "bootstrap"
	import "bootstrap/dist/css/bootstrap.css"