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

项目实战：通过axios加载水果库存系统的首页数据

news 2026/5/28 9:46:11

1、创建静态页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="style/index.css"><script src="script/axios.min.js"></script><script src="script/index.js"></script>
</head>
<body><div id="div0"><div id="div_title"><p>欢迎使用水果库存系统</p></div><div id="div_fruit_table"><table id="fruit_tbl"><tr><th class="w25">名称</th><th class="w25">单价</th><th class="w25">库存</th><th>操作</th></tr><!--<tr><td><a href='edit.html?fid=1'>苹果</a></td><td>5</td><td>100</td><td><img class="delImg" src="imgs/del.png" onclick='delFruit(1)'/></td></tr>--></table></div></div>
</body>
</html>

2、创建首页index.css样式 

.delImg{width:24px;height:24px;
}
body{padding:0;margin:0;background-color: #333333;
}
div{position:relative;float:left;
}
*{color:indigo;
}
#div0{width:80%;margin-left:10%;background-color: aliceblue;padding: 60px 0px;margin-top:20px;border-radius: 8px;
}
#div_title{width:80%;margin-left:10%;
}
#div_title p{text-align: center;font-size:28px;letter-spacing: 8px;
}
#div_fruit_table{width:80%;margin-left:10%;
}
#fruit_tbl{width:88%;margin-left:6%;border:1px solid lightgray;line-height: 32px;border-collapse: collapse;}
#fruit_tbl td , #fruit_tbl th{border:1px solid lightgray;text-align: center;font-weight: lighter;
}
.w25{width:25%;
}

3、通过axios加载数据index.js

function $(key) {if (key) {if (key.startsWith("#")) {key = key.substring(1);return document.getElementById(key);}} else {let nodeList = document.getElementsByName(key);return Array.from(nodeList);}
}
window.onload=function(){loadData();
}
loadData=function(){axios({method:'get',url:'/index'}).then(response=>{let fruitList = response.data//此处使用的是axios，那么响应回来的数据自动就是json，不需要再进行parse(如果是原始的ajax操作，那么一定需要parse)//let fruitArr = JSON.parse(fruitList)let fruitArr = fruitListfor(let i = 0 ; i<fruitArr.length; i++){let fruitTbl = $("#fruit_tbl")let tr = fruitTbl.insertRow()let fnameTD = tr.insertCell()let priceTD = tr.insertCell()let fcountTD = tr.insertCell()let operTD = tr.insertCell()let fruit = fruitArr[i]fnameTD.innerText = fruit.fnamepriceTD.innerText = fruit.pricefcountTD.innerText = fruit.fcountoperTD.innerHTML="<img class=\"delImg\" src=\"imgs/del.png\"/>"}})
}

4、创建显示水果清单IndexServlet

  <dependencies><dependency><groupId>jakarta.servlet</groupId><artifactId>jakarta.servlet-api</artifactId><version>6.0.0</version></dependency><dependency><groupId>com.csdn</groupId><artifactId>pro03-fruit-optimize</artifactId><version>1.0-SNAPSHOT</version></dependency><dependency><groupId>com.google.code.gson</groupId><artifactId>gson</artifactId><version>2.10.1</version></dependency></dependencies>
package com.csdn.fruit.servlet;
import com.csdn.fruit.dao.FruitDao;
import com.csdn.fruit.dao.impl.FruitDaoImpl;
import com.csdn.fruit.pojo.Fruit;
import com.google.gson.Gson;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
@WebServlet("/index")
public class IndexServlet extends HttpServlet {private FruitDao fruitDao = new FruitDaoImpl();@Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {List<Fruit> fruitList = fruitDao.getFruitList();fruitList.stream().forEach(System.out::println);//java object ->  java json stringGson gson = new Gson();String fruitListJsonStr = gson.toJson(fruitList);resp.setCharacterEncoding("UTF-8");resp.setContentType("application/json;charset=utf-8");PrintWriter out = resp.getWriter();out.println(fruitListJsonStr);out.flush();}
}

 

相关文章：

项目实战：通过axios加载水果库存系统的首页数据

1、创建静态页面 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><link rel"stylesheet" href"style/index.css"><script src"script/axios.mi…...

编程日记 2023/11/7 7:25:40

RK3568平台 内存的基本概念

一.Linux的Page Cache page cache&#xff0c;又称pcache&#xff0c;其中文名称为页高速缓冲存储器&#xff0c;简称页高缓。page cache的大小为一页&#xff0c;通常为4K。在linux读写文件时&#xff0c;它用于缓存文件的逻辑内容&#xff0c;从而加快对磁盘上映像和数据的访…...

编程日记 2023/11/7 7:23:38

mysql联合索引和最左匹配问题。

1引言&#xff1a; 如果频繁地使⽤相同的⼏个字段查询&#xff0c;就可以考虑建⽴这⼏个字段的联合索引来提⾼查询效率。⽐如对 于联合索引 test_col1_col2_col3&#xff0c;实际建⽴了 (col1)、(col1, col2)、(col, col2, col3) 三个索引。联合 索引的主要优势是减少结果集数量…...

编程日记 2023/11/7 7:22:37

全球发布｜首个AI视角下的生态系统架构解读—《生态系统架构--人工智能时代从业者的新思维》重磅亮相！

点击可免费注册下载 &#x1f447; 人工智能时代的企业架构师必读系列 《生态系统架构--人工智能时代从业者的新思维》 Philip Tetlow、Neal Fishman、Paul Homan、Rahul著 The Open Group Press 2023年11月出版 这本书可以很好地帮助全球架构师使用人工智能来构建、开发和…...

编程日记 2023/11/7 7:21:36

解决torch.hub.load加载网络模型异常

1 torch.hub.load 加载网络模型错误 通过网络使用torch.hub.load加载模型代码如下&#xff1a; self.model torch.hub.load("facebookresearch/dinov2", dinov2_vits14, sourcegithub).to(self.device) 运行网上的项目&#xff0c;经常会卡住或者超时&#xff0c…...

编程日记 2023/11/7 7:19:33

如何获取HuggingFace的Access Token；如何获取HuggingFace的API Key

Access Token通过编程方式向 HuggingFace 验证您的身份&#xff0c;允许应用程序执行由授予的权限范围&#xff08;读取、写入或管理&#xff09;指定的特定操作。您可以通过以下步骤获取&#xff1a; 1.首先&#xff0c;你需要注册一个 Hugging Face 账号。如果你已经有了账号…...

编程日记 2023/11/7 7:16:31

How to resolve jre-openjdk and jre-openjdk-headless conflicts?

2023-11-05 Archlinux 执行 pacman -Syu 显示 failed to prepare transaction&#xff1b;jre-openjdk and jre-openjdk-headless conflicts 解决 archlinux sudo pacman -Sy jdk-openjdk...

编程日记 2023/11/7 7:14:29

setTimeout和setImmediate以及process.nextTick的区别？

目录 前言 setTimeout 特性和用法 setImmediate 特性和用法 process.nextTick 特性和用法 区别和示例 总结 在Node.js中&#xff0c;setTimeout、setImmediate和process.nextTick是用于调度异步操作的三种不同机制。它们之间的区别在于事件循环中的执行顺序和优先级。…...

编程日记 2023/11/7 7:13:28

read 方法为什么返回 int 类型

在Java的输入流&#xff08;InputStream&#xff09;中&#xff0c;read方法返回int类型的值的原因是为了提供更多的信息和灵活性。虽然这可能看起来有些不直观&#xff0c;但有一些合理的考虑和用途&#xff0c;主要包括以下几点&#xff1a; EOF标志&#xff1a;read方法返回…...

编程日记 2023/11/7 7:12:27

在二维矩阵/数组中查找元素 Leetcode74, Leetcode240

这一类题型中二维数组的元素取值有序变化&#xff0c;因此可以用二分查找法。我们一起来看一下。 一、Leetcode 74 Leetcode 74. 搜索二维矩阵 这道题要在一个二维矩阵中查找元素。该二维矩阵有如下特点&#xff1a; 每行元素 从左到右 按非递减顺序排列。每行的第一个元素 …...

编程日记 2023/11/7 7:10:25

MS35657步进电机驱动器可兼容DRV8824

MS35657 是一款双通道 DMOS 全桥驱动器&#xff0c;可以驱动一个步进电机或者两个直流电机。可兼容DRV8824&#xff08;功能基本一致&#xff0c;管脚不兼容&#xff09;。每个全桥的驱动电流在 24V 电源下可以工作到 1.4A。MS35657 集成了固定关断时间的 PWM 电流校正器&#…...

编程日记 2023/11/7 7:09:24

SQL语句性能优化

1、查询 SQL 尽量不要使用 select *，而是 select 具体字段 反例子： select * from sys_user; 正例子： select id，name from sys_user; 理由如下： 只取需要的字段，节省资源、减少网络开销。select * 进行查询时，很可能就不会使用到覆盖索引了，就会造成回表查询。…...

编程日记 2023/11/7 7:08:23

线性代数之 伪逆矩阵

目录 一、伪逆矩阵 ◼ A的伪逆矩阵与SVD ◼ 用Python代码计算A的伪逆矩阵 ◼ 笔算A的伪逆矩阵 一、伪逆矩阵 ◼ A的伪逆矩阵与SVD 逆矩阵并不总是存在&#xff0c;即使是方阵。然而&#xff0c;对于非正方形矩阵&#xff0c;存在一个伪逆矩阵&#xff0c;也叫摩尔-彭罗斯…...

编程日记 2023/11/7 7:07:22

【3D图像分割】基于Pytorch的VNet 3D 图像分割5（改写数据流篇）

在这篇文章&#xff1a;【3D 图像分割】基于 Pytorch 的 VNet 3D 图像分割2&#xff08;基础数据流篇&#xff09; 的最后&#xff0c;我们提到了&#xff1a; 在采用vent模型进行3d数据的分割训练任务中&#xff0c;输入大小是16*96*96&#xff0c;这个的裁剪是放到Dataset类…...

编程日记 2023/11/7 7:06:20

【漏洞复现】Apache_Shiro_1.2.4_反序列化漏洞(CVE-2016-4437)

感谢互联网提供分享知识与智慧&#xff0c;在法治的社会里&#xff0c;请遵守有关法律法规 文章目录 1.1、漏洞描述1.2、漏洞等级1.3、影响版本1.4、漏洞复现1、基础环境2、漏洞分析3、漏洞验证 说明内容漏洞编号CVE-2016-4437漏洞名称Apache_Shiro_1.2.4_反序列化漏洞漏洞评级…...

编程日记 2023/11/7 7:02:14

Mac连接linux的办法（自带终端和iterm2）

1. 使用Mac自带终端Terminal 1.1 点击右上角的聚焦搜索&#xff0c;再输入终端 1.2 查找linux系统的ip地址 在虚拟机里输入如下命令&#xff0c;找到蓝色区域的就是ip地址 ip addr 如果没有显示ip地址&#xff0c;可以重新安装一下虚拟机&#xff0c;之后确保以太网的连接是打…...

编程日记 2023/11/7 7:01:13

js调整table表格上下相邻元素顺序

有时候我们会遇到要通过箭头控制table表格上下顺序的需求，如下： 点击向下就将该元素下移一位，下面的一位元素就移上来，点击向上就将该元素上移一位，上面的一位元素就移下来，也就是相邻元素互换位置顺序： <el-table :data="targetTable" border style=&quo…...

编程日记 2023/11/7 6:59:11

基于ruoyi框架项目-部署到服务器上

基于ruoyi框架项目-部署到服务器上 文章目录 基于ruoyi框架项目-部署到服务器上1.前端vue编译&#xff0c;后的dist下内容打包&#xff08;前后端分离版本需要&#xff09;2.后端打包成jar包&#xff08;如果是thymeleaf仅需打包jar&#xff09;3.上传到服务器目录下4. docker部…...

编程日记 2023/11/7 6:58:09

Docker 持久化存储和数据共享_Volume

有些容器会自动产生一些数据&#xff0c;为了不让数据随着 container 的消失而消失&#xff0c;保证数据的安全性。例如&#xff1a;数据库容器&#xff0c;数据表的表会产生一些数据&#xff0c;如果我把 container 给删除&#xff0c;数据就丢失。为了保证数据不丢失&#xf…...

编程日记 2023/11/7 6:57:06

万宾科技智能井盖监测仪器助力建设数字化城市

市政公共设施建设在近几年来发展迅速&#xff0c;市政设备的更新换代&#xff0c;资产管理等也成为其中的重要一项。在市政设施建设过程中&#xff0c;井盖也是不可忽视的&#xff0c;一方面&#xff0c;根据传统的管理井盖模式来讲&#xff0c;缺乏有效的远程监控管理方法和手…...

编程日记 2023/11/7 6:56:05

AI智能体架构设计：从成本黑洞到价值引擎的解耦之道

1. 从成本黑洞到价值引擎&#xff1a;为什么你的AI智能体架构正在吞噬预算又到了季度技术复盘会&#xff0c;财务那边递过来的云账单和工程人力成本&#xff0c;是不是又让你倒吸一口凉气&#xff1f;你看着报表上那个名为“AI智能体平台”的项目&#xff0c;它的资源消耗曲线几…...

编程新知 2026/5/26 5:04:27

AMLP：基于大语言模型的自动化机器学习势函数构建平台

1. 项目概述&#xff1a;当AI遇见原子模拟&#xff0c;AMLP如何重塑机器学习势函数构建在计算材料科学和化学物理领域&#xff0c;分子动力学模拟是我们窥探微观世界动态行为的“显微镜”。无论是研究新材料的相变过程&#xff0c;还是探索生物大分子的折叠机制&#xff0c;其核…...

编程新知 2026/5/26 3:20:00

癫痫手术精准定位：基于脑电信号昼夜节律与多生物标志物的机器学习分析框架

1. 项目概述&#xff1a;当机器学习遇见脑电信号&#xff0c;如何让癫痫手术更精准&#xff1f;作为一名长期耕耘在生物医学信号处理与机器学习交叉领域的工程师&#xff0c;我常常思考如何将算法模型从实验室的“玩具”变成临床医生手中可靠的“手术刀”。癫痫&#xff0c;这个…...

编程新知 2026/5/26 3:15:58

从电磁炉到户外电源：拆解单相SVPWM如何让你的逆变器更安静、更高效

从电磁炉到户外电源&#xff1a;单相SVPWM如何实现静音与高效的双重突破当你深夜用电磁炉煮面时&#xff0c;是否曾被突然的蜂鸣声吓一跳&#xff1f;或是发现户外电源给设备充电时&#xff0c;散热风扇的噪音盖过了山林鸟鸣&#xff1f;这些常见问题背后&#xff0c;隐藏着一个…...

编程新知 2026/5/26 2:31:36

警惕！AI正在悄悄重构全球攻防格局

警惕&#xff01;AI 正在悄悄重构全球攻防格局 热点聚焦 AI重构网络安全&#xff1a;全球巨头加速布局 2026年5月&#xff0c;全球网络安全领域迎来重大变革&#xff0c;AI技术正在重塑攻防格局。OpenAI发布专为网络安全防御打造的集成化AI平台Daybreak&#xff0c;将安全防…...

编程新知 2026/5/26 0:48:33

别再只测accuracy！DeepSeek集成测试必须监控的5个隐性指标（P99首token延迟、context bleed率、tool-call schema漂移）

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;DeepSeek集成测试的核心范式演进 DeepSeek大模型的工程化落地对集成测试提出了全新挑战&#xff1a;传统基于接口响应码与字段校验的测试范式已难以覆盖语义一致性、推理链鲁棒性、上下文敏感度等高阶质…...

编程新知 2026/5/26 0:42:31

收藏干货｜2026 版企业 AI 落地实操指南，程序员小白入门避坑必备

如今人工智能早已脱离概念炒作阶段&#xff0c;全面扎根企业实际业务场景&#xff0c;成为技术从业者与企业管理者无法回避的发展课题。各行各业都加速布局AI赛道&#xff0c;行业心态也从初期观望试探&#xff0c;彻底转变为实打实的落地攻坚。 不少企业高层主动牵头统筹AI规划…...

编程新知 2026/5/25 22:06:17

开源ELM327 OBD-II适配器：从硬件设计到多协议固件实现全解析

1. 项目概述&#xff1a;开源ELM327 OBD适配器如果你对汽车诊断、数据监控或者嵌入式开发感兴趣&#xff0c;那么自己动手做一个OBD-II适配器绝对是个能让你学到很多东西的硬核项目。今天要聊的&#xff0c;就是一个完全开源的、基于NXP LPC1517微控制器的ELM327兼容OBD适配器。…...

编程新知 2026/5/25 21:48:00

别再只用鼠标了！用Leap Motion手势控制Unity游戏，保姆级配置避坑指南（2024版）

2024年Unity手势交互开发实战&#xff1a;Leap Motion从配置到游戏逻辑全解析在游戏开发领域&#xff0c;交互方式的创新往往能带来全新的体验。想象一下&#xff0c;玩家不再需要键盘鼠标&#xff0c;仅凭自然的手部动作就能操控游戏角色——这正是Leap Motion手势识别技术为U…...

编程新知 2026/5/25 20:49:10

3分钟上手：NBTExplorer终极指南 - 可视化编辑Minecraft游戏数据的免费神器

3分钟上手&#xff1a;NBTExplorer终极指南 - 可视化编辑Minecraft游戏数据的免费神器 【免费下载链接】NBTExplorer A graphical NBT editor for all Minecraft NBT data sources 项目地址: https://gitcode.com/gh_mirrors/nb/NBTExplorer 你是否曾经想要修改Minecraf…...

编程新知 2026/5/25 17:26:09