django 与 vue 的完美结合

Python 同时被 3 个专栏收录
190 篇文章 4 订阅
52 篇文章 3 订阅
1 篇文章 0 订阅

最近接到一个任务,就是用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的主目录的urls文件:

html文件和static同级目录

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

python manage.py runserver 

 

 

BUG解决:

发现问题


为啥会404,我们先看下index.html的文件

截取其中一段
<link href=/css/login.d7cd78d9.css rel=prefetch>

按这个相对路径看,index.htmlcss是同级目录,那href不是应该是./css/login.d7cd78d9.css(多个点),修改,重新运行,发现还是404.

我们再看看django访问静态文件的配置,是访问dist目录下似乎没毛病,但是我们忘记了还有STATIC_URL是访问带static文件夹的,官方文档

解决问题


frontend目录下创建vue.config.js

module.exports = {
    assetsDir: 'static',  #指定`build`时,在静态文件上一层添加static目录
};

接下来就是重新build(index.html的引用地址也同步改了),起django,访问,解决问题

  • 5
    点赞
  • 3
    评论
  • 25
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

<p style="color:#666666;"> <span style="font-size:14px;">本门课程重实战,将基础知识拆解到项目里,让你在项目情境里学知识。</span> </p> <p style="color:#666666;"> <span style="font-size:14px;">这样学习方式能让你保持兴趣、充满动力,时刻知道学东西能用在哪、能怎么用。</span> </p> <p style="color:#666666;"> <span style="font-size:14px;">平时不明白知识点,放在项目里去理解就恍然大悟了。</span> </p> <p style="color:#666666;"> <span></span> </p> <p style="color:#666666;"> <span style="font-size:14px;"> </span> </p> <p style="color:#666666;"> <span style="color:#FF0000;font-size:14px;"><strong>一、融汇贯通</strong></span> </p> <p style="color:#666666;"> <span style="font-size:14px;">本视频采用了前后端分离开发模式,前端使用Vue.js+Element UI实现了Web页面呈现,后端使用Python Django框架实现了数据访问接口,前端通过Axios访问后端接口获得数据。在学习完本章节后,真正理解前后端各自承担工作。</span> </p> <p style="color:#666666;"> <span style="font-size:14px;"> </span> </p> <p style="color:#666666;"> <span style="color:#FF0000;font-size:14px;"><strong>二、贴近实战</strong></span> </p> <p style="color:#666666;"> <span style="font-size:14px;">本系列课程为练手项目实战:学生管理系统v4.0开发,项目包含了如下几个内容:项目总体介绍、基本功能演示、Vuejs初始化、Element UI使用、在Django中实现针对数据增删改查接口、在Vuejs中实现前端增删改查调用、实现文件上传、实现表格分页、实现导出数据到Excel、实现通过Excel导入数据、实现针对表格批量化操作等等,所有功能都通过演示完成、贴近了实战</span> </p> <p style="color:#666666;"> <span style="font-size:14px;"> </span> </p> <p style="color:#666666;"> <span style="color:#FF0000;font-size:14px;"><strong>三、课程亮点</strong></span> </p> <p style="color:#666666;"> <span style="font-size:14px;">在本案例中,最大亮点在于前后端做了分离,真正理解前后端各自承担工作。前端如何和后端交互</span> </p> <p style="color:#666666;"> <span style="font-size:14px;"> </span> </p> <p style="color:#666666;"> <span style="color:#FF0000;font-size:14px;"><strong>适合人群:</strong></span> </p> <p style="color:#666666;"> <span style="font-size:14px;">1、有Python语言基础、web前端基础,想要深入学习Python Web框架朋友;</span> </p> <p style="color:#666666;"> <span style="font-size:14px;">2、有Django基础,但是想学习企业级项目实战朋友;</span> </p> <p style="color:#666666;"> <span style="font-size:14px;">3、有MySQL数据库基础朋友</span> </p> <p style="color:#666666;"> <span style="font-size:14px;"> </span> </p> <p style="color:#666666;"> <span style="font-size:14px;"><img alt="" src="https://img-bss.csdnimg.cn/202009070752197496.png" /><br /> </span> </p> <p style="color:#666666;"> <span style="font-size:14px;"><br /> </span> </p>
相关推荐
©️2020 CSDN 皮肤主题: Age of Ai 设计师:meimeiellie 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值