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 相关文章推荐
用pywin32实现windows模拟鼠标及键盘动作
Apr 22 Python
用Python进行行为驱动开发的入门教程
Apr 23 Python
Python的消息队列包SnakeMQ使用初探
Jun 29 Python
Windows下安装python2和python3多版本教程
Mar 30 Python
对Python中gensim库word2vec的使用详解
May 08 Python
Numpy之文件存取的示例代码
Aug 03 Python
关于ZeroMQ 三种模式python3实现方式
Dec 23 Python
python实现串口通信的示例代码
Feb 10 Python
完美解决pycharm导入自己写的py文件爆红问题
Feb 12 Python
python编写softmax函数、交叉熵函数实例
Jun 11 Python
python中使用.py配置文件的方法详解
Nov 23 Python
利用Python实时获取steam特惠游戏数据
Jun 25 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和ACCESS写聊天室(五)
2006/10/09 PHP
php 检查电子邮件函数(自写)
2014/01/16 PHP
PHPStrom中实用的功能和快捷键大全
2015/09/23 PHP
经验几则 推荐
2006/09/05 Javascript
深入理解JavaScript中的传值与传引用
2013/12/09 Javascript
分享一个常用的javascript静态类
2014/12/31 Javascript
jquery+css实现的红色线条横向二级菜单效果
2015/08/22 Javascript
js实现页面跳转的几种方法小结
2016/05/16 Javascript
JavaScript仿flash遮罩动画效果
2016/06/15 Javascript
JS添加删除DIV的简单实例
2016/07/08 Javascript
bootstrap datetimepicker2.3.11时间插件使用
2016/11/19 Javascript
jQuery特殊符号转义的实现
2016/11/30 Javascript
详解node.js搭建代理服务器请求数据
2017/04/08 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
2017/12/20 Javascript
vue指令做滚动加载和监听等
2019/05/26 Javascript
JavaScript JSON使用原理及注意事项
2020/07/30 Javascript
python实现报表自动化详解
2017/11/16 Python
python实现媒体播放器功能
2018/02/11 Python
python pandas dataframe 行列选择,切片操作方法
2018/04/10 Python
一看就懂得Python的math模块
2018/10/21 Python
Python drop方法删除列之inplace参数实例
2020/06/27 Python
如何清空python的变量
2020/07/05 Python
萨克斯第五大道的折扣店:Saks Fifth Avenue OFF 5TH
2016/08/25 全球购物
迪奥美国官网:Dior美国
2019/12/07 全球购物
优秀干部获奖感言
2014/01/31 职场文书
国贸专业自荐信范文
2014/03/02 职场文书
婚假请假条怎么写
2014/04/10 职场文书
小学运动会开幕词
2015/01/28 职场文书
孕妇病假条怎么写
2015/08/17 职场文书
学习经验交流会策划书
2015/11/02 职场文书
优秀学生干部主要事迹材料
2015/11/04 职场文书
mybatis调用sqlserver存储过程返回结果集的方法
2021/05/08 SQL Server
go web 预防跨站脚本的实现方式
2021/06/11 Golang
《现实主义勇者的王国再建记》第三弹OST全曲试听片段公开
2022/04/04 日漫
python实现双链表
2022/05/25 Python
Java时间工具类Date的常用处理方法
2022/05/25 Java/Android