当前位置: 首页 > news >正文

【JavaEE】Servlet:表白墙

文章目录

  • 一、前端
  • 二、前置知识
  • 三、代码
    • 1、后端
    • 2、前端
    • 3、总结
  • 四、存入数据库
    • 1、引入 mysql 的依赖,mysql 驱动包
    • 2、创建数据库数据表
    • 3、调整上述后端代码
      • 3.1 封装数据库操作,和数据库建立连接
      • 3.2 调整后端代码

一、前端

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表白墙</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.container {width: 800px;margin: 0 auto;}.container h2 {text-align: center;margin: 30px;}.row {height: 50px;display: flex;justify-content: center;margin-top: 5px;line-height: 50px;}.row span {height: 50px;width: 100px;line-height: 50px;}.row input {height: 50px;width: 300px;line-height: 50px;}.row button {height: 50px;width: 400px;margin: 10px 0px;color: white;background-color: orange;border: none;border-radius: 10px;}.row button:active {background-color: grey;}</style>
</head>
<body><div class="container"><h2>表白墙</h2><div class="row"><span></span><input type="text" id="from"></div><div class="row"><span>对谁</span><input type="text" id="to"></div><div class="row"><span></span><input type="text" id="message"></div><div class="row"><button>提交</button></div></div><script src="https://code.jquery.com/jquery-3.7.1.min.js"></script><script>let container = document.querySelector('.container');let fromInput = document.querySelector('#from');let toInput = document.querySelector('#to');let messageInput = document.querySelector('#message');let button = document.querySelector('button');button.onclick = function() {let from = fromInput.value;let to = toInput.value;let message = messageInput.value;if(from=='' || to=='' || message=='||') {return;}let newDiv = document.createElement('div');newDiv.className = 'row';newDiv.innerHTML = from + "对" + to + "说" + message;container.appendChild(newDiv);fromInput.value = '';toInput.value = '';messageInput.value = ''; }</script>
</body>
</html>

二、前置知识

pom.xml 里面的依赖确保了在开发阶段项目能够编译和运行,但在部署到Tomcat服务器时,Tomcat会提供这些类,因此不需要将它们打包到最终的WAR文件中。

运行项目一般是两级路径:

  1. 第一级:Context path:
    context path代表了当前的 webapp(网站),一个 tomcat 上是可以同时部署多个 webapp(网站)的,webapps 目录下的每个目录都是一个单独的 webapp,所以有的资料也把tomcat叫做容器。
    如何确定 Context path:
    (1)如果是通过 startup.bat 启动的 tomcat,webapps 里对应的 war 包名/目录名就是这个 webapp 的 Context path;
    (2)如果是通过 smart tomcat 启动 tomcat,是在启动的配置项中手动指定的 Context path(这种是另外的一种运行 tomcat 的方式)
  2. 第二级路径:就是 ServletPath
    这个是根据代码中的 @WebServlet 注解来确定的或者就是 webapp下面的静态文件/目录

以下是完整项目的目录:

三、代码

1、后端

创建 Message.java 和 MessageServlet.java

import com.fasterxml.jackson.databind.ObjectMapper;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;// 对应到前端传来的请求 body 格式
// 此处要保证每个属性名字和 JSON 里的 key 对应
// 同时要保证这几个格式是 public 或者提供 public 的 getter 方法
class Message {public String from;public String to;public String message;@Overridepublic String toString() {return "Message{" +"from='" + from + '\'' +", to='" + to + '\'' +", message='" + message + '\'' +'}';}
}@WebServlet("/message")
public class MessageServlet extends HttpServlet {private ObjectMapper objectMapper = new ObjectMapper();List<Message> messageList = new ArrayList<>();// 负责实现让服务器从客户端拿数据@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// 1. 把 body 的 json 数据解析出来, json格式的字符串(通过输入流获取) -> 对象Message message = objectMapper.readValue(req.getInputStream(), Message.class);// 2. 把这个数据保存起来,最简单的是保存到内存中messageList.add(message);System.out.println("message: " + message);// 3. 返回成功的响应resp.setContentType("application/json;charset=utf8"); // application/json;charset=utf8resp.getWriter().write("{\"ok\": 1}");}// 负责实现让客户端从服务器拿数据@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {resp.setContentType("application/json;charset=utf8");// 对象 -> json格式的字符串String respString = objectMapper.writeValueAsString(messageList);resp.getWriter().write(respString);}
}

2、前端

事实上只有注释行为新的步骤(也就是第103行)后面才是更新的代码,前面和上面的前端代码一样。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表白墙</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.container {width: 800px;margin: 0 auto;}.container h2 {text-align: center;margin: 30px;}.row {height: 50px;display: flex;justify-content: center;margin-top: 5px;line-height: 50px;}.row span {height: 50px;width: 100px;line-height: 50px;}.row input {height: 50px;width: 300px;line-height: 50px;}.row button {height: 50px;width: 400px;margin: 10px 0px;color: white;background-color: orange;border: none;border-radius: 10px;}.row button:active {background-color: grey;}</style>
</head>
<body><div class="container"><h2>表白墙</h2><div class="row"><span></span><input type="text" id="from"></div><div class="row"><span>对谁</span><input type="text" id="to"></div><div class="row"><span></span><input type="text" id="message"></div><div class="row"><button>提交</button></div></div><script src="https://code.jquery.com/jquery-3.7.1.min.js"></script><script>let container = document.querySelector('.container');let fromInput = document.querySelector('#from');let toInput = document.querySelector('#to');let messageInput = document.querySelector('#message');let button = document.querySelector('button');button.onclick = function() {let from = fromInput.value;let to = toInput.value;let message = messageInput.value;if(from=='' || to=='' || message=='||') {return;}let newDiv = document.createElement('div');newDiv.className = 'row';newDiv.innerHTML = from + "对" + to + "说" + message;container.appendChild(newDiv);fromInput.value = '';toInput.value = '';messageInput.value = '';// 新的步骤,将刚才输入框里取得的数据构造成 POST 请求,提交给后端服务器// jsonlet messageJson = {// 字符串: 变量from: from,to: to,message: message};$.ajax({type: 'post',// 相对路径url: 'message',// 绝对路径// url: '/MessageWall1/message',contentType: 'application/json;charset=utf8',data: JSON.stringify(messageJson), // JSON 转成 JSON 格式的字符串success: function() {alert("提交成功");},// 返回状态码不是2xx就触发此函数error: function() {alert("提交失败");}});}// 这个函数在页面加载/刷新的时候调用,通过这个函数从服务器获取到当前的消息列表,显示在页面上function load() {$.ajax({type: 'get',url: 'message',success: function(body) {// 此处 body 已经是 json , ajax 会根据contentType自动转换let container = document.querySelector('.container');for(let message of body) {let newDiv = document.createElement('div');newDiv.className = 'row';newDiv.innerHTML = message.from + " 对 " + message.to + " 说 " + message.message;container.appendChild(newDiv);}}});}// 函数调用写在这里就表示页面加载的时候来执行load();</script>
</body>
</html>

json的key只能是字符串类型.此处写的 from其实是"from" .只不过咱们这里图省事,把"省略了
json中表示字符串,单弓|号或者双引号都行.
在这里插入图片描述

在这里插入图片描述

3、总结

  1. 打开页面/刷新页面,先执行前端load();
  2. load()会执行ajax,ajax会发生一个HTTP请求给服务器,GET /message,这里面的success先不执行,后面才会执行
  3. 这个HTTP请求通过网络发送给tomcat,进一步触发doGet方法,doGet方法执行里面的逻辑,将List转换成JSON,构造HTTP响应返回给客户端
  4. 客户端收到返回数据触发回调函数,也就是success,success执行里面的逻辑,将服务器返回的数据(body)显示到页面上

四、存入数据库

当服务器重启,List 里面的数据会丢失,应该怎样解决这个问题?
关键是要把数据存储在服务器的硬盘上面
1、存入文件里面,使用 IO 流来写文件/读文件
2、存入数据库里面,使用 MYSQL+JDBC

JDBC(Java Database Connectivity)是Java编程语言中用于执行SQL语句的一组API(应用程序接口)。它为数据库访问提供了一种标准的方法,使得Java程序可以与各种关系型数据库进行交互,而无需关心具体的数据库实现细节。

这里使用存入数据库的方式来解决问题:

1、引入 mysql 的依赖,mysql 驱动包

<!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java -->
<dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>5.1.49</version>
</dependency>

2、创建数据库数据表

create database MessageWall;
use MessageWall;drop table if exists MessageWall;
create table MessageWall (`from` varchar(100),`to` varchar(100),message varchar(1024)
);

3、调整上述后端代码

3.1 封装数据库操作,和数据库建立连接

新建一个类 DBUtil.java

import com.mysql.jdbc.jdbc2.optional.MysqlDataSource;
//import com.mysql.jdbc.Connection;import javax.sql.DataSource;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;// 通过这个类完成建立数据库的连接的过程
// 建立连接需要使用 DataSource,并且一个程序有一个 DataSource 实例即可,这里用单例模式来实现
public class DBUtil {private static DataSource dataSource = null;private static DataSource getDataSource() {if (dataSource == null) {dataSource = new MysqlDataSource();((MysqlDataSource)dataSource).setURL("jdbc:mysql://127.0.0.1/messagewall?characterEncoding=utf8&useSSL=false");((MysqlDataSource)dataSource).setUser("root");((MysqlDataSource)dataSource).setPassword("1234");}return dataSource;}public static Connection getConnection() throws SQLException {return getDataSource().getConnection();}public static void close(Connection connection, PreparedStatement preparedStatement, ResultSet resultSet) {// 后创建的先释放// 此处分开写 try-catch 是因为一个地方异常了不会影响其他的 close 执行if (resultSet != null) {try {resultSet.close();} catch (SQLException e) {e.printStackTrace();}}if (preparedStatement != null) {try {preparedStatement.close();} catch (SQLException e) {e.printStackTrace();}}if (connection != null) {try {connection.close();} catch (SQLException e) {e.printStackTrace();}}}
}

3.2 调整后端代码

MessageServlet.java

@WebServlet("/message")
public class MessageServlet extends HttpServlet {private ObjectMapper objectMapper = new ObjectMapper();// List<Message> messageList = new ArrayList<>();// 负责实现让服务器从客户端拿数据@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// 1. 把 body 的 json 数据解析出来, json格式的字符串(通过输入流获取) -> 对象Message message = objectMapper.readValue(req.getInputStream(), Message.class);// 2. 把这个数据保存起来,最简单的是保存到内存中// messageList.add(message);save(message);System.out.println("message: " + message);// 3. 返回成功的响应resp.setContentType("application/json;charset=utf8"); // application/json;charset=utf8resp.getWriter().write("{\"ok\": 1}");}// 负责实现让客户端从服务器拿数据@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {resp.setContentType("application/json;charset=utf8");// 对象 -> json格式的字符串List<Message> messageList= load();String respString = objectMapper.writeValueAsString(messageList);resp.getWriter().write(respString);}// 把当前的消息存到数据库中private void save(Message message) {Connection connection = null;PreparedStatement statement = null;try {// 1.和数据库建立连接connection = DBUtil.getConnection();// 2.构造SQL语句String sql = "insert into message values(?, ?, ?)";statement = connection.prepareStatement(sql);statement.setString(1, message.from);statement.setString(2, message.to);statement.setString(3, message.message);// 3.执行SQL语句int ret = statement.executeUpdate();if (ret != 1) {System.out.println("插入失败");} else {System.out.println("插入成功");}} catch (SQLException e) {e.printStackTrace();} finally {// 4.关闭连接DBUtil.close(connection, statement, null);}}// 从数据库查询到记录private List<Message> load() {Connection connection = null;PreparedStatement statement = null;ResultSet resultSet = null;List<Message> messageList = new ArrayList<>();try {// 1.建立连接connection = DBUtil.getConnection();// 2.构造SQL语句String sql = "select * from message";statement = connection.prepareStatement(sql);// 3.执行SQLresultSet = statement.executeQuery(sql);// 4.遍历结果集while (resultSet.next()) {Message message = new Message();message.from = resultSet.getString("from");message.to = resultSet.getString("to");message.message = resultSet.getString("message");messageList.add(message);}} catch (SQLException e) {e.printStackTrace();} finally {// 5.关闭连接DBUtil.close(connection, statement, resultSet);}return messageList;}
}

相关文章:

【JavaEE】Servlet:表白墙

文章目录 一、前端二、前置知识三、代码1、后端2、前端3、总结 四、存入数据库1、引入 mysql 的依赖&#xff0c;mysql 驱动包2、创建数据库数据表3、调整上述后端代码3.1 封装数据库操作&#xff0c;和数据库建立连接3.2 调整后端代码 一、前端 <!DOCTYPE html> <ht…...

WPF中如何让Textbox显示为一条直线

由于Textbox直接使用是一条直线 设置如下代码 可以让Textbox变为直线输入 <Style TargetType"TextBox"x:Key"UsernameTextBoxStyle"><Setter Property"Template"><Setter.Value><ControlTemplate TargetType"{x:Typ…...

多维数组与特殊矩阵:存储与压缩

多维数组与特殊矩阵&#xff1a;存储与压缩 一、多维数组的存储 &#xff08;一&#xff09;基本概念 多维数组是线性表的推广&#xff0c;例如二维数组可以看作是元素为一维数组的线性表&#xff0c;三维数组可以看作是元素为二维数组的线性表&#xff0c;以此类推。在内存…...

第三讲 架构详解:“隐语”可信隐私计算开源框架

目录 隐语架构 隐语架构拆解 产品层 算法层 计算层 资源层 互联互通 跨域管控 本文主要是记录参加隐语开源社区推出的第四期隐私计算实训营学习到的相关内容。 隐语架构 隐语架构拆解 产品层 产品定位&#xff1a; 通过可视化产品&#xff0c;降低终端用户的体验和演…...

springboot项目使用maven打包,第三方jar问题

springboot项目使用maven package打包为可执行jar后&#xff0c;第三方jar会被打包进去吗&#xff1f; 答案是肯定的。做了实验如下&#xff1a; 第三方jar的项目结构及jar包结构如下&#xff1a;&#xff08;该第三方jar采用的是maven工程&#xff0c;打包为普通jar&#xf…...

突破内存限制:Mac Mini M2 服务器化实践指南

本篇文章&#xff0c;我们聊聊如何使用 Mac Mini M2 来实现比上篇文章性价比更高的内存服务器使用&#xff0c;分享背后的一些小的思考。 希望对有类似需求的你有帮助。 写在前面 在上文《ThinkPad Redis&#xff1a;构建亿级数据毫秒级查询的平民方案》中&#xff0c;我们…...

【Linux】Linux系统电源状态

前言 本文主要介绍Linux系统电源状态。 Linux内核代码声明如下&#xff0c;位于kernel/power/suspend.c。 参考链接 Linux系统电源状态 在Linux操作系统中&#xff0c;将电源划分为如下几个状态&#xff1a; ACPI StateLinux StateDescriptionS0On(on)WorkingS1Standby(sta…...

《用Python画蔡徐坤:艺术与编程的结合》

简介 大家好&#xff01;今天带来一篇有趣的Python编程项目&#xff0c;用代码画出知名偶像蔡徐坤的形象。这个项目使用了Python的turtle库&#xff0c;通过简单的几何图形和精心设计的代码来展示艺术与编程的结合。 以下是完整的代码和效果介绍&#xff0c;快来试试看吧&…...

ARM(安谋) China处理器

0 Preface/Foreword 0.1 参考博客 Cortex-M23/M33与STAR-MC1星辰处理器 ARM China&#xff0c;2018年4月established&#xff0c;独立运行。 1 处理器类型 1.1 周易AIPU 1.2 STAR-MC1&#xff08;星辰处理器&#xff09; STAT-MC1&#xff0c;主要为满足AIOT应用性能、功…...

硬中断关闭后的堆栈抓取方法

一、背景 性能和稳定性是一个计算机工程里的一个永恒的主题。其中尤其稳定性这块的问题发现和问题分析及问题解决就依赖合适的对系统的观测的手段&#xff0c;帮助我们发现问题&#xff0c;识别问题原因最后才能解决问题。稳定性问题里尤其底层问题里&#xff0c;除了panic问题…...

电影风格城市夜景旅拍Lr调色教程,手机滤镜PS+Lightroom预设下载!

调色教程 电影风格城市夜景旅拍通过 Lightroom 调色&#xff0c;将城市夜晚的景色打造出如同电影画面般的质感和氛围。以独特的色彩和光影处理&#xff0c;展现出城市夜景的魅力与神秘。 预设信息 调色风格&#xff1a;电影风格预设适合类型&#xff1a;人像&#xff0c;街拍…...

基于FPGA的2FSK调制-串口收发-带tb仿真文件-实际上板验证成功

基于FPGA的2FSK调制 前言一、2FSK储备知识二、代码分析1.模块分析2.波形分析 总结 前言 设计实现连续相位 2FSK 调制器&#xff0c;2FSK 的两个频率为:fI15KHz&#xff0c;f23KHz&#xff0c;波特率为 1500 bps,比特0映射为f 载波&#xff0c;比特1映射为 载波。 1&#xff09…...

【Python】构建事件驱动架构:用Python实现实时应用的高效系统

解锁Python编程的无限可能:《奇妙的Python》带你漫游代码世界 事件驱动架构(Event-Driven Architecture,EDA)是一种基于事件流动进行系统设计的模式,广泛应用于游戏开发、实时监控和分布式系统中。它通过解耦事件的生产者和消费者,提升系统的可扩展性和灵活性。本文章从…...

安装 Docker(使用国内源)

一、安装Docker-ce 1、下载阿里云的repo源 [rootlocalhost ~]# yum install yum-utils -y && yum-config-manager --add-repo https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo && yum makecache # 尝试列出 docker-ce 的版本 [rootlocalh…...

001 MATLAB介绍

前言&#xff1a; 软件获取渠道有很多&#xff0c;难点也就是百度网盘下载慢&#xff1b; 线上版本每月有时间限制。 01 MATLAB介绍 性质&#xff1a; MATLAB即Matrix Laboratory 矩阵实验室的意思&#xff0c;是功能强大的计算机高级语言, 已广泛应用于各学科研究部门、…...

vscode利用ofExtensions插件可以调试单进程Openfoam,但是不能调试mpi多进程案例

问题&#xff1a; 准备调试流固耦合案例&#xff0c;包括流体和固体的&#xff0c;但是用ofextensions插件。但是流体的话使用的是域分解方法&#xff0c;将大的单元分成了小的单元用mpi并行处理&#xff0c;里面的program必须输入"/usr/bin/mpirun", // 这里改为使…...

2022年计算机网络408考研真题解析

第一题&#xff1a; 解析&#xff1a;网络体系结构-数据链路层 在ISO网络参考模型中&#xff0c;运输层&#xff0c;网络层和数据链路层都实现了流量的控制功能&#xff0c;其中运输层实现的是端到端的流量控制&#xff0c;网络层实现的是整个网络的流量控制&#xff0c;数据链…...

React-useEffect的使用

useEffect react提供的一个常用hook&#xff0c;用于在函数组件中执行副作用操作&#xff0c;比如数据获取、订阅或手动更改DOM。 基本用法&#xff1a; 接受2个参数&#xff1a; 一个包含命令式代码的函数&#xff08;副作用函数&#xff09;。一个依赖项数组&#xff0c;用…...

python学习笔记(10)算法(3)列表

一、列表 列表&#xff08;list&#xff09;是一个抽象的数据结构概念&#xff0c;它表示元素的有序集合&#xff0c;支持元素访问、修改、添加、删除和遍历 等操作&#xff0c;无须使用者考虑容量限制的问题。列表可以基于链表或数组实现。 ‧ 链表天然可以看作一个列表&#…...

嵌入式系统与单片机工作原理详解

随着现代科技的发展&#xff0c;嵌入式系统已经深入到我们日常生活中的方方面面。无论是智能家居、汽车电子&#xff0c;还是工业控制、医疗设备&#xff0c;都离不开嵌入式系统的支持。而单片机作为嵌入式系统的核心组件&#xff0c;是实现这些功能的关键之一。本文将详细介绍…...

Spark SQL 之 QueryStage

ExchangeQueryStageExec ExchangeQueryStageExec 分为两种...

Flink Standalone 集群模式安装部署教程

目录 一、前言 二、环境准备 三、安装步骤 1. 下载并安装 Flink 4. 配置 Flink 5. 配置环境变量 6. 启动 Flink 集群 7. 访问 Flink Web 界面 四、简单测试 五、常见问题和解决办法 1. 启动失败&#xff0c;无法连接到 TaskManager 2. Web 界面无法访问 六、总结 …...

【运维】 使用 shell 脚本实现类似 jumpserver 效果实现远程登录linux 服务器

实现效果 通过序号选择登录&#xff1a; 配置证书登录 配置证书登录可以免去每次都输入密码的麻烦。详见另一篇博文&#xff1a; 【ssh】使用秘钥对&#xff08;公钥/私钥&#xff09;登录linux主机以及原理介绍 自动登录脚本 直接复用以下脚本即可&#xff0c;在 server…...

根据实验试要求,打通隧道连接服务器上的数据库,前端进行数据调用。

1.背景介绍 数据库布置在了工大实验试K80服务器上&#xff0c;本地属于外网无法直接访问校园内网。需要打通隧道&#xff0c;通过堡垒机进行服务器的访问。获取到数据库数据进行前端展示。 2.打通隧道 访问指令&#xff1a; 我选择使用Xshell打通隧道。优点&#xff1a;凭证…...

ubuntu 安装 docker 记录

本文假设系统为 Ubuntu&#xff0c;从 16.04 到 24.04&#xff0c;且通过 APT 命令安装。理论上也其他 Debian 系的操作系统。 WSL 也一样。 感觉 Docker 官方在强推 Docker Desktop&#xff0c;搜索 Docker 安装文档&#xff0c;一不小心就被导航到了 Docker Desktop 的安装页…...

46.坑王驾到第十期:vscode 无法使用 tsc 命令

点赞收藏加关注&#xff0c;你也能住大别墅&#xff01; 一、问题重现 上一篇帖子记录了我昨天在mac上安装typescript及调试的过程。今天打开vscode准备开干的时候&#xff0c;发现tsc命令又无法使用了&#xff0c;然后按照昨天的方法重新安装调试后又能用了&#xff0c;但是关…...

pytorch3d linux安装

目录 测试成功2024.11.21&#xff1a; 测试成功2024.11.21&#xff1a; python3.10 GitHub - facebookresearch/pytorch3d: PyTorch3D is FAIRs library of reusable components for deep learning with 3D data 安装脚本&#xff1a; cd pytorch3d && pip install…...

P1168 中位数

网址如下&#xff1a;P1168 中位数 - 洛谷 | 计算机科学教育新生态 一道求中位数的题&#xff0c;本来是想再用二分法来试一下的&#xff0c;但是出现了一点问题&#xff0c;先把AC的放出来 很简单&#xff0c;一个记录比中位数大的数的最小堆&#xff0c;和一个记录比中位数小…...

全面解析多种mfc140u.dll丢失的解决方法,五种方法详细解决

当你满心期待地打开某个常用软件&#xff0c;却突然弹出一个错误框&#xff0c;提示“mfc140u.dll丢失”&#xff0c;那一刻&#xff0c;你的好心情可能瞬间消失。这种情况在很多电脑用户的使用过程中都可能出现。无论是游戏玩家还是办公族&#xff0c;面对这个问题都可能不知所…...

✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本

api.js //封装ajax方法 import $g from "../sg";//vue项目使用 import $ from jquery;//(提示&#xff1a;原生开发页面请前往https://jquery.com下载最新版jQuery) import { Message } from "element-ui";//element项目使用 // import axios from "…...

【Python】分割秘籍!掌握split()方法,让你的字符串处理轻松无敌!

在Python开发中&#xff0c;字符串处理是最常见也是最基础的任务之一。而在众多字符串操作方法中&#xff0c;split()函数无疑是最为重要和常用的一个。无论你是Python新手&#xff0c;还是经验丰富的开发者&#xff0c;深入理解并熟练运用split()方法&#xff0c;都将大大提升…...

非root用户安装CUDA

1.使用nvidia-smi查看当前驱动支持的最高CUDA版本&#xff1a; 表示当前驱动最多支持cuda12.1 2.进入cuda安装界面&#xff0c;https://developer.nvidia.com/cuda-toolkit-archive&#xff0c;选择想要安装的版本&#xff0c;例如想要安装CUDA11.4&#xff1a; 如果需要查看ub…...

Qt中2D绘制系统

目录 一、Qt绘制系统 1.1Qt绘制基本概念 1.2 绘制代码举例 1.3画家 1.3.1 QPainter的工作原理&#xff1a; 1.3.2 自定义绘制饼状图&#xff1a; 1.4画笔和画刷 1.4.1画笔 1.4.2 画刷填充样式 1.5 反走样和渐变 1.6绘制设备 1.7坐标变换 1.8QPainterPath 1.9绘制文…...

实战项目负载均衡式在线 OJ

> 作者&#xff1a;დ旧言~ > 座右铭&#xff1a;松树千年终是朽&#xff0c;槿花一日自为荣。 > 目标&#xff1a;能自己实现负载均衡式在线 OJ。 > 毒鸡汤&#xff1a;有些事情&#xff0c;总是不明白&#xff0c;所以我不会坚持。早安! > 专栏选自&#xff1…...

shell脚本启动springboot项目

nohup java -jar springboot.jar > springboot.log 2>&1 & 表示日志输出重定向到springboot.log日志文件, 而原本的日志继续输出到 项目同级的log文件夹下, 所以这个重定向没必要. 我们没必要要2分日志 #!/bin/bash# 获取springboot项目的进程ID PID$(ps -e…...

Django 自定义路由转换器

步骤 创建自定义转换器类 必须定义 regex 属性&#xff08;用于匹配参数&#xff09;。必须实现 to_python 和 to_url 方法。 to_python: 将匹配的参数转换为视图函数可用的 Python 数据。to_url: 将数据转换为 URL 格式&#xff08;用于反向解析&#xff09;。 注册转换器 使用…...

低速接口项目之串口Uart开发(二)——FIFO实现串口数据的收发回环测试

本节目录 一、设计思路 二、loop环回模块 三、仿真模块 四、仿真验证 五、上板验证 六、往期文章链接本节内容 一、设计思路 串口数据的收发回环测试&#xff0c;最简单的硬件测试是把Tx和Rx连接在一起&#xff0c;然后上位机进行发送和接收测试&#xff0c;但是需要考虑到串…...

Oracle 数据库 IDENTITY 列

IDENTITY列是Oracle数据库12c推出的新特性。之所以叫IDENTITY列&#xff0c;是由于其支持ANSI SQL 关键字 IDENTITY&#xff0c;其内部实现还是使用SEQUENCE。 不过推出这个新语法也是应该的&#xff0c;毕竟MyQL已经有 AUTO_INCREMENT列&#xff0c;而SQL Server也已经有IDENT…...

算法笔记:单调队列

单调队列&#xff1a; 队列元素之间的关系具有单调性&#xff08;从队首到队尾单调递增/递减&#xff09;&#xff0c;队首和队尾都可以进行入队出队&#xff08;即插入删除&#xff09;操作&#xff0c;本质是由双端队列deque实现。 适用问题 通常解决动态小区间中寻找极值…...

深度解析:Nginx模块架构与工作机制的奥秘

文章目录 前言Nginx是什么?Ngnix特点&#xff1a; 一、Nginx模块与工作原理1.Nginx的模块1.1 Nginx模块常规的HTTP请求和响应的流程图:1.2 Nginx的模块从结构上分为如下三类&#xff1a;1.3 Nginx的模块从功能上分为如下三类: 2.Nginx的进程模型2.1 Nginx进程结构2.2 nginx进程…...

【git】commit之后,想撤销commit

一、已经commit&#xff0c;想要回退到上一步 保留代码 git reset --soft HEAD^回退到具体的哪一步 HEAD^的意思是上一个版本&#xff0c;也可以写成HEAD~1如果你进行了2次commit&#xff0c;想都撤回&#xff0c;可以使用HEAD~2二、git reflog 查看 sha值 git reflog 回到…...

实现在两台宿主机下的docker container 中实现多机器通讯

基于我的实验背景 上位机&#xff1a;ubuntu 20.04 (docker humble 22.04) 下位机&#xff1a;ubuntu 22.04&#xff08;docker noetic 20.04&#xff09; 目标&#xff1a;实现在上位机中的docker container 容器的22.04环境去成功远程访问 非同网段的下位机的20.04的contai…...

Python 网络爬虫操作指南

网络爬虫是自动化获取互联网上信息的一种工具。它广泛应用于数据采集、分析以及实现信息聚合等众多领域。本文将为你提供一个完整的Python网络爬虫操作指南&#xff0c;帮助你从零开始学习并实现简单的网络爬虫。我们将涵盖基本的爬虫概念、Python环境配置、常用库介绍。 上传…...

vue3 uniapp 扫普通链接或二维码打开小程序并获取携带参数

vue3 uniapp 扫普通链接或二维码打开小程序并获取携带参数 微信公众平台添加配置 微信公众平台 > 开发管理 > 开发设置 > 扫普通链接二维码打开小程序 配置链接规则需要下载校验文档给后端存入服务器中&#xff0c;保存配置的时候会校验一次&#xff0c;确定当前的配…...

高标准农田智慧农业系统建设方案

1 项目概述 1.1 建设背景 我国是农业大国,近30年来农田高产量主要依靠农药化肥的大量投入,大部分化肥和水资源没有被有效利用而随地弃置,导致大量养分损失并造成环境污染。我国农业生产仍然以传统生产模式为主,传统耕种只能凭经验施肥灌溉,不仅浪费大量的人力物力,也对环…...

【python图解】数据结构之字典和集合

【python图解】数据结构之字典和集合 在 Python 中&#xff0c;字典和集合是另外的两种重要数据结构&#xff0c;它们分别用于存储键值对和无序的唯一元素集合。下面我们将详细介绍字典和集合的定义、操作方法、使用场景及相关案例。 1. 字典&#xff08;Dictionary&#xff0…...

vue 预览pdf 【@sunsetglow/vue-pdf-viewer】开箱即用,无需开发

sunsetglow/vue-pdf-viewer 开箱即用的pdf插件sunsetglow/vue-pdf-viewer, vue3 版本 无需多余开发&#xff0c;操作简单&#xff0c;支持大文件 pdf 滚动加载&#xff0c;缩放&#xff0c;左侧导航&#xff0c;下载&#xff0c;页码&#xff0c;打印&#xff0c;文本复制&…...

TCL嵌入式面试题及参考答案

USB2.0 和 USB3.0 的速度区别是什么? USB2.0 和 USB3.0 在速度上有显著的区别。USB2.0 理论上的最高传输速度为 480Mbps,也就是 60MB/s 左右。而 USB3.0 的理论传输速度则可达到 5Gbps,即约 625MB/s ,这比 USB2.0 快了很多倍。 在实际应用中,USB2.0 通常用于一些对速度要求…...

即时通讯服务器被ddos攻击了怎么办?

攻击即时通讯系统的主要手段 击键记录 目前盗取即时通讯工具帐号信息的最主要方法是通过特洛伊木马等恶意软件&#xff0c;例如QQ木马&#xff0c;这类程序能够盗取QQ密码信息&#xff0c;常见的能够盗取最新版本QQ密码的木马程序有十几种之多。几乎所有主要的QQ木马程序都采…...

RTC QoS方法十三.(ReedSolomonFEC简介)

一、FlexFEC恢复的困局 在使用FlexFEC进行冗余的时候&#xff0c;经验值需要冗余5倍的丢包率&#xff0c;才能有比较高的恢复率。 Flex FEC在2D数组异或时能获得比较高的恢复率&#xff0c;但是如上图所示&#xff0c;25个包发送10个FEC包&#xff0c;成本为10/2540%的冗余度。…...