python框架django中结合vue进行前后端分离
一:创建django项目
1.django-admin startproject mysite # 创建mysite项目 2.django-admin startapp app01# 创建app01应用
二:安装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
如果之前安装的有node,nmp和cnpm就可以不用安装,
三:设置vue项目
1.将vue项目,放在django文件夹下,跟app01文件夹同级
2.运行vue项目
cd firstvue ## 进入到上一部创建的firstvue项目中
cnpm install ## 安装需要的依赖模块
cnpm run dev ## 运行调式的服务,会启动一个web服务,访问localhost:8080 即可调式
如果可以运行成功,证明当前vue项目是没有问题
四:vue项目写完后,打包vue项目,然后修改django配置,将vue集成到django中
- cnpm run build ## 打包vue项目,会将所有东西打包成一个dist文件夹
在python下的项目文件夹下的-settings.py中配置
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': ['vue-admin-master/dist'], # 修改内容
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
把vue的静态文件夹的目录配置到项目中【添加静态文件夹路径】
STATIC_URL = '/static/' STATICFILES_DIRS=[
os.path.join(BASE_DIR,'vue-admin-master/dist/static/'), # 添加内容
]
五:修改django的主目录的urls文件
from django.contrib import admin
from django.urls import path
from blog import views
from django.views.generic.base import TemplateView urlpatterns = [
path('admin/', admin.site.urls),
path(r'', TemplateView.as_view(template_name='index.html')),
]
添加对应的路由
六:启动django服务,访问localhost:8000 则可以出现vue的首页
启动django
python manage.py runserver
http://127.0.0.1:8000/#/login
访问出现vue项目的界面,就已经成功了!
七:有时候并不能直接访问出首页,原因是路径不对
有的会设置的有前缀,需要把前缀去掉,重新打包才能使用
打包的时候不需要把之前的打包内容删除,直接重新打包,会有对应的打包记录
八:vue打包之后经常会出现fontawesome图标库不能使用的情况
打包之后,需要手动吧fontawesome引入的css文件路径更改
把原来的
url(/static/fonts/fontawesome-webfont.b06871f.ttf),
换成
url(../fonts/fontawesome-webfont.b06871f.ttf),
fontawesome小图标就可以显示出来了
python框架django中结合vue进行前后端分离的更多相关文章
- Flask & Vue 构建前后端分离的应用
Flask & Vue 构建前后端分离的应用 最近在使用 Flask 制作基于 HTML5 的桌面应用,前面写过<用 Python 构建 web 应用>,借助于完善的 Flask ...
- Python Flask高级编程之RESTFul API前后端分离精讲 (网盘免费分享)
Python Flask高级编程之RESTFul API前后端分离精讲 (免费分享) 点击链接或搜索QQ号直接加群获取其它资料: 链接:https://pan.baidu.com/s/12eKrJK ...
- gin+vue的前后端分离开源项目
该项目是gin+vue的前后端分离项目,使用gorm访问MySQL,其中vue前端是使用vue-element-admin框架简单实现的: go后台使用jwt,对API接口进行权限控制.此外,Web页 ...
- vue+springboot前后端分离实现单点登录跨域问题处理
最近在做一个后台管理系统,前端是用时下火热的vue.js,后台是基于springboot的.因为后台系统没有登录功能,但是公司要求统一登录,登录认证统一使用.net项目组的认证系统.那就意味着做单点登 ...
- 一套基于SpringBoot+Vue+Shiro 前后端分离 开发的代码生成器
一.前言 最近花了一个月时间完成了一套基于Spring Boot+Vue+Shiro前后端分离的代码生成器,目前项目代码已基本完成 止步传统CRUD,进阶代码优化: 该项目可根据数据库字段动态生成 c ...
- docker-compose 部署 Vue+SpringBoot 前后端分离项目
一.前言 本文将通过docker-compose来部署前端Vue项目到Nginx中,和运行后端SpringBoot项目 服务器基本环境: CentOS7.3 Dokcer MySQL 二.docker ...
- SpringBoot+Jpa+SpringSecurity+Redis+Vue的前后端分离开源系统
项目简介: eladmin基于 Spring Boot 2.1.0 . Jpa. Spring Security.redis.Vue的前后端分离的后台管理系统,项目采用分模块开发方式, 权限控制采用 ...
- python django框架+vue.js前后端分离
本文用于学习django+vue.js实现web前后端分离协作开发.以一个添加和删除数据库书籍应用为实例. django框架官方地址:https://www.djangoproject.com/ vu ...
- 【转】python+django+vue搭建前后端分离项目
https://www.cnblogs.com/zhixi/p/9996832.html 以前一直是做基于PHP或JAVA的前后端分离开发,最近跟着python风搭建了一个基于django的前后端分享 ...
随机推荐
- Optimizing TLB entries for mixed page size storage in contiguous memory
A system and method for accessing memory are provided. The system comprises a lookup buffer for stor ...
- Linux typeof【转】
转自:http://blog.csdn.net/xiaofeng_yan/article/details/5248633 今天偶然又看到了typeof这个东西,只知道它大概是返回变量的类型,后来上网查 ...
- laravel 中的入口文件报错
1.此次是由于加载的配置文件的编码错误导致的.例:conf.php
- ES6 一种新的数据结构--Map跟Objct的区别
var map1=new Map(); var keys={key:'val'}; map1.set(keys,'content'); ==> {Object {key: "val&q ...
- AC日记——[POI2008]BLO-Blockade 洛谷 [POI2008]BLO-Blockade
[POI2008]BLO-Blockade 思路: tarjan: 代码: #include <bits/stdc++.h> using namespace std; #define ma ...
- 解决CentOS7.4KDE桌面或者gnome桌面安装VLC及声音问题
一.安装VLC 1.下载源 https://mirrors.tuna.tsinghua.edu.cn/epel/7/x86_64/e/epel-release-7-11.noarch.rpm http ...
- 六十二 Web开发 使用模板
Web框架把我们从WSGI中拯救出来了.现在,我们只需要不断地编写函数,带上URL,就可以继续Web App的开发了. 但是,Web App不仅仅是处理逻辑,展示给用户的页面也非常重要.在函数中返回一 ...
- python request post上传文件额外注意点
通用用法 但上图的字段名,类型需要根据不同接口填写,如某服务接口: 因而对应的上传代码如下: # 输出参数:请求响应报文import requestsrequest_url = 'https://XX ...
- VS2013下实现移动端的跨平台开发
http://www.th7.cn/Program/Android/201412/336394.shtml 前一天准备下载VS2015预览版,到VisualStudio官网一看,发现微软发布了Visu ...
- Struts2 + MySQL 实现分页
代码结构: package com.action; import java.util.List; import java.util.Map; import com.bean.Pager; import ...