项目实战：通过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.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…...
RK3568平台 内存的基本概念
一.Linux的Page Cache page cache，又称pcache，其中文名称为页高速缓冲存储器，简称页高缓。page cache的大小为一页，通常为4K。在linux读写文件时，它用于缓存文件的逻辑内容，从而加快对磁盘上映像和数据的访…...
mysql联合索引和最左匹配问题。
1引言： 如果频繁地使⽤相同的⼏个字段查询，就可以考虑建⽴这⼏个字段的联合索引来提⾼查询效率。⽐如对 于联合索引 test_col1_col2_col3，实际建⽴了 (col1)、(col1, col2)、(col, col2, col3) 三个索引。联合 索引的主要优势是减少结果集数量…...
全球发布｜首个AI视角下的生态系统架构解读—《生态系统架构--人工智能时代从业者的新思维》重磅亮相！
点击可免费注册下载 👇 人工智能时代的企业架构师必读系列 《生态系统架构--人工智能时代从业者的新思维》 Philip Tetlow、Neal Fishman、Paul Homan、Rahul著 The Open Group Press 2023年11月出版 这本书可以很好地帮助全球架构师使用人工智能来构建、开发和…...
解决torch.hub.load加载网络模型异常
1 torch.hub.load 加载网络模型错误 通过网络使用torch.hub.load加载模型代码如下： self.model torch.hub.load("facebookresearch/dinov2", dinov2_vits14, sourcegithub).to(self.device) 运行网上的项目，经常会卡住或者超时，…...
如何获取HuggingFace的Access Token；如何获取HuggingFace的API Key
Access Token通过编程方式向 HuggingFace 验证您的身份，允许应用程序执行由授予的权限范围（读取、写入或管理）指定的特定操作。您可以通过以下步骤获取： 1.首先，你需要注册一个 Hugging Face 账号。如果你已经有了账号…...
How to resolve jre-openjdk and jre-openjdk-headless conflicts?
2023-11-05 Archlinux 执行 pacman -Syu 显示 failed to prepare transaction；jre-openjdk and jre-openjdk-headless conflicts 解决 archlinux sudo pacman -Sy jdk-openjdk...
setTimeout和setImmediate以及process.nextTick的区别？
目录 前言 setTimeout 特性和用法 setImmediate 特性和用法 process.nextTick 特性和用法 区别和示例 总结 在Node.js中，setTimeout、setImmediate和process.nextTick是用于调度异步操作的三种不同机制。它们之间的区别在于事件循环中的执行顺序和优先级。…...
read 方法为什么返回 int 类型
在Java的输入流（InputStream）中，read方法返回int类型的值的原因是为了提供更多的信息和灵活性。虽然这可能看起来有些不直观，但有一些合理的考虑和用途，主要包括以下几点： EOF标志：read方法返回…...
在二维矩阵/数组中查找元素 Leetcode74, Leetcode240
这一类题型中二维数组的元素取值有序变化，因此可以用二分查找法。我们一起来看一下。 一、Leetcode 74 Leetcode 74. 搜索二维矩阵 这道题要在一个二维矩阵中查找元素。该二维矩阵有如下特点： 每行元素 从左到右 按非递减顺序排列。每行的第一个元素 …...
MS35657步进电机驱动器可兼容DRV8824
MS35657 是一款双通道 DMOS 全桥驱动器，可以驱动一个步进电机或者两个直流电机。可兼容DRV8824（功能基本一致，管脚不兼容）。每个全桥的驱动电流在 24V 电源下可以工作到 1.4A。MS35657 集成了固定关断时间的 PWM 电流校正器&#…...
SQL语句性能优化
1、查询 SQL 尽量不要使用 select *，而是 select 具体字段 反例子： select * from sys_user; 正例子： select id，name from sys_user; 理由如下： 只取需要的字段，节省资源、减少网络开销。select * 进行查询时，很可能就不会使用到覆盖索引了，就会造成回表查询。…...
线性代数之 伪逆矩阵
目录 一、伪逆矩阵 ◼ A的伪逆矩阵与SVD ◼ 用Python代码计算A的伪逆矩阵 ◼ 笔算A的伪逆矩阵 一、伪逆矩阵 ◼ A的伪逆矩阵与SVD 逆矩阵并不总是存在，即使是方阵。然而，对于非正方形矩阵，存在一个伪逆矩阵，也叫摩尔-彭罗斯…...
【3D图像分割】基于Pytorch的VNet 3D 图像分割5（改写数据流篇）
在这篇文章：【3D 图像分割】基于 Pytorch 的 VNet 3D 图像分割2（基础数据流篇） 的最后，我们提到了： 在采用vent模型进行3d数据的分割训练任务中，输入大小是16*96*96，这个的裁剪是放到Dataset类…...
【漏洞复现】Apache_Shiro_1.2.4_反序列化漏洞(CVE-2016-4437)
感谢互联网提供分享知识与智慧，在法治的社会里，请遵守有关法律法规 文章目录 1.1、漏洞描述1.2、漏洞等级1.3、影响版本1.4、漏洞复现1、基础环境2、漏洞分析3、漏洞验证 说明内容漏洞编号CVE-2016-4437漏洞名称Apache_Shiro_1.2.4_反序列化漏洞漏洞评级…...
Mac连接linux的办法（自带终端和iterm2）
1. 使用Mac自带终端Terminal 1.1 点击右上角的聚焦搜索，再输入终端 1.2 查找linux系统的ip地址 在虚拟机里输入如下命令，找到蓝色区域的就是ip地址 ip addr 如果没有显示ip地址，可以重新安装一下虚拟机，之后确保以太网的连接是打…...
js调整table表格上下相邻元素顺序
有时候我们会遇到要通过箭头控制table表格上下顺序的需求，如下： 点击向下就将该元素下移一位，下面的一位元素就移上来，点击向上就将该元素上移一位，上面的一位元素就移下来，也就是相邻元素互换位置顺序： <el-table :data="targetTable" border style=&quo…...
基于ruoyi框架项目-部署到服务器上
基于ruoyi框架项目-部署到服务器上 文章目录 基于ruoyi框架项目-部署到服务器上1.前端vue编译，后的dist下内容打包（前后端分离版本需要）2.后端打包成jar包（如果是thymeleaf仅需打包jar）3.上传到服务器目录下4. docker部…...
Docker 持久化存储和数据共享_Volume
有些容器会自动产生一些数据，为了不让数据随着 container 的消失而消失，保证数据的安全性。例如：数据库容器，数据表的表会产生一些数据，如果我把 container 给删除，数据就丢失。为了保证数据不丢失…...
万宾科技智能井盖监测仪器助力建设数字化城市
市政公共设施建设在近几年来发展迅速，市政设备的更新换代，资产管理等也成为其中的重要一项。在市政设施建设过程中，井盖也是不可忽视的，一方面，根据传统的管理井盖模式来讲，缺乏有效的远程监控管理方法和手…...
未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？
编辑：陈萍萍的公主一点人工一点智能 未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战，在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...
变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析
一、变量声明设计：let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性，这种设计体现了语言的核心哲学。以下是深度解析： 1.1 设计理念剖析 安全优先原则：默认不可变强制开发者明确声明意图 let x 5; …...
linux之kylin系统nginx的安装
一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源（HTML/CSS/图片等），响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址，提高安全性 3.负载均衡服务器 支持多种策略分发流量…...
django filter 统计数量 按属性去重
在Django中，如果你想要根据某个属性对查询集进行去重并统计数量，你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求： 方法1：使用annotate()和Count 假设你有一个模型Item，并且你想…...
Java - Mysql数据类型对应
Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...
【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分
一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计，提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合：各模块职责清晰，便于独立开发…...
智能分布式爬虫的数据处理流水线优化：基于深度强化学习的数据质量控制
在数字化浪潮席卷全球的今天，数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具，在大规模数据获取中发挥着关键作用。然而，传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时，常出现数据质…...
大语言模型（LLM）中的KV缓存压缩与动态稀疏注意力机制设计
随着大语言模型（LLM）参数规模的增长，推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长，而KV缓存的内存消耗可能高达数十GB（例如Llama2-7B处理100K token时需50GB内存&a…...
：观察者模式)
JS设计模式(4)：观察者模式
JS设计模式(4):观察者模式 一、引入 在开发中，我们经常会遇到这样的场景：一个对象的状态变化需要自动通知其他对象，比如： 电商平台中，商品库存变化时需要通知所有订阅该商品的用户；新闻网站中࿰…...
推荐 github 项目:GeminiImageApp(图片生成方向，可以做一定的素材)
推荐 github 项目:GeminiImageApp(图片生成方向，可以做一定的素材) 这个项目能干嘛? 使用 gemini 2.0 的 api 和 google 其他的 api 来做衍生处理 简化和优化了文生图和图生图的行为(我的最主要) 并且有一些目标检测和切割(我用不到) 视频和 imagefx 因为没 a…...