分类前端技术下的文章

2024-08-17

在Node.js项目中管理依赖通常使用npm或yarn。以下是一些基本操作：

安装一个依赖：




npm install <package_name>
# 或者使用yarn
yarn add <package_name>

安装开发依赖（只在开发环境中使用）：




npm install <package_name> --save-dev
# 或者使用yarn
yarn add <package_name> --dev

更新一个依赖：




npm update <package_name>
# 或者使用yarn
yarn upgrade <package_name>

卸载一个依赖：




npm uninstall <package_name>
# 或者使用yarn
yarn remove <package_name>

安装package.json中列出的所有依赖：




npm install
# 或者使用yarn
yarn install

将当前安装的依赖项锁定到版本：




npm shrinkwrap
# 或者使用yarn
yarn install --lockfile

创建package.json文件：
```
npm init
```

查看项目中已安装的依赖：




npm list
# 查看全局安装的包
npm list -g
# 或者使用yarn
yarn list
yarn global list

这些是管理Node.js项目依赖的基本操作。在实际项目中，可能还会涉及到更高级的功能，如工作区、monorepo的管理，依赖的私有包管理等。

- 阅读更多 -

探索高效定时任务管理：Node.js 的 `node-cron` 库

System

2024-08-17

所有,nodejs

node-cron 是一个 Node.js 的包，可以让你非常简单地安排定时任务。下面是一个使用 node-cron 来定时执行任务的例子：

首先，你需要安装 node-cron 包：




npm install node-cron

然后，你可以使用以下代码来安排一个定时任务：




const cron = require('node-cron');
 
// 每分钟的第30秒执行任务
cron.schedule('30 * * * * *', () => {
  console.log('执行定时任务！');
});

这个例子中的 schedule 方法接受两个参数：

一个 CRON 格式的字符串，表示任务执行的时间。
一个函数，表示要执行的任务。

CRON 格式的字符串包含六个字段，表示不同的时间单位：

秒（0-59）
分钟（0-59）
小时（0-23）
日（1-31）
月（1-12）
星期（0-7，其中0和7都代表星期天）

你可以根据需要调整这些字段，以便定时任务在你想要的时间执行。

- 阅读更多 -

node.js如何使用JWT（JSON Web Token）进行认证？

System

2024-08-17

所有,nodejs

在Node.js中使用JWT进行认证，你需要安装jsonwebtoken库，并使用它来生成和验证token。以下是一个简单的例子：

安装jsonwebtoken库：




npm install jsonwebtoken

使用jsonwebtoken生成和验证token：




const jwt = require('jsonwebtoken');
 
// 生成Token
const secretKey = 'your_secret_key'; // 保持密钥安全
const payload = {
  id: 'user_id',
  email: 'user@example.com'
};
const options = {
  expiresIn: '1h' // Token有效期1小时
};
 
const token = jwt.sign(payload, secretKey, options);
 
// 验证Token
try {
  const decoded = jwt.verify(token, secretKey);
  console.log(decoded); // 打印解码的payload
} catch (error) {
  console.error('Token invalid:', error.message);
}

在实际应用中，你可能还需要处理token的存储和传输（通常通过HTTP头部Authorization），以及定期刷新token等安全相关的细节。

- 阅读更多 -

Vue | 自定义组件双向绑定基础用法

System

2024-08-17

所有,vue.js




<template>
  <div>
    <custom-input v-model="message" />
    <p>消息内容是：{{ message }}</p>
  </div>
</template>
 
<script>
import Vue from 'vue';
 
// 自定义输入组件
Vue.component('custom-input', {
  props: ['value'],
  template: `<input
                :value="value"
                @input="$emit('input', $event.target.value)"
              />`
});
 
export default {
  data() {
    return {
      message: ''
    };
  }
};
</script>

这个例子中，我们创建了一个简单的自定义输入组件custom-input，它接受一个value属性并在内部维护其状态。它通过一个input事件发出新的值，这样就可以使用v-model来实现双向绑定。在父组件中，我们通过v-model="message"将message变量绑定到custom-input组件，实现了数据的双向流动。

- 阅读更多 -

Node.js配置（需要修改默认缓存路径的可看）

System

2024-08-17

所有,nodejs

在Node.js中，您可以通过设置环境变量来修改缓存路径。以下是如何设置Node.js的缓存路径的步骤：

找到您的Node.js安装目录。
在安装目录中创建一个名为node-cache的文件夹。
设置环境变量npm_config_cache指向这个新的缓存目录。

对于Unix-like系统（如Linux和macOS），您可以在命令行中运行以下命令：




mkdir ~/node-cache
npm config set cache ~/node-cache

对于Windows系统，您可以在命令提示符或PowerShell中运行：




mkdir $HOME\node-cache
npm config set cache $HOME\node-cache

这将会修改npm的缓存路径。如果您也想要修改Node.js的包引导缓存路径，可以使用类似的方法设置环境变量NODE_PATH。

注意：上述命令只会影响当前用户的配置。如果您需要为所有用户修改缓存路径，您可能需要以管理员或root权限执行这些命令，并且可能需要修改相应的全局配置文件。

- 阅读更多 -

HTML/CSS实现3D翻转页面效果

System

2024-08-17

所有,html




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D翻转页面效果</title>
<style>
  .flip-container {
    perspective: 1000px;
  }
  .flip-container:hover .flipper, .flip-container.hover .flipper {
    transform: rotateY(180deg);
  }
  .flip-container, .front, .back {
    width: 300px;
    height: 200px;
  }
  .flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
  }
  .front, .back {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
  }
  .front {
    z-index: 2;
  }
  .back {
    transform: rotateY(180deg);
  }
</style>
</head>
<body>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
  <div class="flipper">
    <div class="front">
      正面内容
    </div>
    <div class="back">
      背面内容
    </div>
  </div>
</div>
</body>
</html>

这段代码展示了如何使用HTML和CSS创建一个简单的3D翻转效果。用户在移动设备上触摸屏幕时，元素会翻转显示其背面内容。这是一个常见的响应式设计技巧，可以增强用户体验。

- 阅读更多 -

Web前端入门 - HTML JavaScript Vue

System

2024-08-17

所有,html




<!DOCTYPE html>
<html>
<head>
  <title>Vue 示例</title>
  <!-- 引入 Vue.js -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.5/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <!-- 绑定用户输入到 message 变量 -->
    <input v-model="message" placeholder="编辑我">
    <!-- 显示 message 变量的内容 -->
    <p>{{ message }}</p>
  </div>
 
  <script>
    // 创建 Vue 实例
    new Vue({
      el: '#app',
      data: {
        // 变量 message 初始值设为空字符串
        message: ''
      }
    });
  </script>
</body>
</html>

这段代码展示了如何使用Vue.js创建一个简单的应用，其中包含了一个数据绑定的输入框和显示区域。当用户在输入框中输入文本时，这个文本会实时显示在页面上，而无需写任何复杂的事件监听代码。这是Web前端开发中Vue.js框架的一个基本示例。

- 阅读更多 -

使用JS删除HTML元素的两种方法

System

2024-08-17

所有,html

在JavaScript中，删除HTML元素可以通过两种主要方法实现：

使用parentNode.removeChild()方法：选择要删除的元素的父元素，然后使用removeChild()方法删除指定的子元素。




var element = document.getElementById('elementToRemove');
element.parentNode.removeChild(element);

使用element.remove()方法：在DOM4规范中引入，较新的浏览器支持此方法，直接删除元素自身。




var element = document.getElementById('elementToRemove');
element.remove();

请注意，remove()方法可能在旧版浏览器中不被支持，如果需要兼容旧浏览器，请使用removeChild()方法。

- 阅读更多 -

HTML千与千寻网页制作

System

2024-08-17

所有,html

要制作一个HTML页面，您可以使用以下基本模板。请注意，您需要具备基本的HTML和CSS知识来进行自定义和美化页面。




<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>千与千寻</title>
    <style>
        /* 在这里添加CSS样式 */
    </style>
</head>
<body>
    <header>
        <!-- 页面头部内容 -->
    </header>
    <main>
        <!-- 页面主体内容 -->
        <h1>千与千寻</h1>
        <p>《千与千寻》是一部...</p>
        <!-- 添加更多内容 -->
    </main>
    <footer>
        <!-- 页面底部内容 -->
    </footer>
</body>
</html>

在<style>标签中，您可以添加CSS来美化页面。例如，您可以添加以下CSS来更改段落文本的颜色和大小：




p {
    color: #333;
    font-size: 16px;
}

您可以使用外部CSS文件来管理复杂的样式，只需将<link>标签添加到<head>部分：




<link rel="stylesheet" href="styles.css">

在<main>部分，您可以添加更多的HTML元素，如图像、列表、链接等，来丰富页面内容。

- 阅读更多 -

html + jquery地图点位点击变色

System

2024-08-17

所有,html

要实现点位点击变色，可以使用jQuery监听点位元素的点击事件，并在事件处理函数中改变其CSS样式。以下是一个简单的示例：

HTML部分：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点位点击变色</title>
<style>
  .map-point {
    width: 20px;
    height: 20px;
    background-color: #00f;
    margin: 5px;
    display: inline-block;
    border-radius: 50%;
    cursor: pointer;
  }
  .selected {
    background-color: #f00;
  }
</style>
</head>
<body>
 
<div id="map">
  <div class="map-point"></div>
  <div class="map-point"></div>
  <div class="map-point"></div>
  <!-- 更多点位 -->
</div>
 
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function() {
    $('.map-point').click(function() {
      $(this).toggleClass('selected');
    });
  });
</script>
 
</body>
</html>

在这个示例中，我们定义了一个类 .map-point 来表示地图上的点位，并设置了基础样式。我们还定义了一个 .selected 类，当点位被选中时，它将具有不同的颜色。

jQuery脚本部分监听 .map-point 的点击事件，并使用 .toggleClass() 方法来在点位元素上添加或移除 .selected 类，从而实现点击变色的效果。

- 阅读更多 -