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

Web APIs——综合案例

news 2026/1/26 5:33:26

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

Spark 之 入门讲解详细版（1）

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

编程新知 2026/1/20 11:25:43

进程地址空间（比特课总结）

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

编程新知 2025/11/15 6:48:52

Leetcode 3576. Transform Array to All Equal Elements

Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接&#xff1a;3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到&#xf…...

编程新知 2025/9/17 7:25:07

多模态商品数据接口：融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

编程新知 2025/7/23 3:55:49

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

编程新知 2026/1/20 21:05:22

AI书签管理工具开发全记录（十九）：嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

编程新知 2026/1/25 9:51:23

【Java学习笔记】BigInteger 和 BigDecimal 类

BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点&#xff1a;传参类型必须是类对象 一、BigInteger 1. 作用&#xff1a;适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...

编程新知 2025/11/8 15:39:00

【Android】Android 开发 ADB 常用指令

查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...

编程新知 2025/11/18 18:31:30

日常一水C

多态 言简意赅&#xff1a;就是一个对象面对同一事件时做出的不同反应 而之前的继承中说过&#xff0c;当子类和父类的函数名相同时&#xff0c;会隐藏父类的同名函数转而调用子类的同名函数&#xff0c;如果要调用父类的同名函数&#xff0c;那么就需要对父类进行引用&#…...

编程新知 2025/9/30 22:37:58

如何应对敏捷转型中的团队阻力

应对敏捷转型中的团队阻力需要明确沟通敏捷转型目的、提升团队参与感、提供充分的培训与支持、逐步推进敏捷实践、建立清晰的奖励和反馈机制。其中&#xff0c;明确沟通敏捷转型目的尤为关键&#xff0c;团队成员只有清晰理解转型背后的原因和利益&#xff0c;才能降低对变化的…...

编程新知 2026/1/20 23:05:20