Django+vue 前后端分离（练习）

安装vue
1、首先安装node.js，官网地址：https://nodejs.org/zh-cn/download/
2，使用npm淘宝镜像，避免npm下载速度过慢的问题 npm install -g cnpm --registry=https://registry.npm.taobao.org
3，使用npm 下载 vue-cli npm install -g cue-cli
创建项目
使用pycharm 创建Django项目（在pycharm中的Terminal中）
1，python manage.py startapp XXX 创建项目app作为Django后端
2，vue-init webpack XXX 创建项目app作为vue前端（会出现很多你需要安装的东西按需要安装）
3，使用 webpack 打包VusJS项目（会生成一个文件夹名字叫dist，里面有一个 index.html 和一个文件夹static.）

     cd 到vue前端app目录下
     1，npm install
     2，npm run build

4，在urls.py中添加

	url(r'^$', TemplateView.as_view(template_name="index.html")),

5，pycharm 添加 django-cors-headers
Django+vue 前后端分离（练习）
6，在setting.py中修改配置

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        # 'DIRS': [os.path.join(BASE_DIR, 'templates')],
        'DIRS': [os.path.join(BASE_DIR, 'XXX/dist')], //vue的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',
            ],
        },
    },
]
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "XXX/dist/static"), //vue的static
]
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 //添加

然后启动Django项目就可以了

Django+vue 前后端分离（练习）
添加链接描述借鉴这篇文章

Django+vue 前后端分离（练习）

相关推荐