DRF+Vue.JS前后端分离项目实例(下) --- Vue.js 前端实现代码

news2024/12/26 0:59:30

本文上篇请 点击阅读

1. 需求说明

本文以学生信息查询功能为例，采用前后端分离架构，后端提供RESTFul 接口，前端代码用Vue.js + Bottstrap实现。

1.1 本例要求提供如下查询功能：

列表查询、单条查询
添加学生信息
更改学生信息
删除学生信息

1.2 按REST接口指导原则, RESTFul 风格API 设计如下

在开始之前，推荐阅读 REST接口基本原理

操作请求类型资源请求url请求数据
列表查询GEThttp://127.0.0.1:8000/student/无
单条查询GEThttp://127.0.0.1:8000/student/1/无
添加记录POSThttp://127.0.0.1:8000/student/2/{‘name’:‘Jack’, ‘no’:‘A001’,…}
更改记录PUThttp://127.0.0.1:8000/student/2/{‘name’:‘Jack’, ‘no’:‘B001’,…}
删除记录DELETEhttp://127.0.0.1:8000/student/2/无

上述接口已通过django-rest-framework 实现.

2. 前端设计

技术栈：

  • Vue.js 动态数据更新
  • Bootstrap5 负责渲染
  • Axios 负责接口通讯

界面设计：

  • 以表格方式显示多条数据；
  • 每行记录提供修改、删除按钮
  • 页面提供添加按钮
  • 页面提供查询功能
  • 各功能在单页面完成。

实际页面测试：
显示所有记录
在这里插入图片描述
查询单条数据
在这里插入图片描述
添加数据
在这里插入图片描述
修改数据，单击”修改“按钮后，弹出修改栏，更新后单击 ”提交“按钮
在这里插入图片描述
删除，直接点击删除按钮即可
在这里插入图片描述

3. 完整代码

所有代码均放在1个文件中， vue_student.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vue 测试实例 - Vue router(runoob.com)</title>
	<link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
	<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
	<script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
	<div class="container mt-2">
		<div class="row  my-2 mx-2 ">
		    <div class="col-md-10 p-3">
				<h2 class="text-center">学生信息查询</h2>
				<div id='app'>
					<div class="container mt-3">
						<div class="row">
							<div class="col-md-6"> 
							<input type='number' v-model="sid" placeholder='请输入学生id'>
							<button v-on:click="searchInfo" class="btn btn-primary" >查询</button>
						    </div>
							<div class="col-md-6 d-flex flex-row-reverse">
								<button class="btn btn-info" v-on:click="addReq">添加学生</button>
							</div>
						</div>
					</div>
					<div class="row my-2 border border-1 border-primary shadow-sm py-2 mx-2" v-if="isShowDataDiv">
							
							<div class="form-group row">
								<label for="stdid" class="col-md-1 col-form-label" >ID</label>
								<div class="col-md-2"><input type="text" class="form-control" v-model="studentInfo.id" id="stdid" readonly="true"></div>
							    <label for="stdname" class="col-md-1 col-form-label">姓名</label>
							    <div class="col-md-2"><input type="text" class="form-control" v-model="studentInfo.name" id="stdname"></div>

								<label for="stdno" class="col-md-1 col-form-label">学号</label>
								<div class="col-md-2"><input type="text" class="form-control" v-model="studentInfo.no" id='stdno'  ></div>
								<div class='col-md-3 mt-2'>
								  <span>性别: &nbsp;</span>
								  <input type="radio" id="male" value=0 v-model="studentInfo.gender">
								  <label for="runoob" >男</label>
								  <input type="radio" id="female" value=1 v-model="studentInfo.gender">
								  <label for="google">女</label>
								</div>
							</div>
							<div class="form-group row">
								<label for="stdage" class="col-md-1 col-form-label">年龄</label>
								<div class="col-md-2"><input type="number" class="form-control" v-model="studentInfo.age" id="stdage"></div>
								<label for="stdclass" class="col-md-1 col-form-label">班级</label>
								<div class="col-md-2"><input type="text" class="form-control" v-model="studentInfo.class_name" id="stdclass"></div>
								<label for="stdscore" class="col-md-1 col-form-label">成绩</label>
								<div class="col-md-2"><input type="number" class="form-control" v-model="studentInfo.score" id="stdscore"></div>
								<div class="col-md-3 d-flex flex-row-reverse" v-if="isShowUpgradeBtn"><button class="btn btn-outline-primary" v-on:click="upgradeConfirm">更新提交</button></div>
								<div class="col-md-3 d-flex flex-row-reverse" v-if="isShowAddBtn"><button class="btn btn-outline-primary" v-on:click="addConfirm">添加提交</button></div>
							</div>
						
					</div>
					
					<table class="table table-striped">
						<thead>
							<tr>
								<td>ID</td>
								<td>姓名</td>
								<td>学号</td>
								<td>性别</td>
								<td>年龄</td>
								<td>班级</td>
								<td>成绩</td>
								<td>操作</td>
							</tr>
						</thead>
						<tbody>
							<tr v-for="(student,index) in studentArray">
								<td v-text="student.id"></td>
								<td v-text="student.name"></td>
								<td v-text="student.no"></td>
								<td v-text="student.gender"></td>
								<td v-text="student.age"></td>
								<td v-text="student.class_name"></td>
								<td v-text="student.score"></td>
								<td> <button class='btn btn-primary btn-sm' v-on:click="upgradeReq(student.id,index)">修改</button>  <button class='btn btn-danger btn-sm' v-on:click="deleteStudent(student.id,index)">删除</button></td>
							</tr>
						</tbody>
					</table>
				</div>
				
			</div>
		</div>		
	</div>
	
	<script>
	const url = "http://127.0.0.1:8000/student/v1/";
	var array_index; 
	var vm = new Vue({
		el: '#app',
		data: {
			studentInfo: {
				id: 1,
				name:'王小乙',
				no: 'B0001',
				gender: 0,
				age: 14,
				class_name: '初2',
				score: 80
			},
			studentArray: [],
			sid: 1,
			isShowDataDiv: false,
			isShowAddBtn: false,
			isShowUpgradeBtn: true
		},
		methods: {
			searchInfo: function(){
				that = this; 
				let url_req = url
				if(that.sid > 0){
					url_req = url+String(that.sid)+'/';
				} 
				
				axios.get(url_req)
					.then( function(response){
						console.log(response.data); 
						that.studentArray=[]
						if (response.data instanceof Array){							
							for (var n in response.data){
								that.studentArray.push(response.data[n]);
							}
						}
						else if (response.data instanceof Object ){
							that.studentArray.push(response.data);
						}						
					})
					.catch(function (error) { // 请求失败处理
						console.log(error);
					})
			},
			addData: function(){
				this.studentArray.push(this.studentInfo);
				
			},
			deleteStudent: function(pk,index){
				that = this;
				url_req = url+pk+'/';
				axios.delete(url_req)
					.then(function(response){ 
						console.log(response.status);
						that.studentArray.splice(index,1)
						})
					.catch(function(err){ console.log(err)})
			},
			addStudent: function(){
				window.open("vue_student_add.html");
			},
			addReq: function(){
				that=this;
				that.studentInfo = {
				id: 0,
				name:'',
				no: '',
				gender: 0,
				age: 0,
				class_name: '2',
				score: 0
				}
				that.isShowDataDiv=true;
				that.isShowUpgradeBtn=false;
				that.isShowAddBtn=true;
			},
			addConfirm: function(){
				that=this; 
				if (that.studentInfo.name !='' && that.studentInfo.no!='' ) {
					axios.post(url,that.studentInfo)
						.then(function(response){
							console.log(response);
							alert("添加成功")
							that.isShowDataDiv=false;
							that.isShowUpgradeBtn=true;
							that.isShowAddBtn=false;
							that.studentArray.push(that.studentInfo)							
						})
						.catch(function(err){
							console.log(err);
						})
				}
				else {
					alert("姓名,学号不能为空")
				}
				
			},
			upgradeReq: function(pk,index){
				that = this;
				that.studentInfo = that.studentArray[index];
				array_index = index; 
				that.isShowDataDiv=true;
				that.isShowUpgradeBtn=true;
				that.isShowAddBtn=false;
				// alert("update data " + pk)
			},
			upgradeConfirm: function(){
				that = this; 
				url_req = url+that.studentInfo.id+'/';
				axios.put(url_req,that.studentInfo)
					.then(response=>{
						console.log(response.status);
						that.studentArray[array_index]=that.studentInfo; 
						alert("更新成功")
						that.isShowDataDiv=false;
						
					})
					.catch(function(err){ console.log(err)})				
			}
		}
	});
	vm.addData()
	</script>
</body>
</html>

在测试环境下运行，通常会遇到CORS跨域问题，造成Axios发送的请求被阻止，解决办法请参考本人另一篇博文 Django 解决CORS跨域问题的方法.

总结

DRF+Vue.js 或 DRF+React 前后端分离架构的优点与缺点

采用 DRF+Vue.js 或 DRF+React 前后端分离架构的好处是，能够开发出用户体验更佳的前端页面，不过前提是，项目要有前端工程师加入，或者你自己学习掌握Javascript + Vue 技术，当然掌握了这两门工具，也会提升你的能力。另外，前后端分离项目，总体上会增加一些项目的代码量以及测试工作量。

如何确定项目是否适合采用DRF+Vue前后端分离架构呢？

如果用户对界面有较高要求，或者需要使用绘图、数据可视化等前端组件库(如 JointJS, echarts等)，建议采用前后端分离架构。 如果项目的主要功能是以CRUD操作为主，或者数据分析为主，则使用django与模板方式，开发效率更高，

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/737042.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

在线试用Stable Diffusion生成可爱的图片

在线试用Stable Diffusion生成可爱的图片

文章目录 一、 Stable Diffusion 模型在线使用地址&#xff1a;二、模型相关版本和参数配置&#xff1a;三、图片生成提示词与反向提示词&#xff1a;提示词1提示词2提示词3提示词4提示词5 一、 Stable Diffusion 模型在线使用地址&#xff1a; https://inscode.csdn.net/insc…
阅读更多...
python 读取npy文件

python 读取npy文件

import numpy as np test np.load("I:/软件/mask.npy") print(test) 如下图所示&#xff1a;
阅读更多...
Web3 智能合约通过数组方式存储更多学生数据

Web3 智能合约通过数组方式存储更多学生数据

之前的文章 Web3 在Truffle项目中编写出自己的第一个solidity智能合约带大家写了一个相对捡漏的智能合约 这样 每次 我们set 后 都会将原来的数据覆盖掉了 那么 有些人可能会想 那我们弄个数组 将新的数据全部加到数组里不就行了吗&#xff1f; 这个想法其实就很不错 我们可以…
阅读更多...
数据结构与算法--javascript（持续更新中...）

数据结构与算法--javascript（持续更新中...）

一. 概论 1. 数据结构 队列&#xff1a;一种遵循先进先出 (FIFO / First In First Out) 原则的一组有序的项&#xff1b;队列在尾部添加新元素&#xff0c;并从头部移除元素。最新添加的元素必须排在队列的末尾。&#xff08;例如&#xff1a;去食堂排队打饭&#xff0c;排在前…
阅读更多...
JsonView下载安装

JsonView下载安装

文章目录 一、JsonView概述二、JsonView下载三、JsonView安装四、JsonView测试 一、JsonView概述 SONView是一款非常好用的Json格式查看器。在日常开发调试中经常会遇到Json格式的数据需要解析阅读&#xff0c;但Json格式数据阅读性极差&#xff0c;JSONView可以帮我们解决Jso…
阅读更多...
基于协同过滤算法的智能推荐点餐系统小程序/基于微信小程序的点餐系统

基于协同过滤算法的智能推荐点餐系统小程序/基于微信小程序的点餐系统

摘 要 在社会的发展和科学技术的进步&#xff0c;现在我们所生活的世纪是一个集信息高度数字化&#xff0c;网络化&#xff0c;信息化的&#xff0c;以网络为核心的社会。随着移动互联网的飞速发展&#xff0c;微信客户端的应用也逐渐广泛起来。与此同时&#xff0c;我国每个人…
阅读更多...
上手CUDA编程

上手CUDA编程

上手CUDA编程 文章目录 上手CUDA编程矩阵加法例子编译 查看本机GPU信息内存管理函数专门二维数组拷贝函数 Reference>>>>> 欢迎关注公众号【三戒纪元】 <<<<< 矩阵加法例子 编写 CUDA C 程序时&#xff0c; 要将文件命名为 *.cu&#xff0c;cu文…
阅读更多...
新版危险废物标签二维码制作教程

新版危险废物标签二维码制作教程

生态环境部发布的《危险废物识别标志设置技术规范》已经在2023年7月1日正式实施&#xff0c;除了对危废标签格式、内容的规范&#xff0c;明确规定新版危废标签需要包含数字识别码和二维码&#xff0c;实现危险废物“一物一码”管理。 其中危险废物标签中的二维码部分&#xff…
阅读更多...
【SuperPoint】语义SLAM深度学习用于特征提取

【SuperPoint】语义SLAM深度学习用于特征提取

1. 概况 作者的写作思路很清晰&#xff0c;把各个技术点这么做的原因写的很清楚&#xff0c;一共三篇&#xff0c;另外两篇分别是2016年和2017年发表的&#xff0c;这三篇文章通读下来&#xff0c;可以看清作者在使用深度学习进行位姿估计这一方法上的思路演变过程&#xff0c…
阅读更多...
IDEA中 jps+jmap+jconsole命令查看堆内存情况

IDEA中 jps+jmap+jconsole命令查看堆内存情况

结论 1.获取进程idjps2.jmap 某个时刻堆内存的情况jdk8之前jmap -heap pid 15876jdk8之后jhsdb jmap --heap --pid 158763.jconsole 动态查看堆内存情况&#xff0c;直接jconsole ,然后弹出可视化窗口jconsole其中12 要结合使用&#xff0c;且是静态的查看&#xff1b;3可以单…
阅读更多...
【c++报错】无法打开自己的工程项目（C++ 无法打开文件“xxx.lib”）

【c++报错】无法打开自己的工程项目（C++ 无法打开文件“xxx.lib”）

问题&#xff1a; C 无法打开文件“xxx.lib” 问题分析&#xff1a; 在进行单个生成的时候&#xff0c;可以生成成功&#xff0c;也可以运行程序。但是点击全部重新生成时&#xff0c;就显示无法打开文件“xxx.lib”。 观察生成顺序&#xff0c;发现exe的程序&#xff08;调用…
阅读更多...
基于”Python+”多技术融合在蒸散发与植被总初级生产力估算中的实践

基于”Python+”多技术融合在蒸散发与植被总初级生产力估算中的实践

熟悉蒸散发ET及其组分&#xff08;植被蒸腾Ec、土壤蒸发Es、冠层截留Ei&#xff09;、植被总初级生产力GPP的概念和碳水耦合的基本原理&#xff1b;掌握利用Python与ArcGIS工具进行课程相关的操作&#xff1b;熟练掌握国际上流行的Penman-Monteith模型&#xff0c;并能够应用该…
阅读更多...
yarn 无法加载文件 CUsersAdministratorAppDataRoamingnpmyarn.ps1，因为在此系统上禁止运行脚本。的解决方案

yarn 无法加载文件 CUsersAdministratorAppDataRoamingnpmyarn.ps1，因为在此系统上禁止运行脚本。的解决方案

yarn : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\yarn.ps1&#xff0c;因为在此系统上禁止运行脚本。 1、问题描述 执行yarn相关命令时报错&#xff1a; yarn : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\yarn.ps1&#xff0c;因为在此系统…
阅读更多...
PHP 学生信息管理系统mysql数据库web结构apache计算机软件工程网页wamp

PHP 学生信息管理系统mysql数据库web结构apache计算机软件工程网页wamp

一、源码特点 PHP 学生信息管理系统 是一套完善的web设计系统&#xff0c;对理解php编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。 代码下载 https://download.csdn.net/download/qq_41221322/88027229https://down…
阅读更多...
7 个顶级免费网站在线图像压缩工具！

7 个顶级免费网站在线图像压缩工具！

在将图像上传到网站之前对其进行压缩是缩短网站加载时间的最简单、最有效的方法之一&#xff0c;从而改善访问者的网站体验并提高搜索排名。 大图像会显着降低网站的性能&#xff0c;这总体来说是个坏消息。幸运的是&#xff0c;您可以使用一些很棒的工具来帮助您轻松优化图像…
阅读更多...
实现windows系统文件传输到Linux系统中的工具

实现windows系统文件传输到Linux系统中的工具

1、实现windows系统文件传输到Linux系统中的工具 yum -y install lrzsz然后就可以将windows中的文件&#xff0c;直接拖到Xshell窗口即可。
阅读更多...
Springboot快速回顾（集成Dubbo）

Springboot快速回顾（集成Dubbo）

Dubbo是实现远程调用的一个框架&#xff0c;阿里巴巴开源的。远程调用就是B服务器可以调用A服务器的方法。大型项目会被拆分成多个模块&#xff0c;部署在不同的服务器上。若将公共模块集中部署在一台服务器上&#xff0c;可以方便其他服务器调用。因此&#xff0c;需要Dubbo。…
阅读更多...
深度学习实践大全

深度学习实践大全

文章目录 1.可视化调试1.1 各通道相加可视化1.2 降维到3维或2维 1.可视化调试 可视化方法可分为&#xff1a;各通到相加可视化、 1.1 各通道相加可视化 def visualize_feature_map(img_batch,out_path,type,BI):feature_map torch.squeeze(img_batch)feature_map feature_…
阅读更多...
C++教程（二）——第一个程序：编写hello world

C++教程（二）——第一个程序：编写hello world

1、点击左上角【文件】&#xff0c;再点击创建【项目】&#xff0c;设置项目名称&#xff0c;选择存储地址&#xff0c;再应用。 2、首先在解决方案资源管理器中点击【源文件】&#xff0c;右键【添加】--->【新建项】。 3、在弹出窗口中选择C文件(.cpp)&#xff0c;设置名称…
阅读更多...
【考研思维题】【哈希表 || 什么时候用哈希表呢？快速查询的时候】【我们一起60天准备考研算法面试（大全）-第九天 9/60】

【考研思维题】【哈希表 || 什么时候用哈希表呢？快速查询的时候】【我们一起60天准备考研算法面试（大全）-第九天 9/60】

专注 效率 记忆 预习 笔记 复习 做题 欢迎观看我的博客&#xff0c;如有问题交流&#xff0c;欢迎评论区留言&#xff0c;一定尽快回复&#xff01;&#xff08;大家可以去看我的专栏&#xff0c;是所有文章的目录&#xff09; 　 文章字体风格&#xff1a; 红色文字表示&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023