Tech Blog

2024-08-14

CSS可以通过多种方式实现九宫格布局，以下是一种使用CSS Grid的方法：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>九宫格布局</title>
<style>
  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 每行三个等宽的列 */
    grid-template-rows: repeat(3, 1fr); /* 每列三个等高的行 */
    gap: 10px; /* 格子之间的间隙 */
  }
  .grid-item {
    background-color: #f0f0f0; /* 格子的背景色 */
    border: 1px solid #ccc; /* 格子的边框 */
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
</head>
<body>
 
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>
 
</body>
</html>

这段代码使用了CSS Grid布局来创建一个3x3九宫格。.grid-container 类定义了一个3列3行的网格布局，每个格子都是等宽等高的。.grid-item 类则定义了格子的样式，包括背景色、边框以及居中显示内容的flex布局。

- 阅读更多 -

Threejs 中使用HTML融合、交互CSS2DObject对象

System

2024-08-14

所有,css




import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
 
let camera, scene, renderer, labelRenderer, controls;
let mesh;
 
init();
animate();
 
function init() {
    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
    camera.position.set(0.5, 0.5, 0.5);
 
    scene = new THREE.Scene();
 
    // 创建一个立方体
    let geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
    mesh = new THREE.Mesh(geometry, new THREE.MeshNormalMaterial());
    scene.add(mesh);
 
    // 创建CSS2DRenderer
    labelRenderer = new CSS2DRenderer();
    labelRenderer.setSize(window.innerWidth, window.innerHeight);
    labelRenderer.domElement.style.position = 'absolute';
    labelRenderer.domElement.style.top = 0;
    document.body.appendChild(labelRenderer.domElement);
 
    // 创建2D标签对象
    let label = document.createElement('div');
    label.style.color = 'white';
    label.innerHTML = 'Hello Three.js!';
    let labelObject = new CSS2DObject(label);
    labelObject.position.set(0.5, 0.5, 0);
    scene.add(labelObject);
 
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
 
    // 添加轨道控制器
    controls = new OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;
 
    // 监听窗口大小变化
    window.addEventListener('resize', onWindowResize, false);
}
 
function animate() {
    requestAnimationFrame(animate);
    render();
}
 
function render() {
    controls.update();
    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.005;
    renderer.render(scene, camera);
    labelRenderer.render(scene, camera);
}
 
function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.inn

- 阅读更多 -

css如何将border线加到元素内部，占内边距，不占外边距

System

2024-08-14

所有,css

在CSS中，要将border线加到元素的内部，即元素的border占据内边距，可以使用box-sizing属性。将box-sizing设置为border-box可以确保元素的实际内容区域大小不变，border和padding都被包含在元素的宽度和高度之内。

以下是实现这一效果的CSS代码示例：




.element {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 2px solid black;
  box-sizing: border-box; /* 关键点：border-box */
}

这段代码将创建一个100px×100px的正方形元素，其内容区域大小为100px - 2pxBorder - 2*10pxPadding = 68px，border和padding都从内容区域大小中减去。此外，border线不占外边距。

- 阅读更多 -

CSS原子化

System

2024-08-14

所有,css

CSS原子化是一种CSS设计方法，它将CSS的功能拆分到最小级别，每个小级别都是不可再分的。这种方法的主要目的是减少样式的复杂性，使得样式重用更加简单和高效。

原子化CSS的一种实现方式是使用类似BEM（Block Element Modifier）的命名方法，它强调模块化和功能化的设计。

以下是一个简单的CSS原子化样式实例：




/* 布局原子 */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}
 
.row {
  display: flex;
  flex-wrap: wrap;
}
 
.col-1of3 {
  flex: 1;
  flex-basis: 33.3333%;
}
 
/* 文本原子 */
.text-left {
  text-align: left;
}
 
.text-center {
  text-align: center;
}
 
.text-right {
  text-align: right;
}
 
/* 颜色原子 */
.color-white {
  color: #fff;
}
 
.color-black {
  color: #000;
}
 
/* 字体大小原子 */
.font-size-12 {
  font-size: 12px;
}
 
.font-size-14 {
  font-size: 14px;
}
 
/* 其他样式原子 */
.bg-color-primary {
  background-color: #333;
}
 
.border-radius-50 {
  border-radius: 50%;
}

在这个例子中，每个CSS类都是一个原子，它们不依赖于其他类，可以独立应用于HTML元素。这样的设计使得样式可复用性提高，减少了样式冲突，并提升了项目的可维护性。

- 阅读更多 -

CSS常用动画网站(纯css echarts等建议经常阅读积累素材)

System

2024-08-14

所有,css

CSS动画和ECharts的结合可以创建丰富的数据可视化效果。以下是一些使用纯CSS和ECharts创建的动画网站示例：

ECharts 的 CSS 动画示例:




<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts CSS 动画示例</title>
    <!-- 引入 ECharts 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <style>
        .echart-animation {
            /* 定义动画 */
            animation: rotate 5s infinite linear;
        }
        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <!-- 准备一个用于显示图表的容器 -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script>
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
 
        // 指定图表的配置项和数据
        var option = {
            series: [{
                type: 'pie',
                radius: '55%',
                data: [
                    {value: 235, name: '视频广告'},
                    {value: 274, name: '联盟广告'},
                    {value: 310, name: '邮件营销'}
                ],
                animationType: 'scale', // 动画类型
                animationEasing: 'elasticOut', // 动画缓动函数
                animationDelay: function (idx) {
                    return Math.random() * 200;
                }
            }]
        };
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

ECharts 和 CSS 实现的动画图表:




<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 和 CSS 动画示例</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <style>
        .chart-animation {
            animation: fadeIn 3s infinite;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
    </style>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script>
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            series: [
                {
                    type: 'bar',
                    data: [220, 182, 191, 234, 290, 330, 310],

System

2024-08-14

所有,ajax

报错解释：

HTTP 415 错误表示服务器无法处理请求因为其媒体类型（Content-Type）不被服务器所支持。在这个上下文中，客户端尝试向服务器发送一个POST请求，但请求的Content-Type头部与服务器能够处理的类型不匹配。

解决方法：

检查客户端发送请求时的Content-Type头部是否正确。例如，如果你正在发送JSON数据，确保设置了正确的"Content-Type": "application/json"。
确认服务器端的路由处理程序是否配置为接受并解析请求中的媒体类型。如果你使用的是Express.js等框架，确保你已经使用了相应的中间件，如body-parser，来解析请求体。
如果你是在前后端分离的项目中，确保前端发送请求时的Content-Type与后端期望的类型一致。
如果你是在使用第三方库或工具发送请求，确保它们配置正确，并且支持你想要发送的媒体类型。
如果你有权限修改服务器代码，检查服务器端的中间件或路由处理程序是否有对Content-Type的校验逻辑，并确保它们正确处理所有预期的媒体类型。

System

2024-08-14

所有,ajax

由于您的问题涉及到一个完整的项目，我将提供一个简化的解决方案，包括Spring Boot项目的基本结构和配置，以及一个简单的MyBatis Mapper接口示例。

创建Spring Boot项目：




// pom.xml 依赖
<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.3</version>
    </dependency>
 
    <!-- Database Driver -->
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <version>8.0.19</version>
    </dependency>
</dependencies>

配置application.properties:




spring.datasource.url=jdbc:mysql://localhost:3306/hrm?useSSL=false&serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=yourpassword
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
 
mybatis.mapper-locations=classpath:mapper/*.xml
mybatis.type-aliases-package=com.yourpackage.model

创建一个简单的MyBatis Mapper接口:




// UserMapper.java
package com.yourpackage.mapper;
 
import com.yourpackage.model.User;
import org.apache.ibatis.annotations.Select;
import org.springframework.stereotype.Repository;
 
@Repository
public interface UserMapper {
    @Select("SELECT * FROM users WHERE id = #{id}")
    User getUserById(int id);
}

创建一个Service层来使用Mapper:




// UserService.java
package com.yourpackage.service;
 
import com.yourpackage.mapper.UserMapper;
import com.yourpackage.model.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
 
@Service
public class UserService {
    @Autowired
    private UserMapper userMapper;
 
    public User getUserById(int id) {
        return userMapper.getUserById(id);
    }
}

创建一个Con

- 阅读更多 -

【Ajax】笔记-Ajax案例准备与请求基本操作

System

2024-08-14

所有,ajax




// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
 
// 准备要发送的数据
var urlEncodedData = '';
var urlEncodedDataPairs = [];
var name = encodeURIComponent('Your Name');
var age = encodeURIComponent('100');
urlEncodedDataPairs.push('name=' + name);
urlEncodedDataPairs.push('age=' + age);
urlEncodedData = urlEncodedDataPairs.join('&').replace(/%20/g, '+');
 
// 配置请求
xhr.open('POST', 'https://example.com/api/data');
 
// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
 
// 监听请求状态变化
xhr.onload = function() {
    if (this.status == 200) {
        // 请求成功
        console.log(this.responseText);
    } else {
        // 请求失败
        console.error(this.statusText);
    }
};
 
// 发送请求
xhr.send(urlEncodedData);

这段代码演示了如何使用原生JavaScript创建一个AJAX POST请求，并发送URL编码后的数据到服务器。代码中包含了创建XMLHttpRequest对象、准备数据、设置请求、监听响应和发送请求的全过程。

- 阅读更多 -

在ajax中如何使用jquery循环。

System

2024-08-14

所有,ajax

在jQuery中，你可以使用$.each()函数来遍历对象或数组，并且可以在AJAX请求中使用它。以下是一个简单的例子，展示了如何在AJAX成功回调函数中使用$.each()来遍历返回的数据。




$.ajax({
    url: 'your-endpoint-url',
    type: 'GET',
    dataType: 'json',
    success: function(data) {
        // 使用$.each遍历返回的数据
        $.each(data, function(index, item) {
            console.log(index, item);
            // 在这里处理每个item
        });
    },
    error: function(xhr, status, error) {
        console.error("An error occurred: " + status + "\nError: " + error);
    }
});

在这个例子中，your-endpoint-url是你要请求的服务器端点，dataType: 'json'指定了预期的数据类型。在success回调函数中，data是从服务器接收到的数据，我们使用$.each来遍历这个数据。index是数组索引或对象的键，而item是当前遍历到的数据项。在循环体内，你可以根据需要处理每个项。如果是遍历对象属性，index将是属性名，item将是属性值。

System

2024-08-14

所有,ajax

在Spring MVC中，使用@RequestBody注解可以处理AJAX请求传递给后端的数据。AJAX请求可以发送多种数据格式，如application/json、application/x-www-form-urlencoded、multipart/form-data等。

application/json格式：
发送JSON格式的数据时，通常需要将数据转换为JSON字符串，并设置请求头Content-Type为application/json。在Spring MVC中，可以直接使用@RequestBody注解将JSON字符串转换为Java对象。
application/x-www-form-urlencoded格式：
这是标准的HTML表单数据格式，通常用于发送键值对数据。在Spring MVC中，可以直接使用@RequestParam注解获取这些参数。
multipart/form-data格式：
这种格式常用于文件上传。Spring MVC提供了MultipartResolver接口来处理这种类型的数据。

以下是一个使用application/json格式发送AJAX请求的例子：

JavaScript (使用jQuery发送AJAX请求):




var data = {
    name: "John",
    age: 30
};
 
$.ajax({
    url: '/your-endpoint',
    type: 'POST',
    contentType: 'application/json',
    data: JSON.stringify(data),
    success: function(response) {
        // 处理响应
    }
});

Spring MVC Controller:




import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.http.ResponseEntity;
 
@RestController
public class YourController {
 
    @PostMapping("/your-endpoint")
    public ResponseEntity<String> handleAjaxRequest(@RequestBody YourDataObject data) {
        // 处理接收到的数据
        return ResponseEntity.ok("Success");
    }
}
 
class YourDataObject {
    private String name;
    private int age;
 
    // 必要的getter和setter
}

在这个例子中，JavaScript 代码将数据转换为JSON字符串并发送到服务器。Spring MVC的Controller中的方法使用@RequestBody注解接收JSON数据，并将其自动转换成YourDataObject对象。

- 阅读更多 -