分类前端技术下的文章

【Vue 3 + Echarts + Node.js】打造炫酷的动态数据可视化大屏，让您的数据“会说话”！

2024-08-12




<template>
  <div ref="chartContainer" style="width: 100%; height: 100%"></div>
</template>
 
<script setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import axios from 'axios';
 
const chartContainer = ref(null);
const chartInstance = ref(null);
 
onMounted(() => {
  chartInstance.value = echarts.init(chartContainer.value);
  fetchData();
});
 
async function fetchData() {
  try {
    const response = await axios.get('/api/data');
    const option = {
      // ECharts 配置项
      series: [
        {
          // 示例系列配置
          type: 'bar',
          data: response.data
        }
      ]
    };
    chartInstance.value.setOption(option);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}
</script>
 
<style scoped>
/* 样式 */
</style>

这个代码示例展示了如何在Vue 3组件中使用ECharts和axios从后端API获取数据，并将其显示为图表。它使用了Composition API的setup语法糖来简化代码，并通过onMounted生命周期钩子初始化ECharts实例和获取数据。

System

2024-08-12

所有,jquery

要在浏览器中运行xlsx.core.min.js，你需要确保该JavaScript文件已经被包含在你的HTML页面中。以下是一个简单的HTML页面示例，它包含了xlsx.core.min.js，并通过jQuery实现了一个简单的功能，用于读取Excel文件并显示其内容。




<!DOCTYPE html>
<html>
<head>
    <title>Excel 读取示例</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="xlsx.core.min.js"></script>
</head>
<body>
 
<input type="file" id="excelFile" />
<div id="excelContent"></div>
 
<script>
$(document).ready(function() {
    $('#excelFile').change(function(e) {
        var reader = new FileReader();
        reader.readAsArrayBuffer(e.target.files[0]);
        reader.onload = function(e) {
            var data = new Uint8Array(reader.result);
            var workbook = XLSX.read(data, {type: 'array'});
            
            // 假设我们只读取第一个工作表
            var firstSheetName = workbook.SheetNames[0];
            var worksheet = workbook.Sheets[firstSheetName];
            
            // 将工作表转换为JSON
            var json = XLSX.utils.sheet_to_json(worksheet);
            
            // 显示JSON内容
            $('#excelContent').text(JSON.stringify(json));
        };
    });
});
</script>
 
</body>
</html>

在这个例子中，我们使用了xlsx.core.min.js库来读取用户通过文件输入选择的Excel文件。当文件被选中后，我们使用FileReader来读取文件内容，然后使用XLSX.read函数来解析Excel文件，并使用XLSX.utils.sheet_to_json将第一个工作表转换成JSON格式，最后在页面上显示这个JSON内容。

确保你的服务器配置允许访问xlsx.core.min.js文件，否则你可能会遇到跨源资源共享(CORS)问题。如果你是从CDN加载xlsx.core.min.js的，那么这通常不是问题。如果你需要从本地加载，确保文件路径正确无误。

- 阅读更多 -

【js/jQuery】在元素最前或最后添加一个新元素的方法

System

2024-08-12

所有,jquery

在jQuery中，可以使用prepend()方法在元素内部的前面添加新元素，或者使用append()方法在元素内部的后面添加新元素。

以下是实例代码：




// 创建新元素
var newElement = $("<p>这是新添加的段落。</p>");
 
// 在目标元素内部最前面添加新元素
$("#targetElement").prepend(newElement);
 
// 在目标元素内部最后面添加新元素
$("#targetElement").append(newElement);

在原生JavaScript中，可以使用insertBefore()在选定元素之前添加新元素，或者使用appendChild()在选定元素之后添加新元素。

以下是实例代码：




// 创建新元素
var newElement = document.createElement("p");
newElement.textContent = "这是新添加的段落。";
 
// 获取目标元素
var targetElement = document.getElementById("targetElement");
 
// 在目标元素之前添加新元素
targetElement.parentNode.insertBefore(newElement, targetElement);
 
// 在目标元素之后添加新元素
targetElement.appendChild(newElement);

- 阅读更多 -

jQuery为文本框设置得到焦点和失去焦点的事件处理方法

System

2024-08-12

所有,jquery




$(document).ready(function() {
    // 为文本框设置得到焦点事件处理方法
    $('#inputField').focus(function() {
        // 当文本框获得焦点时执行的代码
        console.log('文本框获得焦点');
    });
 
    // 为文本框设置失去焦点事件处理方法
    $('#inputField').blur(function() {
        // 当文本框失去焦点时执行的代码
        console.log('文本框失去焦点');
    });
});

这段代码使用jQuery为一个ID为inputField的文本框元素设置了focus（得到焦点）和blur（失去焦点）事件的处理方法。当文本框获得焦点时，在控制台打印一条消息，当失去焦点时也会打印一条消息。这是jQuery中常用的事件处理方式，对于表单输入框的交互设计非常有用。

- 阅读更多 -

推荐一个强大的Node.js、TypeScript和Express项目模板

System

2024-08-12

所有,nodejs

以下是一个简化的Node.js、TypeScript和Express项目模板，它包括基础的配置和工具，可以作为开始新项目的起点。




// package.json
{
  "name": "your-project",
  "version": "1.0.0",
  "scripts": {
    "build": "tsc",
    "start": "node .build/index.js",
    "watch": "tsc --watch"
  },
  "dependencies": {
    "express": "^4.17.1",
    "typescript": "^4.0.0"
  }
}
 
// tsconfig.json
{
  "compilerOptions": {
    "target": "es2017",
    "module": "commonjs",
    "outDir": ".build",
    "strict": true
  },
  "include": [
    "src/**/*"
  ]
}
 
// src/index.ts
import express from 'express';
 
const app = express();
const port = 3000;
 
app.get('/', (req, res) => {
  res.send('Hello World!');
});
 
app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`);
});

在这个模板中，我们配置了一个简单的Express服务器，并定义了几个npm脚本来编译和运行我们的TypeScript代码。这个模板提供了Node.js和Express入门所需的基础，同时利用了TypeScript的优势，如类型检查和编译时的错误捕捉。

- 阅读更多 -

Vue项目中安装及使用Sass（scss）

System

2024-08-12

所有,css

在Vue项目中使用Sass，首先需要安装相关的依赖。

安装sass和sass-loader依赖：




npm install --save-dev sass sass-loader

在Vue组件中使用Sass：

假设你有一个Vue组件MyComponent.vue，你可以在这个组件中使用Sass来定义样式：




<template>
  <div class="my-component">
    <p>Hello, World!</p>
  </div>
</template>
 
<script>
export default {
  name: 'MyComponent'
}
</script>
 
<style lang="scss">
.my-component {
  color: blue;
  p {
    font-weight: bold;
  }
}
</style>

在这个例子中，通过设置<style>标签的lang属性为scss，Vue会使用sass-loader来处理这段Sass代码，并将其转换为浏览器可识别的CSS。

- 阅读更多 -

html动态爱心超文本标记代码，丝滑流畅有特效

System

2024-08-12

所有,html

以下是一个简单的HTML代码示例，展示了如何使用HTML和CSS创建一个动态的爱心标志，并附有特效：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态爱心</title>
<style>
  .heart {
    position: relative;
    width: 100px;
    height: 100px;
    background: #f00;
    animation: beat 0.8s infinite;
  }
  .heart::before,
  .heart::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50px;
    width: 50px;
    height: 80px;
    background: #f00;
    border-radius: 50px 50px 0 0;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
  }
  .heart::after {
    left: 0;
    transform: rotate(45deg);
    transform-origin: 100% 100%;
  }
  @keyframes beat {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
    }
  }
</style>
</head>
<body>
<div class="heart"></div>
</body>
</html>

这段代码使用了CSS3的动画特性，通过@keyframes定义了一个心跳的动画效果，当页面加载时，爱心会不停地放大缩小，给人一种生动活泼的感觉。这是一个简单的示例，但是可以通过调整CSS样式和动画来创造出各种不同的特效。

- 阅读更多 -

【Node.js】初识 Node.js

System

2024-08-12

所有,nodejs

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，它使得 JavaScript 代码能够在服务器端运行。Node.js 的事件驱动、非阻塞 I/O 模型使其适合于高并发和低延迟的 Real-Time Web 应用程序。

以下是一个简单的 Node.js 应用程序示例，它创建了一个 HTTP 服务器，并在浏览器访问这个服务器时，返回 "Hello World" 消息。




// 引入 Node.js 的 http 模块
const http = require('http');
 
// 创建 HTTP 服务器并定义响应逻辑
const server = http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain' }); // 设置 HTTP 响应头
  res.end('Hello World\n'); // 发送响应内容
});
 
// 设置服务器监听端口
const PORT = 3000;
server.listen(PORT, () => {
  console.log(`服务器运行在 http://localhost:${PORT}/`);
});

要运行这段代码，你需要有 Node.js 环境。如果你还没有安装 Node.js，可以从 Node.js 官网下载并安装。安装完成后，保存上述代码到一个文件中，例如 app.js，然后在命令行中运行 node app.js，你的 HTTP 服务器将会启动，并且在浏览器中访问 http://localhost:3000 时，你会看到 "Hello World" 的输出。

- 阅读更多 -

【入门级】HTML的超链接分类和属性及常用的特殊符号转义

System

2024-08-12

所有,html

在HTML中，超链接（Hyperlink）是用于从一个页面跳转到另一个页面的功能。超链接可以通过<a>标签来创建，其基本语法如下：




<a href="链接地址" target="目标窗口的位置" class="链接样式" title="鼠标悬停时显示的文本">链接文本或图像</a>

其中，href属性指定了链接的目标地址，target属性定义了链接打开的位置（_blank为新窗口，_self为当前窗口），class和title属性分别用于设置链接的CSS样式和鼠标悬停时显示的文本。

例子：




<a href="http://www.example.com" target="_blank" class="external-link" title="点击访问示例网站">访问示例网站</a>

在HTML中，特殊符号需要使用字符实体（Character Entities）来转义，以避免浏览器误认为它们是HTML代码的一部分。常见的特殊符号和它们的转义字符如下：

空格： 
引号："（双引号）或'（单引号）
大于号：>
小于号：<
版权符号：©
注册商标符号：®

例子：




<p>这是一个包含空格的句子&nbsp;对吧？</p>
<p>年龄超过18岁的用户应该知道这是一个引号：&quot;重要通知&quot;</p>
<p>小于100&lt;大于100&gt;的数字</p>
<p>版权所有&copy; 2023 公司名</p>
<p>注册商标&reg; 2023 公司名</p>

以上是HTML超链接的基本使用方法和特殊符号的转义。

- 阅读更多 -

【CSS应用篇】——CSS如何实现圆角边框

System

2024-08-12

所有,css3

CSS提供了border-radius属性，可以用来创建圆角边框。




/* 创建一个圆角矩形 */
.rounded-rectangle {
  width: 200px;
  height: 100px;
  background-color: skyblue;
  border: 2px solid black;
  border-radius: 15px; /* 设置圆角的半径为15px */
}
 
/* 创建一个圆角圆形 */
.rounded-circle {
  width: 100px;
  height: 100px;
  background-color: pink;
  border: 2px solid black;
  border-radius: 50%; /* 设置border-radius为50%，形成圆形 */
}

HTML部分：




<div class="rounded-rectangle"></div>
<div class="rounded-circle"></div>

border-radius属性可以接受不同的值：

单一值：如15px，将创建四个相等的圆角。
两个值：第一个值是水平半径，第二个值是垂直半径（例如15px 5px）。
三个值：第一个和第二个值是水平半径，第三个值是垂直半径（例如15px 5px 10px）。
四个值：分别指定左上角、右上角、右下角、左下角的圆角（例如15px 5px 10px 20px）。
百分比值：可以用百分比指定圆角的大小，相对于元素的宽度或高度（例如20% 40% 60% 80%）。

- 阅读更多 -