django 与 vue 的完美结合
最近接到一个任务,就是用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.html
与css
是同级目录,那href
不是应该是./css/login.d7cd78d9.css
(多个点),修改,重新运行,发现还是404.
我们再看看django访问静态文件的配置,是访问dist
目录下似乎没毛病,但是我们忘记了还有STATIC_URL
是访问带static
文件夹的,官方文档
解决问题
module.exports = {assetsDir: 'static', #指定`build`时,在静态文件上一层添加static目录
};
接下来就是重新build(index.html的引用地址也同步改了),起django,访问,解决问题
django 与 vue 的完美结合相关推荐
- django 与 vue 的完美结合 实现前后端的分离开发之后在整合
最近接到一个任务,就是用django后端,前段用vue,做一个普通的简单系统,我就是一搞后端的,听到vue也是比较震惊,之前压根没接触过vue. 看了vue的一些文档,还有一些项目,先说一下djang ...
- python django vue_Django+Vue.js构建项目
本文主要讲述如何从0开始,用Django和Vue.js构建一个项目.文章提要:Django与vue.js整合开发原理 从头新建一个Django项目 新建一个前端页面,使用vue应用 在Django中设 ...
- vue.js django_如何使用Django和Vue.js对Web应用程序进行原型制作
vue.js django Wouldn't it be cool if you could prototype a custom web application that's responsive ...
- 解决Django与Vue的跨域问题
使用django-cors-headers解決Django和vue跨域问题 利用Django作为后端,Vue作为前端,进行前后端结合(数据交互)时出现跨域问题,本文介绍后端解决跨域问题的方法,配置后无 ...
- 用uwsgi和nginx 部署 django和vue打造的前后端分离项目
用uwsgi和nginx 部署 django和vue打造的前后端分离项目 前言 由于现在没有彻底掌握nginx的使用,部署起来有点磕磕绊绊,为了防止以后再次需要部署的时候无法快速找到适合的资料,以此文 ...
- 【毕业设计_课程设计】基于Django和vue的微博用户情感分析系统
文章目录 0 项目说明 1 系统介绍 2 系统功能介绍 3 系统启动注意事项 4 项目工程 0 项目说明 基于Django和vue的微博用户情感分析系统 提示:适合用于课程设计或毕业设计,工作量达标, ...
- django集成vue,实现前后端分离开发
目前,前后端分离的开发方式越发常见,已成为主要开发方式,那么django作为一个python快速开发中小型web端最常见的框架,django虽然也有自己前端模板,但是毕竟不是很好,而且写在一起,也不符 ...
- 前后端分离之评论功能前端(1)——django+mysql+vue+element+axios
评论系统前端 一. 导入vue和element用到的组件 二. 使用element设计页面 2.1 导航菜单 2.2 输入框 2.3 按钮 2.4 显示评论 前言: 作者:神的孩子在歌唱 大家好,我叫 ...
- springboot flask php,使用Vue,Spring Boot,Flask,Django 完成Vue前后端分离开发(二)
使用Vue完成前后端分离开发(二) Bravery never goes out of fashion. 勇敢永远不过时. 前面简单说了一下 Vue 项目的搭建和项目的大致页面,这里讲一下 Djang ...
最新文章
- mediawiki java api_维基百科 MediaWiki API 解析
- 详细解析用C#写的小游戏《彩色连珠》(附源代码)
- C# 制作外挂常用的API
- 白话tensorflow分布式部署和开发
- 【转】4.SharePoint服务器端对象模型 之 使用CAML进行数据查询
- 华为鸿蒙2.0操作页面,华为鸿蒙2.0开面界面确认,这一变化你可懂
- Django表单form
- php压缩zip文件类
- UITableview高度计算
- docker容器别人访问很卡_一篇文章带你走进Docker的世界
- 读书笔记:《浪潮之巅》
- 【调度】调度问题的描述分类及特性
- 磁盘被写保护怎么解除
- 《统计学基于R》第一章 数据与R
- [codeforces 1312A] Two Regular Polygons 整除
- sqlite 数据库连接问题以及解决方法
- 桌面窗口管理器占用GPU高的解决办法
- apache防止恶意解析
- c语言——简单计算器
- 运营商大数据获客的优势