python+django+vue搭建前后端分离项目Part1
Python环境搭建
(base) XXX:~ XXX$ conda create -n my_django python=3.9
安装django框架
(base) XXX:~ XXX$ conda activate my_django
创建django项目
(my_django) XXX:~ XXX$ django-admin startproject first_django
此时项目结构如下:
新建static静态文件夹
此时的项目结构如下:
创建django App(后端)
进入到django项目的根目录下,然后创建django App
(my_django) XXX:~ XXX$ cd first_django
(my_django) XXX:first_django$ python manage.py startapp backend
此时的项目结构如下:
创建vue项目(前端)
(my_django) XXX:first_django$ npm install -g @vue/cli-init #若不添加,则无法使用vue init命令
(my_django) XXX:first_django$ vue init webpack frontend
以上是我对初始化vue项目的配置,供参考
? Project name frontend
? Project description the frontend for my first web
? Author name <XXXX@qq.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm
此时的项目结构如下:
集成vue项目到django
打包vue项目
首先将vue项目进行打包
cd frontend
npm install
npm run build
此时会产生一个带有static文件夹和index.html的一个文件夹dist。这个文件夹是用于集成到django框架中的。(每次更新vue项目,都需要重新执行上述代码进行打包)
django项目参数配置修改
django项目下的setting.py
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
# 'DIRS': [], #注释掉
'DIRS':['frontend/dist'], # 用它替换
'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',
],
},
},
]
## 添加如下前端静态文件夹路径
# Add for vue.js
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "frontend/dist/static"),
]
## 添加如下后端静态文件夹路径
STATIC_URL = 'static/'
# STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')] # 不需要
django下的urls.py
from django.contrib import admin
from django.urls import path
from django.views.generic.base import TemplateView # 引入TemplateView
urlpatterns = [
path('admin/', admin.site.urls),
path(r'', TemplateView.as_view(template_name="index.html")), # 定义frontend/dist/index.html的路径
]
运用python执行django项目
需要在djange项目的主路径下执行,否则找不到manage.py
(my_django) XXX:first_django$ python manage.py runserver
可通过本地网页http://127.0.0.1:8000/进行访问。
参考文章
https://www.cnblogs.com/smallclown/p/11656001.html
https://www.cnblogs.com/zhixi/p/9996832.html
https://www.runoob.com/django/django-first-app.html
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhfkfgkf
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01