Django + Vue 快速构建项目

使用Vue+Django搭建项目

参考

构建Django项目

命令:

1
django-admin startproject ulb_manager

结构:

1
2
3
4
5
6
7
.
├── manage.py
└── ulb_manager
├── __init__.py
├── settings.py
├── urls.py
└── wsgi.py

进入项目根目录,创建一个 app 作为项目后端

命令:

1
2
cd ulb_manager
python manage.py startapp backend

即:app 名叫做 backend

结构:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.
├── backend
│ ├── __init__.py
│ ├── admin.py
│ ├── migrations
│ │ └── __init__.py
│ ├── models.py
│ ├── tests.py
│ └── views.py
├── manage.py
└── ulb_manager
├── __init__.py
├── settings.py
├── urls.py
└── wsgi.py

Vue打包的dist文件放入url_manager

1
2
3
4
5
6
7
8
9
10
11
12
13
.
├─backend
│ ├─migrations
│ └─__pycache__
├─vue-fonter
│ └─dist
│ └─static
│ ├─css
│ ├─fonts
│ ├─img
│ └─js
└─ulb_manager
└─__pycache__

Vue-CLI3.x在打包时不会生成static文件

使用vue ui,导入Vue项目,在配置/基础配置/ 修改资源目录 为static

这样在进行打包就会生成static文件

使用Django的通用视图 TemplateView

找到项目根urls.py(ulb_manager/urls.py),使用通用视图创建最简单的模板控制器,访问 『/』时直接返回index.html

1
2
3
4
5
urlpatterns = [
path('admin/', admin.site.urls),
path('', TemplateView.as_view(template_name="index.html")),
path('api/', include('backend.urls'))
]

配置Django项目的模板搜索路径

上一步使用了Django的模板系统,所以需要配置一下模板使Django知道从哪里找到index.html

打开 settings.py (ulb_manager/settings.py),找到TEMPLATES配置项,修改如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
# 'DIRS': [],
**'DIRS': ['vue-fonter/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',
],
},
},
]

注意这里的vue-fonterVueJS项目目录,dist则是运行 npm run build构建出的index.html与静态文件夹static 的父级目录

这时启动Django项目,访问/则可以访问index.html,但是还有问题,静态文件都是404错误,下一步我们解决这个问题

配置静态文件搜索路径

打开 settings.py (ulb_manager/settings.py),找到STATICFILES_DIRS 配置项,配置如下:

1
2
3
4
# Add for vuejs
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "vue-fonter/dist/static"),
]

这样Django不仅可以将/ 映射到index.html,而且还可以顺利找到静态文件

backend 配置

backend中创建urls

1
2
3
4
5
6
from django.urls import path
from . import views

urlpatterns = [
path('books/', view = views.books, name="books")
]

backend/views.py

1
2
3
4
5
6
7
8
9
10
from django.shortcuts import render
from django.http.response import JsonResponse

# Create your views here.

def books(request):
books = [
{'id': 1, 'title': "python", "price": 89}
]
return JsonResponse(books, safe=False)

此时访问/我们可以看到使用Django作为后端的VueJS前端,访问/api/books我们可以看到json数据

解决开发时的跨域问题

使用corsheaders

1
pip install corsheaders

setting.py中加入

1
2
3
4
5
6
7
8
9
10
11
12
INSTALLED_APPS = [
//...
'corsheaders',
]
MIDDLEWARE = [
//......
'corsheaders.middleware.CorsMiddleware', # 添加cors,在第三行,位置不能改
'django.middleware.common.CommonMiddleware',
]
CORS_ORIGIN_ALLOW_ALL = True
# 允许请求携带cookies
CORS_ALLOW_CREDENTIALS= True

以上是从网上找的解决方法,但是并没有解决问题,

先看一下同源的定义

1
同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源。

vue启动server是的ip192.168.0.100:8080django启动服务时的ip127.0.0.1:8000

试着修改了一下django的启动ip

setting.py中加入

1
2
3
4
5
6
ALLOWED_HOSTS = [
'192.168.0.100',
'127.0.0.1',
'0.0.0.0',
'localhost',
]

然后启动

1
django ./manage.py runserver 192.168.0.100:8888

然后启动vue

1
npm run serve

这时不在出现跨域问题

成功!

开发模式

利用vscode 写前端vuepycharmdjango后端 ,调试时pycharm打开django服务,vscode 打开vue

---------Thanks for your attention---------