【Spring项目】图书管理系统
阿华代码，不是逆风，就是我疯
你们的点赞收藏是我前进最大的动力！！
希望本文内容能够帮助到你！！
目录
一：项目实现准备
1：需求
（1）登录
2：准备工作
二：约定前后端交互接口
1：需求分析
（1） 账号密码校验接⼝
（2）图书列表
2：接口定义
（1）登录接⼝
（2）图书列表
3：字段说明
三：服务器代码实现
1：创建图书类BookInfo
2：创建UserController
3： 创建模拟（dao）包
四：完善前端代码
1：添加登录处理逻辑
2：删除代码
3：完善获取图书方法
五：测试
一：项目实现准备
1：需求
（1）登录
⽤⼾输⼊账号,密码完成登录功能
（2） 列表展⽰
展⽰图书
2：准备工作
放入前端代码，注：代码顺序如下，js，css，picture自行准备
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>添加图书</title><link rel="stylesheet" href="css/bootstrap.min.css"><link rel="stylesheet" href="css/add.css"></head><body><div class="container"><div class="form-inline"><h2 style="text-align: left; margin-left: 10px;"><svg xmlns="http://www.w3.org/2000/svg" width="40"fill="#17a2b8" class="bi bi-book-half" viewBox="0 0 16 16"><pathd="M8.5 2.687c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z" /></svg><span>添加图书</span></h2></div><form id="addBook"><div class="form-group"><label for="bookName">图书名称:</label><input type="text" class="form-control" placeholder="请输入图书名称" id="bookName" name="bookName"></div><div class="form-group"><label for="bookAuthor">图书作者</label><input type="text" class="form-control" placeholder="请输入图书作者" id="bookAuthor" name="author" /></div><div class="form-group"><label for="bookStock">图书库存</label><input type="text" class="form-control" placeholder="请输入图书库存" id="bookStock" name="count"/></div><div class="form-group"><label for="bookPrice">图书定价：</label><input type="number" class="form-control" placeholder="请输入价格" id="bookPrice" name="price"></div><div class="form-group"><label for="bookPublisher">出版社</label><input type="text" id="bookPublisher" class="form-control" placeholder="请输入图书出版社" name="publish" /></div><div class="form-group"><label for="bookStatus">图书状态</label><select class="custom-select" id="bookStatus" name="status"><option value="1" selected>可借阅</option><option value="2">不可借阅</option></select></div><div class="form-group" style="text-align: right"><button type="button" class="btn btn-info btn-lg" onclick="add()">确定</button><button type="button" class="btn btn-secondary btn-lg" onclick="javascript:history.back()">返回</button></div></form></div><script type="text/javascript" src="js/jquery.min.js"></script><script>function add() {alert("添加成功");location.href = "book_list.html";}</script>
</body></html><!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图书列表展示</title><link rel="stylesheet" href="css/bootstrap.min.css"><link rel="stylesheet" href="css/list.css"><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/bootstrap.min.js"></script><script src="js/jq-paginator.js"></script></head><body><div class="bookContainer"><h2>图书列表展示</h2><div class="navbar-justify-between"><div><button class="btn btn-outline-info" type="button" onclick="location.href='book_add.html'">添加图书</button><button class="btn btn-outline-info" type="button" onclick="batchDelete()">批量删除</button></div></div><table><thead><tr><td>选择</td><td class="width100">图书ID</td><td>书名</td><td>作者</td><td>数量</td><td>定价</td><td>出版社</td><td>状态</td><td class="width200">操作</td></tr></thead><tbody><tr><td><input type="checkbox" name="selectBook" value="1" id="selectBook" class="book-select"></td><td>1</td><td>大秦帝国第一册</td><td>我是作者</td><td>23</td><td>33.00</td><td>北京出版社</td><td>可借阅</td><td><div class="op"><a href="book_update.html?bookId=1">修改</a><a href="javascript:void(0)" onclick="deleteBook(1)">删除</a></div></td></tr><tr><td><input type="checkbox" name="selectBook" value="1" id="selectBook" class="book-select"></td><td>2</td><td>大秦帝国第二册</td><td>我是作者</td><td>23</td><td>33.00</td><td>北京出版社</td><td>可借阅</td><td><div class="op"><a href="book_update.html?bookId=2">修改</a><a href="javascript:void(0)" onclick="deleteBook(2)">删除</a></div></td></tr><tr><td><input type="checkbox" name="selectBook" value="1" id="selectBook" class="book-select"></td><td>3</td><td>大秦帝国第三册</td><td>我是作者</td><td>23</td><td>33.00</td><td>北京出版社</td><td>可借阅</td><td><div class="op"><a href="book_update.html?bookId=3">修改</a><a href="javascript:void(0)" onclick="deleteBook(3)">删除</a></div></td></tr><tr><td><input type="checkbox" name="selectBook" value="1" id="selectBook" class="book-select"></td><td>4</td><td>大秦帝国第四册</td><td>我是作者</td><td>23</td><td>33.00</td><td>北京出版社</td><td>可借阅</td><td><div class="op"><a href="book_update.html?bookId=4">修改</a><a href="javascript:void(0)" onclick="deleteBook(4)">删除</a></div></td></tr></tbody></table><div class="demo"><ul id="pageContainer" class="pagination justify-content-center"></ul></div><script>getBookList();function getBookList() {}//翻页信息$("#pageContainer").jqPaginator({totalCounts: 100, //总记录数pageSize: 10, //每页的个数visiblePages: 5, //可视页数currentPage: 1, //当前页码first: '<li class="page-item"><a class="page-link">首页</a></li>',prev: '<li class="page-item"><a class="page-link" href="javascript:void(0);">上一页<\/a><\/li>',next: '<li class="page-item"><a class="page-link" href="javascript:void(0);">下一页<\/a><\/li>',last: '<li class="page-item"><a class="page-link" href="javascript:void(0);">最后一页<\/a><\/li>',page: '<li class="page-item"><a class="page-link" href="javascript:void(0);">{{page}}<\/a><\/li>',//页面初始化和页码点击时都会执行onPageChange: function (page, type) {console.log("第"+page+"页, 类型:"+type);}});function deleteBook(id) {var isDelete = confirm("确认删除?");if (isDelete) {//删除图书alert("删除成功");}}function batchDelete() {var isDelete = confirm("确认批量删除?");if (isDelete) {//获取复选框的idvar ids = [];$("input:checkbox[name='selectBook']:checked").each(function () {ids.push($(this).val());});console.log(ids);alert("批量删除成功");}}</script></div>
</body></html><!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>修改图书</title><link rel="stylesheet" href="css/bootstrap.min.css"><link rel="stylesheet" href="css/add.css">
</head><body><div class="container"><div class="form-inline"><h2 style="text-align: left; margin-left: 10px;"><svg xmlns="http://www.w3.org/2000/svg" width="40"fill="#17a2b8" class="bi bi-book-half" viewBox="0 0 16 16"><pathd="M8.5 2.687c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z" /></svg><span>修改图书</span></h2></div><form id="updateBook"><input type="hidden" class="form-control" id="bookId" name="id"><div class="form-group"><label for="bookName">图书名称:</label><input type="text" class="form-control" id="bookName" name="bookName"></div><div class="form-group"><label for="bookAuthor">图书作者</label><input type="text" class="form-control" id="bookAuthor" name="author"/></div><div class="form-group"><label for="bookStock">图书库存</label><input type="text" class="form-control" id="bookStock" name="count"/></div><div class="form-group"><label for="bookPrice">图书定价：</label><input type="number" class="form-control" id="bookPrice" name="price"></div><div class="form-group"><label for="bookPublisher">出版社</label><input type="text" id="bookPublisher" class="form-control" name="publish"/></div><div class="form-group"><label for="bookStatus">图书状态</label><select class="custom-select" id="bookStatus" name="status"><option value="1" selected>可借阅</option><option value="2">不可借阅</option></select></div><div class="form-group" style="text-align: right"><button type="button" class="btn btn-info btn-lg" onclick="update()">确定</button><button type="button" class="btn btn-secondary btn-lg" onclick="javascript:history.back()">返回</button></div></form></div><script type="text/javascript" src="js/jquery.min.js"></script><script>function update() {alert("更新成功");location.href = "book_list.html"}</script>
</body></html><!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/bootstrap.min.css"><link rel="stylesheet" href="css/login.css"><script type="text/javascript" src="js/jquery.min.js"></script>
</head><body><div class="container-login"><div class="container-pic"><img src="pic/computer.png" width="350px"></div><div class="login-dialog"><h3>登陆</h3><div class="row"><span>用户名</span><input type="text" name="userName" id="userName" class="form-control"></div><div class="row"><span>密码</span><input type="password" name="password" id="password" class="form-control"></div><div class="row"><button type="button" class="btn btn-info btn-lg" onclick="login()">登录</button></div></div></div><script src="js/jquery.min.js"></script><script>function login() {location.href = "book_list.html";}</script>
</body></html>二：约定前后端交互接口
1：需求分析
后端需要提供两个接⼝
（1） 账号密码校验接⼝
根据输⼊⽤⼾名和密码校验登录是否通过
（2）图书列表
提供图书列表信息
2：接口定义
（1）登录接⼝
[URL]
POST /user/login
[请求参数]
name=admin&password=admin
[响应]
true //账号密码验证成功
false//账号密码验证失败
（2）图书列表
[URL]
POST /book/getList
[请求参数]
⽆
[响应]——JSON的形式返回
返回图书列表
[
{
"id": 1,
"bookName": "活着",
"author": "余华",
"count": 270,
"price": 20,
"publish": "北京⽂艺出版社",
"status": 1,
"statusCN": "可借阅"
},
...
]
3：字段说明
三：服务器代码实现
1：创建图书类BookInfo
@Data
public class BookInfo {private Integer ID;private String bookName;private String author;private Integer num;private BigDecimal price;private String publishName;private Integer status;private String statusCN;
}
2：创建UserController
实现登录验证接⼝
@RequestMapping("/user")
@RestController
public class UserController {@RequestMapping("/login")public String login(String userName , String password , HttpSession session){//1:校验参数if(!StringUtils.hasLength(userName)|| !StringUtils.hasLength(password)){return "用户名或者密码为空";}//2：验证账户和密码if(!"admin".equals(userName) || !"admin".equals(password)){return "账户名错误或密码错误";}//3：返回响应结果return "登录成功";}创建BookController,获取图书列表
@RequestMapping("/book")
@RestController
public class BookController {@Autowiredprivate BookService bookService;//注入依赖@RequestMapping("/getBookList")//mock数据模拟造假数据public List<BookInfo> getBookList(){//BookService bookService = new BookService();List<BookInfo> bookInfos =bookService.getBookList();return bookInfos;}
}3： 创建模拟（dao）包
注：数据采⽤mock的⽅式,实际数据应该从数据库中获取
此处创建⼀个虚拟的对象或者数据样本，⽤来辅助开发或者测试⼯作
在dao包下创建BookDao类
@Configuration
public class BookDao {//数据层，理论上应该从数据库中获取，当前采用mock的方式进行获取public List<BookInfo> mockData(){List<BookInfo> bookInfos = new ArrayList<>();for(int i = 0; i < 15; i++) {BookInfo bookInfo = new BookInfo();bookInfo.setID(i);bookInfo.setBookName("图书"+i);bookInfo.setAuthor("作者"+i);bookInfo.setNum(i*2+1);bookInfo.setPrice(new BigDecimal(i*3));bookInfo.setPublishName("出版社"+i);if (i%5==0){bookInfo.setStatus(2);//bookInfo.setStatusCN("不可借阅");状态信息是业务逻辑放到service中进行处理}else{bookInfo.setStatus(1);//bookInfo.setStatusCN("可借阅");}bookInfos.add(bookInfo);}return bookInfos;}
}
四：完善前端代码
1：添加登录处理逻辑
<script>function login() {//发起ajax请求$.ajax({url: "user/login",type: "post",data: {userName: $("#userName").val(),password: $("#password").val(),},success: function(result){//三种返回的http响应都是成功的if(result === "登录成功"){location.href = "book_list.html";}else{alert(result);}}});}</script>2：删除代码
删除前端伪造的代码，从后端获取数据并渲染到⻚⾯上
<table><thead><tr><td>选择</td><td class="width100">图书ID</td><td>书名</td><td>作者</td><td>数量</td><td>定价</td><td>出版社</td><td>状态</td><td class="width200">操作</td></tr></thead><tbody></tbody></table>3：完善获取图书方法
function getBookList() {$.ajax({url:"/book/getBookList",type: "get",success:function(books){var finnalHtml = "";for(var book of books){//用单引号拼接避免转义finnalHtml += '<tr>';finnalHtml += '<td><input type="checkbox" name="selectBook" value="'+book.id+'" id=" selectBook" class="book-select"></td>';finnalHtml += '<td>'+book.id+'</td>';finnalHtml += '<td>'+book.bookName+'</td>';finnalHtml += '<td>'+book.author+'</td>';finnalHtml += '<td>'+book.num+'</td>';finnalHtml += '<td>'+book.price+'</td>';finnalHtml += '<td>'+book.publishName+'</td>';finnalHtml += '<td>'+book.statusCN+'</td>';finnalHtml += '<td>';finnalHtml += '<div class="op">';finnalHtml += '<a href="book_update.html?bookId='+book.id+'">修改</a>';finnalHtml += '<a href="javascript:void(0)" onclick="deleteBook(4)">删除</a>';finnalHtml += '</div>';finnalHtml += '</td>';finnalHtml += '</tr>';}$("tbody").html(finnalHtml);}});}
五：测试
访问:http://127.0.0.1:8080/login.html,输⼊账号密码:admin，admin,登录成功,跳转到图书列表⻚
界⾯展⽰
相关文章：
【Spring项目】图书管理系统
阿华代码，不是逆风，就是我疯 你们的点赞收藏是我前进最大的动力！！ 希望本文内容能够帮助到你！！ 目录 一：项目实现准备 1：需求 （1）登录 2：准备…...
Vivado ILA数据导出MATLAB分析
目录 ILA数据导出 分析方式一 分析方式二 有时候在系统调试时，数据在VIVADO窗口获取的信息有限，可结合MATLAB对已捕获的数据进行分析处理 ILA数据导出 选择信号，单击右键后，会有export ILA DATA选项，将其保存成CS…...
【开源免费】基于SpringBoot+Vue.JS高校学科竞赛平台（JAVA毕业设计）
博主说明：本文项目编号 T 075 ，文末自助获取源码 \color{red}{T075，文末自助获取源码} T075，文末自助获取源码 目录 一、系统介绍二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行性分析…...
【机器学习】——windows下安装anaconda并在vscode上进行配置
一、安装anaconda 1.进入清华的镜像网站，下载自己电脑对应的anaconda版本。网站：https://repo.anaconda.com/archive/ 这里我下载的版本是anaconda3-2024.10-1-Windows-x86-64 2.下载完毕后开始安装anaconda 3.配置anaconda环境变量 在设置中找到编…...
【H2O2|全栈】Node.js与MySQL连接
目录 前言 开篇语 准备工作 初始配置 创建连接池 操作数据库 封装方法 结束语 前言 开篇语 本节讲解如何使用Node.js实现与MySQL数据库的连接，并将该过程进行函数封装。 与基础部分的语法相比，ES6的语法进行了一些更加严谨的约束和优化&#…...
汽配行业数字化解决方案（一）
汽配行业数字化解决方案，是通过整合云计算、大数据、人工智能、物联网等先进技术，构建一个全面、高效、智能的数字化生态系统，以实现汽配供应链的全程可视化与智能化管理。该解决方案涵盖了从供应商管理、库存优化、订单处理、物流跟踪到客户…...
前端路径“@/“的使用和配置
环境：vitets 需要安装types/node npm install types/node --save-dev在tsconfig.json中添加 如果有tsconfig.app.json和tsconfig.node.json文件，则在app.json中添加 "compilerOptions": {"baseUrl":".","paths&q…...
动态规划子序列问题系列一＞最长递增子序列
题目： 解析： 代码： public int lengthOfLIS(int[] nums) {int n nums.length;int[] dp new int[n];int ret 1;//最坏情况为1//初始化for(int i 0; i < n; i) dp[i] 1;for(int i 1; i < n; i){for(int j 0; j < i-1; j)if(…...
链表头文件大更新！！！
引言 原文章:链表简介及自制链表操作头文件_自己写一个链表头文件-CSDN博客。 此次更新添加了更多功能，让改头文件更 人性化 。 安装教程见原文章。 介绍 linked_list.h 头文件 linked_list.h 是一个 C 头文件，定义了一个模板类 LinkedListÿ…...
力扣3381.长度可被K整除的子数组的最大元素和
力扣3381.长度可被K整除的子数组的最大元素和 题目 题目解析及思路 题目要求返回一段长度为K的倍数的最大子数组和 同余前缀和 代码 class Solution { public:long long maxSubarraySum(vector<int>& nums, int k) {int n nums.size();vector<long long>…...
http.ServeMux多路复用器的设置
package mainimport ("fmt""net/http" )func first(w http.ResponseWriter, r *http.Request) {fmt.Fprintln(w, "多函数-first") }func second(w http.ResponseWriter, r *http.Request) {fmt.Fprintln(w, "多函数-second") }func ma…...
优化器与优化方法：在现代科学与工程中的应用
目录 编辑 优化器：机器学习中的参数调整 1. 梯度下降系列 2. 动量法（Momentum） 3. Adagrad 4. RMSprop 5. Adam 优化方法：寻找系统最优解 线性规划 非线性规划 凸优化 非凸优化 结论 在当今的科学和工程领域&#…...
笔记本外接显示屏没声音
1、笔记本正常有声音，但是外接显示屏后没有声音了怎么回事呢？原来外接显示屏后笔记本的声音输出会自动选择显示屏的音频输出，但是显示屏可能没有声音输出所以导致笔记本没有声音。 2、解决办法：打开笔记本设置，选择声…...
vue框架
Vue.js是一种用于构建用户界面的JavaScript框架。它是一个轻量级框架，被设计为逐渐采用的渐进式框架，可以与现有项目集成，也可以作为一个完整的单页应用程序框架使用。 Vue.js具有以下特点： 简单易学：Vue.js的API简单…...
Vue指令（一）--v-html、v-show、v-if、v-else、v-else-if、v-on、v-bind、v-for、v-model
目录 （一）初识指令和内容渲染指令v-html 1.v-html 案例： 官网的API文档 （二）条件渲染指令v-show和v-if 1. v-show 2. v-if （三）条件渲染指令v-else和v-else-if 案例 （四…...
ElK 8 收集 MySQL 慢查询日志并通过 ElastAlert2 告警至飞书
文章目录 1. 说明2. 启个 mysql3. 设置慢查询4. filebeat 设置5. 触发慢查询6. MySQL 告警至飞书 1. 说明 elk 版本：8.15.0 2. 启个 mysql docker-compose.yml 中 mysql： mysql:# restart: alwaysimage: mysql:8.0.27# ports:# - "3306:3306&q…...
QT通过在线安装器安装【详细】
在线安装器地址： 官方在线安装器：Index of /official_releases/online_installers (qt.io) 通过命令行启动安装页面 直接双击qt安装程序，在线安装会非常慢，甚至安装失败，所以通过命令行页面启动安装页面。点击wind…...
34.1 uber开源的m3db简介
本节重点介绍 : m3db自己的定位m3db自己的架构m3db自己的组件 两句话简介 M3最初是在优步开发的，目的是提供对优步业务运营，微服务和基础架构的可视性由于M3具有轻松进行水平扩展的能力，因此它为所有监视用例提供了一个集中式存储解决方案…...
MATLAB 最小二乘点云拟合球 （89）
MATLAB 最小二乘点云拟合球 （89） 一、算法介绍二、算法实现1.代码2.结果这是缘，亦是最美的相见 一、算法介绍 球面拟合算法是一种通过数学方法将一组三维点（通常在三维空间中分布）拟合到一个理想的球形表面上。这个过程通常涉及使用最小二乘法来最小化实际数据点与拟合的…...
【Altium Designer 】AD如何使用嘉立创元器件的3D封装
1.下载3D封装 以STM32F407VGT6为例，进入嘉立创商城网站，找到需要的元器件封装 复制编号，打开嘉立创EDA，编译器选择专业版，新建工程，点击PCB1 复制编号在搜索框中，点击搜索，然后放置…...
G15沈海高速茶白高架自动化监测
1. 项目简介 G15 沈海高速公路北起辽宁省沈阳市苏家屯区金宝台枢纽，与沈阳市绕城高速公路（国家高速 G1501）相接，南至海南省海口市秀英区粤海枢纽，与海南地区环线高速公路（国家高速 G98）相交&am…...
网站从渗透到mssql提权全过程
2|0渗透全过程 1.信息收集-端口探测 1）Nmap端口探测：namp -sS -p 1-65535 172.16.12.103 可以看到端口开放情况 2.判断系统情况 根据端口情况初步判定为IISmssql.net系统，访问web站点URL应该为：http:172.16.12.103:27689 访问…...
Qt多线程与QTimer详解
引用 Qt多线程中使用QTimer（常见问题汇总） [多线程]多线程使用QTimer Qt::ConnectionType：Qt不同类型connect的详细区别说明与应用 Qt的4种多线程实现方式 一文搞定之Qt多线程(QThread、moveToThread) QTimer The QTimer class provides repe…...
基于stm23的智慧宿舍系统 （DAY10）_小程序
好久没记录开发进度了，今天小程序差不多开发完了，UI这块算是比较常见了，主要功能是能连接onenet查看设备上传的数据，同时也能对设备进行一些控制下面是几个主要的函数，功能比较简单 wx.request({url: ${apiBaseUrl}/t…...
深入理解Spring事务
目录 什么是Spring事务为什么需要Spring事务Spring事务的实现 Spring事务的传播机制Spring事务的底层原理 EnableTransactionManagement --开启Spring管理事务Import(TransactionManagementConfigurationSelector.class) --提供两个beanAutoProxyRegistrar --启用AOP的功能&am…...
Ubuntu22.04深度学习环境安装【Anaconda+Pycharm】
anaconda可以提供多个独立的虚拟环境，方便我们学习深度学习（比如复现论文）； Pycharm编辑器可以高效的编写python代码，也是一个很不错的工具。 下面就记录下Ubuntu22.04的安装流程： 1.Anaconda安装 下载Ana…...
五、docker的网络模式
五、docker的网络模式 5.1 Docker的四种网络模式 当你安装docker时，它会自动创建三个网络，可使用如下命令查看： [rootlocalhost ~]# docker network ls NETWORK ID NAME DRIVER SCOPE 7390284b02d6 bridge bridge lo…...
使用el-row和el-col混合table设计栅格化，实现表头自适应宽度，表格高度占位
演示效果： 如上图,由于地址信息很长,需要占多个格子,所以需要错开,若想实现这种混合效果,可以这样搭建: 页面效果： 代码分析: 上面使用el-row和el-col搭建表单显示 第一排三个8,第二排8和16 下面混合table实现，并使用border来自适应宽度…...
【服务器监控】grafana+Prometheus+node exporter详细部署文档
我们在进行测试时，不可能一直手动看着服务器的性能消耗，这时候就需要有个工具替我们监控服务器的性能消耗。这里记录下grafanaPrometheusnodeExporter的组合用于监控服务器。 简单介绍： grafana：看板工具，所有采集的…...
JavaScript中todolist操作--待办事项的添加 删除 完成功能
效果图 在文本框中输入内容点击添加按钮会在下面生成 添加功能 html <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0&qu…...