基于Web框架Django、前端框架Vue.js 、 ElementUi ，实现前后端分离项目环境搭建详细流程

Django+vue+ElementUi

本文主要分为五个部分，逐一进行讲解前后端分离项目环境搭建流程，主要有：环境搭建、Django、vue、整合、总结；

一、 环境搭建

开发工具：VsCode
下载链接：https://code.visualstudio.com/Download
安装教程：https://www.runoob.com/w3cnote/vscode-tutorial.html
开发语言：Python
下载链接：https://www.python.org/downloads/windows/
安装教程: https://www.runoob.com/python3/python3-install.html
框架：Django
下载链接：https://www.djangoproject.com/download/
安装教程：https://www.runoob.com/django/django-install.html
Node.js
下载链接：https://nodejs.org/en/download/
安装教程：https://www.runoob.com/nodejs/nodejs-install-setup.html
数据库：mysql
下载链接：https://dev.mysql.com/downloads/mysql/
安装教程：https://www.runoob.com/mysql/mysql-tutorial.html

二、 Django

2.1 创建项目

命令行：django-admin startproject 项目名
验证：python manage.py runserver

2.2 数据库配置

安装完MySQL 建好数据库
cmd窗口登录MySQL：mysql -uroot -p
安装python的pymysql包：pip install pymysql
创建数据库：create DATABASE 数据库名称 DEFAULT CHARSET utf8;
配置数据库：在setting.py 查找 DATABASES
修改数据库连接信息:

DATABASES = {
'default': {
# 'ENGINE': 'django.db.backends.sqlite3',
# 'NAME': 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': '', # 数据库密码
}
}

引入模块：在 init.py文件里增加：

import pymysql
pymysql.install_as_MySQLdb()

2.3 创建模型并且设计数据库表 Django app :myApp
命令行：python manage.py startapp myApp
设计数据库：在myApp 文件夹内打开models.py文件
插入要创建的表内容，注意每行缩进

点击查看代码

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_add=True)
    def __unicode__(self):
        return self.Student_name
        return self.id

在setting.py文件，在INSTALLED_APPS中 添加'myApp'

点击查看代码

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

在项目目录下 启动cmd 依次执行下面两句命令，生成数据库迁移文件：
python manage.py migrate
python manage.py makemigrations myApp

执行迁移文件 完成数据库表的创建
python manage.py migrate myApp

表名：由myapp_student组成

2.4 创建新增和查询的接口
views.py
创建两个视图函数
作为接口 给前端调用

点击查看代码

# Create your views here.
from __future__ import unicode_literals

import json

from django.core import serializers
from django.http import JsonResponse
from django.shortcuts import render
from django.views.decorators.http import require_http_methods

from myApp.models import Student


#创建view 
#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)

配置路由
配置分支路由，myApp下新增文件：urls.py
创建分支路由，把新增的两个视图函数放进来

from django.conf.urls import url

from myApp import views

urlpatterns = [
url('add_student/',views.add_student),
url('show_students/',views.show_students),

]

将分支路由加到项目文件夹下的主路由中urls.py；

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

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

三、Vue

3.1、安装脚手架vue-cli

npm install -g vue-cli

3.2、新建前端工程项目

vue-init webpack 项目名称

3.3、安装依赖包

npm install 包名称

3.4、安装ElementUI

npm i element-ui -S

3.5、创建vue界面

在src/component下，新建组件Student.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 slot-scope="scope"> {{ scope.row.pk }} </template>
          </el-table-column>
          <el-table-column prop="student_name" label="姓名" min-width="100">
            <template slot-scope="scope"> {{ scope.row.fields.student_name }} </template>
          </el-table-column>
          <el-table-column prop="student_sex" label="性别" min-width="100">
            <template slot-scope="scope"> {{ scope.row.fields.student_sex }} </template>
          </el-table-column>
          <el-table-column prop="add_time" label="添加时间" min-width="100">
            <template slot-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']
            console.log(this.studentList)
          } 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>

3.6、配置路由
appfront/router文件夹下的index.js中增加页面路由;

点击查看代码

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

Vue.use(Router)
export default new Router({
    routes: [{
                path: '/HelloWorld',
                name: 'HelloWorld',
                component: HelloWorld
            },
            {
                path: '/student',
                name: 'Student',
                component: Student
            }
        ]
        // eslint-disable-next-line eol-last
})

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 'default-passive-events'
import ElementUI from 'element-ui'
import Vue from 'vue'
// 引入vue-resource
import VueResource from 'vue-resource'
// 注册ElementUI组件
import '../node_modules/element-ui/lib/theme-chalk/index.css'
import App from './App'
import router from './router'
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/>'
        // eslint-disable-next-line eol-last
})

3.7、打包并启动前端项目

npm run build
npm run dev

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

四、 整合

4.1、前端vue项目调用后端引入vue-resource

在appfront文件下运行命令:
npm install --save vue-resource

在main.js中引入vue-resource

import VueResource from 'vue-resource'
Vue.use(VueResource)

4.2、在Django层注入header

用Django的第三方包django-cors-headers来解决跨域问题
在DjangoElementUI根目录下输入命令:
pip install django-cors-headers

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

'corsheaders.middleware.CorsMiddleware'
CORS_ORIGIN_ALLOW_ALL = True

4.3、增加Django路由

把Django的TemplateView指向我们刚才生成的前端dist文件
在DjangoElementUI目录下的urls.py中增加代码:
from django.views.generic import TemplateView

修改静态资源文件路径以及指向前端appfront 相关文件
在DjangoElementUI目录下的setting.py中增加代码:
'DIRS': [os.path.join(BASE_DIR, 'appfront/dist')],

增加此项 for vue.js

STATICFILES_DIRS = [
os.path.join(BASE_DIR, "appfront/dist/static")
]

4.4、重新构建前端项目

npm run build
python manage.py runserver

五、 总结

1、python 运行过程中，需要什么包，安装什么包；
python 包库：https://pypi.org/
2、数据库创建的过程中，一定要注意大小写的问题,数据库字段和Django的Models页面,View页面和Vue中的组件页面都有关联.很容易一个大小写不注意,导致整个接口无法使用.
3、连接MySQL需要按照对应的包,同时需要在根目录的_ini_.py中引入pymysql
4、在整个环境的搭建过程中VUE环境的搭建需要耗费较长的npm安装时间,需要耐心等待.
5、前后台连接需要在前端引入vue-resource,Django需要引入django-cors-headers