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-fonter是VueJS项目目录，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是的ip是192.168.0.100:8080，django启动服务时的ip是127.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 写前端vue，pycharm写django后端 ，调试时pycharm打开django服务，vscode 打开vue，

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