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');

1220 Vue与Django前后端的结合的更多相关文章

  1. Django前后端分离项目部署

    vue+drf的前后端分离部署笔记 前端部署过程 端口划分: vue+nginx的端口 是81 vue向后台发请求,首先发给的是代理服务器,这里模拟是nginx的 9000 drf后台运行在 9005 ...

  2. List多个字段标识过滤 IIS发布.net core mvc web站点 ASP.NET Core 实战:构建带有版本控制的 API 接口 ASP.NET Core 实战:使用 ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目 Using AutoFac

    List多个字段标识过滤 class Program{  public static void Main(string[] args) { List<T> list = new List& ...

  3. Vue+Spring Boot 前后端分离的商城项目开源啦!

    新蜂商城 Vue 移动端版本开源啦! 去年开源新蜂商城项目后,就一直在计划这个项目 Vue 版本的改造,2020 年开始开发并且自己私下一直在测试,之前也有文章介绍过测试过程和存在的问题,修改完成后, ...

  4. vue+django前后端项目部署

    一.python3的安装 1.安装python前的库环境: yum install gcc patch libffi-devel python-devel zlib-devel bzip2-devel ...

  5. 从零开始搭建django前后端分离项目 系列一(技术选型)

    前言 最近公司要求基于公司的hadoop平台做一个关于电信移动网络的数据分析平台,整个项目需求大体分为四大功能模块:数据挖掘分析.报表数据查询.GIS地理化展示.任务监控管理.由于页面功能较复杂,所以 ...

  6. luffy项目搭建流程(Django前后端分离项目范本)

    第一阶段: 1.版本控制器:Git      2.pip安装源换国内源    3.虚拟环境搭建        4.后台:Django项目创建 5.数据库配置              6.luffy前 ...

  7. Django前后端分离跨域请求问题

    一.问题背景 之前使用django+vue进行前后端分离碰到跨域请求问题,跨域(域名或者端口不同)请求问题的本质是由于浏览器的同源策略导致的,当请求的响应不是处于同一个域名和端口下,浏览器不会接受响应 ...

  8. ASP.NET Core 实战:使用 ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目

    一.前言 这几年前端的发展速度就像坐上了火箭,各种的框架一个接一个的出现,需要学习的东西越来越多,分工也越来越细,作为一个 .NET Web 程序猿,多了解了解行业的发展,让自己扩展出新的技能树,对自 ...

  9. vue项目实践-前后端分离关于权限的思路

    前后端分离后权限的思路 最近看到许多关于权限的思路,但好像都是使用动态加载路由的方式,现在也分享下我在项目中使用的解决方案. 前后端分离关于权限的处理每个人都不一样,根据项目选择制定合适的方案就好 我 ...

随机推荐

  1. DataPipeline |ApacheKafka实战作者胡夕:Apache Kafka监控与调优

    https://baijiahao.baidu.com/s?id=1610644333184173190&wfr=spider&for=pc DataPipeline |ApacheK ...

  2. 【记录】【windows】下查看端口是否被占用并杀死该进程

    查看端口是否被占用 netstat -aon|findstr "端口号" 比如 netstat -aon|findstr "6340" 杀死该进程 taskki ...

  3. 常用的sublime text 3插件

    原文出自:peter_zhou(晴空)https://www.cnblogs.com/qingkong/ All Autocomplete Sublime Text 默认的 Autocomplete ...

  4. 测试类——python编程从入门到实践

    1.各种断言方法 常用断言方法: 方法 用途 assertEqual(a, b) 核实a == b assertNotEqual(a, b) 核实a != b assertTrue(x) 核实x为Tr ...

  5. Python之路【第二十八篇】:django视图层、模块层

    1.视图函数 文件在view_demo 一个视图函数简称视图,是一个简单的Python 函数,它接受Web请求并且返回Web响应.响应可以是一张网页的HTML内容,一个重定向,一个404错误,一个XM ...

  6. AVR单片机教程——EasyElectronics Library v1.2手册

    索引: bit.h delay.h pin.h wave.h pwm.h led.h rgbw.h button.h switch.h segment.h 主要更新: 添加了segment.h的文档: ...

  7. idea中的调试按键(f5,f6,f7,f8,f9)

    f5: 如果断点处存在方法,f5 则强制进入方法内部,然后一步一步执行方法体, 如果再遇到方法,则继续进入方法体,如此循环,直到执行到断点开始处: f6: 从断点处一步步执行以后的代码,会跳出断点所在 ...

  8. java之mybatis之缓存

    1.mybatis自带缓存功能.分为一级缓存,二级缓存. 2.一级缓存为 session 缓存,在一个 session中 ,一个查询的 select 语句只会执行一次,根据  <select&g ...

  9. java之mybatis之查询及分页

    1.mybatis中查询方式有3种 //查询单个值 @Test public void testFindOne()throws IOException{ SqlSession session = My ...

  10. Matlab状态模式

    状态模式就是将状态的条件判断语句转化成其函数重写形式,利用了面向对象语言的多态性,本文根据https://blog.csdn.net/lm324114/article/details/78819602 ...