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

1、创建静态页面

    
    
    
    
    


  

    

      
欢迎使用水果库存系统
    
    

      

        

          
名称
          
单价
          
库存
          
操作
        
        
      
    
  

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 = fruitList
        for(let i = 0 ; i"
        }
    })
}

4、创建显示水果清单IndexServlet

  
    
      jakarta.servlet
      jakarta.servlet-api
      6.0.0
    

    
      com.csdn
      pro03-fruit-optimize
      1.0-SNAPSHOT
    

    
      com.google.code.gson
      gson
      2.10.1
    
  

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();
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        List 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();
    }
}