Django+vue+ElementUi 实现前后端分离项目

目录

一、 环境搭建

二、 Django

2.1 创建项目

2.2 数据库配置

2.3 创建模型并且设计数据库表 Django app :myApp

2.4 创建新增和查询的接口

三、Vue

3.1、安装脚手架vue-cli

3.2、新建前端工程项目

3.3、安装依赖包

3.4、安装ElementUI

3.5、创建vue界面

3.6、配置路由

3.7、打包并启动前端项目

四、 整合

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

4.2、在Django层注入header

4.3、增加Django路由

4.4、重新构建前端项目

五、 总结

---

本文主要分为五个部分，逐一进行讲解前后端分离项目环境搭建流程，主要有：环境搭建、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)

    s