从零开始搭建django前后端分离项目 系列二(项目搭建)


在开始项目之前,假设你已了解以下知识:webpack配置、vue.js、django。这里不会教你webpack的基本配置、热更新是什么,也不会告诉你如何开始一个django项目,有需求的请百度,相关的文章已经很多了。

 下面开始一步一步构建完整的项目:

1、开发环境准备

win7 x64

python 3.4

Django 1.10.8

node.js 4.4.3

2、python相关包安装

建议创建python虚拟环境进行安装。

pip install virtualenv
pip install virtualenvwrapper
pip install virtualenvwrapper-win  # Windows使用该命令

mkvirtualenv venv # 创建venv虚拟环境

推荐python相关的模块(包括Django)都使用python自带的pip安装器安装。

impyla的安装参照我的另一篇博文 https://www.cnblogs.com/dotafeiying/p/6956265.html

数据分析相关包pandas、numpy、scipy、matplotlib、sklearn的安装参照我的博文 https://www.cnblogs.com/dotafeiying/p/9674806.html

注意:

celery建议选择celery3.x版本进行安装,结合django-celery模块。因为celery4.x版本的django-celery-beat在djang-admin后台添加task后系统不会对修改后的任务即时生效,而是需要重启celery-beat服务才能生效。我这个项目选择的celery 3.1.18+django-celery 3.2.2+redis 2.10.6。

3、创建工程

创建django后端项目

django-admin startproject myproject
python manage.py startapp app

 

python manage.py runserver 0.0.0.0:8000

修改settings.py文件

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        # 'DIRS': [os.path.join(BASE_DIR, 'templates')],
        'DIRS': [os.path.join(BASE_DIR, 'dist'),os.path.join(BASE_DIR, 'myproject/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',
            ],
        },
    },
]
os.path.join(BASE_DIR, 'dist')文件夹存放前端npm run build编译后的单页面文件

创建vue.js前端项目

利用vue-cli脚手架工具创建前端vue.js项目

 

dist文件夹为编译后的前端代码,编译成功后直接拷贝到django项目的os.path.join(BASE_DIR, 'dist')位置替换即可。

注意:

如果django后端和vue.js前端项目不在同一个域内,那么我们请求的数据相当于是调用的第三方接口,那么会存在一个问题:跨域限制。

为解决跨域问题,我们可以在webpack设置代理解决跨域问题,当然解决跨域问题的方法很多,不懂的请自行百度。

在config/index.js文件的dev: {   proxyTable: { }}写入要跨域代理的链接地址:

proxyTable: {
  '/app/**': {
    target: 'http://localhost:8000',
    secure: false,
    changeOrigin: true
  }
}

这里本项目django与前端在同一台开发服务器上,django启动服务端口为8000,所以上面target的配置为 http://localhost:8000。

 

 

打赏

免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2021 CODEPRJ.COM