当前位置:   article > 正文

python+django+vue搭建前后端分离项目Part1_python+vue+django

python+vue+django

Python环境搭建

(base) XXX:~ XXX$ conda create -n my_django python=3.9
  • 1

安装django框架

(base) XXX:~ XXX$ conda activate my_django
  • 1

安装django

pip install django
## pip3 install django 当使用pip安装失败的时候可以尝试使用pip3
  • 1
  • 2

创建django项目

(my_django) XXX:~ XXX$ django-admin startproject first_django
  • 1

此时项目结构如下:
在这里插入图片描述

【如果此时报错 zsh: command not found: django-admin】

是django-admin路径问题。首先需要找到django-admin现在所在的绝对路径,然后将其通过软连接处理放到/usr/local/bin下面去

  • 找django-admin目前所在的绝对路径(一般会在 /Users/XXX/Library/Python/3.X/bin 下面)
sudo find / -name django-admin 
  • 1
  • 使用软连接(此时需要保证在 /usr/local下已经存在bin文件夹)
sudo ln -s /Users/XXX/Library/Python/3.X/bin/django-admin  /usr/local/bin
  • 1

新建static静态文件夹

此时的项目结构如下:
在这里插入图片描述

创建django App(后端)

进入到django项目的根目录下,然后创建django App

(my_django) XXX:~ XXX$ cd first_django
(my_django) XXX:first_django$ python manage.py startapp backend 
# 当使用python命令的时候报错的话,可以尝试使用python3
  • 1
  • 2
  • 3

此时的项目结构如下:
在这里插入图片描述

创建vue项目(前端)

(my_django) XXX:first_django$ npm install -g @vue/cli-init #若不添加,则无法使用vue init命令
(my_django) XXX:first_django$ vue init webpack frontend
  • 1
  • 2

以上是我对初始化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
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

此时的项目结构如下:
在这里插入图片描述

集成vue项目到django

打包vue项目

首先将vue项目进行打包

cd frontend
npm install
npm run build
  • 1
  • 2
  • 3

此时会产生一个带有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')] # 不需要
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

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的路径
]
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

运用python执行django项目

需要在djange项目的主路径下执行,否则找不到manage.py

(my_django) XXX:first_django$ python manage.py runserver
  • 1

可通过本地网页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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/羊村懒王/article/detail/137049
推荐阅读
相关标签
  

闽ICP备14008679号