前后端分离单页面应用（SPA）项目示例（Vue+ElementUI+Axios+Django+MySql）

文章目录

前后端分离单页面应用（SPA）项目示例（Vue+ElementUI+Axios+Django+MySql）
- 1. 前端部分
- - 1. 1 前端vue平台搭建
  - - 安装vue：
    - 安装Element-UI
  - 1. 2 创建前端子项目（vue的helloworld示例项目）
  - - 用vue创建前端项目：
  - 1.3 在项目中使用ElementUI组件库
  - 1.4 修改HelloWold项目，编写单页面应用（SPA）
  - - 安装router组件库：
    - 使用ElementUI中的布局
    - 设置项目中的路由器
    - 路由原理
  - 1.5 前端使用axios 请求后端数据
  - - 安装 axios（cmd）：
    - 在main.js中设置axios
- 2. 后端部分
- - 2. 1 安装Django
  - - 安装Python：
    - 关于 pip
    - 安装 Django
  - 2.2. 创建Django项目
  - - 创建工程：
  - 2.3 准备数据库
  - 2.4 配置后端子项目
  - - 配置数据库：
    - 后端解决跨域问题
  - 2.5 后端业务接口：给前端提供数据
- 3. 前后端交互原理图

前后端分离单页面应用（SPA）项目示例（Vue+ElementUI+Axios+Django+MySql） 1. 前端部分 1. 1 前端vue平台搭建安装vue：

vue官网：https://cn.vuejs.org/

安装vue有三种方式：

推荐安装方式： npm安装脚手架（vue CLI）方式。
需要先安装npm，npm是Node.js包管理器，需要先安装Node.js:
进入官网https://nodejs.org/en/，下载windows版本安装文件双击安装，安装过程一直下一步就行。

Node.js安装完成后，win + R 键打开命令行窗口（cmd）依次运行以下命令：
```
node -v
```
```
npm -v
```
如果都显示版本号则安装成功。
cmd中运行以下命令，设置npm下载镜像为淘宝镜像：
```
npm config set registry https://registry.npm.taobao.org
```
安装cnpm
由于有些npm资源被屏蔽或者是国外资源的原因，经常会导致npm安装依赖包的时候失败，所以我们还需要npm的国内镜像----cnpm.
在cmd中输入
```
npm install -g cnpm --registry=http://registry.npm.taobao.org
```
全局安装vue脚手架vue CLI
cmd中运行以下命令：
```
npm install -g @vue/cli
```
安装成功后查看脚手架版本号
```
vue -V
```

安装Element-UI

官方文档：https://element.eleme.cn/#/zh-CN/component/installation
在powershell中安装：
```
npm i element-ui -S
```

1. 2 创建前端子项目（vue的helloworld示例项目）

首先建立项目总目录BOOKS，如：C:DProjectBOOKS。
下面需要使用vue的命令在此目录中创建前端子项目的目录，目录名定为booksweb

用vue创建前端项目：

在BOOKS目录上 shift+右键，选择“在此处打开powershell”（或命令行），或者在cmd中通过cd命令进入BOOKS目录，如下：

 C:DProjectBOOKS>

在上述命令行目录位置输入命令：vue create booksweb

 C:DProjectBOOKS>vue create booksweb

弹出如下选项：

选第一行回车，即选vue版本为2，babel功能为es6 转换为 es5 ，eslint 为语法检查工具。

出现上图，表示项目创建成功。按上图要求，运行蓝色的命令：
1、进入booksweb目录，

cd booksweb

2、执行npm run serve命令,注意不是“server”

npm run serve

运行命令后出现如下窗口，表示服务已启动，访问http://localhost:8080/或http://127.0.0.1:8080/即可。
注意：也有可能是其他端口，按实际端口访问即可。

用浏览器访问出现下图说明HelloWorld项目创建成功！

新创建的“hello world”项目,目录结构如下图：

注意：如果用vscode打开并编写vue项目，需要按提示安装vetur插件，这样才会有语法高亮显示。

1.3 在项目中使用ElementUI组件库

参看官网中 “组件–>开发指南–>快速上手–>引入 Element 中代码”，将相关代码加入自己项目的main.js文件中。
https://element.eleme.cn/#/zh-CN/component/quickstart

然后将官网对应组件代码复制到自己项目的vue的template中（以button为例）：

在左侧组件中找到某组件，在右侧查看样式，通过显示代码，在下方找到对应代码复制到自己项目的vue组件的的template中。

显示效果：

1.4 修改HelloWold项目，编写单页面应用（SPA）

实现点击左侧导航栏，右侧内容区跟着变，
即根据导航栏点击的对象不同，右侧内容区加载不同的vue组件，
整个页面为单页面，页面内某个区域内不同组件切换。
需要用到vue的router组件库。

安装router组件库：

在cmd中，或在vscode中打开终端，执行下面命令，安装vue-router路由组件库：

npm i vue-router

使用ElementUI中的布局

在elementUI中找到如下布局实例

将代码拷贝至项目的App.vue中的template中，
将右侧下部的主内容区里的东西删掉，换成router-view标签：

制作两个待切换显示的组件：ShowBooks.vue和 ShowStudents.vue
其中template部分可以只放一个h1标签，分别写上不同文字，做测试用，下节再进行扩展。

设置项目中的路由器

在main.js中导入并使用router：

在src目录中新建router目录，其中新建index.js

import VueRouter from "vue-router";
//引入ShowBooks组件对象并命名为SBook（下面routes中用到）
import SBook from '../components/ShowBooks';
import SStudent from '../components/ShowStudents';
export default new VueRouter({
    mode: 'history',  //去掉url中的#
    routes:[
        {
            //设置路由项：即/shbook 访问路径对应SBook组件即ShowBooks组件
            path: '/shbook',
            component: SBook
        },
        {
            path: '/shstudent',
            component: SStudent
        }
    ]
})

下图：在main.js中导入router文件夹下的index.js,因为index为默认文件名，所以导入时可以省略，然后在new vue对象时，设置router项为导入的router对象，此处同名，也可不同名，例如：import router1 from ‘./router’; 则下面要改为： router：router1
设置好路由器后，路由器就可以监听访问路径的变化，从而根据路由项配置加载不同组件。

路由原理

1、router-link 监视点击操作，并指出点击操作的路由。
2、router index.js 路由器中配置了路由对应的组件。
3、找到相应组件后，在router view标签中加载

1.5 前端使用axios 请求后端数据安装 axios（cmd）：

npm i axios -S

在main.js中设置axios

写在导入路由器的import语句下面

import axios from 'axios';
axios.defaults.withCredentials = false; //禁止ajax携带cookie
Vue.prototype.$axios = axios; //挂载到vue中，以后使用不用导包

修改App.vue

src目录中新建components文件夹并加入以下两个文件：
ShowBooks.vue

ShowStudents.vue

2. 后端部分 2. 1 安装Django

如何在 Windows 上安装 Django¶
官方说明:https://docs.djangoproject.com/zh-hans/2.2/howto/windows/

安装Python：

Django 是一个 Python Web 框架，因此需要在您的机器上安装 Python。
打开https://python.org/downloads/。下载可执行安装包并且运行。运行后，选择把 Python 添加到环境变量，然后点击马上安装。
安装后，打开命令提示符，运行以下命令，检查 Python 版本是否与你装的一致，:

python --version

关于 pip

pip 是 Python 的包管理器。它使得 Python 包（例如 Django）的安装和卸载变的非常简单。剩下的安装流程中，我们会用 pip 从命令行安装 Python 包。

安装 Django

在命令提示行cmd中，运行以下命令:

pip install django -i https://pypi.douban.com/simple

这将从豆瓣镜像点下载并安装最新的 Django 发布版本。
安装完成后，在命令提示符运行 django-admin --version 验证你安装的 Django。

django-admin --version

2.2. 创建Django项目创建工程：

命令行中进入项目总目录BOOKS

C:DProjectBOOKS>

在该目录下输入django-admin startproject booksapp,则在该文件夹中创建后端子项目文件夹booksapp
注意：之前，前端创建的项目文件夹为booksweb

django-admin startproject booksapp

项目创建完进入子项目文件夹：

C:DProjectBOOKSbooksapp>

在此处执行下面命令启动django服务器

python manage.py runserver

服务启动成功后会有如下提示信息

用浏览器访问提示中的地址：http://127.0.0.1:8000
显示下图则表示成功。

使用pycharm打开刚刚创建的子项目文件夹即可。
初始项目目录结构如下图：

2.3 准备数据库

根据教程实验八建库及插入数据：
用户名：root
密码：123456

BooksDB.sql

create database BooksDB;
use BooksDB;
CREATE  TABLE  Book(
  BookID  varchar(20)  PRIMARY  KEY,
  Title   varchar(50)  NOT  NULL,
  Author  varchar(50),
  Publisher varchar(50),
  Pyear   char(4),
  Language  char(1)  DEFAULT 'c',
  State   char(1)    DEFAULT '0'
);
CREATE  TABLE  Student(
 ID    char(6)  PRIMARY  KEY,
 Name  varchar(20)  NOT NULL,
 Dept  varchar(20)  NOT NULL
);
CREATE  TABLE  Assistant(
 ID    char(6)  PRIMARY  KEY,
 Name  varchar(20)  NOT NULL
);
CREATE  TABLE  BBook(
 BID  varchar(20)  NOT  NULL,
 StdID  char(6)   NOT  NULL,
 BDate  date     NOT NULL,
 CONSTRAINT  FK_BBOOK_BID
  FOREIGN  KEY(BID) REFERENCES  Book(BookID),
CONSTRAINT  FK_BBOOK_StdID
  FOREIGN  KEY(StdID) REFERENCES Student(ID)
);
CREATE  TABLE  RBook(
 BookID  varchar(20)  NOT  NULL,
 StdID   char(6)    NOT  NULL,
 RDate   date   NOT  NULL,
 CONSTRAINT  FK_RBook_BookID 
   FOREIGN  KEY(BookID) REFERENCES  Book(BookID),
 CONSTRAINT  FK_RBook_StdID 
   FOREIGN  KEY(StdID)  REFERENCES  Student(ID)
);
CREATE  TABLE  Lend(
 StdID  char(6)  NOT NULL,
 AstID  char(6)  NOT NULL,
 BookID varchar(20)  NOT NULL,
 LDate  date   NOT  NULL,
 CONSTRAINT FK_LEND_StdID
  FOREIGN  KEY(StdID) REFERENCES  Student(ID),
CONSTRAINT FK_LEND_AstID
  FOREIGN  KEY(AstID) REFERENCES  Assistant(ID),
CONSTRAINT FK_LEND_BookID
  FOREIGN  KEY(BookID) REFERENCES  Book(BookID)
);
CREATE  TABLE  Returnn(
 StdID  char(6)  NOT  NULL,
 AstID  char(6)  NOT  NULL,
 BookID varchar(20)  NOT NULL,
 RDate  date  NOT  NULL,
 CONSTRAINT  FK_RETURN_StdID
   FOREIGN  KEY(StdID) REFERENCES Student(ID) ,
 CONSTRAINT FK_RETURN_AstID
   FOREIGN  KEY(AstID) REFERENCES  Assistant(ID),
 CONSTRAINT  FK_RETURN_BookID
   FOREIGN  KEY(BookID) REFERENCES  Book(BookID)
 );
 INSERT INTO  Student(ID,Name,Dept)  VALUES('s21001' , '张小航' , '数学系' );
 INSERT INTO  Student(ID,Name,Dept)  VALUES('s21002' , '王文广' , '信计系' );
 INSERT INTO  Student(ID,Name,Dept)  VALUES('s21003' , '李理' ,  '统计系' );
 INSERT INTO  Student(ID,Name,Dept)  VALUES('s21004' , '李彦宏' , '数学系' );
 INSERT INTO  Student(ID,Name,Dept)  VALUES('s21005' , '张丽霞' , '信计系' );
 INSERT INTO  Student(ID,Name,Dept)  VALUES('s21006' , '王强' , '统计系' );
 INSERT INTO  Student(ID,Name,Dept)  VALUES('s21007' , '张宝田' , '数学系' );
 INSERT INTO  Student(ID,Name,Dept)  VALUES('s21008' , '宋文霞' , '信计系' );
 INSERT INTO  Student(ID,Name,Dept)  VALUES('s21009' , '刘芳菲' , '统计系' );
 INSERT INTO  Student(ID,Name,Dept)  VALUES('s21010' , '常江宁' , '数学系' );
 INSERT INTO  Student(ID,Name,Dept)  VALUES('s21011' , '张三' , '信计系' );
 INSERT INTO  Student(ID,Name,Dept)  VALUES('s21012' , '李四' , '统计系' );
  
 INSERT  INTO  Book  VALUES('b001','数据库管理','王珊','高等教育出版社','2018','c','0'); 
 INSERT  INTO  Book  VALUES('b002','软件测试','贺平' , '机械工业出版社','2018','c','0'); 
 INSERT  INTO  Book  VALUES('b003','C++程序设计','谭浩强','清华大学出版社','2018','c','0'); 
 INSERT  INTO  Book  VALUES('b004','红楼梦','曹雪芹','人民文学出版社','2019','c','0'); 
 INSERT  INTO  Book  VALUES('b005','西游记','罗贯中','人民文学出版社','2019','c','0'); 
 INSERT  INTO  Book  VALUES('b006','红与黑','司汤达','人民文学出版社','2019','c','0'); 
 INSERT  INTO  Book  VALUES('b007','高等数学','李翼','清华大学出版社','2020','c','0'); 
 INSERT  INTO  Book  VALUES('b008','有机化学','张翔','高等教育出版社','2020','c','0'); 
 INSERT  INTO  Book  VALUES('b009','大学英语','王琳','高等教育出版社','2021','c','0'); 
 INSERT  INTO  Book  VALUES('b010','英语教程','王琳','高等教育出版社','2021','c','0'); 
 
 INSERT  INTO  Assistant  VALUES('a001','黄渤'); 
 INSERT  INTO  Assistant  VALUES('a002','徐峥'); 
 INSERT  INTO  Assistant  VALUES('a003','马东'); 
 INSERT  INTO  Assistant  VALUES('a004','李诞');

2.4 配置后端子项目配置数据库：

命令行安装mysqlclient库：

pip install mysqlclient

settints.py中修改数据库部分选项

DATAbaseS = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'HOST': '127.0.0.1',
        'PORT': 3306,
        'USER': 'root',
        'PASSWORD': '123456',
        'NAME': 'booksdb',
    }
}

后端解决跨域问题

django解决跨域：
1、安装cors插件
cmd中，或pycham中打开终端（Terminal），输入命令：

pip install django-cors-headers

2、在settings.py中配置：增加一项：‘corsheaders’

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    'corsheaders',
]

3、在settings.py中设置中间件：必须放第一个

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XframeOptionsMiddleware',    
]

4、在settings.py中添加白名单

# 添加白名单，允许前端8080端口ajax跨域请求后端
CORS_ORIGIN_WHITELIST = (
    'http://127.0.0.1:8080',
    'http://localhost:8080'
)
CORS_ALLOW_CREDENTIALS = False  #是否允许前端ajax请求携带cookie

2.5 后端业务接口：给前端提供数据

urls.py 中导入views，并添加两条路由:

from django.contrib import admin
from django.urls import path
from . import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('books/', views.get_all_books),
    path('students/', views.get_all_students),
]

在urls.py的所属目录中新建views.py文件，并加入以下代码：

from django.http import JsonResponse
from django.db import connection

# sql查询的结果集转为字典格式
def dictfetchall(cursor):
    "Return all rows from a cursor as a dict"
    columns = [col[0] for col in cursor.description]
    return [
        dict(zip(columns, row))
        for row in cursor.fetchall()
    ]

# 'books/'路由对应的处理函数（此处采用原生sql，没有使用django的model模型层）
def get_all_books(request):
    cursor = connection.cursor()
    cursor.execute("select * from book")
    rows = dictfetchall(cursor) #结果集转字典
    return JsonResponse(rows, safe=False, json_dumps_params={'ensure_ascii': False})

# 'students/'路由对应的处理函数
def get_all_students(request):
    cursor = connection.cursor()
    cursor.execute("select * from student")
    rows = dictfetchall(cursor)  # 结果集转字典
    return JsonResponse(rows, safe=False, json_dumps_params={'ensure_ascii': False})

3. 前后端交互原理图

前后端分离单页面应用（SPA）项目示例（Vue+ElementUI+Axios+Django+MySql）

Python相关栏目本月热门文章