django与vue的完美结合_实现前后端的分离开发之后在整合的方法


Posted in Python onAugust 12, 2019

最近接到一个任务,就是用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的首页。

python manage.py runserver

django与vue的完美结合_实现前后端的分离开发之后在整合的方法

以上这篇django与vue的完美结合_实现前后端的分离开发之后在整合的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Python 相关文章推荐
解决pyqt中ui编译成窗体.py中文乱码的问题
Dec 23 Python
分享几道你可能遇到的python面试题
Jul 24 Python
详解Python 实现元胞自动机中的生命游戏(Game of life)
Jan 27 Python
Python处理CSV与List的转换方法
Apr 19 Python
python实现指定文件夹下的指定文件移动到指定位置
Sep 17 Python
python定时按日期备份MySQL数据并压缩
Apr 19 Python
python实现最大子序和(分治+动态规划)
Jul 05 Python
Python协程操作之gevent(yield阻塞,greenlet),协程实现多任务(有规律的交替协作执行)用法详解
Oct 14 Python
Django框架安装方法图文详解
Nov 04 Python
浅谈opencv自动光学检测、目标分割和检测(连通区域和findContours)
Jun 04 Python
新手学习Python2和Python3中print不同的用法
Jun 09 Python
pytorch 如何使用batch训练lstm网络
May 28 Python
一行Python代码过滤标点符号等特殊字符
Aug 12 #Python
一篇文章弄懂Python中的可迭代对象、迭代器和生成器
Aug 12 #Python
Django认证系统实现的web页面实现代码
Aug 12 #Python
django 自定义过滤器(filter)处理较为复杂的变量方法
Aug 12 #Python
django-filter和普通查询的例子
Aug 12 #Python
利用python实现汉字转拼音的2种方法
Aug 12 #Python
python面向对象 反射原理解析
Aug 12 #Python
You might like
php 搜索框提示(自动完成)实例代码
2012/02/05 PHP
ThinkPHP处理Ajax返回的方法
2014/11/22 PHP
PHPMailer使用QQ邮箱实现邮件发送功能
2017/08/18 PHP
JavaScript Event学习补遗 addEventSimple
2010/02/11 Javascript
10个基于Jquery的幻灯片插件教程
2010/10/29 Javascript
jQuery1.6 使用方法一
2011/11/23 Javascript
jquery+css+ul模拟列表菜单具体实现思路
2013/04/15 Javascript
jQuery中多个元素的Hover事件解决方案
2014/06/12 Javascript
浅谈 jQuery 事件源码定位问题
2014/06/18 Javascript
JavaScript设计模式之外观模式实例
2014/10/10 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
2015/07/01 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
2016/01/08 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
JavaScript学习笔记之数组去重
2016/03/23 Javascript
js微信分享API
2020/10/11 Javascript
使用jquery给新生的th绑定hover事件的实例
2017/02/10 Javascript
Vue自定义事件(详解)
2017/08/19 Javascript
NodeJs项目中关闭ESLint的方法
2018/08/09 NodeJs
JQuery中queue方法用法示例
2019/01/31 jQuery
基于JS实现一个随机生成验证码功能
2019/05/29 Javascript
layui操作列按钮个数和文字颜色的判断实例
2019/09/11 Javascript
处理Python中的URLError异常的方法
2015/04/30 Python
Python获取文件所在目录和文件名的方法
2017/01/12 Python
ipython和python区别详解
2019/06/26 Python
tensorflow 重置/清除计算图的实现
2020/01/19 Python
在Django中预防CSRF攻击的操作
2020/03/13 Python
Python+unittest+requests 接口自动化测试框架搭建教程
2020/10/09 Python
Python爬虫之Selenium设置元素等待的方法
2020/12/04 Python
Under Armour安德玛德国官网:美国高端运动科技品牌
2019/03/09 全球购物
Ibatis如何调用存储过程
2015/05/15 面试题
大专毕业生自我鉴定
2013/11/21 职场文书
房地产推广策划方案
2014/05/19 职场文书
租房安全协议书
2014/08/20 职场文书
2014国庆节标语口号
2014/09/19 职场文书
2015年中秋节演讲稿
2015/03/20 职场文书
nginx作grpc的反向代理踩坑总结
2021/07/07 Servers