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 19 Python
python集合用法实例分析
May 30 Python
举例讲解Python设计模式编程中的访问者与观察者模式
Jan 26 Python
TensorFlow安装及jupyter notebook配置方法
Sep 08 Python
对pandas中时间窗函数rolling的使用详解
Nov 28 Python
python绘制多个子图的实例
Jul 07 Python
Django框架表单操作实例分析
Nov 04 Python
python如何使用socketserver模块实现并发聊天
Dec 14 Python
Python写出新冠状病毒确诊人数地图的方法
Feb 12 Python
jupyter 中文乱码设置编码格式 避免控制台输出的解决
Apr 20 Python
python破解同事的压缩包密码
Oct 14 Python
python自动计算图像数据集的RGB均值
Jun 18 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
PHP中mb_convert_encoding与iconv函数的深入解析
2013/06/21 PHP
php中使用Ajax时出现Error(c00ce56e)的详细解决方案
2014/11/03 PHP
PHP过滤黑名单关键字的方法
2014/12/01 PHP
PHP Try-catch 语句使用技巧
2016/02/28 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
JQuery自定义事件的应用 JQuery最佳实践
2010/08/01 Javascript
jQuery 阴影插件代码分享
2012/01/09 Javascript
基于jquery自定义图片热区效果
2012/07/21 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
2013/04/01 Javascript
javascript中声明函数的方法及调用函数的返回值
2014/07/22 Javascript
JQuery中的html()、text()、val()区别示例介绍
2014/09/01 Javascript
js实现select二级联动下拉菜单
2020/04/17 Javascript
浅谈JavaScript的计时器对象
2016/12/26 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
2017/07/10 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
2017/10/13 jQuery
vue.js引入外部CSS样式和外部JS文件的方法
2019/01/06 Javascript
小程序云开发之用户注册登录
2019/05/18 Javascript
Python中使用strip()方法删除字符串中空格的教程
2015/05/20 Python
Python面向对象编程之继承与多态详解
2018/01/16 Python
使用python语言,比较两个字符串是否相同的实例
2018/06/29 Python
解决Python找不到ssl模块问题 No module named _ssl的方法
2019/04/29 Python
python中的selenium安装的步骤(浏览器自动化测试框架)
2020/03/17 Python
python selenium操作cookie的实现
2020/03/18 Python
keras 获取某层的输入/输出 tensor 尺寸操作
2020/06/10 Python
python 实现Harris角点检测算法
2020/12/11 Python
IE下实现类似CSS3 text-shadow文字阴影的几种方法
2011/05/11 HTML / CSS
文员个人求职自荐信
2013/09/21 职场文书
土木工程师岗位职责
2013/11/24 职场文书
特教教师先进事迹
2014/05/21 职场文书
2014年林业工作总结
2014/12/05 职场文书
办公室禁烟通知
2015/04/23 职场文书
525心理健康活动总结
2015/05/08 职场文书
2019旅游导游工作总结
2019/06/27 职场文书
用Python实现Newton插值法
2021/04/17 Python
MySQL8.0无法启动3534的解决方法
2021/06/03 MySQL
JVM入门之类加载与字节码技术(类加载与类的加载器)
2021/06/15 Java/Android