Spring Web入门练习
加法计算器
约定前后端交互接⼝
约定 "前后端交互接⼝" 是进⾏ Web 开发中的关键环节.
接⼝⼜叫 API（Application Programming Interface), 我们⼀般讲到接⼝或者 API，指的都是同⼀个东西.
是指应⽤程序对外提供的服务的描述, ⽤于交换信息和执⾏任务(与JavaSE阶段学习的[类和接⼝]中的接⼝是两回事).
简单来说, 就是允许客⼾端给服务器发送哪些 HTTP 请求, 并且每种请求预期获取什么样的 HTTP 响应.
现在"前后端分离"模式开发, 前端和后端代码通常由不同的团队负责开发. 双⽅团队在开发之前, 会提前
约定好交互的⽅式. 客⼾端发起请求, 服务器提供对应的服务. 服务器提供的服务种类有很多, 客⼾端按照双⽅约定指定选择哪⼀个服务.
接⼝, 其实也就是我们前⾯⽹络模块讲的的"应⽤层协议". 把约定的内容写在⽂档上, 就是"接⼝⽂档" ,接⼝⽂档也可以理解为是 应⽤程序的"操作说明书".
需求分析
加法计算器功能, 对两个整数进⾏相加, 需要客⼾端提供参与计算的两个数, 服务端返回这两个整数计算的结果
基于以上分析, 我们来定义接⼝
接⼝定义
请求路径：calc/sum请求⽅式：GET/POST接⼝描述：计算两个整数相加
响应数据:
Content-Type: text/html响应内容: 计算机计算结果: 8服务器代码
@RestController
@RequestMapping("/calc")
public class CalcController {@RequestMapping("/sum")public String sum(@RequestParam("num1") Integer num1, @RequestParam("num2") Integer num2) {Integer sum = num1 + num2;return "计算机返回结果: " + sum;}
}
调整前端⻚⾯代码
<form action="calc/sum" method="post"><h1>计算器</h1>数字1：<input name="num1" type="text"><br>数字2：<input name="num2" type="text"><br><input type="submit" value=" 点击相加">
</form>⽤⼾登录
需求: ⽤⼾输⼊账号和密码, 后端进⾏校验密码是否正确
1. 如果不正确, 前端进⾏⽤⼾告知
2. 如果正确, 跳转到⾸⻚. ⾸⻚显⽰当前登录⽤⼾
3. 后续再访问⾸⻚, 可以获取到登录⽤⼾信息
约定前后端交互接⼝
需求分析
对于后端开发⼈员⽽⾔, 不涉及前端⻚⾯的展⽰, 只需要提供两个功能
1. 登录⻚⾯: 通过账号和密码, 校验输⼊的账号密码是否正确, 并告知前端
2. ⾸⻚: 告知前端当前登录⽤⼾. 如果当前已有⽤⼾登录, 返回登录的账号, 如果没有, 返回空
接⼝定义
校验接⼝
请求路径：/user/login
请求⽅式：POST
接⼝描述：校验账号密码是否正确
请求参数:
响应数据:
Content-Type: text/html
响应内容:
true //账号密码验证成功
false//账号密码验证失败查询登录⽤⼾接⼝
请求路径：/user/getLoginUser
请求⽅式：GET
接⼝描述：查询当前登录的⽤⼾请求参数:
响应数据:
Content-Type: text/html
响应内容:
zhangsan实现服务器端代码
package com.example.demo;import ch.qos.logback.core.util.StringUtil;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpSession;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;@RequestMapping("/user")
@RestController
public class UserController {@RequestMapping(value = "/login", method = RequestMethod.POST)public Boolean login(String userName, String password, HttpServletRequest request) {
// if(userName == null || "".equals(userName)) {
// return false;
// }if(!StringUtils.hasLength(userName) || !StringUtils.hasLength(password)) {return false;}if("admin".equals(userName) && "admin".equals(password)) {//set sessionHttpSession session = request.getSession(true);session.setAttribute("userName", userName);return true;}return false;}@RequestMapping(value = "getLoginUser", method= RequestMethod.GET)public String getLoginUser(HttpSession session) {if(session.getAttribute("userName") == null) {return "";}return (String)session.getAttribute("userName");}
}
调整前端⻚⾯代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>登录页面</title>
</head><body><h1>用户登录</h1>用户名：<input name="userName" type="text" id="userName"><br>密码：<input name="password" type="password" id="password"><br><input type="button" value="登录" onclick="login()"><script src="jquery-3.7.1.min.js"></script><script>function login() {$.ajax({type:"post",url: "/user/login",data: {"userName":$("#userName").val(),"password":$("#password").val()},success: function(body) {if(body == true){//skip to index pagelocation.href = "index.html"}else {//current pagealert("wrong userName or password")}}});}</script>
</body></html><!doctype html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>用户登录首页</title>
</head><body>登录人: <span id="loginUser"></span><script src="jquery-3.7.1.min.js"></script><script>$.ajax({type : "get",url : "/user/getLoginUser",success: function(userName) {$("#loginUser").text(userName);}});</script>
</body></html>留⾔板
需求:
界⾯如下图所⽰
1. 输⼊留⾔信息, 点击提交. 后端把数据存储起来.
2. ⻚⾯展⽰输⼊的表⽩墙的信息
约定前后端交互接⼝
需求分析
后端需要提供两个服务
1. 提交留⾔: ⽤⼾输⼊留⾔信息之后, 后端需要把留⾔信息保存起来
2. 展⽰留⾔: ⻚⾯展⽰时, 需要从后端获取到所有的留⾔信息
接⼝定义
1. 获取全部留⾔
全部留⾔信息, 我们⽤List来表⽰, 可以⽤JSON来描述这个List数据.
请求:
GET /message/getList
[{"from": "⿊猫","to": "⽩猫", "message": "喵" },{"from": "⿊狗","to": "⽩狗","message": "汪"},//...
]2. 发表新留⾔
请求: body 也为 JSON 格式
POST /message/publish
{"from": "⿊猫","to": "⽩猫","message": "喵"
}{ok: 1
}实现服务器端代码
lombok介绍
在这个环节, 我们介绍⼀个新的⼯具包 lombok
Lombok是⼀个Java⼯具库，通过添加注解的⽅式，简化Java的开发.
简单来学习下它的使⽤
1. 引⼊依赖
<dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><optional>true</optional>
</dependency>
lombok通过⼀些注解的⽅式, 可以帮助我们消除⼀些冗⻓代码, 使代码看起来简洁⼀些
@Data
public class Person {private int id;private String name;private String password;
}
服务器代码实现
package com.example.demo;import lombok.Data;@Data
public class MessageInfo {private String from;private String to;private String message;
}package com.example.demo;import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import java.util.ArrayList;
import java.util.List;@RestController
@RequestMapping("/message")
public class MessageController {//save messageprivate List<MessageInfo> messageInfos = new ArrayList<>();@RequestMapping("/getList")public List<MessageInfo> getList() {return messageInfos;}@RequestMapping(value = "/publish", produces = "application/json")public String publish(@RequestBody MessageInfo messageInfo) {if((StringUtils.hasLength(messageInfo.getFrom())) &&(StringUtils.hasLength(messageInfo.getTo())) &&(StringUtils.hasLength(messageInfo.getMessage()))) {messageInfos.add(messageInfo);return "{\"ok\":1}";}return "{\"ok\":0}";}}
调整前端⻚⾯代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>留言板</title><style>.container {width: 350px;height: 300px;margin: 0 auto;/* border: 1px black solid; */text-align: center;}.grey {color: grey;}.container .row {width: 350px;height: 40px;display: flex;justify-content: space-between;align-items: center;}.container .row input {width: 260px;height: 30px;}#submit {width: 350px;height: 40px;background-color: orange;color: white;border: none;margin: 10px;border-radius: 5px;font-size: 20px;}</style>
</head><body><div class="container"><h1>留言板</h1><p class="grey">输入后点击提交, 会将信息显示下方空白处</p><div class="row"><span>谁:</span> <input type="text" name="" id="from"></div><div class="row"><span>对谁:</span> <input type="text" name="" id="to"></div><div class="row"><span>说什么:</span> <input type="text" name="" id="say"></div><input type="button" value="提交" id="submit" onclick="submit()"><!-- <div>A 对 B 说: hello</div> --></div><script src="jquery-3.7.1.min.js"></script><script>getList();function getList() {$.ajax({type: "get",url: "/message/getList",success: function (message) {for (var msg of message) {//2. 构造节点var divE = "<div>" + msg.from + "对" + msg.to + "说:" + msg.message + "</div>";//3. 把节点添加到页面上 $(".container").append(divE);}}});}function submit() {//1. 获取留言的内容var from = $('#from').val();var to = $('#to').val();var say = $('#say').val();if (from == '' || to == '' || say == '') {return;}//检验完成后,发起后端请求$.ajax({type: "post",url: "/message/publish",contentType: "application/json",data: JSON.stringify({from: from,to: to,message: say}),success: function (result) {if (result.ok == 1) {alert("add success!")//2. 构造节点var divE = "<div>" + from + "对" + to + "说:" + say + "</div>";//3. 把节点添加到页面上 $(".container").append(divE);//4. 清空输入框的值$('#from').val("");$('#to').val("");$('#say').val("");} else {alert("add fail!");}}});}</script>
</body></html>图书管理系统
需求:
1. 登录: ⽤⼾输⼊账号,密码完成登录功能
2. 列表展⽰: 展⽰图书
约定前后端交互接⼝
需求分析
图书管理系统是⼀个相对较⼤⼀点的案例, 咱们先实现其中的⼀部分功能.
根据需求可以得知, 后端需要提供两个接⼝
1. 账号密码校验接⼝: 根据输⼊⽤⼾名和密码校验登录是否通过
2. 图书列表: 提供图书列表信息
接⼝定义
1. 登录接⼝
[URL]
POST /user/login
[请求参数]
name=admin&password=admin
[响应]
true //账号密码验证成功
false//账号密码验证失败2. 图书列表展⽰
[URL]
POST /book/getList
[请求参数]
⽆
[响应]
返回图书列表
[{"id": 1,"bookName": "活着","author": "余华","count": 270,"price": 20,"publish": "北京⽂艺出版社","status": 1,"statusCN": "可借阅"},...
]字段说明:
服务器代码
package com.pixiao.book;import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;import java.math.BigDecimal;
import java.util.ArrayList;
import java.util.List;
import java.util.Random;@RestController
@RequestMapping("/book")
public class BookController {@RequestMapping(value = "/getList", method = RequestMethod.GET)public List<BookInfo> getList() {List<BookInfo> bookInfos = mockData();for(BookInfo bookInfo: bookInfos) {if(bookInfo.getStatus() == 1) {bookInfo.setStatusCN("可借阅");} else {bookInfo.setStatusCN("不可借阅");}}return bookInfos;}private List<BookInfo> mockData() {List<BookInfo> bookInfos = new ArrayList<>();for (int i = 1; i <= 15; i++) {BookInfo bookInfo = new BookInfo();bookInfo.setId((long) i);bookInfo.setBookName("book" + i);bookInfo.setAuthor("author" + i);bookInfo.setPublishName("press" + i);bookInfo.setNum("" + new Random().nextInt(100));bookInfo.setPrice(new BigDecimal(new Random().nextInt(70) + 10));bookInfo.setStatus(i % 5 == 0 ? 0: 1);bookInfos.add(bookInfo);}return bookInfos;}
}package com.pixiao.book;import lombok.Data;import java.math.BigDecimal;@Data
public class BookInfo {private Long id;private String bookName;private String author;private String num;private BigDecimal price;private String publishName;private Integer status;private String statusCN;
}package com.pixiao.book;import jakarta.servlet.http.HttpSession;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;@RestController
@RequestMapping("/user")
public class UserController {@RequestMapping(value = "/login" , method = RequestMethod.POST)public Boolean login(String name, String password, HttpSession session) {//1.校验参数if(!StringUtils.hasLength(name) || !StringUtils.hasLength(password)) {return false;}//2.校验账号密码if("admin".equals(name) && "admin".equals(password)) {//3.如果正确,存储session,返回truesession.setAttribute("userName", name);return true;}return false;}}
调整前端⻚⾯代码
<!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() {$.ajax({type : "post",url : "/user/login",data : {name: $("#userName").val(),password: $("#password").val()},success: function(result) {if(result) {location.href = "book_list.html";} else {alert("error");}}}); }</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 id="bookList"></tbody></table><div class="demo"><ul id="pageContainer" class="pagination justify-content-center"></ul></div><script>getBookList();function getBookList() {$.ajax({type: "get",url: "book/getList",success: function(books) {var finalHtml = "";for(var book of books) {finalHtml += "<tr>";finalHtml += '<td><input type="checkbox" name="selectBook" value="'+book.id+'" id="selectBook" class="book-select"></td>';finalHtml += "<td>"+book.id+"</td>";finalHtml += "<td>"+book.bookName+"</td>";finalHtml += "<td>"+book.author+"</td>";finalHtml += "<td>"+book.num+"</td>";finalHtml += "<td>"+book.price+"</td>";finalHtml += "<td>"+book.publishName+"</td>";finalHtml += "<td>"+book.statusCN+"</td>";finalHtml += "<td>";finalHtml += '<div class="op">';finalHtml += '<a href="book_update.html?bookId='+book.id+'">修改</a>';finalHtml += '<a href="javascript:void(0)" onclick="deleteBook('+book.id+')">删除</a>';finalHtml += "</div>";finalHtml += "</td>";finalHtml += "</tr>";}$("#bookList").html(finalHtml);}});}//翻页信息$("#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>应⽤分层
⽬前现在更主流的开发⽅式是 "前后端分离" 的⽅式, 后端开发⼯程师不再需要关注前端的实现, 所以对于Java后端开发者, ⼜有了⼀种新的分层架构: 把整体架构分为表现层、业务逻辑层和数据层. 这种分层⽅式也称之为"三层架构".
1. 表现层: 就是展⽰数据结果和接受⽤⼾指令的，是最靠近⽤⼾的⼀层；
2. 业务逻辑层: 负责处理业务逻辑, ⾥⾯有复杂业务的具体实现；
3. 数据层: 负责存储和管理与应⽤程序相关的数据
按照上⾯的层次划分, Spring MVC 站在后端开发⼈员的⻆度上, 也进⾏了⽀持, 把上⾯的代码划分为三个部分:
请求处理、响应数据：负责，接收⻚⾯的请求，给⻚⾯响应数据.
逻辑处理：负责业务逻辑处理的代码.
数据访问：负责业务数据的维护操作，包括增、删、改、查等操作.
这三个部分, 在Spring的实现中, 均有体现:
MVC 和三层架构的区别和联系
从概念上来讲, ⼆者都是软件⼯程领域中的架构模式.
MVC架构模式由三部分组成, 分别是: 模型(Model), 视图(View)和控制器(Controller).
三层架构将业务应⽤划分为:表现层, 业务逻辑层, 数据访问层
MVC中, 视图和控制器合起来对应三层架构中的表现层. 模型对应三层架构中的业务逻辑层, 数据层, 以及实体类
⼆者其实是从不同⻆度对软件⼯程进⾏了抽象.
MVC模式强调数据和视图分离, 将数据展⽰和数据处理分开, 通过控制器对两者进⾏组合.
三层架构强调不同维度数据处理的⾼内聚和低耦合, 将交互界⾯, 业务处理和数据库操作的逻辑分开.
⻆度不同也就谈不上互相替代了，在⽇常的开发中可以经常看到两种共存的情况，⽐如我们设计模型层的时候往往也会拆分出业务逻辑层（Service层）和数据访问层（Dao层）。
但是⼆者的⽬的是相同的, 都是"解耦，分层，代码复⽤"
软件设计原则：⾼内聚低耦合.
⾼内聚指的是：⼀个模块中各个元素之间的联系的紧密程度，如果各个元素(语句、程序段)之间的联系程度越⾼，则内聚性越⾼，即 "⾼内聚"。
低耦合指的是：软件中各个层、模块之间的依赖关联程序越低越好。修改⼀处代码, 其他模块的代码改动越少越好.
⾼内聚低耦合⽭盾吗?
不⽭盾, ⾼内聚指的是⼀个模块中各个元素之间的联系的紧密程度, 低耦合指的是各个模块之间的紧
密程度
应⽤分层的好处
降低层与层之间的依赖, 结构更加的明确, 利于各层逻辑的复⽤
开发⼈员可以只关注整个结构中的其中某⼀层, 极⼤地降低了维护成本和维护时间
可以很容易的⽤新的实现来替换原有层次的实现
有利于标准化
相关文章：
Spring Web入门练习
加法计算器 约定前后端交互接⼝ 约定 "前后端交互接⼝" 是进⾏ Web 开发中的关键环节. 接⼝⼜叫 API（Application Programming Interface), 我们⼀般讲到接⼝或者 API，指的都是同⼀个东西. 是指应⽤程序对外提供的服务的描述, ⽤于交换信息…...
计算机毕业设计 | SpringBoot+vue汽车资讯网站 汽车购买咨询管理系统(附源码+论文)
1，绪论 1.1 研究背景 随着计算机技术的发展以及计算机网络的逐渐普及，互联网成为人们查找信息的重要场所，二十一世纪是信息的时代，所以信息的管理显得特别重要。因此，使用计算机来管理汽车资讯网站的相关信息成为必然…...
stm32下的ADC转换(江科协 HAL版)
十二. ADC采样 文章目录 十二. ADC采样12.1 ADC的采样原理12.2 STM32的采样基本过程1.引脚与GPIO端口的对应关系2.ADC规则组的四种转换模式(**)2.2 关于转换模式与配置之间的关系 12.3 ADC的时钟12.4 代码实现(ADC单通道 & ADC多通道)1. 单通道采样2. 多通道采样 19.ADC模数…...
解决IntelliJ IDEA的Plugins无法访问Marketplace去下载插件
勾选Auto-detect proxy setting并填入 https://plugins.jetbrains.com 代理URL，可以先做检查连接：...
react 如何修改弹出的modal的标题
原来标题的样子： 修改为： 实现方式： <Modal title<span>股价趋势/{this.state.pccode}</span> visible{this.state.isPriceModalOpen} style{{ top: 20 }} width{1320} height{400} footer{null} onCancel{()>this.hideMo…...
C#中的二维数组的应用：探索物理含义与数据结构的奇妙融合
在C#编程中，二维数组（或矩阵）是一种重要的数据结构，它不仅能够高效地存储和组织数据，还能通过其行、列和交叉点（备注：此处相交处通常称为“元素”或“单元格”，代表二维数组中的一个…...
HTML5拖拽API学习 托拽排序和可托拽课程表
文章目录 前言拖拽API核心概念拖拽式使用流程例子注意事项综合例子🌰 可拖拽课程表拖拽排序 前言 前端拖拽功能让网页元素可以通过鼠标或触摸操作移动。HTML5 提供了标准的拖拽API，简化了拖放操作的实现。以下是拖拽API的基本使用指南： 拖拽…...
)
内容补充页(相关公式解释)
from 学习日记_20241117_聚类方法（高斯混合模型） 学习日记_20241117_聚类方法（高斯混合模型） 公式 P ( Z k ) π k P(Zk) \pi_k P(Zk)πk 在高斯混合模型 (GMM) 中，公式 P ( Z k ) π k P(Zk) \pi_k P(Zk…...
vue中动态渲染静态图片资源
不报错且f12查看元素的时候，显示的src说明已经渲染到html的src上，但是就是不显示在页面上 原因 在vue上，动态渲染静态图片资源（比如从assets文件夹加载的图片）需要注意打包工具对静态资源的解析方式 由于vue2的脚手…...
管伊佳ERP，原名华夏ERP，一个简约易上手的国产ERP系统
JSH_ERP（管伊佳ERP）是一款开源、模块化的企业资源计划系统，旨在为中小企业提供高效的管理工具。它基于SpringBoot框架和SaaS模式，支持进销存、财务、生产等业务模块，包括零售、采购、销售、仓库和报表管理。 核心特点…...
学习虚幻C++开发日志——委托（持续更新中）
委托 官方文档：Delegates and Lamba Functions in Unreal Engine | 虚幻引擎 5.5 文档 | Epic Developer Community | Epic Developer Community 简单地说，委托就像是一个“函数指针”，但它更加安全和灵活。它允许程序在运行时动态地调用不…...
开窗函数 - first_value/last_value
1、开窗函数是什么？ 开窗函数用于为行定义一个窗口（这里的窗口是指运算将要操作的行的集合），它对一组值进行操作，不需要使用 GROUP BY 子句对数据进行分组，能够在同一行中同时返回基础行的列和聚合列。 2、…...
「一」HarmonyOS端云一体化概要
关于作者 白晓明 宁夏图尔科技有限公司董事长兼CEO、坚果派联合创始人 华为HDE、润和软件HiHope社区专家、鸿蒙KOL、仓颉KOL 华为开发者学堂/51CTO学堂/CSDN学堂认证讲师 开放原子开源基金会2023开源贡献之星 「目录」 「一」HarmonyOS端云一体化概要 「二」体验HarmonyOS端云一…...
nodejs21: 快速构建自定义设计样式Tailwind CSS
Tailwind CSS 是一个功能强大的低级 CSS 框架，只需书写 HTML 代码，无需书写 CSS，即可快速构建美观的网站。 1. 安装 Tailwind CSS React 项目中安装 Tailwind CSS： 1.1 安装 Tailwind CSS 和相关依赖 安装 Tailwind CSS: npm…...
从JSON数据提取嵌套字段并转换为独立列的简洁方法
从JSON数据提取嵌套字段并转换为独立列的简洁方法 在数据处理和数据分析的日常工作中，我们经常遇到复杂的嵌套数据结构，特别是嵌入在JSON字段中的数据。这些数据往往需要解析并展开成独立的列，以便后续分析和建模。本文将详细介绍如何在Pyth…...
湘潭大学软件工程算法设计与分析考试复习笔记（四）
回顾 湘潭大学软件工程算法设计与分析考试复习笔记（一）湘潭大学软件工程算法设计与分析考试复习笔记（二）湘潭大学软件工程算法设计与分析考试复习笔记（三） 前言 现在是晚上十一点，我平时是十…...
特征交叉-DeepCross Network学习
一 tensorflow官方实现 tensorflow的官方实现已经是V2版本 class Cross(tf.keras.layers.Layer):"""Cross Layer in Deep & Cross Network to learn explicit feature interactions.Args:projection_dim: int，低秩矩阵的维度，应该小…...
stm32cubemx+VSCODE+GCC+makefile 开发环境搭建
title: stm32cubemxVSCODEGCCmakefile 开发环境搭建 tags: FreertosHalstm32cubeMx 文章目录 内容往期内容导航第一步准备环境vscode 插件插件配置点灯 内容 往期内容导航 第一步准备环境 STM32CubeMXVSCODEMinGWOpenOcdarm-none-eabi-gcc 然后把上面下载的软件 3 4 5 bin 文…...
Go语言中的Defer机制详解与示例
在Go语言中，defer是一个关键字，用于确保资源的清理和释放，特别是在函数中创建的资源。defer语句会将其后的函数调用推迟到包含它的函数即将返回时执行。这使得defer成为处理文件关闭、数据库连接释放、解锁等资源清理操作的理想选择。 Defer…...
H.265流媒体播放器EasyPlayer.js H5流媒体播放器如何验证视频播放是否走硬解
随着技术的不断进步和5G网络的推广，中国流媒体播放器行业市场规模以及未来发展趋势都将持续保持稳定的增长，并将在未来几年迎来新的发展机遇。流媒体播放器将继续作为连接内容创作者和观众的重要桥梁，推动数字媒体产业的创新和发展。 EasyPla…...
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...
抖音增长新引擎：品融电商，一站式全案代运营领跑者
抖音增长新引擎：品融电商，一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中，品牌如何破浪前行？自建团队成本高、效果难控；碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...
【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统
目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索（基于物理空间 广播范围）2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...
分布式增量爬虫实现方案
之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面，避免重复抓取，以节省资源和时间。 在分布式环境下，增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路：将增量判…...
Maven 概述、安装、配置、仓库、私服详解
目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...
2023赣州旅游投资集团
单选题 1.“不登高山，不知天之高也；不临深溪，不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...
安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”（装配）
船舶制造装配管理现状：装配工作依赖人工经验，装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书，但在实际执行中，工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...
网站指纹识别
网站指纹识别 网站的最基本组成：服务器（操作系统）、中间件（web容器）、脚本语言、数据厍 为什么要了解这些？举个例子：发现了一个文件读取漏洞，我们需要读/etc/passwd，如…...
算法：模拟
1.替换所有的问号 1576. 替换所有的问号 - 力扣（LeetCode） 遍历字符串：通过外层循环逐一检查每个字符。遇到 ? 时处理： 内层循环遍历小写字母（a 到 z）。对每个字母检查是否满足： 与…...
腾讯云V3签名
想要接入腾讯云的Api，必然先按其文档计算出所要求的签名。 之前也调用过腾讯云的接口，但总是卡在签名这一步，最后放弃选择SDK，这次终于自己代码实现。 可能腾讯云翻新了接口文档，现在阅读起来，清晰了很多&…...