1、创建静态页面
html<!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样式
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
javascriptfunction $(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 = fruitList for(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.fname priceTD.innerText = fruit.price fcountTD.innerText = fruit.fcount operTD.innerHTML="<img class=\"delImg\" src=\"imgs/del.png\"/>" } }) }
4、创建显示水果清单IndexServlet
XML<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>
javapackage 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(); @Override protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { List<Fruit> fruitList = fruitDao.getFruitList(); fruitList.stream().forEach(System.out::println); //java object -> java json string Gson 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加载水果库存系统的首页数据
丁总学Java2023-11-03 21:26
相关推荐
武子康1 小时前
Java-80 深入浅出 RPC Dubbo 动态服务降级:从雪崩防护到配置中心秒级生效YuTaoShao4 小时前
【LeetCode 热题 100】131. 分割回文串——回溯源码_V_saaskw4 小时前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5超浪的晨4 小时前
Java UDP 通信详解:从基础到实战,彻底掌握无连接网络编程双力臂4045 小时前
Spring Boot 单元测试进阶:JUnit5 + Mock测试与切片测试实战及覆盖率报告生成Edingbrugh.南空5 小时前
Aerospike与Redis深度对比:从架构到性能的全方位解析QQ_4376643146 小时前
C++11 右值引用 Lambda 表达式永卿0016 小时前
设计模式-迭代器模式誰能久伴不乏6 小时前
Linux如何执行系统调用及高效执行系统调用:深入浅出的解析慕y2747 小时前
Java学习第七十二部分——Zookeeper