vue+django 会议室管理系统（一）

本文整合Django和Vue.js 实现前后端分离项目环境，最终实现一个会议室管理系统。

一.前言

Django作为Python 三大Web框架之一,因其集成了大量的组件(例如: Models Admin Form 等等)而大受欢迎,但是他本身自带的template模板实在是有点弱.于是考虑整合Vue.js同时引入ElementUI 组件,可以更加快速高效的开发出美观实用的Web页面.

二.Django项目构建

1.创建django项目

打开命令行，进入对应目录下输入：

django-admin startproject meetingRoom

即可完成项目的新建，成功创建项目完成后文件夹结构如下图：

进入项目文件夹目录,在目录中输入命令

python manage.py runserver 0.0.0.0:8000

在浏览器输入你服务器的 ip（这里我们输入本机 IP 地址： 127.0.0.1:8000） 及端口号，如果正常启动，输出结果如下：

2.数据库配置

Django 对各种数据库提供了很好的支持，包括：PostgreSQL、MySQL、SQLite、Oracle。

Django 为这些数据库提供了统一的调用API。 我们可以根据自己业务需求选择不同的数据库。

MySQL 是 Web 应用中最常用的数据库。

本文采用MySQL

第一次使用MySQL需要安装 MySQL驱动,在项目文件夹目录下执行以下命令安装：

pip install pymysql

创建数据库:
Django无法直接创建数据库(只能操作到数据表层),我们需要手工创建MySQL数据库.
以下通过命令行创建 MySQL 数据库:meetingroom

create DATABASE meetingroom DEFAULT CHARSET utf8;

Django配置数据库

DATABASES = {
    'default': {
        # 'ENGINE': 'django.db.backends.sqlite3',
        # 'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
        # 自定义数据库
        'ENGINE': 'django.db.backends.mysql',  # 数据库引擎
        'NAME': 'meetingroom',  # 数据库名称
        'HOST': '127.0.0.1',  # 数据库地址，本机 ip 地址 127.0.0.1
        'PORT': 3306,  # 端口
        'USER': 'root',  # 数据库用户名
        'PASSWORD': '123456',  # 数据库密码
    }

在与 settings.py 同级目录下的 init.py 中引入模块和进行配置 (告诉 Django 使用 pymysql 模块连接 mysql 数据库)

import pymysql
pymysql.install_as_MySQLdb()

三.构建前端Vue项目

前提：已安装好nodejs和vue-cli脚手架
安装好后，新建一个前端工程目录：frontend
目录结构如下所示：

进入frontend目录，输入：npm run serve,再在浏览器打开http://localhost:8080/即可看到如下页面

打包前端项目
执行npm run build
打包完成

四、整合Django和Vue

1、为了让后端可以识别前端需求,我们须要在Django层注入header，用Django的第三方包django-cors-headers来解决跨域问题：
在项目根目录下输入命令:

pip install django-cors-headers

在settings.py中增加相关中间件代码

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   #添加此项

2、修改Django路由
这一步我们通过Django路由配置连接前后端资源.

首先我们把Django的TemplateView指向我们刚才生成的前端dist文件

在meetingRoom目录下的urls.py中增加代码:

from django.conf.urls import url
from django.contrib import admin
from django.conf.urls import include
#新增
from django.views.generic import TemplateView
 
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    # 新增
    url( r'', TemplateView.as_view( template_name="index.html" ) )
]

3、添加模板目录

4、添加静态文件夹目录

5、启动服务

python mange runserver

遇到的问题

打开浏览器后页面显示空白。

查看报错信息如上所示
这是因为vue打包的dist文件下没有static文件夹

解决方法

修改vue打包配置
在frontend文件下新建vue.config.js，输入以下内容：

module.exports = {
    assetsDir: 'static'
} 

再重新打包vue项目

刷新浏览器，出现页面。