使用Vue+Django
搭建项目
构建Django
项目
命令:
1 | django-admin startproject ulb_manager |
结构:
1 | . |
进入项目根目录,创建一个 app
作为项目后端
命令:
1 | cd ulb_manager |
即:app
名叫做 backend
结构:
1 | . |
将Vue
打包的dist
文件放入url_manager
1 | . |
Vue-CLI3.x
在打包时不会生成static
文件
使用vue ui
,导入Vue
项目,在配置/基础配置/ 修改资源目录 为static
这样在进行打包就会生成static
文件
使用Django
的通用视图 TemplateView
找到项目根urls.py(ulb_manager/urls.py)
,使用通用视图创建最简单的模板控制器,访问 『/』
时直接返回index.html
1 | urlpatterns = [ |
配置Django
项目的模板搜索路径
上一步使用了Django
的模板系统,所以需要配置一下模板使Django
知道从哪里找到index.html
打开 settings.py (ulb_manager/settings.py)
,找到TEMPLATES
配置项,修改如下:
1 | TEMPLATES = [ |
注意这里的vue-fonter
是VueJS
项目目录,dist
则是运行 npm run build
构建出的index.html
与静态文件夹static
的父级目录
这时启动Django
项目,访问/
则可以访问index.html
,但是还有问题,静态文件都是404错误,下一步我们解决这个问题
配置静态文件搜索路径
打开 settings.py (ulb_manager/settings.py
),找到STATICFILES_DIRS
配置项,配置如下:
1 | # Add for vuejs |
这样Django
不仅可以将/
映射到index.html
,而且还可以顺利找到静态文件
backend
配置
在backend
中创建urls
1 | from django.urls import path |
在backend/views.py
中
1 | from django.shortcuts import render |
此时访问/
我们可以看到使用Django
作为后端的VueJS
前端,访问/api/books
我们可以看到json
数据
解决开发时的跨域问题
使用corsheaders
1 | pip install corsheaders |
在setting.py
中加入
1 | INSTALLED_APPS = [ |
以上是从网上找的解决方法,但是并没有解决问题,
先看一下同源的定义
1 | 同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源。 |
vue
启动server
是的ip
是192.168.0.100:8080
,django
启动服务时的ip
是127.0.0.1:8000
,
试着修改了一下django
的启动ip
在setting.py
中加入
1 | ALLOWED_HOSTS = [ |
然后启动
1 | django ./manage.py runserver 192.168.0.100:8888 |
然后启动vue
1 | npm run serve |
这时不在出现跨域问题
成功!
开发模式
利用vscode
写前端vue
,pycharm
写django
后端 ,调试时pycharm
打开django
服务,vscode
打开vue
,