Tech Blog

2024-08-14

在HBuilderX中创建uni-app项目并使用Tailwind CSS，你需要执行以下步骤：

安装Tailwind CSS:
在项目的根目录中打开终端，运行以下命令来安装Tailwind CSS及其依赖项：
```
npm install -D tailwindcss postcss autoprefixer
```

创建Tailwind CSS配置文件:

在项目根目录下创建一个名为tailwind.config.js的文件，并添加以下内容：




// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

创建PostCSS配置文件:

在项目根目录下创建一个名为postcss.config.js的文件，并添加以下内容：




// postcss.config.js
module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ],
};

创建Tailwind CSS样式文件:
在项目的src/assets目录下创建一个名为tailwind.css的文件，并添加以下内容：
```
/* src/assets/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
```
在uni-app项目中引入Tailwind CSS样式文件:
打开main.js或App.vue文件，并在文件顶部添加以下内容来引入Tailwind CSS样式：
```
// main.js 或 App.vue
import './assets/tailwind.css';
```
使用Tailwind CSS类:
现在你可以在uni-app项目的.vue文件中的模板中使用Tailwind CSS类了。例如：
```
<template>
  <view class="text-blue-700">Hello Tailwind!</view>
</template>
```

确保在使用Tailwind CSS时遵循其指南来为你的项目添加配置，并且在生产环境中优化你的Tailwind CSS使用以减少最终文件的大小。

- 阅读更多 -

使用CSS的object-position实现图片在img标签中的定位

System

2024-08-14

所有,css

object-position属性在CSS中用于指定背景图片的位置，但它不能直接应用于<img>标签。object-position属性通常与object-fit属性一起使用，以调整背景图片的填充方式。

object-fit属性可以设置为以下几种值：

fill：默认值，拉伸图片以填充容器。
contain：保持图片的宽高比，缩放图片以完全装进容器内。
cover：保持图片的宽高比，缩放图片以完全覆盖容器。
none：不改变图片大小，图片可能会溢出容器。
scale-down：效果跟none或contain中较小的那个相同。

然而，object-position属性可以用于背景图片，通过background-image属性来设置。

例如，如果你想要设置一个背景图片并定位它，你可以这样做：




div {
  width: 300px;
  height: 200px;
  background-image: url('image.jpg');
  background-position: right bottom;
  background-repeat: no-repeat;
}

但如果你想要在<img>标签中使用object-position，你可以使用一个容器来模拟<img>标签的效果，如下所示：




.img-container {
  width: 300px;
  height: 200px;
  background-image: url('image.jpg');
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: cover; /* 或者其他 object-fit 值 */
  overflow: hidden;
}




<div class="img-container"></div>

在这个例子中，.img-container类的作用就像一个<img>标签，背景图片的位置可以通过background-position来控制。这种方法模拟了<img>标签的一些行为，但并非所有<img>标签的特性都可以这样模拟。

- 阅读更多 -

html5&css&js代码 018颜色表

System

2024-08-14

所有,css

HTML5, CSS 和 JavaScript 可以用来创建一个颜色表，下面是一个简单的示例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>颜色表</title>
<style>
  .color-table {
    border-collapse: collapse;
    width: 100%;
  }
  .color-table th, .color-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }
  .color-table tr:nth-child(even) {
    background-color: #f2f2f2;
  }
</style>
</head>
<body>
 
<h2>颜色表</h2>
 
<table class="color-table">
  <tr>
    <th>颜色名称</th>
    <th>十六进制</th>
    <th>RGB</th>
  </tr>
  <tr>
    <td>红色</td>
    <td>#FF0000</td>
    <td>rgb(255, 0, 0)</td>
  </tr>
  <tr>
    <td>绿色</td>
    <td>#00FF00</td>
    <td>rgb(0, 255, 0)</td>
  </tr>
  <tr>
    <td>蓝色</td>
    <td>#0000FF</td>
    <td>rgb(0, 0, 255)</td>
  </tr>
  <!-- 更多颜色行 -->
</table>
 
<script>
  // JavaScript 代码可以用来动态生成颜色表，但这里我们手动添加了几行作为示例
</script>
 
</body>
</html>

这个示例创建了一个简单的颜色表，包括颜色名称、十六进制和RGB代码。你可以根据需要添加更多的颜色信息。使用CSS为表格添加了条纹背景，使用JavaScript可以动态生成颜色信息，或者从外部数据源获取颜色数据。

- 阅读更多 -

CSS弹性布局

System

2024-08-14

所有,css

CSS弹性布局（Flexible Layout）是一种现代化的布局方式，可以简便高效地创建复杂的布局结构。

以下是一个简单的弹性布局示例，创建一个水平居中的容器，其中包含三个子元素，每个子元素都会自动伸缩以填满可用空间：




<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex; /* 指定为弹性布局 */
  justify-content: center; /* 水平居中子元素 */
}
 
.flex-item {
  flex: 1; /* 子元素均匀伸缩 */
  padding: 10px;
  margin: 5px;
  background-color: lightblue;
}
</style>
</head>
<body>
 
<div class="flex-container">
  <div class="flex-item">子元素 1</div>
  <div class="flex-item">子元素 2</div>
  <div class="flex-item">子元素 3</div>
</div>
 
</body>
</html>

在这个例子中，.flex-container 类使用 display: flex 属性将容器指定为弹性布局。.flex-item 类使用 flex: 1 属性使得每个子元素可以自动伸缩，平分容器的水平空间。justify-content: center 属性确保子元素水平居中。

System

2024-08-14

所有,css

在移动端适配中，我们通常使用媒体查询和相关CSS单位来实现响应式布局。以下是一些关键点和示例代码：

媒体查询：




/* 针对不同屏幕宽度的样式 */
@media screen and (max-width: 320px) {
    body {
        background-color: blue;
    }
}
 
@media screen and (min-width: 321px) and (max-width: 768px) {
    body {
        background-color: green;
    }
}
 
@media screen and (min-width: 769px) {
    body {
        background-color: red;
    }
}

CSS单位：
- px：像素，是固定单位，不适应不同的设备。
- em：相对于父元素的字体大小，容易造成层级复杂度。
- rem：相对于根元素的字体大小，是现代响应式布局的首选单位。
- %：百分比，相对于父元素，适合宽度设置。
- vw/vh：视口宽度/高度的百分比，适合宽度和高度设置。
- vmin/vmax：视口宽度和高度中较小/较大的那个百分比，适合图片和背景。
设备像素比(Device Pixel Ratio, DPR)：
- CSS中可以用1px等同于1dp(设备像素)，在高分辨率设备上会出现问题。
- 可以用window.devicePixelRatio获取DPR，进行适配。
像素密度(Pixels Per Inch, PPI)：
- 用于衡量屏幕的密度，可以通过window.screen.width / window.screen.height和屏幕物理尺寸结合使用。
视口(Viewport)：
- 为了使网站在移动端上正常显示，需要设置<meta name="viewport"标签。
- 例如：<meta name="viewport" content="width=device-width, initial-scale=1.0">
使用calc()函数结合媒体查询进行布局调整：




.container {
    width: calc(100% - 20px); /* 计算宽度 */
    font-size: 16px; /* 默认字体大小 */
}
 
@media screen and (min-width: 321px) {
    .container {
        width: calc(100% - 25px); /* 根据屏幕宽度调整 */
        font-size: 18px; /* 增加字体大小 */
    }
}
 
@media screen and (min-width: 769px) {
    .container {
        width: calc(100% - 30px); /* 更大屏幕宽度调整 */
        font-size: 20px; /* 进一步增加字体大小 */
    }
}

综上，移动端适配主要是通过媒体查询、CSS单位、设备像素比和视口管理来实现不同屏幕大小的适配。通过这些技术，开发者可以创建出在各种移动设备上都能保持良好用户体验的网页。

- 阅读更多 -

css实现向下的小箭头

System

2024-08-14

所有,css

在CSS中，可以使用伪元素和边框来创建向下的小箭头。以下是一个示例代码：




.arrow-down {
  position: relative;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid black; /* 改变颜色可以改变箭头颜色 */
}
 
/* 可选：为小箭头添加阴影效果 */
.arrow-down::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(to right, transparent, black, transparent);
}

HTML部分：




<div class="arrow-down"></div>

这段代码会创建一个向下的小箭头，你可以通过调整border-left和border-right的大小来改变小箭头的宽度，调整border-top的大小来改变小箭头的高度。如果需要阴影效果，可以使用伪元素添加一个线性渐变背景。

- 阅读更多 -

使用 ajax 进行前后端数据交互

System

2024-08-14

所有,ajax

使用AJAX进行前后端数据交互的基本方法如下：




// 创建一个新的 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
 
// 配置请求类型、URL 以及是否异步处理
xhr.open('POST', 'your_backend_endpoint', true);
 
// 设置请求头信息（如需要）
// xhr.setRequestHeader('Content-Type', 'application/json');
 
// 定义发送数据和请求成功后的回调函数
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 请求成功，处理返回的数据
    var response = JSON.parse(xhr.responseText);
    console.log(response);
  }
};
 
// 发送请求，如果是 GET 请求则不需要传递数据
// xhr.send(JSON.stringify({ key: 'value' }));
 
// 如果是 GET 请求，参数将附加在 URL 后面
xhr.send();

这段代码展示了如何创建一个AJAX请求，设置请求的类型、URL、请求头和数据，以及如何定义请求成功和失败时的回调函数。在实际应用中，你需要替换 'your_backend_endpoint' 为你的后端服务地址，并根据需要设置请求头和发送的数据。

- 阅读更多 -

Django中使用Ajax时使用CSRF保护

System

2024-08-14

所有,ajax

在Django中使用Ajax时，你需要确保CSRF（跨站请求伪造）保护正确实现。以下是一个简单的例子，展示了如何在Django视图中发送CSRF token，以及如何在Ajax请求中包含这个token。

首先，在你的Django模板中，确保你有一个CSRF token可以使用：




<script type="text/javascript">
var csrftoken = "{{ csrf_token }}";
</script>

然后，在你的Ajax请求中，将这个CSRF token作为HTTP头部发送：




$.ajax({
    url: '/your-endpoint/',
    type: 'POST',
    data: {
        // 发送数据
    },
    beforeSend: function(xhr, settings) {
        xhr.setRequestHeader("X-CSRFToken", csrftoken);
    },
    success: function(response) {
        // 处理响应
    },
    error: function(xhr, errmsg, err) {
        // 处理错误
    }
});

在Django的视图中，你不需要做任何特别的事情来处理CSRF token，因为Django的CSRF机制会自动处理。只要确保Ajax请求包含了正确的CSRF token，就可以保证请求是安全的。

- 阅读更多 -

前端学习--Ajax XHR/axios

System

2024-08-14

所有,ajax

在前端学习中，Ajax主要用于与服务器进行数据交换而不重新加载页面。XHR（XMLHttpRequest）和axios都是实现Ajax的工具，但它们之间有一些区别：

XHR是原生的JavaScript API，而axios是基于Promise的HTTP客户端，它可以在浏览器和node.js中使用。
XHR不支持Promise，而axios支持，这意味着使用axios可以更简单地处理异步请求。
XHR不处理JSON数据，而axios会自动解析JSON数据。

以下是使用axios发送GET和POST请求的示例代码：




// GET请求
axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data); // 处理获取到的数据
  })
  .catch(error => {
    console.error(error); // 处理错误情况
  });
 
// POST请求
axios.post('https://api.example.com/data', {
  key1: 'value1',
  key2: 'value2'
})
  .then(response => {
    console.log(response.data); // 处理获取到的数据
  })
  .catch(error => {
    console.error(error); // 处理错误情况
  });

在实际开发中，推荐使用axios，因为它更简单，更现代，并且提供了更多的功能和更好的错误处理。

- 阅读更多 -

Ajax访问本地服务器案例

System

2024-08-14

所有,ajax

在本地服务器上使用Ajax进行请求，可以通过HTTP服务器（如Apache, Nginx, 或Node.js）来实现。以下是一个使用JavaScript的Ajax请求示例，假设你已经有一个本地服务器运行在http://localhost:8080。

HTML文件（index.html）:




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax Example</title>
    <script>
        function fetchData() {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    document.getElementById("response").innerHTML = xhr.responseText;
                }
            };
            xhr.open("GET", "http://localhost:8080/data", true);
            xhr.send();
        }
    </script>
</head>
<body>
    <button onclick="fetchData()">Fetch Data</button>
    <div id="response"></div>
</body>
</html>

服务器端代码（使用Node.js的简单HTTP服务器）:




// 确保你已经安装了Node.js环境
// 假设你的Node.js版本是10.x或更高
 
// server.js
const http = require('http');
const hostname = '127.0.0.1';
const port = 8080;
 
const server = http.createServer((req, res) => {
    if (req.url == '/data') {
        res.statusCode = 200;
        res.setHeader('Content-Type', 'text/plain');
        res.end('This is the data you requested\n');
    } else {
        res.statusCode = 404;
        res.end('Not found\n');
    }
});
 
server.listen(port, hostname, () => {
    console.log(`Server running at http://${hostname}:${port}/`);
});

确保你的本地服务器正在运行，并且有一个监听8080端口的服务。然后，在浏览器中打开index.html文件，点击按钮，你将会看到从本地服务器获取到的数据。

- 阅读更多 -