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

news2024/11/16 9:46:23

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 = 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

  <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();
    @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();
    }
}