Django vue前后端分离整合过程解析


Posted in Python onNovember 20, 2020

最近接到一个任务,就是用django后端,前段用vue,做一个普通的简单系统,我就是一搞后端的,听到vue也是比较震惊,之前压根没接触过vue.

看了vue的一些文档,还有一些项目,先说一下django与vue的完美结合吧!

首先是创建一个django项目

django-admin startproject mysite # 创建mysite项目
django-admin startapp blog # 创建blog应用

一、接下来就是安装关于vue 的东西了

1、首先安装node.js,官网地址:https://nodejs.org/zh-cn/download/

2、使用npm淘宝镜像,避免npm下载速度过慢的问题 npm install -g cnpm --registry=https://registry.npm.taobao.org

3、使用cnpm 下载vue-cli cnmp install -g cue-cli

二、在django项目中创建vue项目

首先,进去django项目的项目目录中,执行:

vue-init webpack firstvue## firstvue为前端项目的名称,可自定义。创建的项目会跟django中的app一样的目录登记。类似一个前端app一样。

mysite 文件夹 blog 文件夹 和 firstvue文件夹 要在同一目录级别

在创建时,会弹出很多选择项,根据自己需求自定义修改。也可以全部回车,使用默认的。这里我就直接全部回车。

三、编写vue前端项目,直接编写就是,调试则可以执行。也可先不编写,跳过这一步

cd firstvue## 进入到上一部创建的firstvue项目中
cnpm install ## 安装需要的依赖模块
cnpm run dev ## 运行调式的服务,会启动一个web服务,访问localhost:8080 即可调式

四、vue项目写完后,打包vue项目,然后修改django配置,将vue集成到django中

cnpm run build ## 打包vue项目,会将所有东西打包成一个dist文件夹

五、接下来就是配置django中的setting文件了:

Django vue前后端分离整合过程解析

六、修改django的主目录的urls文件:

Django vue前后端分离整合过程解析

七、启动django服务,访问localhost:8000 则可以出现vue的首页。

Django vue前后端分离整合过程解析

python manage.py runserver

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Python 相关文章推荐
一个检测OpenSSL心脏出血漏洞的Python脚本分享
Apr 10 Python
python判断字符串是否纯数字的方法
Nov 19 Python
Python实现的视频播放器功能完整示例
Feb 01 Python
使用k8s部署Django项目的方法步骤
Jan 14 Python
利用pyinstaller打包exe文件的基本教程
May 02 Python
python使用minimax算法实现五子棋
Jul 29 Python
浅谈django2.0 ForeignKey参数的变化
Aug 06 Python
Python qrcode 生成一个二维码的实例详解
Feb 12 Python
django列表筛选功能的实现代码
Mar 27 Python
使用pyecharts1.7进行简单的可视化大全
May 17 Python
python Protobuf定义消息类型知识点讲解
Mar 02 Python
Python3自带工具2to3.py 转换 Python2.x 代码到Python3的操作
Mar 03 Python
基于Python的图像阈值化分割(迭代法)
Nov 20 #Python
Python爬虫Scrapy框架CrawlSpider原理及使用案例
Nov 20 #Python
Pyqt助手安装PyQt5帮助文档过程图解
Nov 20 #Python
python IP地址转整数
Nov 20 #Python
Python django框架 web端视频加密的实例详解
Nov 20 #Python
总结python 三种常见的内存泄漏场景
Nov 20 #Python
Python偏函数实现原理及应用
Nov 20 #Python
You might like
如何实现php图片等比例缩放
2015/07/28 PHP
jquery实现点击TreeView文本父节点展开/折叠子节点
2013/01/10 Javascript
javascript实现动态模态绑定grid过程代码
2014/09/22 Javascript
jQuery中ajax和post处理json的不同示例对比
2014/11/02 Javascript
Javascript实现快速排序(Quicksort)的算法详解
2015/09/06 Javascript
Javascript实现单例模式
2016/01/24 Javascript
Bootstrap栅格系统的使用和理解2
2016/12/14 Javascript
详解Vue.js基于$.ajax获取数据并与组件的data绑定
2017/05/26 Javascript
基于Vue实现图书管理功能
2017/10/17 Javascript
js捆绑TypeScript声明文件的方法教程
2018/04/13 Javascript
node.js部署之启动后台运行forever的方法
2018/05/23 Javascript
javascript少儿编程关于返回值的函数内容
2018/05/27 Javascript
vue.js中proxyTable 转发请求的实现方法
2018/09/20 Javascript
vue路由 遍历生成复数router-link的例子
2019/10/30 Javascript
vue实现分页加载效果
2019/12/24 Javascript
python安装以及IDE的配置教程
2015/04/29 Python
Python 判断 有向图 是否有环的实例讲解
2018/02/01 Python
python实现人民币大写转换
2018/06/20 Python
详解如何用django实现redirect的几种方法总结
2018/11/22 Python
Python中顺序表原理与实现方法详解
2019/12/03 Python
django之导入并执行自定义的函数模块图解
2020/04/01 Python
python zip,lambda,map函数代码实例
2020/04/04 Python
解决c++调用python中文乱码问题
2020/07/29 Python
Python 找出英文单词列表(list)中最长单词链
2020/12/14 Python
css3 响应式媒体查询的示例代码
2019/09/25 HTML / CSS
德国古洛迷亚百货官网:GALERIA Kaufhof
2017/06/20 全球购物
美国著名的户外用品品牌:L.L.Bean
2018/01/05 全球购物
Casetify官网:自制专属手机壳、iPad护壳和Apple Watch手表带
2018/05/09 全球购物
JD Sports芬兰:英国领先的运动鞋和运动服饰零售商
2018/11/16 全球购物
俄罗斯披萨、寿司和面食送货到家服务:2 Берега
2019/12/15 全球购物
实习协议书范本
2014/04/22 职场文书
《祁黄羊》教学反思
2014/04/22 职场文书
2015年感恩父亲节演讲稿
2015/03/19 职场文书
债务纠纷代理词
2015/05/25 职场文书
趣味运动会标语口号
2015/12/26 职场文书
导游词之河北邯郸
2019/09/12 职场文书