将vue项目打包后部署到django中
- 一、两种方式结合(任选一种)
- 第一种:将打包好的static和index分开放的方式
- 0. 环境搭建
- 1.前端vue的打包
- 2.后端django中的文件设置
- 3.后端django中代码配置
- A.在settings.py中
- B.在urls.py中
- 第二种:将static和index放在一个frontend文件夹下
- 1.前端项目打包
- 2.后端django中
- 3.后端django代码设置
- 二、如何把github或gitee拉下来的django代码再去生成数据库
- 先新建一个数据库
- 两个命令
- 三、项目跑起来!
- 四、配置跨域
- 五、注意!!!
由于此前只接触过vue+springboot的开发经历,没有经历过django的开发,所以特地记录一下如何将前端做的vue项目打包放到django中使用
一、两种方式结合(任选一种)
第一种:将打包好的static和index分开放的方式
0. 环境搭建
安装django,项目路径下shift+鼠标右键打开open powershell here,然后输入
pip install django
然后输入(按照requirements.txt搭建环境)
(requirements.txt文件记录了当前程序的所有依赖包及其精确版本号
其作用是用来在另一台PC上重新构建项目所需要的运行环境依赖。后端通过pip freeze > requirements.txt生成
)
Python -m pip install -r requirements.txt
有部分下载不了就单独安装(自行百度)
1.前端vue的打包
在前端编译工具的命令行中输入npm run build,开始编译,在项目的目录下会生成一个dist文件夹,里面有我们需要的static文件夹和index.html文件
注:如果使用的vue-cli3之后的版本会出现index.html在static文件夹里面,那怎么把index.html和static放在同一级目录下呢?
修改vue.config.js(VueCli3.0新建的项目里没有,要在项目目录新建一份)
module.exports = {
assetsDir: 'static',// 静态资源打包输出目录 (js, css, img, fonts),相应的url路径也会改变
};
2.后端django中的文件设置
首先把前端生成的dist文件夹中的static文件夹放在项目的目录下;然后自己在该目录下新建一个templates文件夹,把index.html放在里面。
3.后端django中代码配置
A.在settings.py中
import os
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),# 项目默认会有的路径,如果你部署的不仅是前端打包的静态文件,项目目录static文件下还有其他文件,最好不要删
os.path.join(BASE_DIR, "/static"),# 加上这条
]
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates'),]
,
'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',
],
},
},
]
B.在urls.py中
# django项目目录下的urls.py,让首页显示打包的index.html文件
from django.views.generic import TemplateView
path('', TemplateView.as_view(template_name="index.html"))
第二种:将static和index放在一个frontend文件夹下
1.前端项目打包
同样npm run dev下生成dist文件夹
2.后端django中
在项目根目录下新建一个frontend文件夹,然后把dist里面的内容全部复制过去即可
3.后端django代码设置
找到mysite文件夹或项目命名的文件夹中找到setting.py文件
首先是template配置:
import os
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR,'frontend')],
'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',
],
},
},
]
然后是静态文件配置:
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "frontend"),
]
最后是在本目录下找到urls.py文件
from django.views.generic import TemplateView
path('', TemplateView.as_view(template_name='index.html'), name='index'),
另-或者:创建一个app或在已有的app的基础上,并且在views中写一个index路由函数,并且在url中配置首页
#加载静态界面index首页
def index(request):
request.META["CSRF_COOKIE_USED"] = True
return render(request,'index.html')
request.META[“CSRF_COOKIE_USED”] = True这句可以对vue单页应用进行csrf_token设置,方便进行csrf防御
urlpatterns = [
url(r'^baseapi/', include("baseapp.urls")),
url(r'^.*?$',views.index,name="index"),
]
二、如何把github或gitee拉下来的django代码再去生成数据库
先新建一个数据库
名称是settings.py里面配置过的
两个命令
建好数据库后,在项目目录下按住shift键+鼠标右键打开open PowerShell Here。进入命令行后,依次输入两个命令
python manage.py makemigrations
python manage.py migrate
然后就把数据库迁移好了,这一步有任何问题欢迎在评论区交流
三、项目跑起来!
弄好数据库以后,我们就可以把项目跑起来了
// 这里的接口在8000-8999都可以
python manage.py runserver 127.0.0.1:8080
四、配置跨域
命令行中输入
pip install django-cors-headers
也是在setting.py中
INSTALLED_APPS = [
...
'corsheaders',
...
]
# 列表有序加载,顺序不能错
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',
]
# 增加跨域忽略
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True
# 允许跨域的域名
CORS_ORIGIN_WHITELIST = (
'127.0.0.1:8081', # Frontend
'127.0.0.1:8080', # Backend
'127.0.0.1:8000', # Frontend on dev mode
)
# 设置允许访问的方法
CORS_ALLOW_METHODS = (
'DELETE',
'GET',
'OPTIONS',
'PATCH',
'POST',
'PUT',
'VIEW',
)
# 设置允许的header
CORS_ALLOW_HEADERS = (
'XMLHttpRequest',
'X_FILENAME',
'accept-encoding',
'authorization',
'content-type',
'dnt',
'origin',
'user-agent',
'x-csrftoken',
'x-requested-with',
'Pragma',
'token'
)
五、注意!!!
在前端项目包之前要配置好请求的根地址,就是上面后端工程运行起来的地址
在main.js中改动
或者在封装好了的request.js中配置
这样才能正常访问