当前位置：首页 > news >正文

基于vue3实现的课堂点名程序

news 来源：原创 2025/9/21 3:31:02

设计思路

采用vue3实现的课堂点名程序，模拟课堂座位布局，点击开始点名按钮后，一朵鲜花在座位间传递，直到点击结束点名按钮，鲜花停留的座位被点名。

课堂点名

座位组件 seat.vue

<script setup>//组合式APIimport { ref,reactive,onMounted } from 'vue';const seatImage=ref('/src/assets/desk.jpg')const props=defineProps({ // 当前图片索引row:{type:Number,default:0},col:{type:Number,default:0},callRow:{type:Number,default:0},callCol:{type:Number,default:0},sName:{type:String,default:""}})
</script>
<template ><div style="height: 94px;"> <button  ><img :src="seatImage" alt="Button Image"></button><div style="width: 42px; text-align: center;">{{props.sName}}</div><div v-if="props.callRow===props.row && props.callCol===props.col">🌺 </div>
</div>
</template>
<style >
</style>

教室组件 classroom.vue

<template><div>  <el-button type="primary" @click="startCall">开始点名</el-button><el-button type="danger" @click="overCall">结束点名</el-button></div><br><el-table :data="tableData" style="width: 100%" table-layout="auto"><el-table-column  :label= item.col v-for="(item, index) in tableData[0]" :key="index"><template v-slot="scope"><seat :col=scope.row[index].col  :row=scope.row[index].row :callRow=callRow           :callCol=callCol:sName=scope.row[index].sName:key="componentKey"></seat></template></el-table-column></el-table></template><script  setup>import { ref,reactive,onMounted} from 'vue';import seat from './seat.vue';var timer=ref("")const callRow=ref(0)const callCol=ref(0)var componentKey=0const classroom=ref( {rows:3,cols:3,seatsMap:[{row: 0,col: 0,sName:"樊兰英"}, {row: 0,col: 1,sName:"张磊"},{row: 0,col: 2,sName:"朱旭"},{row: 1,col: 0,sName:"沈玉"},   {row: 1,col: 1,sName:"邓平"},{row: 1,col: 2,sName:"蒋兰英"},{row: 2,col: 0,sName:"程晨"},   {row: 2,col: 1,sName:"张承"},{row: 2,col: 2,sName:"陈楚华"}]})const tableData = ref([])makeTable();mergeData();function makeTable () {for (let i = 0; i < classroom.value.rows; i++) tableData.value.push({})for(let i = 0; i < classroom.value.cols; i++){tableData.value.forEach((tableRow,idxRow)=>{let fieldName='c'+i; tableRow[fieldName]={row:idxRow,col:i,sName:""};})}}function mergeData () {// 合并数据for (let i = 0; i < classroom.value.seatsMap.length; i++) {			  let fieldName='c'+classroom.value.seatsMap[i].col;tableData.value[classroom.value.seatsMap[i].row][fieldName] = classroom.value.seatsMap[i]}}function startCall(){  timer = setInterval(genRowCol, 200); }function genRowCol() { //随机产生座位号callRow.value= parseInt(Math.random()*classroom.value.rows) ;callCol.value= parseInt(Math.random()*classroom.value.cols) ;componentKey += 1;//组件key加1，强制子组件刷新}function overCall(){ clearInterval(timer);}</script>

调用

 <classroom ></classroom>

扩展

程序还可以作一下扩展：

1）按性别点名，比如这次抽取男生或女生；

2）按成绩排名点名，比如这次抽取成绩好的学生；

3）按课堂表现点名，比如抽取不爱发言的学生；

4）优先抽取没有点过名的学生

以上条件可以组合

基于vue3实现的课堂点名程序

设计思路采用vue3实现的课堂点名程序，模拟课堂座位布局，点击开始点名按钮后，一朵鲜花在座位间传递，直到点击结束点名按钮，鲜花停留的座位被点名。课堂点名座位组件 seat.vue <script setup>//组合式APIimpo…...

编程日记 2025/9/21 3:31:02

压力传感器

压力传感器是一种用于测量气体或液体压力的设备，广泛应用于工业控制、汽车电子、医疗设备、航空航天等领域。以下是关于压力传感器的详细介绍： 一、压力传感器的分类 1. 按测量原理分类 - 压阻式压力传感器： - 原理：利用压…...

编程日记 2025/9/21 2:34:27

Django REST Framework (DRF) 中用于构建 API 视图类解析

Django REST Framework (DRF) 提供了丰富的视图类，用于构建 API 视图。这些视图类可以分为以下几类： 1. 基础视图类这些是 DRF 中最基础的视图类，通常用于实现自定义逻辑。常用类 APIView： 最基本的视图类，所有其…...

编程日记 2025/9/12 6:13:40

DeepSeek介绍[Cache-Through、Cache-Around、Cache-Behind、Cache-Asid]

Cache-Through、Cache-Around、Cache-Behind和Cache-Aside是几种常见的缓存策略，每种策略有其独特的工作机制和应用场景。以下是对这些缓存模式的详细介绍： 1. Cache-Through 工作原理： 读操作：应用程序首先向缓存层请求数据。…...

编程日记 2025/9/20 20:21:53

React 前端框架介绍

什么是 React？ React 是一个由 Facebook 开发并维护的开源 JavaScript 库，用于构建用户界面。它主要用于创建交互式用户界Face（UI），尤其是当数据变化时需要更新部分视图时非常有效。React 的核心思想是组件化和声明性…...

编程日记 2025/9/19 10:20:27

图片格式：支持常见的图片格式（JPG、PNG、BMP、GIF）。 import os import tkinter as tk from tkinter import filedialog, messagebox from PIL import Image, ImageTkclass ImageViewer:def __init__(self, root):self.root rootself.root.…...

编程日记 2025/9/20 4:43:07

基于Electron+Vue3创建桌面应用

Electron 是一个开源框架，基于 Chromium 和 Node.js，用于开发跨平台桌面应用程序。它允许开发者使用 HTML、CSS 和 JavaScript 等 Web 技术构建原生桌面应用，支持 Windows、macOS 和 Linux。Electron 以其开发便捷性、强大的功能和丰富的生态系统而广泛应用于工具类应用、媒…...

编程日记 2025/9/12 6:13:33

Redis实战-扩展Redis

扩展Redis 1、扩展读性能2、扩展写性能和内存容量3、扩展复杂的查询3.1 扩展联合查询3.2 扩展分片排序如有侵权，请联系～ 如有错误，也欢迎批评指正～ 本篇文章大部分是来自学习《Redis实战》的笔记 1、扩展读性能单台Redis服务器…...

编程日记 2025/9/18 11:43:07

Vue 前端开发中的路由知识：从入门到精通

文章目录引言1. Vue Router 简介1.1 安装 Vue Router1.2 配置 Vue Router1.3 在 Vue 实例中使用 Vue Router 2. 路由的基本用法2.1 路由映射2.2 路由视图2.3 路由链接 3. 动态路由3.1 动态路径参数3.2 访问动态参数3.3 响应路由参数的变化 4. 嵌套路由4.1 定义嵌套路由4.2 渲染…...

编程日记 2025/9/12 6:13:29

为AI聊天工具添加一个知识系统之109 详细设计之50 三性三量三境

本文要点纵观整个讨论过程最初我提“相得益彰的三性（三性） 相提并论的三者（三量） 相映成趣的三化（三境）” “ 确定今天的讨论题-- “我”的知识树：相得益彰的三性（即三性&…...

编程日记 2025/9/20 3:44:06

51-ArrayList

51-ArrayList Collection 类型介绍仓颉中常用的几种基础 Collection 类型，包含 Array、ArrayList、HashSet、HashMap。可以在不同的场景中选择适合对应业务的类型： Array：如果不需要增加和删除元素，但需要修改元素&#xff…...

编程日记 2025/9/18 23:34:24

工业制造能耗管理新突破，漫途MTIC-ECM平台助力企业绿色转型！

在工业制造领域，能源消耗一直是企业运营成本的重要组成部分。随着“双碳”目标的推进，如何实现高效能耗管理，成为制造企业亟待解决的问题。漫途MTIC-ECM能源能耗在线监测平台，结合其自研的硬件产品，为工业制造企业提供…...

编程日记 2025/9/12 6:13:22

sql注入之python脚本进行时间盲注和布尔盲注

一、什么是时间盲注和布尔盲注？ 答：时间盲注是攻击者通过构造恶意sql语句利用sleep()等延迟函数来观察数据库响应时间差异来进行推断信息和条件判断。如果条件为真，数据库会执行延时操作，如果为假则立即返回。响应时间较短。 SELE…...

编程日记 2025/9/19 14:38:59

map的使用（c++）

在了解map之前，我们先看看两个场景，通过这两个场景的对比，让我们知道为什么要存在存储双关键字的容器场景一：判断一堆字符串中，某一个字符串是否出现过在没学set容器之前，我们只能想到把这一堆字符串存到…...

编程日记 2025/9/20 15:42:04

Android13-包安装器PackageInstaller-之apk安装流程

目的我们最终是为了搞明白安装的整个流程通过安卓系统自带的包安装器来了解PMS 安装流程实现需求定制：静默安装-安装界面定制-安装拦截验证。【核心目的】安装流程和PMS了解不用多说了; 安装定制相关： 如手机上安装时候弹出锁屏界面需要输入密码;安…...

编程日记 2025/9/16 7:01:55

前端函数在开发环境与生产环境中处理空字符串的差异及解决方案

在前端开发过程中，我们经常会遇到一些函数在开发环境中运行正常，但在生产环境中却出现报错的情况。本文将通过具体的代码示例和分析，探讨一个函数在开发环境和生产环境中处理空字符串的差异，并提供解决方案。 1. 问题描述我们有…...

编程日记 2025/9/12 8:22:32

数智读书笔记系列014 MICK《SQL进阶教程》第一版和第二版对比和总结

引言在当今数字化时代，数据已成为企业和组织的核心资产之一。而 SQL（Structured Query Language）作为管理和操作关系型数据库的标准语言，其重要性不言而喻。无论是数据查询、插入、更新还是删除，SQL 都能高效地完成任务，广泛应用于数据分析、数据挖掘、数据仓库、Web 开…...

编程日记 2025/9/16 8:27:48

智能猫眼实现流程图

物理端开发流程图客户端端开发流程图用户功能开发流程图管理员开发流程图...

编程日记 2025/9/12 5:18:10

docker安装kafka,并通过springboot快速集成kafka

目录一、docker安装和配置Kafka 1.拉取 Zookeeper 的 Docker 镜像 2.运行 Zookeeper 容器 3.拉取 Kafka 的 Docker 镜像 4.运行 Kafka 容器 5.下载 Kafdrop 6.运行 Kafdrop 7.如果docker pull wurstmeister/zookeeper或docker pull wurstmeister/kafka下载很慢&#x…...

编程日记 2025/9/17 18:34:11

Spring Boot 中自动装配机制的原理

Spring Boot 的自动装配机制是其核心特性之一，它简化了 Spring 应用的配置，让开发者能够快速构建应用。以下是对其原理的详细总结： 1. 核心概念自动装配 (Auto-configuration): Spring Boot 根据应用依赖和配置，自动配置 Spring…...

编程日记 2025/9/19 23:27:30

python继承中super() 不是简单的“调用父类”，而是调用 MRO 里的下一个类

Python 里的一个类可以同时继承多个父类。这让我们的模型设计变得更灵活，但同时也带来一个新问题：“在复杂的继承关系下，如何确认子类的某个方法会用到哪个父类？” 这里有点需要理解： MRO（方法解析顺序…...

编程日记 2025/9/20 14:56:42

【智慧校园】分体空调节能监管：打造高效节能的学习环境

随着科技的飞速发展和生活品质的不断提升，人们对于家居和办公环境的舒适度与智能化要求也越来越高。分体空调集中控制系统作为一种先进的空调管理方式，正逐渐成为现代家庭和办公场所的标配，为用户带来更加便捷、高效和节能的空调使用体验。随…...

编程日记 2025/9/20 5:30:46

【达梦数据库】dblink连接[SqlServer/Mysql]报错处理

目录背景问题1：无法测试以ODBC数据源方式访问的外部链接!问题分析&原因解决方法问题2：DBLINK连接丢失问题分析&原因解决方法问题3：DBIINK远程服务器获取对象[xxx]失败,错误洋情[[FreeTDS][SQL Server]Could not find stored proce…...

编程日记 2025/9/19 12:38:38

STM32 ADC介绍（硬件原理篇）

目录背景 AD转换器采样与保持量化编码 AD转换器转换原理 DA转换原理 AD转换原理 1.逐次逼近型AD转换器 2.并联比较型AD转换器编码器同步D触发器和边沿D触发器基本RS触发器同步RS触发器同步D触发器边沿型D触发器（维持-阻塞D触发器&#xff…...

编程日记 2025/9/18 23:28:35

蚁剑（AutSword）的下载安装与报错解决

蚁剑（AutSword）的下载安装与报错解决 1.下载唯一官方github下载地址 GitHub - AntSwordProject/AntSword-Loader: AntSword 加载器 2.安装打开并且进入到下面的界面下载需要的的版本进行初始化 3.报错出现下面的报错 4.解决方法出现上面报错…...

编程日记 2025/9/12 5:17:57

BT401双模音频蓝牙模块如何开启ble的透传,有什么注意事项

BT401音频蓝牙模块如何开启ble的透传？ 首先BT401的蓝牙音频模块，分为两个版本，dac版本和iis数字音频版本 DAC版本：就是BT401蓝牙模块【9和10脚】直接输出模拟音频信号，也就是说，直接推动耳机可以听到声音 …...

编程日记 2025/9/14 18:18:06

209. 长度最小的子数组

这个题目之前做过是用c语言写的但是我这里用python来写写的不是很好感觉自己这里写的还是有问题给定一个含有 n 个正整数的数组和一个正整数 target 。找出该数组中满足其总和大于等于 target 的长度最小的子数组 [numsl, numsl1, ..., numsr-1, numsr] ，…...

编程日记 2025/9/20 18:17:46

使用IDEA创建Maven项目、Maven坐标，以及导入Maven项目

一、创建Maven项目正如使用Vue创建工程化的前端项目，此时，使用Maven创建标准化的后端项目。以下适用于2021版本的IDEA。 name和artifactid会自动保持一致。 Groupid：一般写公司域名倒写，再加上项目名（也可以不…...

编程日记 2025/9/18 6:18:40

从零到一实现微信小程序计划时钟：完整教程

在本教程中，我们将一起实现一个微信小程序——计划时钟。这个小程序的核心功能是帮助用户添加任务、设置任务的时间范围，并且能够删除和查看已添加的任务。通过以下步骤，我们将带你从零开始实现一个具有基本功能的微信小程序计划时钟。项目…...

编程日记 2025/9/18 18:38:45

最长回文子串（蓝桥云课）

题目链接：8.最长回文子串 - 蓝桥云课 (lanqiao.cn) 代码如下 # include <iostream> # include <cstring> using namespace std; int main() {string str;getline(cin, str);int res 0;for(int i 0; i < str.length(); i){int l i - 1, r i 1;…...

编程日记 2025/9/20 10:29:24

12-滑动窗口

一，定义滑动窗口算法是一种用于处理数组或字符串问题的技巧，特别适合解决涉及子数组或子串的问题。它的核心思想是通过维护一个“窗口”来高效地计算或查找满足条件的子数组或子串。基本概念窗口：窗口是数组或字符串中的一个连续子区间&a…...

编程日记 2025/9/21 1:32:58

时间序列分析（五）——移动平均模型（MA模型）

此前篇章： 时间序列分析（一）——基础概念篇时间序列分析（二）——平稳性检验时间序列分析（三）——白噪声检验时间序列分析（四）——差分运算、延迟算子、AR(p)模型 …...

编程日记 2025/9/18 21:03:55

eNSP防火墙综合实验

一、实验拓扑二、ip和安全区域配置 1、防火墙ip和安全区域配置新建两个安全区域 ip配置 Client1 Client2 电信DNS 百度web-1 联通DNS 百度web-2 R2 R1 三、DNS透明代理相关配置 1、导入运营商地址库 2、新建链路接口 3、配置真实DNS服务器 4、创建虚拟DNS服务器 5、配置D…...

编程日记 2025/9/20 8:53:35

ES8字符串填充用法总结：padStart(),padEnd()，rest剩余参数的用法{name,...obj},扩展运算符的用法，正则表达式命名捕获组

ES8（ECMAScript 2017）引入了两个非常有用的字符串填充方法：padStart() 和 padEnd()，它们可以用来在字符串的两端添加指定的填充字符，从而达到指定的字符串长度。这些方法非常适合用于格式化文本和对齐输出。 1. padSt…...

编程日记 2025/9/18 8:21:29

Redis 统计每个数据类型中占用内存最多的前 N 个 bigkey

Redis 统计每个数据类型中占用内存最多的前 N 个 bigkey import redisdef find_bigkeys(hostlocalhost, port6379, db0, n10):r redis.Redis(hosthost, portport, db0)bigkeys {}# 用于存储每种数据类型的键及内存占用type_memory_dict {}# 扫描所有键for key in r.scan_it…...

编程日记 2025/9/15 16:49:08

C++中的.*运算符

看运算符重载的时候，看到这一句 .* :: sizeof ?: . 注意以上5个运算符不能重载。 :: sizeof ?: . 这四个好理解，毕竟都学过，但.*是什么？ 于是自己整理了一下 .* 是一种 C 中的运算符，称为指针到成…...

编程日记 2025/9/12 5:17:38

大语言模型简史：从Transformer（2017）到DeepSeek-R1（2025）的进化之路

2025年初，中国推出了具有开创性且高性价比的「大型语言模型」（Large Language Model — LLM）DeepSeek-R1，引发了AI的巨大变革。本文回顾了LLM的发展历程，起点是2017年革命性的Transformer架构，该架构通过「…...

编程日记 2025/9/15 18:48:58

14-H指数

给你一个整数数组 citations ，其中 citations[i] 表示研究者的第 i 篇论文被引用的次数。计算并返回该研究者的 h 指数。根据维基百科上 h 指数的定义：h 代表“高引用次数” ，一名科研人员的 h 指数是指他（她）至少发…...

编程日记 2025/9/15 18:45:06

Param ‘serviceName‘ is illegal, serviceName is blank

今天测试nacos服务配置拉取时报了这样一个错误，发现是spring.application.name空值造成的，但是我的bootstrap.yml文件明明配置了，难不成是没有加载bootstrap.yml文件？于是我引入了下面的依赖 <dependency><groupId>o…...

编程日记 2025/9/18 1:37:42

深入剖析Spring MVC

一、Spring MVC 概述 1. 什么是 Spring MVC？ Spring MVC 是基于 Spring 框架的 Web 框架，它实现了 MVC 设计模式，将应用程序分为三个核心部分： Model：封装应用程序的数据和业务逻辑。 View：负责渲染数据…...

编程日记 2025/9/11 21:46:56

LLM：RAG

原文链接：LLM：RAG 1、RAG 概览 RAG（Retrieval-Augmented Generation，检索增强生成）是一种结合了信息检索（IR）和 LLM 的技术。它的核心思想是在 LLM 生成回答之前，通过检索相关文档…...

编程日记 2025/9/19 23:26:38

Linux 信号量

Linux 信号量一、信号量基础概念1.1 同步机制的核心需求1.2 信号量的核心原理1.3 信号量类型对比二、实战代码解析2.1 共享内存与信号量结合示例2.2 信号量类实现要点三、关键实现细节分析3.1 初始化三步骤3.2 SEM_UNDO机制3.3 原子操作保证四、进阶应用场景4.1 生产者-消费…...

编程日记 2025/9/19 8:56:53

如何优化Spark作业的性能

优化Spark作业的性能是一个综合性的任务，涉及多个方面的调整和优化。以下是一些关键的优化策略： 一、开发调优避免创建重复的RDD： 对于同一份数据，只应该创建一个RDD，避免多次创建RDD来增加性能开销。在对不同的数据…...

编程日记 2025/9/12 0:50:58

ERP对制造业务有何价值？

ERP 的定义在定义 ERP 之前，我们先从其首字母缩写说起，ERP 代表企业资源规划。我们可以将 ERP 定义为一种企业软件，它帮助组织管理日常业务。从根本上讲，ERP 将客户管理、人力资源、商业智能、财务管理、库存以及供应链功能整合…...

编程日记 2025/9/18 19:57:13

python和pycharm 和Anaconda的关系

好的，下面我会详细说明 Python、PyCharm 和 Anaconda 三者的关系，并逐一解释它们的功能和作用。 1. Python（编程语言） 定义：Python 是一种高级编程语言，设计简洁，易于学习，且功能强…...

编程日记 2025/9/19 7:54:40

网络安全“挂图作战“及其场景

文章目录一、网络安全挂图作战来源与定义1、网络安全挂图作战的来源2、网络安全挂图作战的定义二、挂图作战关键技术三、挂图作战与传统态势感知的差异四、挂图作战主要场景五、未来趋势结语一、网络安全挂图作战来源与定义 1、网络安全挂图作战的来源网络安全挂图作战的…...

编程日记 2025/9/20 23:26:02

【对比】Pandas 和 Polars 的区别

Pandas vs Polars 对比表特性PandasPolars开发语言Python（Cython 实现核心部分）Rust（高性能系统编程语言）性能较慢，尤其在大数据集上（内存占用高，计算效率低）极快，利用…...

编程日记 2025/9/15 19:08:27

投资组合风险管理

投资组合风险管理市场风险信用风险流动性风险风险指标收益率波动率最大回撤 α \alpha α（詹森指数）， β \beta β卡玛比率月胜率上/下行捕获比夏普比率索提诺比率经风险调整的收益率（𝑀2）特雷诺比率信息…...

编程日记 2025/9/18 17:24:36

用 WOW.js 和 animate.css 实现动画效果

用 wow.js 就可以实现动画效果，但由于里面的动画样式太少，一般还会引入 animated.css 第一步：下载选择合适的包管理器下载对应的内容 pnpm i wow.js animated.css --save 第二步：引入在main.js中加入： import …...

编程日记 2025/9/17 16:14:08

2024年职高单招或高考计算机类投档线

问题： 这些学校2024年职高单招或高考计算机类投档线分别是多少回答： 部分学校2024年职高单招或高考计算机类投档线如下： 湖南工业职业技术学院职高单招：未查询到2024年职高单招计算机类专业明确的录取分数线信息。但在2024年…...

编程日记 2025/9/20 13:18:38

设计思路

座位组件 seat.vue

教室组件 classroom.vue

调用

扩展

相关文章：