window10下python3利用虚拟环境搭建Django+vue框架

最新推荐文章于 2024-05-09 20:30:33 发布

午夜小学徒；

最新推荐文章于 2024-05-09 20:30:33 发布

阅读量467

点赞数

分类专栏： Django Vue 框架整合文章标签： django vue

本文链接：https://blog.csdn.net/qq_43981344/article/details/105993300

版权

Django 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

Vue

1 篇文章 0 订阅

订阅专栏

框架整合

1 篇文章 0 订阅

订阅专栏

1.安装python虚拟环境包并新建一个环境

cmd窗口运行pip install virtualenvwrapper-win （linux下运行 pip install virtualenvwrapper ）
设置新建的虚拟环境所在路径（默认 C:\Users\Administrator\Envs）
打开环境变量设置变量值为新建虚拟环境放置位置
重新打开一个cmd窗口
常见命令：
1. 新建：mkvirtualenv env1
2. 指定版本新建 mkvirtualenv env1 --python=C:\python\python2
3. 打开：workon env1
4. 关闭：deactivate
5. 删除：rmvirtualenv env1

2.新建一个djvue环境并安装Django库

新建虚拟环境：mkvirtualenv djvue（默认新建后打开了环境）
安装库：pip install django

3. 新建Django项目

转到自己想要创建项目的目录： cd E:\
新建： django-admin startproject djvue
目录结构

.
├── manage.py
└── djvue
    ├── asgi.py
    ├── settings.py
    ├── urls.py
    ├── wsgi.py
    └── __init__.py

进入根目录：cd djvue
新建app： python manage.py startapp backend（新建了一个名字叫backend的app）

4. 使用vue-cli创建一个vuejs项目

新建：vue-init webpack frontend （新建了一个名叫frontend的vuejs项目）
项目大目录：

	.
	├── manage.py（django管理文件）
	├── backend （django app目录）
	├── frontend （vuejs项目目录）
	└── djvue （django 设置目录）

5. 用 webpack 打包Vusjs项目

1.进入vuejs项目目录： cd frontend
5. 安装项目依赖模块：npm install
6. 安装element-ui：npm install element-ui（非必要，看项目需求）
7. 淘宝镜像比较方便：npm install -g cnpm –registry=https://registry.npm.taobao.org（个人比较喜欢使用）
8. npm run build
9. build构建完后目录下出现dist 目录里面有一个index.html和一个文件夹static

6. 修改路由并使用Django的通用视图 TemplateView

修改djvue\djvue\urls.py 文件
引入TemplateView：from django.views.generic import TemplateView
并加入路由，urls.py详细代码如下：

from django.contrib import admin
from django.urls import include, path
from django.views.generic import TemplateView

urlpatterns = [
    path('admin/', admin.site.urls),
    path('',TemplateView.as_view(template_name="index.html")),
    path('api/',include('backend.urls', namespace='api'))
]

7.修改模板设置

修改 settings.py (djvue\settings.py)
找到TEMPLATES配置项，修改后如下：

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',
            ],
        },
    },
]

注：dist是运行 npm run build 构建出的index.html与静态文件夹 static 的父级目录

7.设置静态文件路径

还是修改settings.py
找到 STATICFILES_DIRS ，修改如下：

STATIC_URL = '/static/'
# Add for Vue.js
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "frontend/dist/static"),
]

8.开发环境配置

使用了Django作为后端有个缺点，即使在调试环境下每次修改了前端之后都要重新构建，不构建你的html和static文件还是旧的
所以我写前端代码是一直都是使用vuejs自己的开发环境实现自动构建即在frontend目录下运行npm run dev
这样又会出现访问跨域问题，解决方法：
在Django层注入header，用Django的第三方包 django-cors-headers 来解决跨域问题
安装：pip install django-cors-headers
配置：
1. 修改 settings.py ，MIDDLEWARE 配置（中间件）
  去除了跨域访问阻拦（会出现安全问题，读者自行斟酌使用）
  （下面代码的第四行为新加的）

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]