1. 首页
  2. 作者
  3. System
flex布局下，盒子被挤压时如何解决
System
2024-08-17
所有,css3

在Flex布局中，如果盒子（元素）被挤压，可以通过调整盒子内部的元素顺序、使用flex属性或者设置元素的flex-shrink属性来解决。

flex-shrink属性定义了项目的缩放比例，默认值为1，表示如果空间不足，该项目将缩小。如果想要保护某个盒子不被挤压，可以将其flex-shrink属性设置为0：




.protected-box {
  flex-shrink: 0;
}

确保将这个类添加到不想被挤压的盒子上。

如果盒子内部的元素可以调整顺序，那么可以将重要内容放在布局前面或者后面，使其不易被挤压。

还可以使用flex-grow属性来保证某个盒子获取更多的空间。

示例代码：




<div style="display: flex;">
  <div style="flex: 1; background-color: lightblue;">Box 1</div>
  <div style="flex-shrink: 0; flex-grow: 1; background-color: lightcoral;">Important Box 2</div>
  <div style="flex: 1; background-color: lightgreen;">Box 3</div>
</div>

在这个例子中，Important Box 2设置了flex-shrink: 0;和flex-grow: 1;，保证了它不会被挤压，并且会获得额外的空间。其他盒子则会根据可用空间按比例伸缩。

- 阅读更多 -
CSS进阶标签属性及案例
System
2024-08-17
所有,css

在CSS中，可以使用伪类和伪元素来增强选择器的功能，以下是一些常用的伪类和伪元素属性以及相关案例：

  1. :first-child 选择器，选择父元素的第一个子元素：



p:first-child {
  color: red;
}
  1. :last-child 选择器，选择父元素的最后一个子元素：



p:last-child {
  color: red;
}
  1. :nth-child(n) 选择器，选择父元素的第n个子元素：



p:nth-child(2) {
  color: red;
}
  1. :not(selector) 选择器，选择不匹配selector的元素：



p:not(:first-child) {
  color: red;
}
  1. :empty 选择器，选择没有子元素（包括文本节点）的元素：



p:empty {
  display: none;
}
  1. :target 伪类，选择当前活动的锚点元素：



p:target {
  color: red;
}
  1. ::before 和 ::after 伪元素，在元素内容前后添加内容：



p::before {
  content: "前缀";
}
 
p::after {
  content: "后缀";
}
  1. :enabled 和 :disabled 伪类，选择可用或不可用的表单元素：



input:enabled {
  border-color: blue;
}
 
input:disabled {
  border-color: grey;
}
  1. :checked 伪类，选择被选中的表单元素：



input:checked {
  background-color: yellow;
}
  1. :hover 伪类，选择鼠标悬停的元素：



p:hover {
  color: blue;
}

这些是CSS中常用的一些进阶选择器和伪类，可以根据需要进行组合使用以实现更复杂的样式效果。

- 阅读更多 -
CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport
System
2024-08-17
所有,css

CSS像素、物理像素、设备像素、设备像素比(DPR)、PPI(Pixel Per Inch)和Viewport是与网页设计和开发中的屏幕显示有关的概念。

  1. CSS像素：CSS中的逻辑像素，用于定义尺寸。例如，width: 100px; 表示元素宽度为100个CSS像素。
  2. 物理像素：显示屏幕上的最小光线点，是屏幕显示的最小单位。
  3. 设备像素：手机或其他移动设备上的一个像素，通常与物理像素相同。但是，对于高PPI的设备，可能有多个物理像素对应一个设备像素。
  4. 设备像素比(DPR)：设备像素和CSS像素的比例。可以通过window.devicePixelRatio获取。
  5. PPI(Pixel Per Inch)：每英寸像素数，用于衡量屏幕的清晰度。
  6. Viewport：用户网页的可视区域。可以通过<meta name="viewport" content="width=device-width, initial-scale=1.0">设置使网页的宽度默认与设备宽度一致，不进行缩放。

示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;  /* CSS像素 */
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

以上代码中，div的宽度为100CSS像素，不管在什么设备上查看，div的视觉尺寸大致相同。通过设置viewport，可以确保在不同设备上网页的显示尺寸适配设备屏幕。

- 阅读更多 -
一个案例明白(css变量，路由守卫,路由鉴权,pinia,自定义指令)
System
2024-08-17
所有,css

由于提出的问题涉及到多个不同的技术领域，并且每个领域都需要一定的知识储备和实践经验才能完整解答，我将为每个问题提供简要的解答和示例代码。

  1. CSS 变量 (Custom Properties):

    CSS 变量允许我们定义可以在整个文档中重复使用的值。




:root {
  --main-bg-color: #f0f0f0;
}
 
.main {
  background-color: var(--main-bg-color);
}

  1. 路由守卫 (Route Guard):

    在前端框架中（如 Vue.js），路由守卫用于控制路由的访问权限。




const router = new VueRouter({
  routes: [
    {
      path: '/protected',
      component: ProtectedComponent,
      beforeEnter: (to, from, next) => {
        if (!authenticated) { // 检查用户是否认证
          next('/login'); // 如果没有，重定向到登录页面
        } else {
          next(); // 如果已认证，继续
        }
      }
    }
  ]
});

  1. 路由鉴权 (Navigation Guards):

    与路由守卫类似，鉴权通常在组件内部进行处理。




const MyComponent = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    if (authenticated) { // 检查用户是否认证
      next();
    } else {
      next('/login'); // 如果没有，重定向到登录页面
    }
  }
};

  1. Pinia:

    Pinia 是 Vue.js 的状态管理库，它使用 Vue 的响应式系统。




// 定义 store
import { defineStore } from 'pinia'
 
export const useMainStore = defineStore('main', {
  state: () => ({ counter: 0 }),
  actions: {
    increment() {
      this.counter++
    }
  }
})
 
// 使用 store
import { useMainStore } from './stores/useMainStore'
 
const store = useMainStore()
store.increment()

  1. 自定义指令 (Custom Directives):

    自定义指令可以用来包装DOM的特定行为。




// 注册一个全局自定义指令 `v-focus`，该指令用于元素创建后立即聚焦
Vue.directive('focus', {
  // 当绑定元素插入到DOM中
  inserted: function (el) {
    el.focus(); // 聚焦元素
  }
});
 
// 使用
<input v-focus>

以上代码示例简单展示了每个技术的概念和基本用法，但实际应用中每个技术都需要根据具体场景进行深入学习和应用。

- 阅读更多 -
css 让图片自适应变化
System
2024-08-17
所有,css

要让图片自适应变化，可以使用CSS的max-width和height属性，并将width设置为100%，这样图片就会根据父元素的宽度进行自适应变化。同时，为了防止图片变形，可以设置display: block。

下面是实现图片自适应变化的CSS代码示例：




img {
  max-width: 100%;
  height: auto;
  display: block;
}

将上述CSS添加到你的样式表中，并确保所有的图片元素都应用了这个样式。当图片的父元素宽度变化时，图片也会相应地缩放以适应新的宽度。

- 阅读更多 -
XMLHttpRequest对象 AjAX的使用
System
2024-08-17
所有,ajax

XMLHttpRequest对象是AJAX技术的核心组成部分，它可以在不重新加载页面的情况下从服务器请求数据。以下是如何使用XMLHttpRequest对象发送AJAX请求的示例代码：




// 创建一个新的XMLHttpRequest对象
var xhr = new XMLHttpRequest();
 
// 配置HTTP请求
// 第一个参数是HTTP请求方法，比如GET、POST
// 第二个参数是请求的URL
xhr.open('GET', 'https://api.example.com/data');
 
// 设置请求完成的处理函数
xhr.onreadystatechange = function() {
    // 请求完成并且响应状态码为200
    if (xhr.readyState === 4 && xhr.status === 200) {
        // 处理服务器返回的数据
        var response = JSON.parse(xhr.responseText);
        console.log(response);
    }
};
 
// 发送请求
xhr.send();

这段代码展示了如何使用XMLHttpRequest对象发送一个简单的GET请求，并在请求成功返回后处理数据。如果你想要发送POST请求或者处理其他类型的HTTP请求，你可能需要设置HTTP头部（例如，设置Content-Type），并且可能需要传递请求体数据。

- 阅读更多 -
【Ajax】笔记-设置CORS响应头实现跨域
System
2024-08-17
所有,ajax

在服务器上设置CORS（Cross-Origin Resource Sharing）响应头允许跨域请求，以下是一个示例代码，展示如何在Node.js的Express框架中设置CORS响应头：




const express = require('express');
const app = express();
 
// 设置CORS响应头
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*'); // 允许任何源访问
  res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS'); // 允许的HTTP方法
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept'); // 允许的HTTP请求头
  next();
});
 
// 示例路由
app.get('/api/data', (req, res) => {
  res.json({ message: 'This is CORS-enabled data.' });
});
 
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

在这个例子中，我们使用Express的中间件来设置CORS头部。Access-Control-Allow-Origin设置为*表示允许任何源进行跨域请求，你也可以将其设置为特定的域名以增强安全性。其他的方法和请求头也需要根据实际需求进行配置。这样，你的Express应用就可以处理来自不同源的Ajax请求了。

- 阅读更多 -
html JavaScript 调用chatgpt api
System
2024-08-17
所有,ajax

要在HTML和JavaScript中调用OpenAI的ChatGPT API，你需要一个有效的API密钥。以下是一个简单的示例，展示了如何使用JavaScript发送请求到ChatGPT API。

首先，你需要在OpenAI的网站上创建一个新的API密钥。

然后，你可以创建一个HTML文件，并在其中使用JavaScript代码来发送请求：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ChatGPT Example</title>
    <script>
        function sendMessageToGPT() {
            const apiKey = 'YOUR_OPENAI_API_KEY'; // 替换为你的API密钥
            const messages = [
                { role: 'user', content: document.getElementById('userInput').value }
            ];
 
            fetch('https://api.openai.com/v1/engines/davinci-codex/completions', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${apiKey}`
                },
                body: JSON.stringify({
                    messages,
                    model: "gpt-3.5-turbo",
                    temperature: 0.7
                })
            })
            .then(response => response.json())
            .then(data => {
                document.getElementById('botResponse').value = data.choices[0].message.content;
            })
            .catch(error => console.error('Error:', error));
        }
    </script>
</head>
<body>
    <textarea id="userInput" placeholder="Enter your message here..."></textarea>
    <button onclick="sendMessageToGPT()">Send to GPT</button>
    <textarea id="botResponse" placeholder="GPT will respond here..." readonly></textarea>
</body>
</html>

在上面的代码中，替换YOUR_OPENAI_API_KEY为你的API密钥。用户在textarea输入消息，点击按钮后，消息通过sendMessageToGPT函数发送到ChatGPT API，并将返回的响应显示在另一个textarea中。

注意：由于API使用频率和text-input的长度，OpenAI可能对请求频率有限制。在实际应用中，你可能需要实现更复杂的逻辑，比如缓存和限流，以确保遵守使用条款并保持应用的稳定性。

- 阅读更多 -
Axios基础使用以及api的深入理解
System
2024-08-17
所有,ajax



// 引入axios库
const axios = require('axios');
 
// 创建axios实例，可以添加配置信息，例如基础URL
const instance = axios.create({
  baseURL: 'https://api.example.com'
});
 
// 请求拦截器：在发送请求前做一些处理
instance.interceptors.request.use(config => {
  // 可以在这里添加例如token等请求头
  config.headers['Authorization'] = 'Bearer yourTokenHere';
  return config;
}, error => {
  // 请求错误处理
  return Promise.reject(error);
});
 
// 响应拦截器：在接收响应后做一些处理
instance.interceptors.response.use(response => {
  // 对响应数据做处理，例如只返回data部分
  return response.data;
}, error => {
  // 响应错误处理
  return Promise.reject(error);
});
 
// 发起GET请求
instance.get('/endpoint')
  .then(response => {
    console.log('Success:', response);
  })
  .catch(error => {
    console.error('Error:', error);
  });
 
// 发起POST请求
instance.post('/endpoint', { data: 'This is data' })
  .then(response => {
    console.log('Success:', response);
  })
  .catch(error => {
    console.error('Error:', error);
  });

这段代码展示了如何使用axios创建一个带有基础URL的axios实例，并且展示了如何添加请求拦截器和响应拦截器来处理请求和响应。最后，我们通过GET和POST方法发起请求，并在请求成功或失败时进行处理。这是一个基本的例子，实际使用时可以根据具体需求进行调整。

- 阅读更多 -
python爬虫从0到1 -ajax的get请求进阶
System
2024-08-17
所有,ajax



import requests
import json
 
# 定义一个函数来处理AJAX GET请求
def fetch_ajax_get(url, params=None, headers=None):
    # 发送GET请求
    response = requests.get(url, params=params, headers=headers)
    
    # 如果请求成功，解析JSON数据
    if response.status_code == 200:
        return response.json()
    else:
        print(f"请求失败，状态码：{response.status_code}")
        return None
 
# 示例URL和参数
ajax_url = "https://example.com/api/data"
params = {
    "param1": "value1",
    "param2": "value2"
}
headers = {
    "User-Agent": "your-user-agent",
    "Accept": "application/json"
}
 
# 调用函数获取数据
data = fetch_ajax_get(ajax_url, params=params, headers=headers)
 
# 输出获取到的数据
if data:
    print(json.dumps(data, indent=2))

这段代码定义了一个fetch_ajax_get函数，它接受URL、参数和请求头作为输入，并发送AJAX GET请求。如果请求成功，它会解析返回的JSON数据；如果请求失败，它会输出错误信息。这个函数可以用来处理任何需要进行AJAX GET请求的场景。

- 阅读更多 -
Copyright © 2026 Tech Blog
All Right Reserved | 京ICP备19053165号