Vue实现体质测试数据分析系统

最新推荐文章于 2024-09-19 10:58:09 发布
最新推荐文章于 2024-09-19 10:58:09 发布
阅读量675 收藏 1
点赞数
文章标签： vue.js java 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xiaocao1223/article/details/125287590
版权

1.技术介绍
java+springBoot+spring+mysql+mybatis+Vue
开发工具：eclipse或IDEA
2.主要功能说明：
1）学生
2）老师
注册、登录、首页、论坛信息、公告信息、个人中心、后台管理、师生沟通
3）管理员
个人中心、学生管理、教师管理、日常运动管理、运动分析管理、成绩信息管理、论坛管理、轮播图管理、公告信息管理
3.部分代码展示
注册页面

  <div>
    <div class="container">
      <div class="login-form" style="backgroundColor:rgba(229, 238, 229, 0.07);borderRadius:10px">
        <h1 class="h1" style="color:rgba(24, 103, 228, 1);fontSize:28px;">体质测试数据分析及可视化设计注册</h1>
		<el-form ref="rgsForm" class="rgs-form" :model="rgsForm" label-width="120px">
															<!-- <div v-if="tableName=='xuesheng'" class="input-group">
			   <div class="label">学号</div>
			   <div class="input-container">
			     <input v-model="ruleForm.xuehao" class="input" type="text" placeholder="学号">
			   </div>
			 </div> -->
			<el-form-item label="学号" class="input" v-if="tableName=='xuesheng'">
			  <el-input v-model="ruleForm.xuehao" autocomplete="off" placeholder="学号" type="text" />
			</el-form-item>
												<!-- <div v-if="tableName=='xuesheng'" class="input-group">
			   <div class="label">密码</div>
			   <div class="input-container">
			     <input v-model="ruleForm.mima" class="input" type="text" placeholder="密码">
			   </div>
			 </div> -->
			<el-form-item label="密码" class="input" v-if="tableName=='xuesheng'">
			  <el-input v-model="ruleForm.mima" autocomplete="off" placeholder="密码" type="text" />
			</el-form-item>
												<!-- <div v-if="tableName=='xuesheng'" class="input-group">
			   <div class="label">姓名</div>
			   <div class="input-container">
			     <input v-model="ruleForm.xingming" class="input" type="text" placeholder="姓名">
			   </div>
			 </div> -->
			<el-form-item label="姓名" class="input" v-if="tableName=='xuesheng'">
			  <el-input v-model="ruleForm.xingming" autocomplete="off" placeholder="姓名" type="text" />
			</el-form-item>
																														<!-- <div v-if="tableName=='xuesheng'" class="input-group">
			   <div class="label">学院</div>
			   <div class="input-container">
			     <input v-model="ruleForm.xueyuan" class="input" type="text" placeholder="学院">
			   </div>
			 </div> -->
			<el-form-item label="学院" class="input" v-if="tableName=='xuesheng'">
			  <el-input v-model="ruleForm.xueyuan" autocomplete="off" placeholder="学院" type="text" />
			</el-form-item>
												<!-- <div v-if="tableName=='xuesheng'" class="input-group">
			   <div class="label">手机</div>
			   <div class="input-container">
			     <input v-model="ruleForm.shouji" class="input" type="text" placeholder="手机">
			   </div>
			 </div> -->
			<el-form-item label="手机" class="input" v-if="tableName=='xuesheng'">
			  <el-input v-model="ruleForm.shouji" autocomplete="off" placeholder="手机" type="text" />
			</el-form-item>
																								<!-- <div v-if="tableName=='jiaoshi'" class="input-group">
			   <div class="label">工号</div>
			   <div class="input-container">
			     <input v-model="ruleForm.gonghao" class="input" type="text" placeholder="工号">
			   </div>
			 </div> -->
			<el-form-item label="工号" class="input" v-if="tableName=='jiaoshi'">
			  <el-input v-model="ruleForm.gonghao" autocomplete="off" placeholder="工号" type="text" />
			</el-form-item>
												<!-- <div v-if="tableName=='jiaoshi'" class="input-group">
			   <div class="label">密码</div>
			   <div class="input-container">
			     <input v-model="ruleForm.mima" class="input" type="text" placeholder="密码">
			   </div>
			 </div> -->
			<el-form-item label="密码" class="input" v-if="tableName=='jiaoshi'">
			  <el-input v-model="ruleForm.mima" autocomplete="off" placeholder="密码" type="text" />
			</el-form-item>
												<!-- <div v-if="tableName=='jiaoshi'" class="input-group">
			   <div class="label">教师姓名</div>
			   <div class="input-container">
			     <input v-model="ruleForm.jiaoshixingming" class="input" type="text" placeholder="教师姓名">
			   </div>
			 </div> -->
			<el-form-item label="教师姓名" class="input" v-if="tableName=='jiaoshi'">
			  <el-input v-model="ruleForm.jiaoshixingming" autocomplete="off" placeholder="教师姓名" type="text" />
			</el-form-item>
																														<!-- <div v-if="tableName=='jiaoshi'" class="input-group">
			   <div class="label">学院</div>
			   <div class="input-container">
			     <input v-model="ruleForm.xueyuan" class="input" type="text" placeholder="学院">
			   </div>
			 </div> -->
			<el-form-item label="学院" class="input" v-if="tableName=='jiaoshi'">
			  <el-input v-model="ruleForm.xueyuan" autocomplete="off" placeholder="学院" type="text" />
			</el-form-item>
												<!-- <div v-if="tableName=='jiaoshi'" class="input-group">
			   <div class="label">电话</div>
			   <div class="input-container">
			     <input v-model="ruleForm.dianhua" class="input" type="text" placeholder="电话">
			   </div>
			 </div> -->
			<el-form-item label="电话" class="input" v-if="tableName=='jiaoshi'">
			  <el-input v-model="ruleForm.dianhua" autocomplete="off" placeholder="电话" type="text" />
			</el-form-item>
																																																			<el-button class="btn" type="primary" @click="login()">注册</el-button>
		</el-form>
      </div>
      <!-- <div class="nk-navigation">
        <a href="#">
          <div @click="login()">注册</div>
        </a>
      </div> -->
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ruleForm: {
              },
      tableName:"",
      rules: {}
    };
  },
  mounted(){
    let table = this.$storage.get("loginTable");
    this.tableName = table;
  },
  methods: {
    // 获取uuid
    getUUID () {
      return new Date().getTime();
    },
    // 注册
    login() {
                              if((!this.ruleForm.xuehao) && `xuesheng` == this.tableName){
        this.$message.error(`学号不能为空`);
        return
      }
                                                                  if((!this.ruleForm.mima) && `xuesheng` == this.tableName){
        this.$message.error(`密码不能为空`);
        return
      }
                                                                                                                                                                                                                                                                                                                  if(`xuesheng` == this.tableName && this.ruleForm.shouji&&(!this.$validate.isMobile(this.ruleForm.shouji))){
        this.$message.error(`手机应输入手机格式`);
        return
      }
                                                                  if((!this.ruleForm.gonghao) && `jiaoshi` == this.tableName){
        this.$message.error(`工号不能为空`);
        return
      }
                                                                  if((!this.ruleForm.mima) && `jiaoshi` == this.tableName){
        this.$message.error(`密码不能为空`);
        return
      }
                                                                                                                                                                                                                                                                                                                  if(`jiaoshi` == this.tableName && this.ruleForm.dianhua&&(!this.$validate.isMobile(this.ruleForm.dianhua))){
        this.$message.error(`电话应输入手机格式`);
        return
      }
                                                                                                                        this.$http({
        url: `${this.tableName}/register`,
        method: "post",
        data:this.ruleForm
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message({
            message: "注册成功",
            type: "success",
            duration: 1500,
            onClose: () => {
              this.$router.replace({ path: "/login" });
            }
          });
        } else {
          this.$message.error(data.msg);
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
	.el-radio__input.is-checked .el-radio__inner {
		border-color: #00c292;
		background: #00c292;
	}

	.el-radio__input.is-checked .el-radio__inner {
		border-color: #00c292;
		background: #00c292;
	}

	.el-radio__input.is-checked .el-radio__inner {
		border-color: #00c292;
		background: #00c292;
	}

	.el-radio__input.is-checked+.el-radio__label {
		color: #00c292;
	}

	.el-radio__input.is-checked+.el-radio__label {
		color: #00c292;
	}

	.el-radio__input.is-checked+.el-radio__label {
		color: #00c292;
	}

	.h1 {
		margin-top: 10px;
	}

	body {
		padding: 0;
		margin: 0;
	}

	// .container {
 //    min-height: 100vh;
 //    text-align: center;
 //    // background-color: #00c292;
 //    padding-top: 20vh;
 //    background-image: url(../assets/img/bg.jpg);
 //    background-size: 100% 100%;
 //    opacity: 0.9;
 //  }

	// .login-form:before {
	// 	vertical-align: middle;
	// 	display: inline-block;
	// }

	// .login-form {
	// 	max-width: 500px;
	// 	padding: 20px 0;
	// 	width: 80%;
	// 	position: relative;
	// 	margin: 0 auto;

	// 	.label {
	// 		min-width: 60px;
	// 	}

	// 	.input-group {
	// 		max-width: 500px;
	// 		padding: 20px 0;
	// 		width: 80%;
	// 		position: relative;
	// 		margin: 0 auto;
	// 		display: flex;
	// 		align-items: center;

	// 		.input-container {
	// 			display: inline-block;
	// 			width: 100%;
	// 			text-align: left;
	// 			margin-left: 10px;
	// 		}

	// 		.icon {
	// 			width: 30px;
	// 			height: 30px;
	// 		}

	// 		.input {
	// 			position: relative;
	// 			z-index: 2;
	// 			float: left;
	// 			width: 100%;
	// 			margin-bottom: 0;
	// 			box-shadow: none;
	// 			border-top: 0px solid #ccc;
	// 			border-left: 0px solid #ccc;
	// 			border-right: 0px solid #ccc;
	// 			border-bottom: 1px solid #ccc;
	// 			padding: 0px;
	// 			resize: none;
	// 			border-radius: 0px;
	// 			display: block;
	// 			width: 100%;
	// 			height: 34px;
	// 			padding: 6px 12px;
	// 			font-size: 14px;
	// 			line-height: 1.42857143;
	// 			color: #555;
	// 			background-color: #fff;
	// 		}

	// 	}
	// }

	.nk-navigation {
		margin-top: 15px;

		a {
			display: inline-block;
			color: #fff;
			background: rgba(255, 255, 255, .2);
			width: 100px;
			height: 50px;
			border-radius: 30px;
			text-align: center;
			display: flex;
			align-items: center;
			margin: 0 auto;
			justify-content: center;
			padding: 0 20px;
		}

		.icon {
			margin-left: 10px;
			width: 30px;
			height: 30px;
		}
	}

	.register-container {
		margin-top: 10px;

		a {
			display: inline-block;
			color: #fff;
			max-width: 500px;
			height: 50px;
			border-radius: 30px;
			text-align: center;
			display: flex;
			align-items: center;
			margin: 0 auto;
			justify-content: center;
			padding: 0 20px;

			div {
				margin-left: 10px;
			}
		}
	}
	
	.container {
		background-image: url("http://codegen.caihongy.cn/20210101/9f60ced860414569896912ced6fbf47b.jpg");
		height: 100vh;
		background-position: center center;
		background-size: cover;
		background-repeat: no-repeat;
	
		.login-form {
			right: 50%;
			top: 50%;
			height: auto;
			transform: translate3d(50%, -50%, 0);
			border-radius: 10px;
			background-color: rgba(255,255,255,.5);
			width: 420px;
			padding: 30px 30px 40px 30px;
			font-size: 14px;
			font-weight: 500;
			
			.h1 {
				margin: 0;
				text-align: center;
				line-height: 54px;
			    font-size: 24px;
			    color: #000;
			}
				
			.rgs-form {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				
				.input {
					width: 100%;
					
					& /deep/ .el-form-item__label {
						line-height: 40px;
						color: rgba(30, 144, 255, 1);
						font-size: #606266;
					}
					
					& /deep/ .el-input__inner {
						height: 40px;
						color: rgba(42, 102, 221, 1);
						font-size: 14px;
						border-width: 1px;
						border-style: solid;
						border-color: #606266;
						border-radius: 4px;
						background-color: #fff;
					}
				}
				
				.btn {
					width: 88px;
					height: 44px;
					color: #fff;
					font-size: 14px;
					border-width: 0px;
					border-style: solid;
					border-color: #409EFF;
					border-radius: 4px;
					background-color: rgba(24, 144, 255, 1);
				}
			}
		}
	}
</style>

在这里插入代码片

4.系统演示地址：
链接：https://pan.baidu.com/s/1_NJcUTtkE08rdibN-xAWkw
提取码：hmal

xiaocao1223
关注
vue使用firebase做用户数据分析
qq1114565087的博客
06-22 1322
2.添加项目在firebase https://console.firebase.google.com/firebase项目的配置信息: main.js中: 我安装的时候：firebase版本 4.组件中使用监听用户行为 5.chrome安装插件Google Analytics Debugger 安装Google Analytics Debugger插件并打开开关，然后去到firebase控制台 点击DebugView栏目，同时刷新自己的项目页面，然后在DebugView栏目选择自己的设备：选择自己的设备
数据分析之vue(实现一个简单的备忘录页面)
weixin_66448906的博客
03-03 1037
数据分析之vue(实现一个简单的备忘录页面)
Vue的数据分析面板
08-10
Vue的数据分析面板，使用Vue.js构建的神奇DIY数据库工具。 用于企业数据分析的现成数据解决方案。 支持自定义数据库和数据报告。
这个数据分析工具花样有点多，看看统计图呈现方式
amsonga的博客
08-21 541
数据分析，就是各种统计图表的堆砌，用合适的统计图来表达你的数据趋势和方法，如何做出好的统计图来完美呈现分析呢，我们今天就以饼图为例，如何做出好看的饼图呢？ 工具---豌豆BI。 豌豆BI是亿信产品链中一款面向业务人员，用于猜想式、探索式的自助式数据分析工具，敏捷BI。提供从数据导入、数据预处理、自动建模和数据可视化分析于一体的完整的解决方案。说到数据分析就不可避免的要提到统计图，统计图是使用图形来展示数据的一种有效方式。接下来看看豌豆BI产品中统计图的使用，以饼图举例。 首先我们新建一张敏捷看板，拖入
python内部类和外部类_Python中的匿名内部类
weixin_39803207的博客
12-10 502
当然，您可以(尽管可能不应该)直接使用^{}：In [1]: class Button:...: def callback(self):...: print('Hello')...:In [2]: button = type('', (Button,), {'callback': lambda self: print('World')})()In [3]: button.c...
Java项目-基于Springboot+Vue的体质测试数据分析系统设计与实现源码+数据库脚本+部署视频+代码讲解视频+全套软件
06-23
【基于Springboot+Vue的体质测试数据分析系统的设计与实现】高分通过项目，已获导师指导。 本项目是一套基于Springboot+Vue的体质测试数据分析系统，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的...
基于SpringBoot+Vue的体质测试数据分析及可视化设计（源码+部署说明+系统介绍）.zip
04-08
基于SpringBoot+Vue的体质测试数据分析及可视化设计是一个集成了前端和后端技术的体质测试数据分析平台，主要用于管理、存储、统计和分析体质测试数据，提供数据可视化分析。该系统的源码、部署说明和系统介绍已经...
Spring Boot+VUE《体质测试数据分析及可视化设计》源码 带毕业论文+ppt
05-29
VUE技术 2、该资源包括项目的全部源码，下载可以直接使用！ 3、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目，作为参考资料学习借鉴。 4、本资源作为“参考资料”如果需要实现其他...
9576基于springboot+vue的体质测试数据分析及可视化设计-lw.zip
最新发布
02-26
标题所指的项目是一个以Spring Boot作为后端框架，Vue作为前端框架的体质测试数据分析及可视化设计系统。从技术选型来看，该项目采用了Java语言开发，并以Spring Boot框架作为核心。Spring Boot是基于Spring的一个...
人体分析之人像分割在vue项目中使用
weixin_65243943的博客
07-29 676
百度开放平台----人体分析之人像分割在vue项目中使用
vue数据分析模块代码
weixin_40825749的博客
08-26 71
我整理的一些关于【VUE】的项目学习资料（附讲解～～）和大家一起分享、学习一下：https://d.51cto.com/f2PFnN实现 Vue 数据分析模块的步骤指导 在现代 web 开发中，使用 Vue 框架来构建数据分析模块是一种非常流行的选择。特别是它的组件化设计和优秀的状态管理可以让你轻松处理数据展示和分析功能...
如何在vue项目中实现图表进行数据分析
winnieFighting
07-04 5328
1.安装vue-schart插件 npm i vue-schart -S 2.检查是否安装成功 查看配置文件中package.json文件是否有vue-schart版本信息 新建一个.vue页面 举例:我新建了一个dataanylize.vue页面 添加如下代码: <template> &lt...
python计算机毕设【附源码】基于vue的电商数据分析系统（django+mysql+论文）
基林计算机毕设程序
04-09 790
综上所述，基于Vue的电商数据分析系统的开发不仅能够提升电商平台的服务质量和运营效率，还能够帮助商家更好地理解和把握市场脉动，实现数据的最大价值。在数据库管理工具的选择上，使用了Navicat 11，这是一个用户友好且功能强大的数据库管理软件，它支持多种数据库系统，包括MySQL，并提供了图形化界面，使得数据库的管理和维护工作更加便捷。开发环境方面，我们选择了PyCharm作为主要的集成开发环境（IDE），它提供了丰富的Python开发工具和插件，支持Django框架，有助于提高开发效率和代码质量。
疫情数据分析平台前端（一）：vue平台搭建
EastMage的博客
05-02 1132
本次疫情数据分析平台项目开发中，我负责前端，包括前端ui、前端数据处理以及疫情地图的绘制和展现。该项目以网站为载体，呈现各种数据可视化和预测的结果，数据处理量大，与后端交互频繁，前端数据转换相对较多，因此选择能够轻易实现各种数据绑定以及包含大量插件的vue框架进行开发。 在此我选择使用vue-cli和webpack结合进行创建项目，由于npm在国内连接不稳定，改用cnpm镜像进行各类依赖的安装： ...
基于springboot+vue的开源的数据可视化分析工具
MMKJSH的博客
08-07 689
支持配置 Elasticsearch 数据源。支持配置 ClickHouse 数据源。支持配置 MaxCompute 数据源。支持配置 PostgreSQL 数据源。支持配置 StarRocks 数据源。支持配置 KingBase 数据源。支持配置 MariaDB 数据源。支持配置 MongoDB 数据源。支持配置 Impala 数据源。支持配置 Oracle 数据源。支持配置 Presto 数据源。支持配置 MySQL 数据源。支持配置 Doris 数据源。支持配置 Kylin 数据源。
nodejs+vue学生考试成绩数据分析与可视化系统vscode
QQ_188083800的博客
02-14 824
而学生可以在系统中做在线答题，查看题库，查询成绩。运用改系统可以有效的方便老师同学查看成绩， 运用学生成绩管理维护系统可以减轻学院教学人员的工作量，缩小开支，提高工作效率与准确率，能够节省时间，还能使学生更好的查看自己的成绩变化。急需研究一套能够对大量考试成绩数据进行统计分析与可视化的管理系统，该管理系统采用当前流行的B/S模式以及3层架构的设计思想，通过nodejs技术，利用mysql数据库，实现学生、老师及管理员对学生考试成绩数据进行分析统计与可视化管理，增强对考试成绩数据更加全面直观的实时了解。
vue源码分析之数据代理过程
浮生离梦的博客
01-31 440
一、数据代理的分析 数据代理：通过一个对象代理另一个对象中的属性操作，包括读和写的操作。 vue的数据代理： data对象的所有属性操作，读和写的操作都是通过vm对象代理来操作的。 好处：通过vm对象就可以方便的操作data中的数据。 数据代理的实现过程： 通过Object.defineProperty(vm, key, {}) 给vm添加与data对象的属性对应的属性 所有添加的属性都包括...
基于SpringBoot + Vue的大学生平时成绩量化管理系统（角色：学生、教师、管理员）
我们不是普通的猪，我们是一群热爱编程、追求创新的“猪仔”。在这里，我们用键盘敲出梦想，用代码编织未来。
09-19 2588
💛博主介绍：作为资深全栈程序员🎉，我专注于为大学生提供毕业设计支持。凭借丰富的开发经验和深入的技术解析，我在此分享实用的编程资源、源代码，并提供定制化技术咨询💡。致力于协助学生在毕业设计中取得成功我的目标是让技术学习变得更高效、更有趣。欢迎关注👋，一起在计算机科学的海洋中乘风破浪⛵️，共创辉煌🏆。👇🏻精选专栏，推荐订阅👇🏻计算机毕业设计最强指南✅计算机最全毕设项目推荐✅✨文末附上源码及联系方式✨。
【VUE项目总结】
mango660的博客
05-29 1109
项目介绍 该项目是一个电商平台，主要实现功能有： 针对用户：登录、注册、个人中心； 针对商品：展示、搜索展示、详情页； 针对用户和商品的交互：加入购物车、删除购物车、网上结账等。 开发一个前端模块的步骤： 写静态页面、拆分静态组件。 发请求。 Vuex。 组件获取仓库数据，动态展示。 项目配置 项目运行，浏览器自动打开。 // package.json "scripts": { "serve": "vue-cli-service serve --open", "build": "
基于Vue和Springboot的体质测试数据分析系统开发
项目中提到的“体质测试数据分析及可视化设计”表明，系统不仅能够处理和分析体质测试产生的大量数据，还能够通过图形化的方式将这些分析结果呈现给管理员、学生和教师。 6. **系统管理功能** 系统管理功能包括对...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值