Python Django Vue 项目创建过程详解
作者:Blue·Sky 发布时间:2022-03-28 22:06:38
标签:python,django,vue,项目,创建
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
来源:https://www.cnblogs.com/BlueSkyyj/p/11172433.html
0
投稿
猜你喜欢
- MapPathMapPath 方法将指定的相对或虚拟路径映射到服务器上相应的物理目录上。语法Server.MapPath( Path ) 参
- 最近有个部署需求,需要读取py文件格式的配置项,我的实现思路是把配置文件解析到内存中。主要使用两种方法:importlib.import_m
- 最近有在使用屏幕录制软件录制桌面,在用的过程中突发奇想,使用python能不能做屏幕录制工具,也锻炼下自己的动手能力。接下准备写使用pyth
- 本文实例讲述了python实现根据月份和日期得到星座的方法。分享给大家供大家参考。具体实现方法如下:#计算星座def Zodiac(mont
- 综述:本文讨论了VBScript和 JScript之间的区别,以及它们的使用场合。推荐:Vbscript5.5中文语言参考手册chm格式下载
- 本文实例讲述了python执行子进程实现进程间通信的方法。分享给大家供大家参考。具体实现方法如下:a.py:import subproces
- 本文实例为大家分享了python树莓派红外反射传感器的程序,供大家参考,具体内容如下1、工具rpi3,微雪ARPI600,Infrared
- --sql语句就用下面的存储过程 /*--数据导出Excel导出查询中的数据到Excel,包含字段名,文件为真正的Excel文件,如果文件不
- 第一种方法:python操作xml文件随手找了一个xml文件内容(jenkins相关文件)<?xml version="1.
- 在推广Web标准的今天,那些崇尚Web标准的人经常说XHTML比HTML更加严格,当然从某种意义上说是的,比如它要求所有的标签关闭并且所有的
- 列表转化为字符串如下所示:>>> list1=['ak','uk',4]>>&
- replace()方法返回当前old换成new,可选择的替代限制到最大数量的字符串的副本。语法以下是replace()方法的语法
- 随机从列表中取出元素:import randomdataSet = [[0], [1], [2], [3], [4], [5], [6],
- 这两天在测试过程中,遇到这样的问题:数据量很大,一份csv文件的数据与另外一个文件的数据进行对比,但是csv中的文件数据量很大,并且进行统计
- 前言for...in 是Python程序员使用最多的语句,for 循环用于迭代容器对象中的元素,这些对象可以是列表、元组、字典、集合、文件,
- 1.单列运算在Pandas中,DataFrame的一列就是一个Series, 可以通过map来对一列进行操作:df['col2
- 简介使用百度深度学习框架paddlepaddle对人像图片进行自动化抠图安装根据PaddlePaddle官网命令安装如pip install
- 一、vim python自动补全插件:pydiction 可以实现下面python代码的自动补全:1.简单python关键词补全 2.pyt
- 一个完整的域名,由根域、顶级域、二级、 * ……域名构成,每级域名之间用点分开,每级域名由字母、数字和减号构成(第一个字母不能是减号),不区分
- 每月需更新某个excel表格,进行两项操作,且不覆盖原有的sheet:1. 在原来的excel表中新增sheet2. 往原有的excel表中