1220 Vue与Django前后端的结合
目录
## 环境
附带安装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');
