[Python] 基于Web框架Django 前端框架Vue.js + elementUi 实现前后端分离项目环境搭建指南

本文整合Django和Vue.js  并引入elementUi 实现前后端分离项目环境

最终的成品是设计出一个ElementUi风格的页面可以添加和显示学生信息.

一.前言

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

二.环境及软件准备

Python

本文版本:Python 3.5

安装教程: https://www.runoob.com/python3/python3-install.html

Pycharm

本文版本:2019.1.3 

PyCharm 2019.1.3 (Community Edition)

安装教程:https://www.runoob.com/w3cnote/pycharm-windows-install.html

Django

本文版本:2.2.3 

安装教程:https://www.runoob.com/django/django-install.html

node.js

本文版本:10.16.3

安装教程:https://www.runoob.com/nodejs/nodejs-install-setup.html

MySQL

本文版本: 8.0.13 for Win64 

安装教程:https://www.runoob.com/mysql/mysql-install.html

三.Django项目构建

本文的Pycharm为社区版,如果为专业版则字段Django项目的创建选项,创建项目将更加简单.

1.创建django项目:DjangoElementUI

创建文件夹E:\PycharmProjects:

在项目文件夹目录输入Windows 命令行如下

django-admin.py startproject DjangoElementUI

成功创建项目完成后文件夹结构如下图:

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

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 数据库:Django_ElementUI

登录数据库:

数据库安装文件夹bin文件夹下输入命令

mysql -u root -p 

创建数据库:

create DATABASE Django_ElementUI DEFAULT CHARSET utf8;

Django配置数据库

在项目的 settings.py 文件中找到 DATABASES 配置项，将其信息修改为：

DATABASES = {
    'default': {
        # 'ENGINE': 'django.db.backends.sqlite3',
        # 'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
        # 自定义数据库
        'ENGINE': 'django.db.backends.mysql',  # 数据库引擎
        'NAME': 'Django_ElementUI',  # 数据库名称
        '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()

3.利用Django模型设计数据库表

Django 规定，如果要使用模型，必须要创建一个 app。

创建Django APP:myApp

我们使用以下命令创建一个Django app:myApp

django-admin.py startapp myApp

成功后的项目文件夹目录如下:

设计数据库表

在myApp下的models.py设计表:

这里我们设计一个Student表,用来存储学生信息.

表字段	字段类型	含义
student_name	Varchar类型	学生姓名
student_sex	Varchar类型	学生性别
create_time	Datetime类型	创建日期时间

from django.db import models

# Create your models here.
class Student(models.Model):
    student_name = models.CharField(max_length=64)
    student_sex = models.CharField(max_length=3)
    create_time = models.DateTimeField(auto_now=True)

    def __unicode__(self):
        return self.Student_name

在 settings.py 中找到INSTALLED_APPS这一项，如下：

# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'myApp',      # 添加此项
]

生成数据库迁移文件

在命令行中运行：

python manage.py migrate 
python manage.py makemigrations myApp

执行成功后结果:

执行迁移文件来完成数据库表的创建

在命令行中运行：

python manage.py migrate myApp

执行成功后结果:

查看数据库中数据库表已经生成成功

(django默认在makemigrations会为表对象创建主键id,id = models.AutoField(primary_key=True))

4.Django创建新增和查询学生信息接口

在myApp目录下的views.py中创建两个视图函数

# -*- coding: utf-8 -*-
from __future__ import unicode_literals
import json
from django.http import JsonResponse
from django.core import serializers
from django.shortcuts import render
from django.views.decorators.http import require_http_methods
from myApp.models import Student
# Create your views here.
# add_student接受一个get请求，往数据库里添加一条Student数据
@require_http_methods(["GET"])
def add_student(request):
    response = {}
    try:
        student = Student(student_name=request.GET.get('student_name'))
        student.save()
        response['msg'] = 'success'
        response['error_num'] = 0
    except Exception as e:
        response['msg'] = str(e)
        response['error_num'] = 1

    return JsonResponse(response)


# show_students返回所有的书籍列表（通过JsonResponse返回能被前端识别的json格式数据）
@require_http_methods(["GET"])
def show_students(request):
    response = {}
    try:
        students = Student.objects.filter()
        response['list'] = json.loads(serializers.serialize("json", students))
        response['msg'] = 'success'
        response['error_num'] = 0
    except Exception as e:
        response['msg'] = str(e)
        response['error_num'] = 1

    return JsonResponse(response)

 

5.配置路由

1.在myApp目录下，新增一个urls.py文件,用于创建此APP下的分支路由，把新增的两个视图函数添加到路由里面.

from django.conf.urls import url
from myApp import views

urlpatterns = [
    url(r'^add_book/', views.add_book),
    url(r'^show_books/', views.show_books),
]

2.把上面创建的myApp下的分支路由加到DjangoElementUI下的主路由中urls.py.

from django.contrib import admin
from django.urls import path
from django.conf.urls import url
from django.conf.urls import include
from myApp import urls

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^api/', include(urls)),
]

至此Django部分已经完成,总结下我们利用Django完成了数据库的创建,并创建了两个视图函数作为接口给前端调用.

四.构建前端Vue+ElementUI项目

1.安装vue-cli脚手架

在DjangoElementUI根目录下输入命令:

npm install -g vue-cli

2.安装好后，新建一个前端工程目录：appfront

在DjangoElementUI项目根目录下输入命令:

vue-init webpack appfront

3.进入appfront目录安装vue所需要的依赖

npm install

4.安装ElementUI

npm i element-ui -S

5.创建新vue页面

在src/component文件夹下新建一个名为Studengt.vue的组件，通过调用之前在Django上写好的api，实现添加学生和展示学生信息的功能.

<template>
  <div class="home">
    <el-row display="margin-top:10px">
        <el-input v-model="input" placeholder="请输入学生姓名" style="display:inline-table; width: 30%; float:left"></el-input>
        <el-button type="primary" @click="addStudent()" style="float:left; margin: 2px;">新增</el-button>
    </el-row>
    <el-row>
        <el-table :data="studentList" style="width: 100%" border>
          <el-table-column prop="id" label="编号" min-width="100">
            <template scope="scope"> {{ scope.row.pk }} </template>
          </el-table-column>
          <el-table-column prop="student_name" label="姓名" min-width="100">
            <template scope="scope"> {{ scope.row.fields.student_name }} </template>
          </el-table-column>
          <el-table-column prop="student_sex" label="性别" min-width="100">
            <template scope="scope"> {{ scope.row.fields.student_sex }} </template>
          </el-table-column>
          <el-table-column prop="add_time" label="添加时间" min-width="100">
            <template scope="scope"> {{ scope.row.fields.create_time }} </template>
          </el-table-column>
        </el-table>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'Student',
  data () {
    return {
      input: '',
      studentList: []
    }
  },
  mounted: function () {
    this.showStudents()
  },
  methods: {
    addStudent () {
      this.$http.get('http://127.0.0.1:8000/api/add_student?student_name=' + this.input)
        .then((response) => {
          var res = JSON.parse(response.bodyText)
          if (res.error_num === 0) {
            this.showStudents()
          } else {
            this.$message.error('新增学生失败，请重试')
            console.log(res['msg'])
          }
        })
    },
    showStudents () {
      this.$http.get('http://127.0.0.1:8000/api/show_students')
        .then((response) => {
          var res = JSON.parse(response.bodyText)
          console.log(res)
          if (res.error_num === 0) {
            this.studentList = res['list']
          } else {
            this.$message.error('查询学生失败')
            console.log(res['msg'])
          }
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

6.配置路由

appfront/router文件夹下的index.js中增加页面路由.

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Student from '@/components/Student'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/student',
      name: 'Student',
      component: Student
    }
  ]
})

appfront文件夹下的main.js中引入ElementUI并注册.

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
// 注册ElementUI组件
import '../node_modules/element-ui/lib/theme-chalk/index.css'
import ElementUI from 'element-ui'

Vue.config.productionTip = false
// 注册ElementUI组件
Vue.use(ElementUI)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

7.打包并启动前端项目

 打包vue项目

npm run build

启动前端项目

npm run dev

出现下面信息则说明我们前端项目已经构建成功.

去浏览器访问页面地址:http://localhost:8080/#/student

出现如下页面说明我们的页面已经成功.

五.整合Django和Vue

截止到目前,我们已经成功通过Django创建了一个后端服务,通过Vue.js + ElementUI 实现了前端页面的构建,但是他们运行在各自的服务器,而且前端页面还无法调用后端的接口.

接下来我们需要将两个项目真正的整合到一个成一个项目.

1.引入用于HTTP解析的vue-resource

前端vue项目调用后端需要引入vue-resource

在appfront文件下运行命令:

npm install --save vue-resource

安装完成后在main.js中引入vue-resource

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
// 引入ElementUI
import '../node_modules/element-ui/lib/theme-chalk/index.css'
import ElementUI from 'element-ui'
// 引入vue-resource
import VueResource from 'vue-resource'

Vue.config.productionTip = false
// 注册ElementUI
Vue.use(ElementUI)
// 注册VueResource
Vue.use(VueResource)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

2.在Django层注入header

为了让后端可以识别前端需求,我们须要在Django层注入header，用Django的第三方包django-cors-headers来解决跨域问题：

在DjangoElementUI根目录下输入命令:

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

3.修改Django路由

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

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

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

from django.conf.urls import url
from django.contrib import admin
from django.conf.urls import include
from myApp import urls
#新增
from django.views.generic import TemplateView

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^api/', include(urls)),
    # 新增
    url( r'^vue/', TemplateView.as_view( template_name="index.html" ) )
]

接着修改静态资源文件路径也指向前端appfront 相关文件

在DjangoElementUI目录下的setting.py中增加代码:

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'appfront/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',
            ],
        },
    },
]

#增加此项 for vue.js
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "appfront/dist/static")
]

3.重新构建前端项目

appfront目录下输入命令:

npm run build

重新启动Django项目

python manage.py runserver

输入地址:http://localhost:8000/vue/#/student

添加一条记录

至此,大功告成!

六.后记

此份指南在配置的过程踩过不少坑,以下是踩的印象较深的坑.

1.数据库创建的过程中务必注意大小写的问题,数据库字段和Django的Models页面,View页面和Vue中的组件页面都有关联.很容易一个大小写不注意,导致整个接口无法使用.

2.连接MySQL需要按照对应的包,同时需要在根目录的_ini_.py中引入pymysql

3.在整个环境的搭建过程中VUE环境的搭建需要耗费较长的npm安装时间,需要耐心等待.

4.前后台连接需要在前端引入vue-resource,Django需要引入django-cors-headers