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升级提示Tkinter模块找不到的解决方法
Aug 22 Python
Python3如何解决字符编码问题详解
Apr 23 Python
Python探索之静态方法和类方法的区别详解
Oct 27 Python
python3之模块psutil系统性能信息使用
May 30 Python
对python列表里的字典元素去重方法详解
Jan 21 Python
Python 3.8中实现functools.cached_property功能
May 29 Python
详解Python绘图Turtle库
Oct 12 Python
Python扫描端口的实现
Jan 25 Python
如何使用Python对NetCDF数据做空间相关分析
Apr 21 Python
Python实现生活常识解答机器人
Jun 28 Python
pycharm安装深度学习pytorch的d2l包失败问题解决
Mar 25 Python
Python PIL按比例裁剪图片
May 11 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
用mysql触发器自动更新memcache的实现代码
2009/10/11 PHP
PHP将整个网站生成HTML纯静态网页的方法总结
2012/02/05 PHP
ThinkPHP利用PHPMailer实现邮件发送实现代码
2013/09/26 PHP
修改ThinkPHP缓存为Memcache的方法
2014/06/25 PHP
PHP使用mysql_fetch_row查询获得数据行列表的方法
2015/03/18 PHP
深入php内核之php in array
2015/11/10 PHP
CI配置多数据库访问的方法
2016/03/28 PHP
PHP+Ajax实现上传文件进度条动态显示进度功能
2018/06/04 PHP
JQuery 国际象棋棋盘 实现代码
2009/06/26 Javascript
js读写(删除)Cookie实例详解
2013/04/17 Javascript
Angularjs过滤器使用详解
2016/05/25 Javascript
用js实现简单算法的实例代码
2016/09/24 Javascript
JS弹出窗口的运用与技巧大全
2016/11/01 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
2016/12/18 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
2016/12/21 Javascript
详解JS去重及字符串奇数位小写转大写
2016/12/29 Javascript
Centos6.8下Node.js安装教程
2017/05/12 Javascript
浅谈手写node可读流之流动模式
2018/06/01 Javascript
JavaScript中七种流行的开源机器学习框架
2018/10/11 Javascript
Vue动画事件详解及过渡动画实例
2019/02/09 Javascript
ant-design-vue 快速避坑指南(推荐)
2020/01/21 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
2020/05/24 Javascript
Python 分析Nginx访问日志并保存到MySQL数据库实例
2014/03/13 Python
python try 异常处理(史上最全)
2019/03/07 Python
对python tkinter窗口弹出置顶的方法详解
2019/06/14 Python
Python绘制频率分布直方图的示例
2019/07/08 Python
python 实现GUI(图形用户界面)编程详解
2019/07/17 Python
django连接oracle时setting 配置方法
2019/08/29 Python
Python3的unicode编码转换成中文的问题及解决方案
2019/12/10 Python
Python实现图像的垂直投影示例
2020/01/17 Python
Django 项目通过加载不同env文件来区分不同环境
2020/02/17 Python
Lulu & Georgia官方网站:购买地毯、家具、抱枕、壁纸、床上用品等
2018/03/19 全球购物
SCDKey德国:全球领先的数字游戏市场
2019/04/09 全球购物
环保宣传标语
2014/06/12 职场文书
河童之夏观后感
2015/06/11 职场文书
PHP基本语法
2021/03/31 PHP