2024不一样的VUE3期末考查

台下训练，准备好上台演练。测试学生对打代码过程的熟练度，操作限时5分钟。

以5分钟截止时，代码完成最后抵达节点为最终记录。

考核难度自选：

Lv合格: 自备手机或者手写代码，其他资料上台开卷测试。

Lv优秀: 闭卷测试，不可带任何资料和电子产品。

考核设备:讲台教师机。

学生练习:个人电脑。

应用场景:高等院校技能考核

最终成绩(100分) = 上机操作考核+ 平时成绩 *活跃系数 (最高40分)

准备工作

下载 QQ群或学习通考试里 VUE期末1227.zip文件。解压后将内层整个文件夹直接导入 VScode中。

第一步修改HTML完成教室布局填充 (考核节点S1)

、

根据今天教室真实座位数量座位，修改HTML代码。完成后在浏览器中进行测试。

1.教室.html代码

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教室考查</title>
    <link rel="stylesheet" href="./asset/1.css">
    <link rel="shortcut icon" href="./asset/favicon.ico" type="image/x-icon">
</head>
<body>
<main  id="A">
<!-- ----------------------------👇 S1期末测试区 👇----------------------------------- -->

    <section> <!--  一排座位  -->
        <div></div><div></div><div></div><div></div><span></span><div></div><div></div><div></div><div></div><div></div><div></div><span></span> <div></div><div></div><div></div><div></div>
    </section>

<!------------------------------👆 S1期末测试区 👆----------------------------------- -->
</main>

<!-- ----------------------------👇 S1期末测试区 👇----------------------------------- -->
<script src="1.js">  引入1.js  </script>
<!------------------------------👆 S1期末测试区 👆----------------------------------- -->
</body>
</html>

第二步操作浏览器通过修改URL完成登录和座位登记(考核节点S2)

2.1 通过URL访问登录接口获取token

注意修改IP地址为真实服务器IP地址。

2.2 通过token登记今天座位

注意登录账号为完整学号和姓名

第三步编写JS代码显示座位

3.1 在控制台查看座位列表数据

js 复制代码

请注意根据实际I服务器P地址修改。

编写请求函数，编写主要函数，并在浏览器控制台查看服务器返回学生座位信息效果。

3.2 继续编写JS代码，完成学生信息回显页面

1.js测试所用完整代码

js 复制代码

let arr =  document.querySelectorAll('div')

for(let i = 0 ; i <arr.length ; i++ ){
    
    let one = arr[i]
    one.innerHTML = i+1

}
//----------------------------👇👇 期末测试区 👇👇-----------------------------------
//----------------------------👇👇 期末测试区 👇👇-----------------------------------
//----------------------------👇👇 期末测试区 👇👇-----------------------------------

主要()
//调用函数

async function 主要(){ 
//座位接口
    let URL = `http://192.168.31.226/api/desk/list`
    let data = await 请求(URL)  //获取座位数据


    let stuArr = 去重(data) //获取所有选座学生信息
    console.log(  stuArr  )   

    //获取 所有选座的 学生信息  
    for(let i=0;  i<stuArr.length  ;i++ ){
        let 学生 = stuArr[i]    

        let n = 学生.desk_num  //获取学生选取的座位号,座位号-1
        arr[n-1].innerHTML = 学生.name 

    }


}//主要

        
async function 请求(URL){   //自定义请求函数
    let 响应 = await fetch(URL)
    let 数据 = await 响应.json()
    return 数据
}//请求URL

//----------------------------👆👆 期末测试区 👆👆-----------------------------------
//----------------------------👆👆 期末测试区 👆👆-----------------------------------
//----------------------------👆👆 期末测试区 👆👆-----------------------------------

function 去重(data) {
    const ipSet = new Set(); // 用于存储已经遇到的IP地址
    const uniqueData = [];   // 存储去重后的数据

    for (const item of data) {

        if (!ipSet.has(item.ip)) {

            uniqueData.push(item);
            ipSet.add(item.ip);
        }

    }
    return uniqueData;
}

-----------------附录----------------------

1.数据接口

1)登录接口
192.168.2.xx/api/stu/log...
192.168.2.xx/api/stu/log...

name=姓名 num=学号

2)座位登记 192.168.2.xx/api/desk/pi...

token=xxxx-xxxx-xxxx desk_num=xx

3)座位列表 192.168.2.xx/api/desk/li...

如何查看学习通APP课程积分

学习通App→进入相应课程→更多→学习记录→课时积分。

-----------------技术支持----------------------

同步成绩录入，服务器使用Express5.0.1 ,编程环境为Node.jsv22.0.0。

教室有企业路由器搭建局域网。