文章目录
前后端分离单页面应用(SPA)项目示例(Vue+ElementUI+Axios+Django+MySql)1. 前端部分1. 1 前端vue平台搭建安装vue:安装Element-UI1. 2 创建前端子项目(vue的helloworld示例项目)用vue创建前端项目:1.3 在项目中使用ElementUI组件库1.4 修改HelloWold项目,编写单页面应用(SPA)安装router组件库:使用ElementUI中的布局设置项目中的路由器路由原理1.5 前端 使用axios 请求后端数据安装 axios(cmd):在main.js中设置axios2. 后端部分2. 1 安装Django安装Python:关于 pip安装 Django2.2. 创建Django项目创建工程:2.3 准备数据库2.4 配置后端子项目配置数据库:后端解决跨域问题2.5 后端业务接口:给前端提供数据3. 前后端交互原理图前后端分离单页面应用(SPA)项目示例(Vue+ElementUI+Axios+Django+MySql)
1. 前端部分
1. 1 前端vue平台搭建
安装vue:
vue官网:/
安装vue有三种方式:
推荐安装方式: npm安装脚手架(vue CLI)方式。
需要先安装npm,npm是Node.js包管理器,需要先安装Node.js:
进入官网/en/,下载windows版本安装文件双击安装,安装过程一直下一步就行。
Node.js安装完成后,win + R 键 打开命令行窗口(cmd)依次运行以下命令:
node -v
npm -v
如果都显示版本号则安装成功。
cmd中运行以下命令,设置npm下载镜像为淘宝镜像:
npm config set registry https://registry.
安装cnpm
由于有些npm资源被屏蔽或者是国外资源的原因,经常会导致npm安装依赖包的时候失败,所以我们还需要npm的国内镜像----cnpm.
在cmd中输入
npm install -g cnpm --registry=http://registry.
全局安装vue脚手架vue CLI
cmd中运行以下命令:
npm install -g @vue/cli
安装成功后查看脚手架版本号
vue -V
安装Element-UI
官方文档:/#/zh-CN/component/installation在powershell中安装:
npm i element-ui -S
1. 2 创建前端子项目(vue的helloworld示例项目)
首先建立项目总目录BOOKS,如:C:\D\Project\BOOKS。
下面需要使用vue的命令在此目录中创建前端子项目的目录,目录名定为booksweb
用vue创建前端项目:
在BOOKS目录上 shift+右键 ,选择“在此处打开powershell”(或命令行),或者在cmd中通过cd命令进入BOOKS目录,如下:
C:\D\Project\BOOKS>
在上述命令行目录位置输入命令:vue create booksweb
C:\D\Project\BOOKS>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文件中。/#/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携带cookieVue.prototype.$axios = axios; //挂载到vue中,以后使用不用导包
修改App.vue
<template><div id="app"><el-container style="border: 1px solid #eee"><el-aside width="300px" style="background-color: rgb(238, 241, 246)"><el-menu :default-openeds="['1', '3']"><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i>信息查询</template><el-menu-item index="1-1"><router-link to="/shbook">图书查询</router-link></el-menu-item><el-menu-item index="1-2"><router-link to="/shstudent">学生查询</router-link></el-menu-item><el-menu-item index="1-3">选项3</el-menu-item></el-submenu><el-submenu index="2"><template slot="title"><i class="el-icon-menu"></i>导航二</template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="2-1">选项1</el-menu-item><el-menu-item index="2-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="2-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="2-4"><template slot="title">选项4</template><el-menu-item index="2-4-1">选项4-1</el-menu-item></el-submenu></el-submenu><el-submenu index="3"><template slot="title"><i class="el-icon-setting"></i>导航三</template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="3-1">选项1</el-menu-item><el-menu-item index="3-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="3-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="3-4"><template slot="title">选项4</template><el-menu-item index="3-4-1">选项4-1</el-menu-item></el-submenu></el-submenu></el-menu></el-aside><el-container><el-header style="text-align: right; font-size: 12px"><el-dropdown><i class="el-icon-setting" style="margin-right: 15px"></i><el-dropdown-menu slot="dropdown"><el-dropdown-item>查看</el-dropdown-item><el-dropdown-item>新增</el-dropdown-item><el-dropdown-item>删除</el-dropdown-item></el-dropdown-menu></el-dropdown><span>王小虎</span></el-header><el-main><router-view></router-view></el-main></el-container></el-container></div></template><script>export default {name: 'App',components: {}}</script><style>#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;}.el-header {background-color: #B3C0D1;color: #333;line-height: 60px;}.el-aside {color: #333;}a {text-decoration:none;color: #646464;}.router-link-active {text-decoration: none;}</style>
src目录中新建components文件夹并加入以下两个文件:
ShowBooks.vue
<template><div class="shbooks"><el-table :data="tableData" ><el-table-column prop="Title" label="书名" width="160"> </el-table-column><el-table-column prop="Author" label="作者" width="100"> </el-table-column><!-- <el-table-column prop="BookID" label="书号" width="100"> </el-table-column> --><!-- <el-table-column prop="Language" label="语言" width="100"> </el-table-column> --><el-table-column prop="Publisher" label="出版社" width="160"> </el-table-column><el-table-column prop="Pyear" label="出版日期" > </el-table-column><!-- <el-table-column prop="State" label="馆藏" width="100"> </el-table-column> --></el-table> </div></template><script>export default {data(){return {tableData:[] } }, methods:{get_all_books(){this.$axios.get('http://127.0.0.1:8000/books').then(response=>{this.tableData = response.data; })}},mounted(){this.get_all_books();}}</script>
ShowStudents.vue
<template><div class="shstudents"><el-table :data="tableData" border style="width: 100%"><el-table-column prop="ID" label="学号" width="160"> </el-table-column><el-table-column prop="Name" label="姓名" width="160"> </el-table-column><el-table-column prop="Dept" label="系别" width="160"> </el-table-column> </el-table></div></template><script>export default {data(){return {tableData:[] } }, methods:{get_all_books(){this.$axios.get('http://127.0.0.1:8000/students').then(response=>{this.tableData = response.data;console.log(this.tableData);})}},mounted(){this.get_all_books();}}</script>
2. 后端部分
2. 1 安装Django
如何在 Windows 上安装 Django¶
官方说明:/zh-hans/2.2/howto/windows/
安装Python:
Django 是一个 Python Web 框架,因此需要在您的机器上安装 Python。
打开/downloads/。下载可执行安装包并且运行。运行后,选择把 Python 添加到环境变量 ,然后点击马上安装
。
安装后,打开命令提示符,运行以下命令,检查 Python 版本是否与你装的一致,:
python --version
关于 pip
pip 是 Python 的包管理器。它使得 Python 包(例如 Django)的安装和卸载变的非常简单。剩下的安装流程中,我们会用 pip 从命令行安装 Python 包。
安装 Django
在命令提示行cmd中,运行以下命令:
pip install django -i /simple
这将从豆瓣镜像点下载并安装最新的 Django 发布版本。
安装完成后,在命令提示符运行 django-admin --version 验证你安装的 Django。
django-admin --version
2.2. 创建Django项目
创建工程:
命令行中进入项目总目录BOOKS
C:\D\Project\BOOKS>
在该目录下输入django-admin startproject booksapp
,则在该文件夹中创建后端子项目文件夹booksapp
注意:之前,前端创建的项目文件夹为booksweb
django-admin startproject booksapp
项目创建完进入子项目文件夹:
C:\D\Project\BOOKS\booksapp>
在此处执行下面命令启动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 dateNOT NULL,CONSTRAINT FK_BBOOK_BIDFOREIGN KEY(BID) REFERENCES Book(BookID),CONSTRAINT FK_BBOOK_StdIDFOREIGN 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_StdIDFOREIGN KEY(StdID) REFERENCES Student(ID),CONSTRAINT FK_LEND_AstIDFOREIGN KEY(AstID) REFERENCES Assistant(ID),CONSTRAINT FK_LEND_BookIDFOREIGN 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_StdIDFOREIGN KEY(StdID) REFERENCES Student(ID) ,CONSTRAINT FK_RETURN_AstIDFOREIGN KEY(AstID) REFERENCES Assistant(ID),CONSTRAINT FK_RETURN_BookIDFOREIGN 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','数据库管理','王珊','高等教育出版社','','c','0'); INSERT INTO Book VALUES('b002','软件测试','贺平' , '机械工业出版社','','c','0'); INSERT INTO Book VALUES('b003','C++程序设计','谭浩强','清华大学出版社','','c','0'); INSERT INTO Book VALUES('b004','红楼梦','曹雪芹','人民文学出版社','','c','0'); INSERT INTO Book VALUES('b005','西游记','罗贯中','人民文学出版社','','c','0'); INSERT INTO Book VALUES('b006','红与黑','司汤达','人民文学出版社','','c','0'); INSERT INTO Book VALUES('b007','高等数学','李翼','清华大学出版社','','c','0'); INSERT INTO Book VALUES('b008','有机化学','张翔','高等教育出版社','','c','0'); INSERT INTO Book VALUES('b009','大学英语','王琳','高等教育出版社','','c','0'); INSERT INTO Book VALUES('b010','英语教程','王琳','高等教育出版社','','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','monMiddleware','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 adminfrom django.urls import pathfrom . import viewsurlpatterns = [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 JsonResponsefrom 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})