分类前端技术下的文章

2024-08-20

在CSS中设置字体样式主要使用font-family属性来指定元素的字体系列，font-size属性来指定字体的大小，font-weight属性来指定字体的粗细，font-style属性来指定字体的风格（如斜体）。

以下是一个简单的例子，演示如何在CSS中设置字体样式：




p {
  font-family: "Helvetica", "Arial", sans-serif; /* 设置字体为Helvetica或Arial或将sans-serif作为后备字体 */
  font-size: 16px; /* 设置字体大小为16像素 */
  font-weight: bold; /* 设置字体为粗体 */
  font-style: italic; /* 设置字体风格为斜体 */
}

在HTML中使用这个样式：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Font Style Example</title>
<style>
p {
  font-family: "Helvetica", "Arial", sans-serif;
  font-size: 16px;
  font-weight: bold;
  font-style: italic;
}
</style>
</head>
<body>
<p>This is a paragraph with custom font style.</p>
</body>
</html>

在这个例子中，段落<p>的字体被设置为Helvetica或Arial，如果浏览器不支持这些字体，则会使用无衬线字体sans-serif。字体大小为16像素，字体粗细为粗体，字体风格为斜体。

- 阅读更多 -

旋转、缩放、移动：掌握CSS Transform动画的终极指南！

System

2024-08-20

所有,css




/* 定义动画 */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
 
@keyframes scale {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(2);
  }
}
 
@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100px);
  }
}
 
/* 应用动画 */
.element {
  animation: rotate 2s infinite linear,
              scale 2s infinite linear,
              move 2s infinite linear;
}

这段代码定义了三个关键帧动画，分别用于旋转、缩放和移动，并将它们应用于.element类。每个动画都在无限循环中以线性的速度执行，每个动画的持续时间是2秒。这样的组合可以创建一个连续的动画效果，展示了CSS变换的强大功能。

- 阅读更多 -

原生ajax_axios框架_json传输字符串

System

2024-08-20

所有,ajax

在JavaScript中，使用原生的XMLHttpRequest进行AJAX请求，以及使用axios库进行相同操作的示例代码如下：

原生AJAX使用`XMLHttpRequest`




var xhr = new XMLHttpRequest();
xhr.open("POST", "your_api_url", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var json = JSON.parse(xhr.responseText);
    console.log(json);
  }
};
var data = JSON.stringify({ key: "value" });
xhr.send(data);

使用axios库

首先，确保已经安装axios：




npm install axios

然后，使用axios发送POST请求：




const axios = require('axios');
 
axios.post('your_api_url', { key: "value" })
     .then(response => {
         console.log(response.data);
     })
     .catch(error => {
         console.error(error);
     });

在这两种情况下，我们都是向服务器发送了一个JSON格式的字符串，并在收到服务器的响应时打印出来。注意，服务器端需要接收JSON格式的数据，并返回JSON格式的响应。

- 阅读更多 -

简单实现WebSocket，Springboot聊天室，源代码

System

2024-08-20

所有,ajax

以下是一个简单的Spring Boot聊天室示例，使用WebSocket实现：




import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;
 
import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.Collections;
import java.util.HashSet;
import java.util.Set;
 
@Controller
@RequestMapping("/chat")
public class ChatController {
 
    @GetMapping
    public ModelAndView chat() {
        return new ModelAndView("chat");
    }
}
 
@ServerEndpoint("/ws/chat")
public class ChatEndpoint {
    private static final Set<ChatEndpoint> sessions = Collections.synchronizedSet(new HashSet<>());
 
    private Session session;
 
    @OnOpen
    public void onOpen(Session session) {
        this.session = session;
        sessions.add(this);
        broadcast("New user joined the chat room.");
    }
 
    @OnClose
    public void onClose() {
        sessions.remove(this);
        broadcast("A user left the chat room.");
    }
 
    @OnMessage
    public void onMessage(String message) {
        broadcast(message);
    }
 
    @OnError
    public void onError(Throwable error) {
        error.printStackTrace();
    }
 
    public void broadcast(String message) {
        for (ChatEndpoint client : sessions) {
            try {
                synchronized (client) {
                    client.session.getBasicRemote().sendText(message);
                }
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }
}

在这个例子中，ChatController 是一个普通的Spring MVC控制器，负责处理HTTP请求并返回聊天室的页面。ChatEndpoint 使用@ServerEndpoint 注解来指定WebSocket的端点，并处理客户端的连接、关闭、消息接收和错误。

这个简单的聊天室没有数据持久化，也没有认证或授权，只是为了演示WebSocket的基本使用。在生产环境中，你需要添加安全控制、用户认证、过滤不合法的消息、处理并发等功能。

- 阅读更多 -

创建Asp.net MVC项目Ajax实现视图页面数据与后端Json传值显示

System

2024-08-20

所有,ajax

以下是一个简单的Asp.net MVC项目中使用Ajax来传递Json数据并在视图页面显示的示例。

创建一个MVC项目（如果还没有）。
添加一个模型类（如果还没有）。
在控制器中添加一个Action方法来返回Json数据。
在视图中使用Ajax调用该Action方法，并显示返回的Json数据。

模型类示例（Models/DataModel.cs）:




public class DataModel
{
    public int Id { get; set; }
    public string Name { get; set; }
}

控制器示例（Controllers/HomeController.cs）:




public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }
 
    public ActionResult GetData()
    {
        // 示例数据，实际项目中应从数据库获取
        var data = new List<DataModel>
        {
            new DataModel { Id = 1, Name = "Alice" },
            new DataModel { Id = 2, Name = "Bob" }
        };
 
        return Json(data, JsonRequestBehavior.AllowGet);
    }
}

视图示例（Views/Home/Index.cshtml）:




@{
    Layout = null;
}
 
<!DOCTYPE html>
<html>
<head>
    <title>Index</title>
    <script src="~/Scripts/jquery-3.4.1.min.js"></script>
</head>
<body>
    <div id="data-container">
        <!-- 数据将显示在这里 -->
    </div>
 
    <script type="text/javascript">
        $(document).ready(function () {
            fetchData();
        });
 
        function fetchData() {
            $.ajax({
                url: '@Url.Action("GetData", "Home")',
                type: 'GET',
                dataType: 'json',
                success: function (data) {
                    var html = '';
                    $.each(data, function (key, value) {
                        html += '<p>ID: ' + value.Id + ', Name: ' + value.Name + '</p>';
                    });
                    $('#data-container').html(html);
                },
                error: function (xhr, textStatus, errorThrown) {
                    console.log('Error fetching data: ' + textStatus);
                }
            });
        }
    </script>
</body>
</html>

在这个示例中，我们使用了jQuery的$.ajax()方法来异步获取后端的HomeController中的GetData Action方法返回的Json数据，并在成功获取数据后，使用JavaScript动态地将数据插入到页面的<div id="data-container">元素中。这样就实现了Ajax的数据传递和页面的动态更新。

- 阅读更多 -

解决jQuery JS的for循环调用ajax异步问题

System

2024-08-20

所有,ajax




// 假设我们有一个数组，包含了需要发送的数据
var dataArray = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    // ... 更多数据
];
 
// 使用jQuery发送AJAX请求的函数
function sendAjaxRequest(data, callback) {
    $.ajax({
        url: '/your/api/endpoint', // 替换为你的API端点
        type: 'POST',
        data: data,
        success: function(response) {
            callback(null, response);
        },
        error: function(error) {
            callback(error, null);
        }
    });
}
 
// 使用async.eachLimit来控制并发数量
// 需要安装async模块，可以通过npm install async来安装
var async = require('async');
 
async.eachLimit(dataArray, 5, function(item, callback) {
    sendAjaxRequest(item, callback);
}, function(err) {
    if (err) {
        console.error('An error occurred:', err);
    } else {
        console.log('All requests completed successfully.');
    }
});

在这个代码示例中，我们使用了async.eachLimit函数来控制并发执行的AJAX请求数量，这样可以避免因大量并发请求而导致的问题。我们假设你已经安装了async模块，并在你的环境中可用。如果你的环境不支持async模块，你需要先通过npm安装它：npm install async。

- 阅读更多 -

JQuery原理剖析——自己手写简易版JQuery

System

2024-08-20

所有,ajax




// 定义一个简易版的jQuery函数
function jQuery(selector) {
    var elements = [];
 
    // 如果传入的是ID选择器，直接通过getElementById获取元素
    if (selector.charAt(0) === '#') {
        var element = document.getElementById(selector.substring(1));
        if (element) elements.push(element);
    } else {
        // 如果传入的是类选择器，通过getElementsByClassName获取元素列表
        var elements = document.getElementsByClassName(selector.substring(1));
        for (var i = 0; i < elements.length; i++) {
            elements.push(elements[i]);
        }
    }
 
    // 返回包含所有匹配元素的数组
    return {
        length: elements.length,
        get: function(index) {
            return elements[index];
        },
        each: function(callback) {
            for (var i = 0; i < elements.length; i++) {
                callback.call(elements[i], i, elements[i]);
            }
        }
    };
}
 
// 使用示例
jQuery('.my-class').each(function(index, elem) {
    console.log(index, elem.nodeName);
});

这段代码实现了一个简化版的jQuery，用于选择DOM元素并迭代它们。它只支持ID选择器和类选择器，并且在内部处理它们的方式非常基础。在实际的jQuery中，选择器和方法的处理要复杂得多，包括对CSS选择器、DOM遍历、事件绑定、Ajax请求等的支持。

- 阅读更多 -

Three.js--》探秘虚拟现实VR展厅的视觉盛宴

System

2024-08-20

所有,javascript




// 引入Three.js库
import * as THREE from 'three';
 
// 创建场景
const scene = new THREE.Scene();
 
// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
 
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
// 创建立方体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
 
// 设置相机位置并指向场景中心
camera.position.z = 5;
 
// 渲染循环
function animate() {
  requestAnimationFrame(animate);
 
  // 旋转立方体
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
 
  // 渲染场景
  renderer.render(scene, camera);
}
 
animate();

这段代码展示了如何使用Three.js创建一个简单的3D场景，包括一个旋转的立方体。这是虚拟现实VR展厅可视化的一个基础例子，展示了如何将Web技术应用于创建吸引人的虚拟现实体验。

- 阅读更多 -

什么是AJAX？如何使用原生JavaScript进行AJAX请求？

System

2024-08-20

所有,ajax

AJAX，即Asynchronous JavaScript and XML（异步JavaScript和XML），是一种创建交互式网页应用的技术。它允许浏览器与服务器进行数据交换而无需刷新页面。

以下是使用原生JavaScript进行AJAX请求的示例代码：




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

在这段代码中，我们首先创建了一个新的XMLHttpRequest对象，然后使用open方法设置请求的类型、URL 以及是否异步处理（设为true以进行异步请求）。接着，我们定义了onreadystatechange事件处理函数来监听请求的不同状态变化。最后，我们调用send方法发送请求。

请注意，根据你的实际API端点和需求，你可能需要对请求方法（如GET、POST）、URL、是否发送数据以及响应类型进行相应的调整。

- 阅读更多 -

VUE AJAX提交请求到后台，前端页面刷新导致数据丢失

System

2024-08-20

所有,ajax

问题解释：

在Vue应用中，通过AJAX（如使用axios库）提交请求到后台时，如果前端页面发生刷新（比如刷新按钮、刷新事件或者直接刷新地址栏），可能会导致正在进行中的AJAX请求被取消，进而引起数据丢失。

解决方法：

使用Vue的事件修饰符.lazy来改变输入框的提交行为，从而在失去焦点时而不是在每次键入时提交数据。
使用本地存储（如localStorage或sessionStorage）在提交请求前临时保存数据，在页面刷新后，可以在页面加载时检查这些存储的数据，并在页面重新加载后恢复它们。
在提交请求前，使用一个全局的加载指示器，如果有加载指示器存在，阻止页面刷新。
使用Vue的beforeUnload事件监听器，在用户尝试离开页面时显示一个确认对话框，询问用户是否真的要离开。
如果是表单数据丢失，可以考虑使用Vue的v-model.lazy绑定，或者在表单提交前手动调用事件来触发数据的同步。

示例代码：




// 使用axios进行请求
axios.post('/api/data', { data: this.formData })
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    // 处理错误
  });
 
// 使用本地存储临时保存数据
localStorage.setItem('formData', JSON.stringify(this.formData));
// 页面加载时恢复数据
this.formData = JSON.parse(localStorage.getItem('formData') || '{}');
 
// 使用beforeUnload事件
window.addEventListener('beforeunload', (event) => {
  const message = '你有未保存的更改，确定要离开吗？';
  event.returnValue = message; // 标准的跨浏览器兼容性处理
  return message;
});

注意：在实际应用中，应当根据具体情况选择合适的方法，并确保数据的安全性和一致性。

- 阅读更多 -

原生AJAX使用XMLHttpRequest

使用axios库

原生AJAX使用`XMLHttpRequest`