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.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,访问,解决问题

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/455847.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

东芝确定半导体重组计划:保留闪存其他全卖

会计丑闻给日本东芝公司的业绩带来严重影响&#xff0c;为了提高盈利&#xff0c;东芝正在对旗下的半导体、个人电脑、白色家电等业务进行一次重大重组。据日经新闻1月23日报道&#xff0c;东芝已经正式制定了芯片业务重组的详细计划&#xff0c;除了占据优势的闪存芯片之外&am…

python画两条曲线图_python绘制多个曲线的折线图

这篇文章利用的是matplotlib.pyplot.plot的工具来绘制折线图&#xff0c;这里先给出一个段代码和结果图&#xff1a; # -*- coding: UTF-8 -*- import numpy as np import matplotlib as mpl import matplotlib.pyplot as plt #这里导入你自己的数据 #...... #...... #x_axix&a…

5.19汇总

int block_x 8*(b8 & 0x01)4*(b4 & 0x01);int block_y 8*(b8 >> 1)4*(b4 >> 1);请问下老大 这两句定义是什么意思啊&#xff1f; 带些值进去算一下就知道了 b8 0 1 2 3b4 0 1 2 3 A&#xff1a;0 ........Er…

oracle 截取字指定的字符串

过滤指定的字符串,一字符串有重复的数据内容,所以需要去掉重复的内容,subst()截取 起止下标;instr()获取终止下标位置 例如:substr(p.address, 0, instr(p.address, -, 1, 1)-1) ); case when length(substr(p.address, 0, instr(p.address, -, 1, 1)-1) ) 13 then substr(sub…

[django]django模型中auto_now和auto_now_add

示例: update_time models.DateTimeField(更新时间, defaulttimezone.now) create_time models.DateTimeField(创建时间, auto_now_addTrue) auto_now无论是你添加还是修改对象&#xff0c;时间为你添加或者修改的时间。 auto_now_add为添加时的时间&#xff0c;更新对象时不…

2014-7-29-阿里电面-第一轮

等了好久&#xff0c;以为简历要挂了&#xff0c;今天最终打来了。面试过程中手抖嘴抖有木有&#xff01; 1、经经常使用的集合类。我回到ArrayList、LinkedList、HashMap&#xff0c;接着问ArrayList、LinkedList的差别&#xff0c;以及分别的适用范围。看了Java集合类基本上是…

数据分级分类实施指南_运营商行业数据安全治理实践

建立组织构建大数据安全保障组一、大数据安全保障工作组职责 1、负责制定大数据信息安全策略&#xff0c;明确信息安全目标。 2、组织相关平台负责人定期召开信息安全会议。 3、负责客户数据安全突发事件应急方案实施和大数据信息系统日常安全运行管理的组织协调及决策工作。 4…

CSS中的定位

定位 关于定位我们可以使用css的position属性来设置元素的定位类型&#xff0c;postion的设置项如下&#xff1a; relative 生成相对定位元素&#xff0c;元素所占据的文档流的位置不变&#xff0c;元素本身相对文档流的位置进行偏移absolute 生成绝对定位元素&#xff0c;元…

servlet中中文正常显示,mysql数据库手动插入中文正常显示,servlet向mysql中插入中文显示乱码...

作者&#xff1a;http://5563447.blog.51cto.com/5553447/1422627 问题是&#xff1a;就是POST请求提交表单数据给servlet,通过JDBC插入Mysql,出现中文乱码。 解决方式&#xff1a;在url后面加这句 ?useUnicodetrue&characterEncodingutf-8 我的项目&#xff1a; 结果&am…

rtp问题引领汇总

视频网络传输一定要用rtp吗&#xff1f; RTP/RTCP有一套很好的反馈机制&#xff0c;通过其可以估算网络状况&#xff0c;然后在编码端进行调整&#xff0c;如网络繁忙时适当的降低画面质量&#xff0c;减小码率等&#xff0c;主要是想通过RTP/RTCP协议实现QoS&#xff01;同时…

Django的信号机制详解

Django的信号机制详解 Django提供一种信号机制。其实就是观察者模式&#xff0c;又叫发布-订阅(Publish/Subscribe) 。当发生一些动作的时候&#xff0c;发出信号&#xff0c;然后监听了这个信号的函数就会执行。 Django内置了一些信号&#xff0c;比如&#xff1a; django.…

垃圾回收算法_垃圾回收算法有哪些

垃圾检测通常通过建立一个根对象的集合以及建立一个从这些根对象开始能够触及的对象集合来实现。如果正在执行的程序可以访问到根对象和某个对象之间存在引用路径&#xff0c;这个对象就是可触及的。对于程序来说&#xff0c;根对象总是可以访问的。从这些根对象开始&#xff0…

不错的电子书下载网站

为什么80%的码农都做不了架构师&#xff1f;>>> www.jb51.net 电子书质量不错,虽然是扫描版的,但是都是高清的. vdisk.weibo.com 网盘, 内容很多! 转载于:https://my.oschina.net/GMT/blog/1188971

GeoHash核心原理解析

原文地址&#xff1a;http://www.cnblogs.com/LBSer/p/3310455.html geohash for php&#xff1a;附件下载geohash.tar.gz 引子 机机是个好动又好学的孩子&#xff0c;平日里就喜欢拿着手机地图点点按按来查询一些好玩的东西。某一天机机到北海公园游玩&#xff0c;肚肚饿了&am…

[转载]流行视频格式讲解

*. MPEG/.MPG/.DAT MPEG也是Motion Picture Experts Group 的缩写。这类格式包括了 MPEG-1, MPEG-2 和 MPEG-4在内的多种视频格式。MPEG-1相信是大家接触得最多的了&#xff0c;因为目前其正在被广泛地应用在 VCD 的制作和一些视频片段下载的网络应用上面&#xff0c;大部分的…

Ajax相关介绍

ajax是什么? AJAX 是与服务器交换数据并更新部分网页的艺术&#xff0c;在不重新加载整个页面的情况下。 AJAX 指异步 JavaScript 及 XML&#xff08;Asynchronous JavaScript And XML&#xff09;。 AJAX 是一种在 2005 年由 Google 推广开来的编程模式。 AJAX 不是一种新的…

解决Ubuntu中文件管理器死掉的情况

有时会遇到Ubuntu文件管理器死掉的情况&#xff0c;怎么点击都没有反应&#xff0c;这时只需在终端上运行 ps -A | grep nautilus&#xff0c; 查找文件管理器nautilus对应的pid,然后sudokillpid就可以关闭文件管理器进程&#xff0c;随便点击一个文件夹就可以重启文件管理器了…

element table 怎么知道点击的是第几行_el-data-table, 让CRUD更简单??

基于Vue2.x, element-ui 2.x&#xff0c;以及开源组件el-form-renderer封装了一个业务组件el-data-table&#xff0c;已在github开源&#xff0c;其目标是&#xff1a;makes restful api crud easily 特点&#xff1a;1. 使用axios自动发送请求2.自带新增/修改/删除逻辑(默认新…

Win10无法使用小娜搜索本地应用问题的解决方案

小娜介绍 win10的Cortana小娜是一个功能非常强大的语音和搜索助手&#xff0c;用户可以通过小娜助手搜索任意的文件和应用软件&#xff0c;不过有用户发现win10的小娜搜索不到已安装的本地软件&#xff0c;那么win10小娜助手无法搜索本地应用怎么解决呢&#xff1f;下面小编教大…

样本量

sklearn实战-乳腺癌细胞数据挖掘(博客主亲自录制视频教程) https://study.163.com/course/introduction.htm?courseId1005269003&utm_campaigncommission&utm_sourcecp-400000000398149&utm_mediumshare 根据power&#xff0c;effect size,a,决定样本量 # -*- cod…