django前后端结合_1220 Vue与Django前后端的结合

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行代码 其中 指定渲染了view中的文件

views文件夹是页面组件,定义了各种页面的组件,home.vue是主页组件

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

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

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

给每一个图片的定义跳转链接,跳转到的界面使用拼接 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: '&