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

Web APIs——综合案例

news 2026/2/10 14:48:06

1、学生就业统计表

2、渲染业务

根据持久化数据渲染页面

步骤：

①：读取localstorage本地数据

  • 如果有数据则转换为对象放到变量里面一会使用它渲染页面
  • 如果没有则用默认空数组[]
  • 为了测试效果，可以先把initData存入本地存储看效果

②：根据数据渲染页面。遍历数组，根据数据生成tr，里面填充数据，最后追加给tboby

（提示）可以利用map()和join()数组方法实现字符串拼接

  1. 渲染业务要封装成一个函数render
  2. 使用map方法遍历数组，里面更换数据，然后返回有数据的tr数组
  3. 通过join方法把map返回的数组转换为字符串
  4. 把字符串通过innerHTML赋值给tbody 

3、新增业务

点击新增按钮，页面显示新的数据

步骤：

①：给form注册提交事件，要阻止默认提交事件（阻止默认行为）

②：非空判断

如果年龄、性别、薪资有一个值为空，则return返回’输入不能为空‘中断程序

③：给arr数组追加对象，里面存储表单获取过来的数据

④：渲染页面和重置表单（reset()方法）

⑤：把数组数据存储到本地存储里面，利用JSON.stringify()存储为JSON字符串

 4、删除业务

点击删除按钮，可以删除对应的数据

步骤：

①：采用事件委托形式，给tbody注册点击事件

②：得到当前点击的索引号。渲染数据的时候，动态给a链接添加自定义属性data-id="0"

③：根据索引号，利用splice删除数组这条数据

④：重新渲染页面

⑤：把最新arr数组存入本地存储

5、关于stuId的处理

思路：

①：新增加序号应该是最后一条数据的stuId + 1

  • 数组[数组的长度-1].stuId + 1

②：但是要判断，如果没有数据则是直接赋值为1，否则就采用上面的做法

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>学生就业统计表</title><link rel="stylesheet" href="css/index.css" />
</head><body><h1>新增学员</h1><form class="info" autocomplete="off">姓名：<input type="text" class="uname" name="uname" />年龄：<input type="text" class="age" name="age" />性别: <select name="gender" class="gender"><option value="男">男</option><option value="女">女</option></select>薪资：<input type="text" class="salary" name="salary" />就业城市：<select name="city" class="city"><option value="北京">北京</option><option value="上海">上海</option><option value="广州">广州</option><option value="深圳">深圳</option><option value="曹县">曹县</option></select><button class="add">录入</button></form><h1>就业榜</h1><!-- <div class="title">共有数据<span>0</span>条</div> --><table><thead><tr><th>学号</th><th>姓名</th><th>年龄</th><th>性别</th><th>薪资</th><th>就业城市</th><th>时间</th><th>操作</th></tr></thead><tbody><!-- <tr><td>1</td><td>迪丽热巴</td><td>22</td><td>女</td><td>20000</td><td>上海</td><td>2099/9/9 08:08:08</td><td><a href="javascript:"><i class="iconfont icon-shanchu"></i>删除</a></td></tr> --></tbody></table><script>// 参考数据const initData = [{stuId: 1,uname: '迪丽热巴',age: 22,gender: '女',salary: '20000',city: '上海',time: '2099/9/9 08:08:08'}]// localStorage.setItem('data',JSON.stringify(initData))// 1. 渲染业务// 1.1 先读取本地存储的数据// （1）本地存储有数据则记得转换为对象然后存储到变量里面，后期用于渲染页面// （2）如果没有数据，则用 空 数组来代替const arr = JSON.parse(localStorage.getItem('data')) || []// 1.2 利用map和join方法来渲染页面const tbody = document.querySelector('tbody')function render(){// (1) 利用map遍历数组，返回对应tr的数组const trArr = arr.map(function(ele,index){return `<tr><td>${ele.stuId}</td><td>${ele.uname}</td><td>${ele.age}</td><td>${ele.gender}</td><td>${ele.salary}</td><td>${ele.city}</td><td>${ele.time}</td><td><a href="javascript:" data-id={"${index}"}><i class="iconfont icon-shanchu"></i>删除</a></td></tr> `})console.log(trArr)// (2) 把数组转换为字符串 join// (3) 把生成的字符串追加给tbodytbody.innerHTML = trArr.join('')// 显示共计有几条数据// document.querySelector('.title span').innerHTML = arr.length}render()// 2. 新增业务// 2.1 form表单注册提交事件，阻止默认行为const info = document.querySelector('.info')const uname = document.querySelector('.uname')const  age = document.querySelector('.age')const salary = document.querySelector('.salary')const gender = document.querySelector('.gender')const city = document.querySelector('.city')info.addEventListener('submit',function(e){// 阻止默认行为e.preventDefault()// 2.2 非空判断if(!uname.value || !age.value || !salary.value) {return alert('输入内容不能为空')}// 2.3 给arr数组追加对象，里面存储 表单获取过来的数据arr.push({// 处理stuId： 数组最后一条数据的stuId + 1stuId: arr.length ? arr[arr.length -1].stuId + 1 : 1,uname: uname.value,age: age.value,salary: salary.value,gender:gender.value,city:city.value,time: new Date().toLocaleString()})// 2.4 渲染页面和重置表单（reset()方法）render()this.reset() // 重置表单// 2.5 把数组重新存入本地存储里面，记得转换为JSON字符串存储localStorage.setItem('data',JSON.stringify(arr))})// 3. 删除业务// 3.1 采用事件委托形式，给tbody注册点击事件tbody.addEventListener('click', function(e){// 判断是否点击的是删除按钮if(e.target.tagName === 'A'){// alert(11)// 3.2 得到当前点击的索引号，渲染数据的时候，动态给a链接添加自定义属性例如data-id="0"console.log(e.target.dataset.id)// 确认框确认是否要删除if(confirm('您确定要删除这条数据嘛？'))// 3.3 根据索引号，利用splice 删除数组这条数据arr.splice(e.target.dataset.id,1)// 3.4 重新渲染页面render()// 3.5 把最新arr数组存入本地存储localStorage.setItem('data',JSON.stringify(arr))}})</script>
</body></html>

CSS

* {margin: 0;padding: 0;box-sizing: content-box;
}a {text-decoration: none;color:#721c24;
}
h1 {text-align: center;color:#333;margin: 20px 0;}
table {margin:0 auto;width: 800px;border-collapse: collapse;color:#004085;
}
th {padding: 10px;background: #cfe5ff;font-size: 20px;font-weight: 400;
}
td,th {border:1px solid #b8daff;
}
td {padding:10px;color:#666;text-align: center;font-size: 16px;
}
tbody tr {background: #fff;
}
tbody tr:hover {background: #e1ecf8;
}
.info {width: 900px;margin: 50px auto;text-align: center;
}
.info  input, .info select {width: 80px;height: 27px;outline: none;border-radius: 5px;border:1px solid #b8daff;padding-left: 5px;box-sizing: border-box;margin-right: 15px;
}
.info button {width: 60px;height: 27px;background-color: #004085;outline: none;border: 0;color: #fff;cursor: pointer;border-radius: 5px;
}
.info .age {width: 50px;
}

相关文章：

Web APIs——综合案例

1、学生就业统计表 2、渲染业务 根据持久化数据渲染页面 步骤&#xff1a; ①&#xff1a;读取localstorage本地数据 如果有数据则转换为对象放到变量里面一会使用它渲染页面如果没有则用默认空数组[]为了测试效果&#xff0c;可以先把initData存入本地存储看效果 ②&…...

编程日记 2023/11/9 15:35:44

2023.10月考试战报|华为认证HCIP考试100%通过

相关文章&#xff1a; 考试战报|2023.7月-8月思科认证、华为认证-CSDN博客 2023.4月及5月最新HCIP 考试战报来袭_厦门微思网络的博客-CSDN博客 HCIP 3-4月考试战报_厦门微思网络的博客-CSDN博客 2023年HCIP/CCNP考试战报_厦门微思网络的博客-CSDN博客 2023年10月&#xff0…...

编程日记 2023/11/9 15:34:44

Oracle 三种分页方法（rownum、offset和fetch、row_number() over()）

Oracle的三种分页指的是在进行分页查询时&#xff0c;使用三种不同的方式来实现分页效果&#xff0c;分别是使用rownum、使用offset和fetch、使用row_number() over() 1、使用rownum rownum是oracle中一个伪劣&#xff0c;它用于表示返回的行的序号。使用rownum进行分页查询的方…...

编程日记 2023/11/9 15:33:43

13. 一文快速学懂常用工具——Kubernetes 命令

本章讲解知识点 Kubernetes 基本命令本专栏适合于软件开发刚入职的学生或人士，有一定的编程基础，帮助大家快速掌握工作中必会的工具和指令。本专栏针对面试题答案进行了优化，尽量做到好记、言简意赅。如专栏内容有错漏，欢迎在评论区指出或私聊我更改，一起学习，共同进步。…...

编程日记 2023/11/9 15:32:42

【Linux】shell执行文件清理

#!/usr/bin/env bash ################################################################################# # 程序名称: AutoClearFiles.sh # 创建日期: 2022-11-16 # 作者: evens # 使用说明: …...

编程日记 2023/11/9 15:31:41

Android MotionLayout

MotionLayout exends ConstraintLayout(动画框架 过渡) View动画 API1 属性动画API11 过渡动画API18 root.width RootViewWidth TransitionManager.beginDelayedTransition(view) 过渡动画 可以改变其大小和流畅性 Fade 可以改变透明度 通过TrasitinManager管理 Go:动态替…...

编程日记 2023/11/9 15:30:40

50基于matlab的传统滤波、Butterworth滤波、FIR、移动平均滤波、中值滤波、现代滤波、维纳滤波、自适应滤波、小波变换

基于matlab的传统滤波、Butterworth滤波、FIR、移动平均滤波、中值滤波、现代滤波、维纳滤波、自适应滤波、小波变换&#xff0c;七种滤波方法&#xff0c;可替换自己的数据进行滤波&#xff0c;程序已调通&#xff0c;可直接运行。 50matlabButterworth滤波 (xiaohongshu.com)…...

编程日记 2023/11/9 15:28:36

【2021研电赛】基于深度学习的蛋白质与化合物结合性质预测

本作品介绍参与极术社区的有奖征集|分享研电赛作品扩大影响力&#xff0c;更有重磅电子产品免费领取! 获奖情况&#xff1a;三等奖 1.作品简介 针对药物发现过程中的药物筛选问题&#xff0c;本设计基于深度学习提出新的神经网络结构和数据处理方式用于预测蛋白质与化合物之…...

编程日记 2023/11/9 15:27:35

物联网中的毫米波雷达：连接未来的智能设备

随着物联网&#xff08;IoT&#xff09;技术的飞速发展&#xff0c;连接设备的方式和效能变得越来越重要。毫米波雷达技术作为一种先进的感知技术&#xff0c;正在为物联网设备的连接和智能化提供全新的可能性。本文将深入探讨毫米波雷达在物联网中的应用&#xff0c;以及它是如…...

编程日记 2023/11/9 15:26:34

软件外包开发需求文档编写

软件外包开发需求文档是指导整个外包项目开发流程的关键文件&#xff0c;外包开发需求文档可能还包括修订历史记录、项目术语表、附录等其他有助于项目团队理解和实现需求的信息。它通常包含以下内容&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业…...

编程日记 2023/11/9 15:25:33

Java算法（五）：手写数组逆置API方法，实现数组逆置。 while实现 for循环实现

Java算法&#xff08;五&#xff09; while 循环实现 需求&#xff1a; 已知一个数组&#xff0c;arr {11, 22, 33, 44, 55};使用程序实现把数组中的元素交换位置。 交换后的数组为 arr {55, 44, 33, 22, 11}; 并在控制台输出交换后的数组元素。 代码示例 package com.…...

编程日记 2023/11/9 15:24:32

Vue el-table序号与复选框hover切换

效果图下&#xff1a; <template><div class"container"><el-tableref"multipleTable"id"multipleTable":data"person.tableData"cell-mouse-enter"cellEnter"cell-mouse-leave"cellLeave"selecti…...

编程日记 2023/11/9 15:23:31

【Bug】Access to the path ‘xxx‘ is denied.

文章目录 问题问题代码原因解决拓展处理Bug的具体步骤 问题 exception has been thrown by the target of an invocation.System.UnauthorizedAccessException: Access to the path ‘D:\WebSiteStaging\02Maint\wwwroot\Upload\XXX\Tables\Other\1d2724af-9584-4fee-b828-6f8…...

编程日记 2023/11/9 15:22:29

郑州市管城回族区政协副主席张惠云一行莅临中创算力调研指导工作

为促进企业健康发展&#xff0c;服务管城区企业。2023年11月8日&#xff0c;郑州市管城区政协副主席、工商联主席张惠云带队赴河南中创算力信息科技有限公司进行走访调研。 中创算力董事长许伟威、技术总监刘朝阳陪同考察。此次调研旨在深入了解中创算力的发展情况&#xff0c…...

编程日记 2023/11/9 15:21:28

SAE 2.0，让容器化应用开发更简单

云原生容器化应用托管模式的演变 云原生这个概念从提出&#xff0c;到壮大&#xff0c;再到今天的极大普及&#xff0c;始终处于一个不断演进和革新的过程中。云原生体系下应用的托管形态是随着企业应用架构在不断演进的。最早的应用大多是集中式、单体式的&#xff0c;应用通…...

编程日记 2023/11/9 15:20:27

Apache Storm 2.5.0 单机安装与配置

1、下载storm 2.5.0 2、需要安装python3&#xff0c;并且设置python3的环境变量 3、修改storm.yaml配置 storm.zookeeper.servers:- "node4" # - "server2" # # nimbus.seeds: ["host1", "host2", "host3"] # nimbus…...

编程日记 2023/11/9 15:19:25

4-爬虫-selenium(等待元素加载、元素操作、操作浏览器执行js、切换选项卡、前进后退异常处理)、xpath、动作链

1 selenium等待元素加载 2 selenium元素操作 3 selenium操作浏览器执行js 4 selenium切换选项卡 5 selenium前进后退异常处理 6 登录cnblogs 7 抽屉半自动点赞 8 xpath 9 动作链 10 自动登录12306 上节回顾 # 1 bs4 解析库---》xml(html)-遍历文档树-属性 文本 标签名-搜索文…...

编程日记 2023/11/9 15:18:22

矩阵键盘独立接口设计（Keil+Proteus）

前言 实验&#xff1a;通过4*4的矩阵键盘&#xff0c;按下某个按钮之后会在数码管上面显示对应的键号。&#xff08;0~F&#xff09; 基础操作参考这篇博客&#xff1a; LED数码管的静态显示与动态显示&#xff08;KeilProteus&#xff09;-CSDN博客https://blog.csdn.net/w…...

编程日记 2023/11/9 15:16:19

国产猫罐头可以作为长期主食吗？口碑好的顶级猫罐头推荐

我一直在分析和尝试国产猫罐头&#xff0c;我家猫已经吃了几十款了。今天&#xff0c;我想和大家分享一些关于国产猫罐头的经验和心得。 近年来&#xff0c;国产宠粮市场呈现出爆发趋势&#xff0c;各个猫粮商在配方、营养数据和包装上展开了激烈的角逐&#xff0c;无一不让我…...

编程日记 2023/11/9 15:15:16

大数据毕业设计选题推荐-营业厅营业效能监控平台-Hadoop-Spark-Hive

✨作者主页&#xff1a;IT毕设梦工厂✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Py…...

编程日记 2023/11/9 15:14:15

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计&#xff1a;let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性&#xff0c;这种设计体现了语言的核心哲学。以下是深度解析&#xff1a; 1.1 设计理念剖析 安全优先原则&#xff1a;默认不可变强制开发者明确声明意图 let x 5; …...

编程新知 2025/9/28 20:12:12

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

编程新知 2026/2/10 7:11:42

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源&#xff08;HTML/CSS/图片等&#xff09;&#xff0c;响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址&#xff0c;提高安全性 3.负载均衡服务器 支持多种策略分发流量…...

编程新知 2026/2/8 20:42:56

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销&#xff0c;平衡网络负载&#xff0c;延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...

编程新知 2026/2/6 5:38:46

云启出海，智联未来｜阿里云网络「企业出海」系列客户沙龙上海站圆满落地

借阿里云中企出海大会的东风&#xff0c;以**「云启出海&#xff0c;智联未来&#xff5c;打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办&#xff0c;现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

编程新知 2026/1/30 0:00:28

【HarmonyOS 5.0】DevEco Testing：鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

编程新知 2026/1/28 8:17:53

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

编程新知 2026/1/31 17:09:43

服务器硬防的应用场景都有哪些？

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

编程新知 2025/11/9 19:17:07

JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换 即使单核CPU也可以进行多线程执行代码&#xff0c;CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短&#xff0c;所以CPU会不断地切换线程执行&#xff0c;从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

编程新知 2026/1/31 23:25:09

在Ubuntu24上采用Wine打开SourceInsight

1. 安装wine sudo apt install wine 2. 安装32位库支持，SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库（解决显示问题） sudo apt install fonts-wqy…...

编程新知 2025/10/14 0:47:25