Python Django Vue 项目创建过程详解


Posted in Python onJuly 29, 2019

1、创建项目

打开pycharm 终端,输入如下,创建项目

# 进入pycharm 项目目录下
cd pyWeb

django-admin startproject pyweb_dome

# pyweb_dome 是django项目名称

2、创建应用

# 进入项目根目录 pyweb_dome 下

 cd pyweb_dome 
python manage.py startapp webserver # webserver 为应用名

3、创建前端项目

使用vue-cli在根目录创建一个名称叫【frontend】的Vue.js项目作为项目前端

# 使用vue-cli在根目录创建一个名称叫【webfront】的Vue.js项目作为项目前端

vue-init webpack webfront

4、打包vue项目

# 使用 webpack 打包vue项目
cd webfront

npm install 
npm run build

此时直接运行npm run dev也可以直接查看前端 vue界面

npm run build

构建完成会生成一个文件夹,名字叫dist,里面有一个 index.html 和一个 文件夹static。

5、使用Django的通用视图 TemplateView修改静态指向路径(就是让Django访问目录指向我们刚才打包的dist/index.html)

找到项目根 pyweb_demo/urls.py文件作出如下修改,注意1、2两处修改。

"""pyweb_dome URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
  https://docs.djangoproject.com/en/2.1/topics/http/urls/
Examples:
Function views
  1. Add an import: from my_app import views
  2. Add a URL to urlpatterns: path('', views.home, name='home')
Class-based views
  1. Add an import: from other_app.views import Home
  2. Add a URL to urlpatterns: path('', Home.as_view(), name='home')
Including another URLconf
  1. Import the include() function: from django.urls import include, path
  2. Add a URL to urlpatterns: path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path

from django.views.generic.base import TemplateView # 1、增加该行

urlpatterns = [
  path('admin/', admin.site.urls),
  path(r'',TemplateView.as_view(template_name='index.html')), #2、 增加该行
]

6. 配置Django项目的模板搜索路径和静态文件搜索路径 找到根目录下 pyweb_demo/settings.py文件并打开,找到TEMPLATES配置项,修改如下:

TEMPLATES = [
  {
    'BACKEND': 'django.template.backends.django.DjangoTemplates',
    #'DIRS': [],
    'DIRS': ['webfront/dist'], # 修改1 
    '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',
      ],
    },
  },
]


# 新增2
# Add for vue.js
STATICFILES_DIRS = [
  os.path.join(BASE_DIR, "webfront/dist/static"),
]

7,到此基本就配置完成了,回退到根目录 运行命令就可以直接查看效果

python manage.py runserver

Python Django Vue 项目创建过程详解

Python Django Vue 项目创建过程详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Python 相关文章推荐
python根据出生日期返回年龄的方法
Mar 26 Python
Python编写生成验证码的脚本的教程
May 04 Python
Python使用剪切板的方法
Jun 06 Python
Python基于百度AI的文字识别的示例
Apr 21 Python
Python实现连接MySql数据库及增删改查操作详解
Apr 16 Python
python爬取基于m3u8协议的ts文件并合并
Apr 26 Python
Django通用类视图实现忘记密码重置密码功能示例
Dec 17 Python
Python对象的属性访问过程详解
Mar 05 Python
Python常用扩展插件使用教程解析
Nov 02 Python
python中numpy.empty()函数实例讲解
Feb 05 Python
Pytorch之扩充tensor的操作
Mar 04 Python
Python字典的基础操作
Nov 01 Python
python cumsum函数的具体使用
Jul 29 #Python
python利用re,bs4,requests模块获取股票数据
Jul 29 #Python
实例详解Python装饰器与闭包
Jul 29 #Python
对于Python深浅拷贝的理解
Jul 29 #Python
PyCharm中代码字体大小调整方法
Jul 29 #Python
python pandas cumsum求累计次数的用法
Jul 29 #Python
详解Python用三种方式统计词频的方法
Jul 29 #Python
You might like
德生PL660的电路分析和打磨
2021/03/02 无线电
基于文本的留言簿
2006/10/09 PHP
PHP迅雷、快车、旋风下载专用链转换代码
2010/06/15 PHP
typecho插件编写教程(二):写一个新插件
2015/05/28 PHP
php阿拉伯数字转中文人民币大写
2015/12/21 PHP
javascript下对于事件、事件流、事件触发的顺序随便说说
2010/07/17 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
2016/05/30 Javascript
简单实现js页面切换功能
2021/01/10 Javascript
AngularJs bootstrap详解及示例代码
2016/09/01 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
2016/09/28 Javascript
js实现截图保存图片功能的代码示例
2017/02/16 Javascript
vue.js中指令Directives详解
2017/03/20 Javascript
AngularJS实现的回到顶部指令功能实例
2017/05/17 Javascript
vue+axios实现登录拦截的实例代码
2017/05/22 Javascript
react开发教程之React 组件之间的通信方式
2017/08/12 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
2017/10/26 Javascript
vue接入腾讯防水墙代码
2019/05/07 Javascript
通过javascript实现段落的收缩与展开
2019/06/26 Javascript
React 父子组件通信的实现方法
2019/12/05 Javascript
[48:39]Ti4主赛事胜者组第一天 EG vs NEWBEE 2
2014/07/19 DOTA
[00:33]2018DOTA2亚洲邀请赛TNC出场
2018/04/04 DOTA
[53:36]Liquid vs VP Supermajor决赛 BO 第三场 6.10
2018/07/05 DOTA
Python运算符重载用法实例
2015/05/28 Python
详解使用Python处理文件目录的相关方法
2015/10/16 Python
python 调用c语言函数的方法
2017/09/29 Python
Django ORM框架的定时任务如何使用详解
2017/10/19 Python
python的中异常处理机制
2018/08/30 Python
浅谈PyQt5中异步刷新UI和Python多线程总结
2019/12/13 Python
python 项目目录结构设置
2020/02/14 Python
基于Python计算圆周率pi代码实例
2020/03/25 Python
澳大利亚家居用品零售商:Harris Scarfe
2020/10/10 全球购物
英语自荐信范文
2013/12/11 职场文书
学习型党组织心得体会
2014/09/12 职场文书
小学一年级数学教学反思
2016/02/16 职场文书
Python移位密码、仿射变换解密实例代码
2021/06/27 Python
vue中data里面的数据相互使用方式
2022/06/05 Vue.js