项目实战:通过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 = 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();
    }
}

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/115762.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

手把手创建Android应用程序·案例程序分析

目录 1. Activity 组件 MainActivity 类 2.布局文件activity_main. xml 3.应用程序配置文件 AndroidManifest.xml 4. Android的应用程序组件 4.1 Activity——活动 4.2 Service——服务 4.3 Broadcast receiver——广播接收器 4.4 Content provider——内容提供者…

React 项目结构小结

React 项目结构小结 简单的记录一下目前 React 项目用的依赖和实现 摸索了大半年了大概构建一套用起来还算轻松的体系……&#xff1f;基本上应该是说可以应对大部分的项目了 使用的依赖 目前项目还在 refactoring 的阶段&#xff0c;所以乱得很&#xff0c;这里是新建一个…

【使用Python编写游戏辅助工具】第一篇:概述

引言 欢迎阅读本系列文章&#xff0c;本系列将带领读者朋友们使用Python来实现一个简单而有趣的游戏辅助工具。 写这个系列的缘由源自笔者玩了一款游戏。正巧&#xff0c;笔者对Python编程算是有一定的熟悉&#xff0c;且Python语言具备实现各种有趣功能的能力&#xff0c;因…

基于单片机的可穿戴个人健康监测仪-智能手环

收藏和点赞&#xff0c;您的关注是我创作的动力 文章目录 概要 一、方案的设计与论证2.1设计任务及要求2.2 模块技术和方法综述2.3 设计可能遇到的困难 二、 系统总体框架3.1 硬件设计 三 软件部分4.1 主程序流程框 四、 结论五、 文章目录 概要 近几年智能化的不断发展&#…

3000 台 Apache ActiveMQ 服务器易受 RCE 攻击

超过三千个暴露在互联网上的 Apache ActiveMQ 服务器容易受到最近披露的关键远程代码执行 (RCE) 漏洞的影响。 Apache ActiveMQ 是一个可扩展的开源消息代理&#xff0c;可促进客户端和服务器之间的通信&#xff0c;支持 Java 和各种跨语言客户端以及许多协议&#xff0c;包括…

HiveSQL中last_value函数的应用

一、背景 在以下数据中如何实现对每一个列按照更新时间取最新的非null值&#xff1f; 1 a a null 202301 202301 1 b b null null 202302 1 null c null null 202303 1 d null null null 202304如何实现…

Nginx的location优先级和重定向

Nginx的location有优先级级和匹配方式&#xff1a; 在http模块有server,在server模块才有location,location匹配的是uri /test /image 在一个server当中有多个location,如何来确定匹配哪个location。 Nginx的正则表达式&#xff1a; ^:字符串的起始位置 $:字符串的结束位…

Spring Boot 常见面试题

目录 1.Spring Boot 快速入门什么是 Spring Boot&#xff1f;有什么优点&#xff1f;Spring Boot 与 Spring MVC 有什么区别&#xff1f;Spring 与 Spring Boot 有什么关系&#xff1f;✨什么是 Spring Boot Starters?Spring Boot 支持哪些内嵌 Servlet 容器&#xff1f;如何设…

【Excel密码】四个方法,设置excel表格只读模式

Excel文件想要设置成只读模式&#xff0c;其实很简单&#xff0c;今天给大家分享四个excel设置只读模式的方法。 方法一&#xff1a;文件属性 右键点击文件&#xff0c;查看文件属性&#xff0c;在属性界面&#xff0c;勾选上只读属性就可以了。 方法二&#xff1a;始终以只读…

微信-Native支付(扫二维码支付)工具类 2023最新保姆教程

0、照着微信开发文档 取到证书、秘钥等 好几个key 1、获取商户号merchantId 账户中心->商户信息->微信支付商户号 3、获取商户证书序列号merchantSerialNumber 账户中心->API安全->API证书管理 5、获取appID 产品中心->AppID账号管理 1、这个链接教你获取各…

基于卷积神经网络的抗压强度预测,基于卷积神经网络的抗折强度预测

目录 背影 卷积神经网络CNN的原理 卷积神经网络CNN的定义 卷积神经网络CNN的神经元 卷积神经网络CNN的激活函数 卷积神经网络CNN的传递函数 卷积神经网络CNN抗压强度预测 完整代码:基于卷积神经网络的抗压强度和抗折强度预测,基于CNN的抗压强度和抗折强度预测(代码完整,数据…

CAN报文的信号和信号组传递的意义

CAN将数据发送到COM层&#xff0c;在这个过程中报文是如何传递的&#xff1f; 0x105指的是一帧CAN报文&#xff0c;信号组指的是一帧CAN报文里的所有数据&#xff0c;信号指的是一帧CAN报文里的每一个信号&#xff0c;PDU代表了一帧CAN报文&#xff0c;它由报文ID&#xff08;I…

MySQL(7):单行函数

不同DBMS函数的差异 内置函数&#xff1a; 系统内置的通用函数。 自定义函数&#xff1a; 根据自己的需要编写的函数。 大多数 DBMS 使用&#xff08;||&#xff09;或者&#xff08;&#xff09;来做拼接符&#xff0c;而在 MySQL 中的字符串拼接函数为concat()。 大部分 D…

Kafka(二)消息系统设计

文章目录 前言整体设计时序图时序图解释 最后 前言 当多个系统之间通过Kafka来解耦时&#xff0c;在系统设计初期&#xff0c;基本的要求都是相似的&#xff0c;只不过是消费消息时的业务逻辑可能不同。 本文以业务系统和邮件系统解耦作为示例。业务系统需要发送邮件时&#…

后端接口接收对象和文件集合,formdata传递数组对象

0 问题 后端接口需要接收前端传递过来的对象和文件集合&#xff1b;对象中存在数组对象 1 前端和后端 前端只能使用formdata来传递参数&#xff0c;后端不使用RequestBody注解 2 formdata传递数组对象 2.1 多个参数对象数组 addForm: {contactInfo: [{contactPerson: ,…

黑客入门 15 个必杀技能!

互联网新兴技术不断涌现&#xff0c;在给人类带来巨大财富和便捷的同时&#xff0c;也带来了非常严峻的网络安全问题。 侵害个人隐私、侵犯知识产权、网络犯罪等时有发生&#xff0c;网络监听、网络攻击、网络恐怖主义活动等成为**全球公害。 习主席在全国网络安全和信息化工…

[Docker]四.Docker部署nodejs项目,部署Mysql,部署Redis,部署Mongodb

一.部署nodejs项目,映射端口,挂载数据卷 可以到https://hub.docker.com/去搜索node镜像,然后下载,也可以直接通过docker pull node下载镜像,然后用这个node镜像启动容器node,这样系统就集成了node服务了,在这里挂载www/node目录到容器中,并指定端口映射,运行nodejs程序,安装npm…

PMIC、电源管理MAX77646ANP、MAX77647AANP、MAX77675AEWE、MAX77847AEWL DC-DC 开关稳压器

一、MAX77646ANP、MAX77647AANP 低IQ SIMO PMIC支持原电池应用的1.8V工作电压 MAX77646/MAX77647为尺寸和效率至关重要的低功耗应用提供电源解决方案。该IC集成单电感多输出(SIMO)降压/升压稳压器&#xff0c;可通过单个电感提供三个可独立编程的电源轨&#xff0c;尽可能地减…

原地封神!一个只用套模板即可制作电子相册的网站

对于忙碌的年轻人来说&#xff0c;一键操作的模板意味着无需复杂的操作步骤&#xff0c;就能轻松制作出精美的电子相册。 但是一个好的工具也是事关重要&#xff0c;最近发现了一款非常适合年轻人的模板---FLBOOK在线制作电子杂志平台&#xff0c;只需要找到合适的模板即可制作…

计算虚拟化2——内存虚拟化

目录 物理机内存访问过程 虚拟地址VA和物理地址PA概念 MUU实现VA到PA所使用的映射表 内存虚拟化类型 内存软件辅助虚拟化 内存硬件辅助虚拟化 内存虚拟化-内存超分配 内存共享 内存置换 内存气泡 物理机内存访问过程 内存的基本知识 内存都是从物理地址0开始的&…