分类前端技术下的文章

2024-08-14

在NestJS中，你可以使用管道（Pipes）来对传入的JSON对象进行验证。以下是一个使用类验证器（ValidationPipe）的示例：

首先，确保你已经安装了class-validator和class-transformer。




npm install class-validator class-transformer

然后，定义一个DTO（数据传输对象）来描述你的JSON结构，并使用装饰器来指定验证规则。




// user.dto.ts
import { IsString, IsInt } from 'class-validator';
 
export class UserDto {
  @IsString()
  readonly name: string;
 
  @IsInt()
  readonly age: number;
}

接着，在你的NestJS服务或控制器中使用ValidationPipe：




// app.controller.ts
import { Controller, Post, Body, UsePipes, ValidationPipe } from '@nestjs/common';
import { UserDto } from './user.dto';
 
@Controller()
export class AppController {
  @Post('user')
  @UsePipes(new ValidationPipe({ transform: true }))
  createUser(@Body() userDto: UserDto) {
    // 这里可以确信 userDto 是合法的
    return { message: 'User created', user: userDto };
  }
}

在上述代码中，@UsePipes(new ValidationPipe({ transform: true }))装饰器用于启用验证。ValidationPipe会自动将传入的JSON对象转换为UserDto实例，并根据DTO定义的验证装饰器进行验证。如果数据不符合验证规则，会抛出一个异常。如果数据是合法的，则会继续执行后续的逻辑。

- 阅读更多 -

【最新】在Next.js中引入Google Analytics4(谷歌分析)

System

2024-08-14

所有,javascript

在Next.js中引入Google Analytics 4（GTM），你需要使用next-gtm这个npm包。以下是一个简单的步骤说明和代码示例：

安装next-gtm包：




npm install next-gtm

在_app.js文件中引入next-gtm并使用它包装你的<App>:




// 在_app.js中
import { GTM } from 'next-gtm';
 
function MyApp({ Component, pageProps }) {
  return (
    <>
      <GTM id="GTM-XXXXXXX" />
      <Component {...pageProps} />
    </>
  );
}
 
export default MyApp;

替换"GTM-XXXXXXX"为你的Google Tag Manager容器ID。

这样就完成了Google Analytics 4在Next.js中的引入。记得在Google Analytics管理界面配置相应的测量ID和网站信息。

- 阅读更多 -

去空行小工具Html + Javascript

System

2024-08-14

所有,html

以下是一个使用JavaScript在HTML页面中去除字符串中空行的简单示例：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Remove Empty Lines</title>
</head>
<body>
    <textarea id="text" rows="10" cols="50">
 
这是一个文本示例，其中包含
空行。

- 阅读更多 -

React Native的前景与发展趋势

System

2024-08-14

所有,react native

React Native是一个开源的移动应用开发框架，它允许开发者使用JavaScript和React编程语法来构建iOS和Android应用。

关于React Native的前景和发展趋势，可以从以下几个方面进行讨论：

持续更新与维护：React Native由Facebook维护，并且随着React的更新而不断进行更新。
社区活跃度高：有大量的第三方库、组件和工具可供使用，社区活跃，问题解决和新技术的学习资源丰富。
跨平台开发：开发者可以使用相同的代码库在iOS和Android之间共享大部分逻辑，减少了为不同平台编写独立代码的需求。
支持热更新：React Native支持在应用运行时替换代码和资源，这使得开发者可以进行实时的应用更新。
学习曲线较低：与原生开发相比，React Native的学习曲线较低，因为它使用了JavaScript和CSS。
与React的兼容性：React Native是React.js框架的一部分，因此开发者需要了解React的基本概念。
成本效益：React Native可以降低开发成本，因为它减少了对原生开发者的需求，并且可以快速迭代更新。

发展趋势预计会包括但不限于：

与Flutter等技术的竞争，尤其是在移动应用开发的广泛接受度和性能方面。
更多的性能优化和工具支持。
与Web开发的更紧密的集成，可能会有更多的重叠和集成点。
持续的安全更新和修复。

代码实例：




import React, { Component } from 'react';
import { Text, View } from 'react-native';
 
export default class App extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Hello, React Native!</Text>
      </View>
    );
  }
}

这段代码创建了一个简单的React Native应用，其中包含一个文本标签显示“Hello, React Native!”。这是React Native应用的基本结构。

- 阅读更多 -

css 如何控制文字换行、省略

System

2024-08-14

所有,css3

在CSS中，可以使用以下属性来控制文字的换行和省略：

white-space: 控制如何处理元素内的空白。
word-break: 控制如何在单词内换行。
overflow-wrap (或 word-wrap): 控制长单词或URL内部是否应该换行。
text-overflow: 当文本溢出包含它的元素时，如何显示省略（...）。

换行




/* 当需要保留换行时 */
p {
  white-space: pre-wrap; /* 保留空白符序列，但是允许文本换行 */
}
 
/* 强制在边界处换行 */
p {
  word-break: break-all; /* 可以在任意字符之间换行 */
}

省略




/* 当文本溢出容器时显示省略符号 */
p {
  text-overflow: ellipsis; /* 使用省略符号来表示文本被截断 */
  overflow: hidden; /* 确保溢出的文本会被隐藏 */
  white-space: nowrap; /* 不允许换行 */
}

使用多行文本省略




/* 多行文本省略 */
p {
  display: -webkit-box; /* 使用弹性盒子布局模型 */
  -webkit-box-orient: vertical; /* 垂直排列子元素 */
  -webkit-line-clamp: 3; /* 限制在3行 */
  overflow: hidden; /* 隐藏溢出的内容 */
  text-overflow: ellipsis; /* 使用省略符号 */
}

注意：-webkit-line-clamp 属性是非标准属性，主要用于WebKit引擎的浏览器，如Chrome、Safari。其他浏览器可能需要其他解决方案。

- 阅读更多 -

JS中数组的筛选

System

2024-08-14

所有,javascript

在JavaScript中，可以使用filter()方法对数组进行筛选，该方法会创建一个新数组，包含通过所提供函数实现的测试的所有元素。

下面是使用filter()方法的示例代码：




// 定义一个包含数字的数组
const numbers = [1, 2, 3, 4, 5, 6];
 
// 筛选出偶数
const evenNumbers = numbers.filter(number => number % 2 === 0);
 
console.log(evenNumbers); // 输出: [2, 4, 6]
 
// 筛选出大于3的数字
const greaterThanThree = numbers.filter(number => number > 3);
 
console.log(greaterThanThree); // 输出: [4, 5, 6]

在这个例子中，filter()方法用于筛选出数组numbers中的偶数和大于3的数字，并分别存入变量evenNumbers和greaterThanThree中。

- 阅读更多 -

Node.js长城文化交流平台的设计与实现

System

2024-08-14

所有,nodejs

由于提供的代码段是一个完整的Node.js项目，包含了多个文件和模块，我们无法在这里全部列出。但是，我可以提供一个简化的例子，展示如何在Node.js中创建一个简单的HTTP服务器。




// 引入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}/`);
});

这段代码创建了一个简单的HTTP服务器，监听3000端口，并对所有请求返回“Hello World”。这是Node.js非常基础的一部分，对于开发者来说非常重要，因为它展示了如何用Node.js创建网络服务。

System

2024-08-14

所有,vue.js

在Vue 3和Element Plus中实现“所见所得”的Excel导出功能，可以使用第三方库如xlsx来创建Excel文件，并结合Vue的方法来处理导出逻辑。以下是一个简化的实现示例：

安装xlsx库：




npm install xlsx file-saver

在Vue组件中使用xlsx库来导出表格数据为Excel文件：




<template>
  <el-button @click="exportTable">导出Excel</el-button>
  <el-table
    ref="table"
    :data="tableData"
    style="width: 100%">
    <!-- 表格列定义 -->
  </el-table>
</template>
 
<script setup>
import { ref } from 'vue';
import { saveAs } from 'file-saver';
import * as XLSX from 'xlsx';
 
const tableData = ref([
  // 表格数据
]);
 
const exportTable = () => {
  // 通过ref获取表格DOM元素
  const table = unref(table);
  // 使用Blob和createObjectURL创建下载链接
  const wb = XLSX.utils.table_to_book(table);
  const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
  try {
    const blob = new Blob([wbout], { type: 'application/octet-stream' });
    const url = URL.createObjectURL(blob);
    // 创建a标签模拟点击进行下载
    const a = document.createElement('a');
    a.href = url;
    a.download = 'table.xlsx';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  } catch (e) {
    if (typeof console !== 'undefined') console.error(e, wbout);
  }
  return wbout;
};
</script>

在上述代码中，我们定义了一个exportTable方法，该方法通过table_to_book函数将表格转换为Excel工作簿对象，然后使用write函数将其转换为可下载的格式。最后，创建一个a标签模拟点击进行下载。这样用户就可以直接在前端浏览器中导出表格数据为Excel文件。

- 阅读更多 -

HTML5五十六个民族网站模板源码

System

2024-08-14

所有,html5

HTML5五十六个民族网站模板源码可以在互联网上找到，但是由于版权和法律原因，我无法提供具体的链接或源码。如果您有特定的模板需求或者想要获取模板的帮助，我可以提供相应的指导。

如果您想要一个简单的HTML5网站模板示例，以下是一个基本的HTML5网站模板的代码：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic HTML5 Template</title>
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
    </header>
    <nav>
        <!-- Navigation links -->
    </nav>
    <section>
        <h2>Main Content</h2>
        <!-- Main content of the page -->
    </section>
    <aside>
        <h3>Sidebar</h3>
        <!-- Sidebar content -->
    </aside>
    <footer>
        <p>Copyright &copy; 2023 My Website</p>
    </footer>
</body>
</html>

这是一个简单的HTML5网站模板，您可以根据自己的需求添加更多的内容和样式。如果您需要更多特定的模板或有关于HTML5网站设计的帮助，欢迎随时联系我。

- 阅读更多 -

【vue3】Vue-Router路由的三种传参方式

System

2024-08-14

所有,vue.js

在Vue-Router中，有三种常见的传参方式：params、query 和 route。

params：这种传参方式适用于定义路由时就已知道参数的情况，需要在路由定义时指定参数。




const routes = [
  { path: '/user/:id', component: User, props: true }
]
 
// 导航到路由
this.$router.push({ name: 'user', params: { id: 123 }})

query：这种传参方式通常用于添加到URL查询字符串的参数，它们不会影响路由匹配，可以在任何路由下使用。




// 导航到路由，带上查询参数
this.$router.push({ path: '/user', query: { plan: 'premium' }})

route：这是一种特殊的传参方式，用于在单页面应用（SPA）中替换整个视图，而不是通过Vue-Router进行页面跳转。




// 使用 router.replace 来替换当前的视图
this.$router.replace('/new-route')

注意：route 是 Vue-Router 的内部属性，不是 Vue-Router 的公共 API 的一部分，不推荐在日常开发中使用。

- 阅读更多 -