分类前端技术下的文章

2024-08-17

在ECharts中创建一个简单的饼图，可以参考以下代码：




<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('container'));
 
        var option = {
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    data: [
                        {value: 235, name: '视频广告'},
                        {value: 274, name: '联盟广告'},
                        {value: 310, name: '邮件营销'},
                        {value: 335, name: '直接访问'},
                        {value: 400, name: '搜索引擎'}
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
 
        myChart.setOption(option);
    </script>
</body>
</html>

这段代码创建了一个简单的饼图，展示了不同来源的访问量。在实际应用中，您可以根据自己的数据结构来修改 data 部分的内容。

- 阅读更多 -

Http请求响应 Ajax 过滤器

System

2024-08-17

所有,ajax

在JavaScript中，可以使用Ajax的beforeSend函数来设置请求的前置处理，类似于Asp.Net Core中的Filter。以下是一个简单的示例，展示了如何在发送Ajax请求前，使用beforeSend函数来修改请求头部：




$.ajax({
    url: 'your-endpoint',
    type: 'GET', // or 'POST'
    beforeSend: function (xhr) {
        // 设置自定义请求头
        xhr.setRequestHeader('X-Custom-Header', 'custom-value');
    },
    success: function (data) {
        // 请求成功后的处理
        console.log('Data received:', data);
    },
    error: function (error) {
        // 请求失败后的处理
        console.error('Error:', error);
    }
});

在这个例子中，我们使用beforeSend函数来给请求添加一个自定义的头部。这就类似于Asp.Net Core中的添加Filter来修改请求或响应。

如果你想要在Ajax请求中添加全局的beforeSend处理，可以考虑使用$.ajaxSetup：




$.ajaxSetup({
    beforeSend: function (xhr) {
        // 添加全局的自定义请求头
        xhr.setRequestHeader('X-Global-Header', 'global-value');
    }
});
 
// 然后正常发送你的Ajax请求，它们将自动应用这个全局的beforeSend处理
$.ajax({
    url: 'your-endpoint',
    type: 'GET',
    success: function (data) {
        console.log('Data received:', data);
    },
    error: function (error) {
        console.error('Error:', error);
    }
});

在这个例子中，我们使用ajaxSetup来设置全局的beforeSend函数，这样任何后续的Ajax请求都会自动应用这个处理。这就像是定义了一个全局的请求拦截器（Filter）。

- 阅读更多 -

CSS border边框（理解网页边框制作）

System

2024-08-17

所有,css

CSS中的border属性用于设置元素的边框样式、宽度和颜色。

基本语法：




border: border-width border-style border-color;

border-width 定义边框的宽度，可以使用像素或其他CSS单位。
border-style 定义边框的样式，常用的样式包括 solid、dotted、dashed 等。
border-color 定义边框的颜色，可以使用颜色名、十六进制颜色码或 rgb() 表达式。

实例代码：




div {
  border: 2px solid blue; /* 定义一个2像素宽、实线、蓝色的边框 */
}

HTML中使用：




<div>我有边框</div>

你可以单独设置边框的每一面，例如 border-top、border-right、border-bottom 和 border-left。

实例代码：




div {
  border-top: 2px solid red;    /* 上边框为红色 */
  border-right: 3px dotted green; /* 右边框为点状，绿色 */
  border-bottom: 4px dashed blue;  /* 下边框为虚线，蓝色 */
  border-left: 5px solid black;   /* 左边框为实线，黑色 */
}

HTML中使用：




<div>
  上边框
  右边框
  下边框
  左边框
</div>

以上代码展示了如何使用CSS为元素添加边框，并可以单独设置每一边的边框样式。

- 阅读更多 -

创建json数组与json数组渲染到HTML

System

2024-08-17

所有,jquery

创建JSON数组并将其渲染到HTML的基本步骤如下：

创建一个JSON数组。
使用JavaScript遍历JSON数组。
使用DOM操作将数据插入到HTML中。

示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSON Array Rendering</title>
</head>
<body>
 
<div id="json-container"></div>
 
<script>
// 创建JSON数组
var jsonArray = [
    { "name": "Alice", "age": 25 },
    { "name": "Bob", "age": 30 },
    { "name": "Charlie", "age": 22 }
];
 
// 获取要插入数据的容器
var container = document.getElementById('json-container');
 
// 遍历JSON数组并创建列表项
jsonArray.forEach(function(item) {
    var listItem = document.createElement('li');
    listItem.textContent = 'Name: ' + item.name + ', Age: ' + item.age;
    container.appendChild(listItem);
});
</script>
 
</body>
</html>

在这个例子中，我们创建了一个包含三个对象的JSON数组。然后使用forEach方法遍历数组，并为每个对象创建一个新的li元素，将对象的数据作为文本内容插入到这个元素中，最后将这个元素添加到页面上的<div>容器中。

- 阅读更多 -

数据结构系列之链表，熬夜整理最全面的HTML字符实体

System

2024-08-17

所有,html

在计算机科学中，链表是一种常见的数据结构，它由节点组成，每个节点包含数据和一个指向下一个节点的引用/指针。链表可以是单向的，双向的，循环的或非循环的。

以下是创建和操作链表的一些常见方法：

创建节点：




class Node:
    def __init__(self, data):
        self.data = data
        self.next = None

在链表中插入节点：




def append(self, new_data):
    new_node = Node(new_data)
    if self.head is None:
        self.head = new_node
        return
    last_node = self.head
    while last_node.next is not None:
        last_node = last_node.next
    last_node.next = new_node

打印链表：




def printList(self):
    temp = self.head
    while temp:
        print(temp.data, end=' ')
        temp = temp.next

删除节点：




def deleteNode(self, key):
    temp = self.head
    if (temp is not None):
        if (temp.data == key):
            self.head = temp.next
            temp = None
            return
    while (temp.data != key):
        if (temp.next is None):
            return
        prev = temp
        temp = temp.next
    prev.next = temp.next
    temp = None

在特定位置插入节点：




def insertAfter(self, prev_node, new_data):
    if prev_node is None:
        print("The given previous node cannot be null")
        return
    new_node = Node(new_data)
    new_node.next = prev_node.next
    prev_node.next = new_node

以上就是链表的一些基本操作，链表是非常重要的数据结构，它可以高效地支持数据的插入和删除操作。

注意：以上代码示例均为Python语言，链表操作的具体实现会根据不同的编程语言有所差异，但基本的思想是一致的。

- 阅读更多 -

vue3 中生命周期使用 async/await

System

2024-08-17

所有,typescript

在 Vue 3 中，你可以在组件的生命周期钩子中使用 async/await。但是，你需要小心处理 async/await 可能抛出的错误，因为生命周期钩子不默认处理异步错误。

以下是一个示例，展示如何在 onMounted 钩子中使用 async/await：




<template>
  <div>{{ data }}</div>
</template>
 
<script>
import { ref, onMounted } from 'vue';
 
export default {
  setup() {
    const data = ref(null);
 
    onMounted(async () => {
      try {
        data.value = await fetchData();
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    });
 
    return { data };
  },
};
 
async function fetchData() {
  // 模拟异步获取数据
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('Some data');
    }, 1000);
  });
}
</script>

在这个例子中，fetchData 函数模拟了一个异步获取数据的过程。在 onMounted 钩子中，我们使用 async/await 来等待数据的获取，并在获取成功后将数据赋值给组件的响应式引用 data。如果在获取数据的过程中发生错误，我们捕获错误并在控制台中输出。

- 阅读更多 -

推荐 Sublime CSS3 插件：更高效地编写现代 CSS 代码

System

2024-08-17

所有,css3

Sublime Text 是一款流行的文本编辑器，广泛用于编写和编辑各种代码。Sublime CSS3 插件为 Sublime Text 提供了更好的 CSS3 支持，包括代码高亮、自动完成和代码导航等功能，从而使得编写现代 CSS 代码更加高效和便捷。

以下是如何安装和使用 Sublime CSS3 插件的步骤：

打开 Sublime Text 编辑器。
按 Ctrl+Shift+P（在 Mac 上是 Cmd+Shift+P）打开命令面板。
输入 Install Package 并选择它，然后按回车。
在列表中搜索 CSS3 并选择它进行安装。

安装完成后，CSS3 插件会自动激活，并提供更加丰富的编写体验。

以下是一个简单的 CSS 示例，展示了使用 Sublime CSS3 插件可以提升的编写体验：




/* 使用 Sublime CSS3 插件的自动完成功能 */
.selector {
    display: -webkit-flex; /* Chrome, Safari, 等使用 Webkit 引擎的浏览器 */
    display: flex;         /* 标准的 CSS 显示为 flexbox 布局 */
    align-items: center;   /* 垂直居中 */
    justify-content: center; /* 水平居中 */
}

在编写 CSS 代码时，Sublime CSS3 插件可以提供更加智能的代码自动完成，帮助开发者快速准确地编写 CSS 属性和值。此外，它还提供了代码片段（snippets）的功能，用户可以通过输入简写然后按 Tab 键来生成完整的代码块。

- 阅读更多 -

typescript配置允许隐式声明any

System

2024-08-17

所有,typescript

在TypeScript中，如果你想要配置编译器允许隐式地将任意类型（any）分配给一个变量，你可以通过设置编译器选项来实现。这样做可以关闭严格的空断言检查，允许你不显式指定类型。

要配置TypeScript编译器选项，你可以在你的tsconfig.json文件中设置noImplicitAny选项为true。这将改变默认行为，使得在没有明确类型注解的情况下，任何变量的类型默认为any类型。

下面是一个tsconfig.json的示例，其中设置了noImplicitAny为true：




{
  "compilerOptions": {
    "noImplicitAny": true,
    "strict": false
  }
}

在这个配置下，如果你不为变量指定类型，TypeScript将默认它为any类型。例如：




// 在没有明确类型注解的情况下，这里的x将被视为any类型
let x = 10;
x = "Hello World"; // 这行代码在不显式配置的情况下会报错，因为noImplicitAny被设置为true

请注意，在实际项目中，不建议完全依赖any类型，因为这会使类型检查失去其意义。通常，应该尽可能地提供明确的类型注解，以便利用TypeScript的类型检查系统。

- 阅读更多 -

如何在JavaScript/Vue中获取当前时间并格式化输出（精确到时分秒）

System

2024-08-17

所有,vue.js

在JavaScript中，你可以使用Date对象来获取当前时间，然后使用toLocaleTimeString方法格式化时间。但是，toLocaleTimeString不允许自定义格式，所以如果你需要精确到时分秒，你可以手动构建一个函数来格式化时间。

以下是一个在Vue中格式化当前时间为HH:mm:ss格式的示例：




<template>
  <div>
    当前时间: {{ formattedTime }}
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      currentTime: new Date(),
    };
  },
  computed: {
    formattedTime() {
      return this.padTime(this.currentTime.getHours()) +
             ':' + 
             this.padTime(this.currentTime.getMinutes()) +
             ':' + 
             this.padTime(this.currentTime.getSeconds());
    }
  },
  methods: {
    padTime(time) {
      return time < 10 ? '0' + time : time;
    }
  }
};
</script>

在这个例子中，我们使用计算属性formattedTime来返回格式化后的时间字符串。padTime方法确保每个时间部分始终是两位数（例如，"08:05:03"）。这个方法可以直接在Vue的模板中使用，以展示当前的时分秒时间格式。

System

2024-08-17

所有,css3

在HTML5和CSS3的基础上，我们可以使用以下标签来创建列表、表格和表单，并对文本域和标签进行样式定制。

HTML部分：




<!DOCTYPE html>
<html>
<head>
    <title>前端开发基础</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <!-- 无序列表 -->
    <ul class="my-list">
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
    </ul>
 
    <!-- 有序列表 -->
    <ol class="my-list">
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
    </ol>
 
    <!-- 表格 -->
    <table class="my-table">
        <tr>
            <th>表头1</th>
            <th>表头2</th>
        </tr>
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
        </tr>
        <tr>
            <td>单元格3</td>
            <td>单元格4</td>
        </tr>
    </table>
 
    <!-- 表单 -->
    <form action="">
        <!-- 文本域 -->
        <label for="my-text">输入你的名字:</label>
        <input type="text" id="my-text" name="username">
 
        <!-- 提交按钮 -->
        <input type="submit" value="提交">
    </form>
</body>
</html>

CSS部分：




/* style.css */
.my-list {
    list-style-type: square; /* 实现自定义列表样式 */
}
 
.my-table {
    border-collapse: collapse; /* 实现表格的边框合并 */
    width: 100%;
}
 
.my-table th, .my-table td {
    border: 1px solid #ddd; /* 实现单元格边框样式 */
    padding: 8px;
}
 
.my-table tr:nth-child(even) {
    background-color: #f2f2f2; /* 实现行背景色的交替 */
}
 
.my-table tr:hover {
    background-color: #ddd; /* 鼠标悬浮行的背景色变化 */
}
 
input[type="submit"] {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
}
 
input[type="submit"]:hover {
    background-color: #45a049;
}

以上代码实现了无序列表、有序列表、表格和表单的基本结构，并通过CSS为它们添加了基本样式。同时，文本域和提交按钮也被添加到表单中，并通过label标签关联，以提高表单的可访问性。

- 阅读更多 -