使用Vue+Django搭建项目
构建Django项目
命令：
django-admin startproject ulb_manager结构：
.
├── manage.py
└── ulb_manager
├── __init__.py
├── settings.py
├── urls.py
└── wsgi.py进入项目根目录，创建一个 app 作为项目后端
命令：
cd ulb_manager
python manage.py startapp backend即：app 名叫做 backend
结构：
.
├── 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
.
├─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
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配置项，修改如下:
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 配置项，配置如下:
# Add for vuejs
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "vue-fonter/dist/static"),
]这样Django不仅可以将/ 映射到index.html，而且还可以顺利找到静态文件
backend 配置
在backend中创建urls
from django.urls import path
from . import views
urlpatterns = [
path('books/', view = views.books, name="books")
]在backend/views.py中
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
pip install corsheaders在setting.py中加入
INSTALLED_APPS = [
//...
'corsheaders',
]
MIDDLEWARE = [
//......
'corsheaders.middleware.CorsMiddleware', # 添加cors，在第三行，位置不能改
'django.middleware.common.CommonMiddleware',
]
CORS_ORIGIN_ALLOW_ALL = True
# 允许请求携带cookies
CORS_ALLOW_CREDENTIALS= True 以上是从网上找的解决方法，但是并没有解决问题，
先看一下同源的定义
同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。vue启动server是的ip是192.168.0.100:8080，django启动服务时的ip是127.0.0.1:8000，
试着修改了一下django的启动ip
在setting.py中加入
ALLOWED_HOSTS = [
'192.168.0.100',
'127.0.0.1',
'0.0.0.0',
'localhost',
]然后启动
django ./manage.py runserver 192.168.0.100:8888然后启动vue
npm run serve这时不在出现跨域问题
成功！
开发模式
利用vscode 写前端vue，pycharm写django后端 ，调试时pycharm打开django服务，vscode 打开vue，
