1220 Vue与Django前后端的结合

目录

• vue的安装
• Vue前端的设置
  • 页面的分布
  • 后台数据的替换
  • css样式
• Django的配置
  • 国际化配置
  • axios插件安装
  • CORS跨域问题(同源策略)
    • 处理跨域问题: cors插件
    • axios提交数据给后台
    • 拼接参数 params:{}
    • 数据包参数data:{}
  • Django中设置数据
    • media相关
    • admin中注册使用
  • 前端接受数据
    • 前端渲染单个汽车界面
  • element插件安装
  • bootstrap插件的使用
• Vue代码

vue的安装

## 环境

附带安装pnm

npm换源

脚手架 快速换源

## 项目创建

cd 存放项目的目录

vue create 项目名  ===> 需要安装的组件  babel  router vuex

## 配置项目启动

pycharm打开项目,配置npm启动

## 加载vue环境

main.js完成vue环境的加载,完成根组件的渲染加载route,vuex等环境加载 

## Vue的ajax插件安装

axios

​```
安装插件 (一定要在项目目录下)
	cnpm install axios

在main.js中配置:
	import axios from 'axios'
	Vue.prototype.$axios = axios

使用,就可以直接ajax的使用
​```

Vue前端的设置

页面的分布

index.html是项目中的唯一页面

App.vue是根组件,里面只有5行代码 其中 <router-view/> 指定渲染了view中的文件

views文件夹是页面组件,定义了各种页面的组件,home.vue是主页组件
	主页中使用导航条的话需要在components文件夹中定义小组件,然后导入才能使用 import Nav from '../components/Nav',导入完毕还需要进行注册 components:{ Nav }

导航条是小组件,需要在components文件夹中定义,导航条上有什么:主页跳转以及汽车页面跳转,标签跳转的<router-link to="/"> 当你跳转的时候,需要定义路由跳转,在router文件夹中的index.js脚本文件添加跳转,添加跳转需要进行导入,导入views文件夹中的路由跳转之后的界面.import Car from '../views/Car'  const routes = [{path:'car',component:car'}

car界面中需要有汽车的图片信息,汽车的数据是从后端拿到的,这里使用created(){}声明周期钩子函数获取,获取后端的数据进行渲染,渲染的时候使用CarTag定义小组件,在car组件中父传子将数据输入子组件,CarTag进行获取数据然后渲染图片以及标题.

给每一个图片的定义跳转链接,跳转到的界面使用拼接 <router-link :to="`car/detail/${pk=car.id}`"> url,然后在index中定义路由的跳转,使用有名分组的方式 path: '/car/detail/:pk' 

然后定义详情页的页面组件 views文件夹中cardetail组件页面,在组件页面中通过钩子函数获取url中的pk值   (let pk= this.$route.query.pk || this.$route.params.pk;)

后台数据的替换

使用django将数据动态的传输到前端vue组件中
创建django项目

css样式

display: block;   将标签变成块级标签

nth-child() 	定制指定位置的标准样式,可以在循环多个中使用

/*清除浮动*/
.warp:after {    display: block;    content: '';    clear: both;}

/*vw :屏幕宽度  vh 屏幕高度*/
        width: 100vw;
        height: 100vh;

Django的配置

国际化配置

settings文件中国际化配置

// 报错信息的设置,中文的信息提示
LANGUAGE_CODE = 'zh-hans'
// 时区的设置  上海
TIME_ZONE = 'Asia/Shanghai'
// 数据库的时区设置,创建时间就不会使用默认的
USE_TZ = False

TODO注释

# TODO 这里是注释

axios插件安装

Vue的ajax插件的安装 :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=>{
		this.cars = response.data;
	// 请求失败的回调函数
	}).catch(error=>{

	})

CORS跨域问题(同源策略)

当前端的Vue向后端发送请求的时候,后端不知道发送过来的数据是不是正常的,所以对请求进行了限制,Django默认只会对同源请求做响应

同源:
	http协议相同,ip服务器地址形同,app应用端口相同
跨域:
	协议.IP地址.应用端口有一个不同,就是跨域

Django默认是同源策略,存在跨域问题

处理跨域问题: cors插件

Django后台安装cors插件
	pip install django-cors-headers

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

1.注册模块插件
	INSTALLED_APPS = [
	...
	'corsheaders'
]
2.配置中间件
	MIDDLEWARE = [
	...
	'corsheaders.middleware.CorsMiddleware'
]
3.开启允许跨域
	CORS_ORIGIN_ALLOW_ALL = True

axios提交数据给后台

这里可以将url中的数据传递给后台Django中,两种方式

            this.$axios({
                url:'http://127.0.0.1:8000/cars/',
                method:'get',
                params:{ //url拼接参数
                    a:1,
                    b:2
                    c:3
                },
                data:{ //数据包参数
                    x:10,
                    y:20
                }

拼接参数 params:{}

任何请求都可以携带
    params:{
        a:1,
        b:2,
    }

数据包参数data:{}

get请求是无法携带的
    data:{
        x:10,
        y:20
    }

Django中设置数据

media相关

新建media文件夹

然后在settings.py中设置MEDIA_ROOT：

MEDIA_ROOT = os.path.join(BASE_DIR,'media')

接着在urls.py中设置media路由的相关配置：

from django.urls import path,re_path
from django.views.static import serve
from cnblog import settings

##media配置——配合settings中的MEDIA_ROOT的配置，就可以在浏览器的地址栏访问media文件夹及里面的文件了
re_path(r'media/(?P<path>.*)$',serve,{'document_root':settings.MEDIA_ROOT}),

有了上面这个路由设置，我们就可以在浏览器的地址栏根据media文件夹中文件的路径去访问对应的文件了（需要注意的是为了保证安全，默认情况下Django项目中各目录的文件是不能通过地址栏去访问的）。

当然，我们这里实现的是文件上传的功能，需要将文件信息传给数据库保存，models.py文件中的内容如下：

admin中注册使用

将model表注册到admin管理界面

from . import models
admin.site.register(models.Car)

利用admin管理表数据进行添加

前端接受数据

在汽车连接url获取所有的数据库汽车信息,返回给前端,前端的axios接受并开始渲染数据

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:
        # 拼接图片文件的http真实路径
        car['img'] = '%s%s%s' % ('http://localhost:8000',settings.MEDIA_URL,str(car.get('img')))
    # 返回给前端页面
    return JsonResponse(car_list,safe=False)

created(){
            // 完成ajax请求后台数据
            this.$axios({
                url:'http://127.0.0.1:8000/cars/',
                method:'get',
                params:{ //url拼接参数
                    a:1,
                    b:2,
                    c:3,
                },
                data:{ //数据包参数
                    x:10,
                    y:20,
                }
            }).then(response => {
                // console.log(response)
                this.cars = response.data;
            }).catch(error=>{
                console.log('异常',error.response)
            });
        }
    }

前端渲染单个汽车界面

<script>
    export default {
        name: "CarDetail",
        data (){
            return{
                car:{}
            }
        },
// 钩子函数获取pk数据
        created(){
            // 拿到路由传递过来的组件
            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>

element插件安装

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.使用
 	赋值粘贴

bootstrap插件的使用

安装JQuery插件

cnpm install jquery

安装bootstrap

cnpm install bootstrap@3

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"]
            })
        ]
 		}
};

vue/cli 3 配置BootStrap：在main.js中配置

import "bootstrap"
import "bootstrap/dist/css/bootstrap.css"

Vue代码

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;

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

// 配置bootstrap
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.css'

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