分类前端技术下的文章

2024-08-17

在前端开发中，CSS、JavaScript、Bootstrap、Vue 2.x 和 AJAX 是常用的技术。以下是一个简单的例子，展示如何使用这些技术创建一个简单的用户界面，该界面可以通过 AJAX 异步获取数据并显示在表格中。




<!DOCTYPE html>
<html>
<head>
    <title>用户列表</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
    <div id="app" class="container">
        <table class="table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>姓名</th>
                    <th>邮箱</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="user in users">
                    <td>{{ user.id }}</td>
                    <td>{{ user.name }}</td>
                    <td>{{ user.email }}</td>
                </tr>
            </tbody>
        </table>
    </div>
 
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                users: []
            },
            created() {
                this.fetchUsers();
            },
            methods: {
                fetchUsers() {
                    $.ajax({
                        url: 'https://jsonplaceholder.typicode.com/users',
                        type: 'GET',
                        dataType: 'json',
                        success: (data) => {
                            this.users = data;
                        },
                        error: (error) => {
                            console.error('Error fetching users:', error);
                        }
                    });
                }
            }
        });
    </script>
</body>
</html>

这段代码首先定义了一个 Vue 实例，在实例被创建时（created 钩子），通过 AJAX 从一个示例用户数据 API 获取用户数据，并将其存储在 Vue 实例的 users 数组中。然后，使用 Vue 的 v-for 指令在表格中迭代 users 数组，将每个用户的信息显示在表格中。这个简单的例子展示了如何将这些技术结合在一起，以创建一个响应用户界面并能够异步获取数据。

System

2024-08-17

所有,ajax




// 创建一个新的 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
 
// 配置请求类型、URL 以及是否异步处理
xhr.open('GET', 'your-backend-url', true);
 
// 设置请求完成的回调函数
xhr.onreadystatechange = function () {
  // 请求完成并且响应状态码为 200
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      // 处理请求成功的响应数据
      console.log(xhr.responseText);
    } else {
      // 处理请求失败
      console.error('AJAX Request was unsuccessful: ' + xhr.statusText);
    }
  }
};
 
// 发送请求
xhr.send();

这段代码演示了使用AJAX技术从服务器获取数据的基本步骤。这包括创建一个新的XMLHttpRequest对象，配置请求，设置回调函数来处理响应，然后发送请求。成功获取数据后，你可以在回调函数中对数据进行处理。

- 阅读更多 -

Springboot+ajax+mybatis实现简易网页

System

2024-08-17

所有,ajax

要使用Spring Boot、Ajax和MyBatis实现一个简易的网页，你需要创建一个Spring Boot项目，并配置MyBatis。以下是一个简化的例子：

创建一个Spring Boot项目，并添加MyBatis和Web依赖。




<dependencies>
    <!-- Spring Boot Web Starter -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
 
    <!-- MyBatis Framework -->
    <dependency>
        <groupId>org.mybatis.spring.boot</groupId>
        <artifactId>mybatis-spring-boot-starter</artifactId>
        <version>2.1.4</version>
    </dependency>
 
    <!-- Database Driver -->
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <scope>runtime</scope>
    </dependency>
</dependencies>

配置application.properties文件，包括数据库连接和MyBatis mapper位置。




spring.datasource.url=jdbc:mysql://localhost:3306/your_database
spring.datasource.username=your_username
spring.datasource.password=your_password
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
 
mybatis.mapper-locations=classpath:mapper/*.xml

创建一个简单的Controller。




@Controller
public class SimpleController {
 
    @Autowired
    private YourService yourService;
 
    @RequestMapping("/greeting")
    @ResponseBody
    public String greeting() {
        return yourService.getGreeting();
    }
}

创建Service和Mapper。




@Service
public class YourService {
 
    @Autowired
    private YourMapper yourMapper;
 
    public String getGreeting() {
        return yourMapper.selectGreeting();
    }
}




@Mapper
public interface YourMapper {
    @Select("SELECT greeting FROM your_table LIMIT 1")
    String selectGreeting();
}

创建HTML页面，并使用Ajax调用Spring Boot Controller。




<!DOCTYPE html>
<html>
<head>
    <title>Simple Page</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#loadGreeting").click(function() {
                $.ajax({
                    url: "/greeting",
                    type: "GET",
                    success: function(response) {

System

2024-08-17

所有,ajax




// 引入必要的命名空间
using System;
using System.Web;
using Telerik.Web.UI;
 
// 定义一个扩展器，提供加密和解密的方法
public static class RAU_crypto
{
    // 加密数据
    public static string Encrypt(string data)
    {
        // 使用Telerik的加密功能进行加密
        return RadControlsUtils.Encrypt(data);
    }
 
    // 解密数据
    public static string Decrypt(string encryptedData)
    {
        // 使用Telerik的解密功能进行解密
        return RadControlsUtils.Decrypt(encryptedData);
    }
}
 
// 使用示例
public class SomeClass
{
    public void ProcessData()
    {
        string secretData = "SensitiveInformation";
        
        // 加密数据
        string encryptedData = RAU_crypto.Encrypt(secretData);
        
        // 在需要的时候解密数据
        string decryptedData = RAU_crypto.Decrypt(encryptedData);
        
        // 使用解密后的数据
        HttpContext.Current.Response.Write(decryptedData);
    }
}

这个代码示例展示了如何使用RAU_crypto类来加密和解密数据。Encrypt方法使用Telerik的RadControlsUtils.Encrypt方法进行加密，而Decrypt方法使用Telerik的RadControlsUtils.Decrypt方法进行解密。这个示例提供了一个简单的接口来进行数据的安全处理。

- 阅读更多 -

jQuery中的ajax通信技术的讲解

System

2024-08-17

所有,ajax

在jQuery中，可以使用$.ajax()方法进行AJAX通信。这是一个强大的方法，可以用来执行GET、POST等HTTP请求。

以下是一个使用$.ajax()方法的例子：




$.ajax({
    url: 'your-endpoint.php', // 请求的URL
    method: 'GET', // 请求方法，可以是GET、POST、PUT、DELETE等
    data: {
        key1: 'value1',
        key2: 'value2'
    },
    success: function(response) {
        // 请求成功时的回调函数
        console.log(response);
    },
    error: function(xhr, status, error) {
        // 请求失败时的回调函数
        console.error(error);
    }
});

对于简单的GET请求，还可以使用$.get()方法：




$.get('your-endpoint.php', { key1: 'value1', key2: 'value2' }, function(response) {
    // 请求成功时的回调函数
    console.log(response);
});

对于简单的POST请求，可以使用$.post()方法：




$.post('your-endpoint.php', { key1: 'value1', key2: 'value2' }, function(response) {
    // 请求成功时的回调函数
    console.log(response);
});

这些方法都是基于$.ajax()的封装，适用于不同的场景。简单请求可以用更简单的方法，复杂请求则需要使用$.ajax()以利用其全部功能。

- 阅读更多 -

AJAX——图片上传

System

2024-08-17

所有,ajax

使用AJAX上传图片，可以通过创建一个FormData对象来构建表单数据，然后使用XMLHttpRequest或fetch API发送异步请求。以下是使用fetch API上传图片的示例代码：




// HTML部分
<input type="file" id="imageInput" />
<button onclick="uploadImage()">上传图片</button>
 
// JavaScript部分
function uploadImage() {
    const input = document.getElementById('imageInput');
    const file = input.files[0]; // 获取文件
    const formData = new FormData(); // 创建FormData对象
    formData.append('image', file); // 将文件添加到FormData中
 
    fetch('/upload', { // 你的上传接口地址
        method: 'POST',
        body: formData
    })
    .then(response => response.json()) // 如果服务器返回的是JSON，可以使用json()解析
    .then(data => console.log(data)) // 处理服务器返回的数据
    .catch(error => console.error('上传出错:', error)); // 处理错误
}

确保服务器端支持解析multipart/form-data类型的POST请求，并且能正确处理上传的文件。

- 阅读更多 -

雪花算法改造: 兼容JS截短位数的53bit分布式ID生成器

System

2024-08-17

所有,javascript

雪花算法（Snowflake）是一种用于生成分布式唯一ID的算法，它能够保证在分布式系统中每个节点每秒钟生成数十亿的唯一ID，且这些ID按照时间的顺序排序。

在JavaScript中，由于Number类型的精度限制，如果直接使用雪花算法生成的64位ID，可能会丢失精度，导致ID不能正确表示。因此，需要对雪花算法的位数进行适当的改造，以确保在JavaScript中能够正确地表示和使用这些ID。

以下是一个改造后的53bit分布式ID生成器的示例代码：




class Snowflake {
    constructor() {
        this.epoch = 1577836800000; // 自定义起始时间（毫秒）
        this.lastTimestamp = -1;
        this.sequence = 0;
        this.nodeId = 0; // 节点ID
    }
 
    /**
     * 生成新的ID
     */
    nextId() {
        let timestamp = Date.now();
        let timestampDiff = timestamp - this.epoch;
 
        if (timestampDiff >= 2 ** 42) {
            throw new Error('Timestamp bits are exhausted');
        }
 
        let sequenceBits = 13;
        let nodeIdBits = 10;
 
        let id = (timestampDiff << (sequenceBits + nodeIdBits)) +
                 (this.nodeId << sequenceBits) +
                 (this.sequence & ((1 << sequenceBits) - 1));
 
        if (this.lastTimestamp === timestamp) {
            this.sequence = (this.sequence + 1) & ((1 << sequenceBits) - 1);
            if (this.sequence === 0) {
                // 等待下一个毫秒
                throw new Error('Sequence bits are exhausted');
            }
        } else {
            this.sequence = 0;
        }
 
        this.lastTimestamp = timestamp;
 
        return id;
    }
}
 
// 使用示例
const snowflake = new Snowflake();
const id = snowflake.nextId();
console.log(id);

在这个改造后的版本中，我们使用了JavaScript的Number类型来表示ID，但是限制了时间戳、序列号和节点ID的位数，以确保在JavaScript中不会因为Number类型的精度问题而导致ID的丢失。这样，我们就可以在JavaScript环境中使用雪花算法生成的53bit分布式ID了。

System

2024-08-17

所有,javascript




import * as tf from '@tensorflow/tfjs';
import { loadFrozenModel, getFrozenModelMemoryUsage } from '@tensorflow/tfjs-converter';
 
// 假设我们已经有一个保存好的模型文件，比如一个FrozenGraphDef文件
const modelUrl = 'path/to/model.pb';  // 模型文件的URL
const weightsUrl = 'path/to/weights.bin';  // 模型权重文件的URL
 
// 加载模型
const model = await loadFrozenModel(modelUrl, weightsUrl);
 
// 检查模型内存使用情况
const usage = getFrozenModelMemoryUsage(modelUrl);
console.log(`模型大小: ${usage.totalBytes} bytes`);
 
// 使用模型进行推理
// 假设我们有一个输入张量
const input = tf.randomNormal([1, 28, 28, 1]);  // 例如MNIST手写数字识别的输入
 
// 应用模型进行预测
const output = model.predict(input);
 
// 处理输出并做相应的操作
// ...
 
// 清理资源
input.dispose();
output.dispose();

这段代码展示了如何在TensorFlow.js中加载一个已经保存好的模型（例如一个FrozenGraphDef文件），并进行基本的推理操作。代码中包含了加载模型、检查模型内存使用情况、模型预测和资源清理的基本步骤。

- 阅读更多 -

解决vue3+echarts关于无法获取dom宽度和高度的问题

System

2024-08-17

所有,javascript

在Vue 3中使用ECharts时，如果遇到“无法获取DOM宽度和高度”的问题，通常是因为ECharts实例化的时机不正确或者对应的DOM元素尚未准备好。为了解决这个问题，可以采用以下步骤：

确保ECharts的初始化在DOM元素准备好之后。可以使用Vue的ref属性来获取DOM元素，并在onMounted生命周期钩子中初始化ECharts。
监听窗口大小变化，在窗口大小发生变化时，重新设置ECharts的宽度和高度。

以下是一个简单的示例代码：




<template>
  <div ref="chartContainer" style="width: 100%; height: 400px;"></div>
</template>
 
<script setup>
import { onMounted, ref, onUnmounted, watch } from 'vue';
import * as echarts from 'echarts';
 
const chartContainer = ref(null);
let myChart = null;
 
onMounted(() => {
  myChart = echarts.init(chartContainer.value);
  myChart.setOption({
    // ECharts 的配置项
  });
 
  // 监听窗口大小变化
  window.addEventListener('resize', resizeChart);
});
 
onUnmounted(() => {
  // 清理操作
  window.removeEventListener('resize', resizeChart);
  myChart && myChart.dispose();
});
 
function resizeChart() {
  myChart && myChart.resize();
}
 
// 监听容器大小变化
watch(chartContainer, (newContainer, oldContainer) => {
  if (newContainer && newContainer !== oldContainer) {
    resizeChart();
  }
});
</script>

在这个示例中，我们使用了Vue 3的<script setup>语法糖。通过onMounted生命周期钩子初始化ECharts实例，并监听窗口大小变化来适时更新图表的尺寸。同时，使用onUnmounted生命周期钩子来清理工作，如移除窗口的大小变化监听器和释放ECharts实例。

- 阅读更多 -

js使用scrollIntoView()被遮挡

System

2024-08-17

所有,javascript

scrollIntoView() 方法被用于将元素滚动到浏览器的可视区域。如果该元素在页面中被其他元素遮挡，你可能需要在调用 scrollIntoView() 之前先滚动到该元素的位置。

解决方案：

使用 scrollIntoView() 方法滚动到元素。
如果元素被遮挡，可能需要先滚动到其父元素的位置，然后再使用 scrollIntoView()。

示例代码：




// 获取需要滚动到视图的元素
var element = document.getElementById('my-element');
 
// 如果需要，先滚动到父元素的位置
var parent = element.parentNode;
parent.scrollIntoView();
 
// 然后滚动到指定元素
element.scrollIntoView();

如果你需要平滑滚动到视图中，可以传递一个选项对象给 scrollIntoView() 方法，并设置 behavior: 'smooth'。




element.scrollIntoView({ behavior: 'smooth' });

确保你的元素不是隐藏的，或者它的任何父元素都没有设置 overflow: hidden 或 visibility: hidden 样式，否则元素可能不可见，因此无法滚动到视图中。

- 阅读更多 -