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

    • axios会自动将响应的数据解析为js对象，所以不需要手动将json字符串解析为js对象，不需要再进行parse(如果是原始的ajax操作，那么一定需要parse)

    • ​​​​​​​

    1、创建静态页面

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     <link rel="stylesheet" href="style/index.css">
    7.     <script src="script/axios.min.js">script>
    8.     <script src="script/index.js">script>
    9. head>
    10. <body>
    11.   <div id="div0">
    12.     <div id="div_title">
    13.       <p>欢迎使用水果库存系统p>
    14.     div>
    15.     <div id="div_fruit_table">
    16.       <table id="fruit_tbl">
    17.         <tr>
    18.           <th class="w25">名称th>
    19.           <th class="w25">单价th>
    20.           <th class="w25">库存th>
    21.           <th>操作th>
    22.         tr>
    23.         
    24.       table>
    25.     div>
    26.   div>
    27. body>
    28. html>

    2、创建首页index.css样式 

    1. .delImg{
    2.     width:24px;
    3.     height:24px;
    4. }
    5. body{
    6.     padding:0;
    7.     margin:0;
    8.     background-color: #333333;
    9. }
    10. div{
    11.     position:relative;
    12.     float:left;
    13. }
    14. *{
    15.     color:indigo;
    16. }
    17. #div0{
    18.     width:80%;
    19.     margin-left:10%;
    20.     background-color: aliceblue;
    21.     padding: 60px 0px;
    22.     margin-top:20px;
    23.     border-radius: 8px;
    24. }
    25. #div_title{
    26.     width:80%;
    27.     margin-left:10%;
    28. }
    29. #div_title p{
    30.     text-align: center;
    31.     font-size:28px;
    32.     letter-spacing: 8px;
    33. }
    34. #div_fruit_table{
    35.     width:80%;
    36.     margin-left:10%;
    37. }
    38. #fruit_tbl{
    39.     width:88%;
    40.     margin-left:6%;
    41.     border:1px solid lightgray;
    42.     line-height: 32px;
    43.     border-collapse: collapse;
    44.  
    45. }
    46. #fruit_tbl td , #fruit_tbl th{
    47.     border:1px solid lightgray;
    48.     text-align: center;
    49.     font-weight: lighter;
    50. }
    51. .w25{
    52.     width:25%;
    53. }

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

    1. function $(key) {
    2.     if (key) {
    3.         if (key.startsWith("#")) {
    4.             key = key.substring(1);
    5.             return document.getElementById(key);
    6.         }
    7.     } else {
    8.         let nodeList = document.getElementsByName(key);
    9.         return Array.from(nodeList);
    10.     }
    11. }
    12. window.onload=function(){
    13.     loadData();
    14. }
    15. loadData=function(){
    16.     axios({
    17.         method:'get',
    18.         url:'/index'
    19.     }).then(response=>{
    20.         let fruitList = response.data
    21.         //此处使用的是axios，那么响应回来的数据自动就是js对象，不需要再进行parse(如果是原始的ajax操作，那么一定需要parse)
    22.         //let fruitArr = JSON.parse(fruitList)
    23.         let fruitArr = fruitList
    24.         for(let i = 0 ; ilength; i++){
    25.             let fruitTbl = $("#fruit_tbl")
    26.             let tr = fruitTbl.insertRow()
    27.             let fnameTD = tr.insertCell()
    28.             let priceTD = tr.insertCell()
    29.             let fcountTD = tr.insertCell()
    30.             let operTD = tr.insertCell()
    31.  
    32.             let fruit = fruitArr[i]
    33.             fnameTD.innerText = fruit.fname
    34.             priceTD.innerText = fruit.price
    35.             fcountTD.innerText = fruit.fcount
    36.             operTD.innerHTML=""
    37.         }
    38.     })
    39. }

    4、创建显示水果清单IndexServlet

    1.   <dependencies>
    2.     <dependency>
    3.       <groupId>jakarta.servletgroupId>
    4.       <artifactId>jakarta.servlet-apiartifactId>
    5.       <version>6.0.0version>
    6.     dependency>
    7.  
    8.     <dependency>
    9.       <groupId>com.csdngroupId>
    10.       <artifactId>pro03-fruit-optimizeartifactId>
    11.       <version>1.0-SNAPSHOTversion>
    12.     dependency>
    13.  
    14.     <dependency>
    15.       <groupId>com.google.code.gsongroupId>
    16.       <artifactId>gsonartifactId>
    17.       <version>2.10.1version>
    18.     dependency>
    19.   dependencies>
    1. package com.csdn.fruit.servlet;
    2. import com.csdn.fruit.dao.FruitDao;
    3. import com.csdn.fruit.dao.impl.FruitDaoImpl;
    4. import com.csdn.fruit.pojo.Fruit;
    5. import com.google.gson.Gson;
    6. import jakarta.servlet.ServletException;
    7. import jakarta.servlet.annotation.WebServlet;
    8. import jakarta.servlet.http.HttpServlet;
    9. import jakarta.servlet.http.HttpServletRequest;
    10. import jakarta.servlet.http.HttpServletResponse;
    11. import java.io.IOException;
    12. import java.io.PrintWriter;
    13. import java.util.List;
    14. @WebServlet("/index")
    15. public class IndexServlet extends HttpServlet {
    16.     private FruitDao fruitDao = new FruitDaoImpl();
    17.     @Override
    18.     protected void service(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {
    19.  
    20.         List fruitList = fruitDao.getFruitList();
    21.         //在控制台打印
    22.         fruitList.stream().forEach(System.out::println);
    23.  
    24.         //java object ->  java json string
    25.         Gson gson = new Gson();
    26.         String fruitListJsonStr = gson.toJson(fruitList);
    27.  
    28.         resp.setCharacterEncoding("UTF-8");
    29.         resp.setContentType("application/json;charset=utf-8");
    30.         PrintWriter out = resp.getWriter();
    31.         out.println(fruitListJsonStr);
    32.         out.flush();
    33.     }
    34. }

     

     

  • 相关阅读:
    分布式领域最重要的一篇论文，到底讲了什么？
    python实现简单的三维建模学习记录
    Shell脚本
    Web服务（Web Service）
    python--scrapy 保存数据到 mongodb
    Hive的基本SQL操作（DDL篇）
    geotools实现坐标系转换
    AWS云服务器EC2实例实现ByConity快速部署
    CTF入门指南
    01-初识HTML
  • 原文地址：https://blog.csdn.net/m0_65152767/article/details/134187606