标签 java 下的文章

[Java Web]AJAX & Axios | 一种结合HTML来取代传统JSP的技术

2024-08-19

以下是一个使用AJAX和Axios的示例，它展示了如何通过AJAX调用后端API，并在前端页面上动态更新数据，而不是使用传统的JSP页面刷新技术。




<!DOCTYPE html>
<html>
<head>
    <title>AJAX & Axios 示例</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        function fetchData() {
            axios.get('/api/data')
                .then(response => {
                    document.getElementById('data-container').innerHTML = response.data;
                })
                .catch(error => {
                    console.error('Error fetching data: ', error);
                });
        }
 
        window.onload = function() {
            fetchData(); // 页面加载完成后获取数据
        };
    </script>
</head>
<body>
    <div id="data-container">
        <!-- 数据将被加载到这里 -->
    </div>
    <button onclick="fetchData()">刷新数据</button>
</body>
</html>

在这个例子中，当页面加载完成后，fetchData函数会被调用，它通过Axios发送一个GET请求到/api/data端点，获取数据并将其插入到data-container元素中。用户可以点击按钮手动触发数据的刷新。这种方式提供了更好的用户体验，因为它避免了页面的刷新，使得交互更加流畅。

- 阅读更多 -

java对接支付宝当面付支付和查询

System

2024-08-19

所有,ajax

以下是一个使用Java对接支付宝当面付接口的示例代码。请确保您已经在支付宝开放平台上注册并获取了必要的应用公钥私钥以及支付宝公钥，并已生成相应的RSA2(SHA256)方式的应用私钥和公钥用于接口调用。




import com.alipay.api.AlipayClient;
import com.alipay.api.DefaultAlipayClient;
import com.alipay.api.request.AlipayTradePayRequest;
import com.alipay.api.response.AlipayTradePayResponse;
 
// 确保已经添加支付宝SDK依赖
public class AlipayDemo {
 
    public static void main(String[] args) throws Exception {
        // 1. 获取配置信息
        String appId = "您的APPID";
        String privateKey = "您的应用私钥";
        String alipayPublicKey = "支付宝公钥";
        String serverUrl = "https://openapi.alipay.com/gateway.do";
        String format = "json";
        String charset = "UTF-8";
        String signType = "RSA2";
 
        // 2. 创建客户端
        AlipayClient alipayClient = new DefaultAlipayClient(serverUrl, appId, privateKey, format, charset, alipayPublicKey, signType);
 
        // 3. 创建API请求对象
        AlipayTradePayRequest request = new AlipayTradePayRequest();
        // 设置请求参数
        request.setBizContent("{" +
                "\"out_trade_no\":\"20150320010101001\"," +
                "\"total_amount\":\"88.88\"," +
                "\"subject\":\"Iphone6\"," +
                "\"body\":\"Iphone6 256G\"," +
                "\"timeout_express\":\"30m\"," +
                "\"product_code\":\"FAST_INSTANT_TRADE_PAY\"" +
                "}");
 
        // 4. 调用API并获取响应
        AlipayTradePayResponse response = alipayClient.execute(request);
 
        // 5. 处理响应
        if(response.isSuccess()){
            // 支付成功处理逻辑
            System.out.println("调用成功");
        } else {
            // 处理错误
            System.out.println("调用失败");
        }
    }
}

确保在执行代码前已经添加了支付宝SDK依赖，并且配置信息（如APPID、支付宝公钥、应用私钥等）已经正确填写。

以上代码仅为示例，实际使用时需要根据自己的业务逻辑进行相应的调整。

- 阅读更多 -

JavaWeb进阶案例-实现AJAX+Sevlet前后端分离开发

System

2024-08-19

所有,ajax

以下是一个简化的示例，展示了如何使用AJAX和Servlet实现前后端分离的登录功能：

前端HTML和JavaScript代码（假设使用jQuery库）:




<!DOCTYPE html>
<html>
<head>
    <title>Login Page</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#loginForm").submit(function(event){
                event.preventDefault(); // 阻止表单默认提交行为
                var username = $("#username").val();
                var password = $("#password").val();
 
                $.ajax({
                    url: "login", // 对应的Servlet URL
                    type: "POST",
                    data: { username: username, password: password },
                    success: function(response){
                        if(response === "success"){
                            alert("登录成功！");
                            // 登录成功后的操作，例如跳转页面
                        } else {
                            alert("登录失败，请检查用户名和密码！");
                        }
                    },
                    error: function(){
                        alert("登录失败，请检查网络连接！");
                    }
                });
            });
        });
    </script>
</head>
<body>
    <form id="loginForm">
        用户名: <input type="text" id="username" name="username"><br>
        密码: <input type="password" id="password" name="password"><br>
        <input type="submit" value="登录">
    </form>
</body>
</html>

后端Servlet代码 (LoginServlet.java):




import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
 
public class LoginServlet extends HttpServlet {
    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = request.getParameter("username");
        String password = request.getParameter("password");
 
        // 这里只是示例，实际开发中应该查询数据库验证用户名和密码
        if("admin".equals(username) && "password".equals(password)){
            response.getWriter().write("success");
        } else {
            response.getWriter().write("fail");
        }
    }
}

在这个例子中，前端使用AJAX技术向后端的LoginServlet发送登录请求，Servlet处理完后返回操作结果。前端JavaScript根据返回结果显示相应的提示信息。这样的实现方式提高了用户体验，同时也使得前后端的开发可以同时进行，实现了真正的前后端分离。

- 阅读更多 -

js(JavaScript)数据结构之树（Tree）

System

2024-08-19

所有,javascript

在JavaScript中，树是一种常见的数据结构，它可以用来表示层级关系。下面是一个简单的树结构实现，以及如何使用它的示例代码。




class TreeNode {
  constructor(value) {
    this.value = value;
    this.children = [];
  }
 
  addChild(childNode) {
    this.children.push(childNode);
  }
}
 
class Tree {
  constructor() {
    this.root = null;
  }
 
  addNode(value) {
    const newNode = new TreeNode(value);
    if (!this.root) {
      this.root = newNode;
    }
    return newNode;
  }
 
  traverse(callback) {
    function traverseNode(node) {
      callback(node.value);
      node.children.forEach((child) => {
        traverseNode(child);
      });
    }
    if (this.root) {
      traverseNode(this.root);
    }
  }
}
 
// 使用示例
const tree = new Tree();
const node1 = tree.addNode('A');
const node2 = tree.addNode('B');
const node3 = tree.addNode('C');
const node4 = tree.addNode('D');
const node5 = tree.addNode('E');
 
node1.addChild(node2);
node1.addChild(node3);
node2.addChild(node4);
node2.addChild(node5);
 
tree.traverse((value) => console.log(value));  // 输出树的节点值

这段代码首先定义了一个TreeNode类来表示树中的节点，每个节点可以有多个子节点。然后定义了一个Tree类，它可以添加节点，并且提供了一个遍历整棵树的方法。最后，我们创建了一个树，添加了节点并构建了节点之间的层级关系，并使用traverse方法遍历了整棵树，打印出每个节点的值。

System

2024-08-19

所有,javascript

题目描述：

给定一个学生信息列表，每个学生信息由姓名和身高组成。要找到身高最接近的小友。如果有多对小友身高相同，则输出字典序最小的一对。

输入描述：

学生信息列表，每个学生信息由姓名和身高组成，姓名和身高由空格分隔，学生信息由换行分隔。

输出描述：

找到身高最接近的小友的信息，姓名和身高之间用空格分隔。

示例输入：

Bob 120

Alice 130

Jane 110

示例输出：

Jane 110 Bob 120

解决方案：

Java 代码实现：




import java.util.*;
 
public class Main {
    public static void main(String[] args) {
        Scanner scanner = new Scanner(System.in);
        List<Student> students = new ArrayList<>();
        while (scanner.hasNextLine()) {
            String[] info = scanner.nextLine().split(" ");
            students.add(new Student(info[0], Integer.parseInt(info[1])));
        }
        Student[] closestFriends = findClosestFriends(students);
        System.out.println(closestFriends[0].name + " " + closestFriends[0].height + " " + closestFriends[1].name + " " + closestFriends[1].height);
    }
 
    private static Student[] findClosestFriends(List<Student> students) {
        students.sort(Comparator.comparingInt(s -> s.height));
        int minDiff = Integer.MAX_VALUE;
        Student[] closest = new Student[2];
        for (int i = 1; i < students.size(); i++) {
            int diff = Math.abs(students.get(i).height - students.get(i - 1).height);
            if (diff < minDiff) {
                minDiff = diff;
                closest[0] = students.get(i - 1);
                closest[1] = students.get(i);
            }
        }
        return closest;
    }
 
    static class Student {
        String name;
        int height;
 
        public Student(String name, int height) {
            this.name = name;
            this.height = height;
        }
    }
}

Python 代码实现：




import sys
 
def find_closest_friends(students):
    students.sort(key=lambda s: s.height)
    min_diff = sys.maxsize
    closest = [None, None]
    for i in range(1, len(students)):
        diff = abs(students[i].height - students[i - 1].height)
        if diff < min_diff:
            min_diff = diff
            closest[0] = students[i - 1]
            closest[1] = students[i]
    return closest
 
class Student:
    def __init__(self, name, height):
        self.name = name
        self.height = height
 
if __name__ == "__main__":
    students = []
    for line in sys.stdin:
        name, height = line.split()
        students.append(Student(name, int(height)))
    closest_friends = find_closest_friends(students)
    print(f"{closest_friends[0].name} {

System

2024-08-19

所有,javascript

题目描述：

给定一个正整数 n ，请找出跳格子的方式数，跳格子的规则是每次只能跳至正向的下一个格子，或是跳至负向的下一个格子。

输入描述：

输入一个正整数 n

输出描述：

输出跳格子的方式数

解决方案：

这是一个典型的动态规划问题。我们可以定义一个数组 dp ，其中 dp[i] 表示到达格子 i 的方式数。初始时，dp 数组中的所有元素都初始化为0。

动态规划的状态转移方程为：

如果 i 是偶数，那么 dp[i] = dp[i - 1] + dp[i / 2]，表示可以从 i - 1 直接跳到 i，或者从 i / 2 经过一次跳跃后到达 i。
如果 i 是奇数，那么 dp[i] = dp[i - 1]，表示因为只能跳至正向的下一个格子或负向的下一个格子，所以无论如何我们都不能到达奇数位置的格子。

以下是各种语言的实现：

Java 实现：




public class Main {
    public static void main(String[] args) {
        int n = 5; // 示例输入
        System.out.println(jumpFloor(n));
    }
 
    public static int jumpFloor(int target) {
        if (target <= 0) {
            return 0;
        }
        int[] dp = new int[target + 1];
        dp[0] = 0;
        dp[1] = 1;
        for (int i = 2; i <= target; i++) {
            if (i % 2 == 0) {
                dp[i] = dp[i - 1] + dp[i / 2];
            } else {
                dp[i] = dp[i - 1];
            }
        }
        return dp[target];
    }
}

Python 实现：




def jumpFloor(target):
    dp = [0] * (target + 1)
    dp[0], dp[1] = 0, 1
    for i in range(2, target + 1):
        if i % 2 == 0:
            dp[i] = dp[i - 1] + dp[i // 2]
        else:
            dp[i] = dp[i - 1]
    return dp[target]
 
print(jumpFloor(5))  # 示例输出

C++ 实现：




#include <iostream>
#include <vector>
 
using namespace std;
 
int jumpFloor(int target) {
    vector<int> dp(target + 1, 0);
    dp[0] = 0;
    dp[1] = 1;
    for (int i = 2; i <= target; i++) {
        if (i % 2 == 0) {
            dp[i] = dp[i - 1] + dp[i / 2];
        } else {
            dp[i] = dp[i - 1];
        }
    }
    return dp[target];
}
 
int main() {
    int n;
    cin >> n;
    cout << jumpFloor(n) << endl;
    return 0;
}

JavaScript 实现：




function jumpFloor(target) {
    let dp = new Array(target + 1).fill(0);
    dp[0] = 0;
    dp[1] = 1;
    for (let i = 2; i <= target; i++) {
        if (i % 2 === 0) {

System

2024-08-19

所有,vue.js

以下是一个简化的示例，展示了如何在Spring Boot后端中使用WebSocket和WebRTC实现视频通话的基本框架：

后端（Spring Boot）:




@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.enableSimpleBroker("/video-call");
        config.setApplicationDestinationPrefixes("/app");
    }
 
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/video-call").withSockJS();
    }
}
 
@Controller
public class VideoCallController {
 
    @MessageMapping("/video-call/offer")
    @SendTo("/video-call/broadcast")
    public VideoCallMessage broadcastOffer(VideoCallMessage videoCallMessage) {
        return videoCallMessage;
    }
 
    @MessageMapping("/video-call/answer")
    @SendTo("/video-call/broadcast")
    public VideoCallMessage broadcastAnswer(VideoCallMessage videoCallMessage) {
        return videoCallMessage;
    }
 
    @MessageMapping("/video-call/candidate")
    @SendTo("/video-call/broadcast")
    public VideoCallMessage broadcastCandidate(VideoCallMessage videoCallMessage) {
        return videoCallMessage;
    }
}
 
public class VideoCallMessage {
    private String from;
    private String to;
    private String type;
    private Object content;
    // Getters and Setters
}

前端（Vue.js）:




<template>
  <div>
    <button @click="startVideoCall">开始视频通话</button>
    <video ref="localVideo" autoplay></video>
    <video ref="remoteVideo" autoplay></video>
  </div>
</template>
 
<script>
export default {
  methods: {
    startVideoCall() {
      // 建立WebSocket连接并处理信令
      const socket = new WebSocket('ws://localhost:8080/video-call');
      socket.onopen = () => { /* 发送OFFER信令 */ };
      socket.onmessage = (message) => {
        const data = JSON.parse(message.data);
        switch (data.type) {
          case 'offer':
            // 处理OFFER
            break;
          case 'answer':
            // 处理ANSWER
            break;
          case 'candidate':
            // 处理CANDIDATE
            break;
        }
      };
      
      // 创建RTCPeerConnection
      const peerConnection = new RTCPeerConnection({...});
      
      // 将视频源绑定到video元素
      navigator.mediaDevices.getUserMedia({ video: true, audio: true })
        .then(stream => {
          thi

System

2024-08-18

所有,html

在JavaScript中，您可以使用document对象的方法来查找和操作HTML元素。以下是一些常用的方法：

getElementById(id) - 通过元素的ID获取一个元素。
getElementsByClassName(className) - 通过元素的类名获取一个元素集合。
getElementsByTagName(tagName) - 通过元素的标签名获取一个元素集合。
querySelector(selector) - 通过CSS选择器获取第一个匹配的元素。
querySelectorAll(selector) - 通过CSS选择器获取所有匹配的元素集合。

示例代码：




// 通过ID获取元素
var elementById = document.getElementById('loginButton');
 
// 通过类名获取元素集合
var elementsByClassName = document.getElementsByClassName('input-field');
 
// 通过标签名获取元素集合
var elementsByTagName = document.getElementsByTagName('p');
 
// 通过CSS选择器获取第一个匹配的元素
var firstMatchedElement = document.querySelector('.nav > ul > li:first-child');
 
// 通过CSS选择器获取所有匹配的元素集合
var allMatchedElements = document.querySelectorAll('p.paragraph');

请确保在使用这些方法时，页面的DOM已经完全加载，通常可以将JavaScript代码放在<body>标签的底部或者使用window.onload事件来确保DOM完全加载。

- 阅读更多 -

javascript顺序点击文字验证

System

2024-08-18

所有,css3




// 假设有一个元素，我们将在其上附加点击事件监听器
var element = document.getElementById('myElement');
 
// 定义点击事件处理函数
function handleClick() {
    console.log('元素被点击了！');
}
 
// 定义函数来设置事件监听器，并在正确的顺序中点击元素
function sequentialClick(element, steps) {
    var currentStep = 0;
 
    // 定义一个内部的点击事件监听器
    function clickListener() {
        if (currentStep < steps) {
            handleClick(); // 执行点击操作
            currentStep++; // 步骤计数增加
        } else {
            element.removeEventListener('click', clickListener); // 移除监听器
        }
    }
 
    // 开始监听点击事件
    element.addEventListener('click', clickListener);
 
    // 模拟第一次点击开始序列
    element.click();
}
 
// 使用函数点击五次元素
sequentialClick(element, 5);

这段代码首先定义了一个元素和点击事件处理函数。sequentialClick函数负责设置事件监听器，并在每次点击后递增步骤计数。当步骤计数达到预设的次数后，事件监听器会被移除，停止继续点击。这样，我们可以通过调用sequentialClick函数，并传入元素和需要点击的次数，来模拟顺序点击操作。

- 阅读更多 -

JavaWeb第二章：HTML和CSS的知识制作静态网页

System

2024-08-18

所有,css

在JavaWeb的第二章中，我们通常会学习HTML和CSS来创建静态网页。以下是一个简单的HTML页面示例，它包含了基本的HTML结构和一些CSS样式。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例静态页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }
        .header {
            background-color: #333;
            color: #fff;
            padding: 10px 0;
            text-align: center;
        }
        .content {
            margin: 15px;
            padding: 20px;
            background-color: #fff;
        }
        .footer {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 10px 0;
            position: absolute;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
 
<div class="header">
    <h1>我的网站</h1>
</div>
 
<div class="content">
    <h2>欢迎来到我的网页</h2>
    <p>这是一个示例网页，展示了基本的HTML和CSS用法。</p>
</div>
 
<div class="footer">
    <p>版权所有 &copy; 2023</p>
</div>
 
</body>
</html>

这个示例包含了一个简单的页面结构，其中包括头部（Header）、内容区（Content）和底部（Footer）。CSS样式被放在了<head>标签内的<style>标签中，以内联的方式应用于整个页面。这是一个入门级的静态网页示例，展示了基本的布局和样式设置。在实际开发中，会涉及到更复杂的HTML标签、CSS样式和交互式JavaScript代码。

- 阅读更多 -