Python Django Vue 项目创建过程详解

yipeiwu_com6年前Python基础

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设计】。

相关文章

以Flask为例讲解Python的框架的使用方法

以Flask为例讲解Python的框架的使用方法

了解了WSGI框架,我们发现:其实一个Web App,就是写一个WSGI的处理函数,针对每个HTTP请求进行响应。 但是如何处理HTTP请求不是问题,问题是如何处理100个不同的URL。...

树莓派与PC端在局域网内运用python实现即时通讯

电脑和树莓派在同一局域网内,先在电脑和树莓派创建python运行环境,然后在树莓派中用python运行rpi.py;在电脑上运行computer.py;电脑上输入字符即可在树莓派上即时显...

对Python通过pypyodbc访问Access数据库的方法详解

对Python通过pypyodbc访问Access数据库的方法详解

看书上通过ODBC访问数据库的案例,想实践一下在Python 3.6.1中实现access2003数据库的链接,但是在导入odbc模块的时候出现了问题,后来查了一些资料就尝试着使用pyp...

详解python中requirements.txt的一切

简介 Python项目中必须包含一个 requirements.txt 文件,用于记录所有依赖包及其精确的版本号。以便新环境部署。 主要的写法如下所示 pip freeze >...

探究python中open函数的使用

探究python中open函数的使用

最近,开始学习python的开发,遇到了一点文件操作的问题,探究一下open函数的使用。 一、open()的函数原型 open(file, mode=‘r', buffering=-1,...