分类前端技术下的文章

2024-08-16




// 定义一个简单的TypeScript类
class Greeter {
    greeting: string;
 
    constructor(message: string) {
        this.greeting = message;
    }
 
    greet() {
        return "Hello, " + this.greeting;
    }
}
 
// 实例化Greeter类并调用greet方法
let greeter = new Greeter("World");
console.log(greeter.greet()); // 输出: Hello, World

这段代码定义了一个简单的TypeScript类Greeter，它有一个属性greeting和一个构造函数，构造函数接受一个字符串作为参数并将其赋值给greeting属性。greet方法返回一个包含问候语的字符串。然后，我们创建了Greeter类的一个实例，并调用了greet方法，最后将结果输出到控制台。这个例子展示了如何在TypeScript中创建和使用类。

- 阅读更多 -

Vue 3和TypeScript连接Socket.IO的完整指南

System

2024-08-16

所有,typescript




<template>
  <div>
    <button @click="connectToSocket">连接到Socket.IO服务器</button>
    <button @click="sendMessage">发送消息</button>
  </div>
</template>
 
<script lang="ts">
import { defineComponent } from 'vue';
import io from 'socket.io-client';
 
export default defineComponent({
  setup() {
    let socket: SocketIOClient.Socket;
 
    const connectToSocket = () => {
      socket = io('http://localhost:3000');
      socket.on('connect', () => {
        console.log('已连接到Socket.IO服务器');
      });
    };
 
    const sendMessage = () => {
      if (socket) {
        socket.emit('message', 'Hello, Server!');
      }
    };
 
    return {
      connectToSocket,
      sendMessage,
    };
  },
});
</script>

这个代码实例展示了如何在Vue 3应用中使用TypeScript连接和使用Socket.IO。它定义了一个简单的Vue组件，其中包含连接到Socket.IO服务器的逻辑和发送消息的功能。这个例子为开发者提供了一个清晰的视图层和逻辑层的边界，并且展示了如何在Vue 3和TypeScript项目中引入和使用Socket.IO客户端库。

- 阅读更多 -

PC端调用mediaDevices 对象，获取摄像头权限，实现H5拍照

System

2024-08-16

所有,typescript

在PC端使用H5调用摄像头进行拍照，可以通过navigator.mediaDevices.getUserMedia() API来实现。以下是一个简单的实现例子：

HTML部分：




<button id="takePhoto">拍照</button>
<img id="photo" src="" alt="The screen capture will appear in this img tag" />

JavaScript部分：




document.getElementById('takePhoto').addEventListener('click', function() {
  takePhoto();
});
 
function takePhoto() {
  navigator.mediaDevices.getUserMedia({ video: true })
    .then(function(stream) {
      const video = document.createElement('video');
      video.srcObject = stream;
      video.autoplay = true;
      video.onloadedmetadata = function(e) {
        video.play();
        document.getElementById('photo').src = '';
        // 在video元素中捕获帧并转换为图片
        document.getElementById('photo').src = video.srcObject.getVideoTracks()[0].getCapabilities().resizeHeight && video.srcObject.getVideoTracks()[0].getCapabilities().resizeWidth ?
          // 如果摄像头支持resize，则调整视频的大小
          MediaStreamTrack.getScreenshot() :
          // 如果不支持，则直接捕获原始视频大小的屏幕
          (video.mozGetUserMedia ? video.mozGetUserMedia('video') : (video.webkitGetUserMedia ? video.webkitGetUserMedia('video') : ''));
      };
    })
    .catch(function(err) {
      console.log(err.name + ": " + err.message);
    });
}

在上述代码中，我们首先为按钮注册了一个点击事件，当按钮被点击时，调用takePhoto函数。在takePhoto函数中，我们使用getUserMedia获取摄像头的视频流，并创建一个video元素来展示摄像头的内容。当视频加载完成后，我们捕获当前视频的一帧作为图片，并将其显示在img元素中。

注意：上述代码在某些旧浏览器中可能不工作，因为不是所有的浏览器都支持navigator.mediaDevices.getUserMedia。此外，在不同浏览器中可能需要前缀，如mozGetUserMedia或webkitGetUserMedia。

- 阅读更多 -

Node.js_基础知识（http模块）

System

2024-08-16

所有,nodejs




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

这段代码首先导入了Node.js的http模块，然后创建了一个HTTP服务器，并定义了当服务器接收到请求时的响应行为。它设置了响应的状态码和内容类型，并向客户端发送了"Hello World"文本。最后，服务器开始监听3000端口，并在控制台输出服务器运行的URL。这是学习Node.js时非常基础且重要的一步。

- 阅读更多 -

细谈HTML的本地图片和本地相对路径

System

2024-08-16

所有,html

HTML中使用本地图片通常涉及两个概念：相对路径和绝对路径。

绝对路径：指文件在磁盘上真正的路径，完整的指向文件的路径，包括盘符。例如：




<img src="C:\Users\Username\Documents\Website\images\photo.jpg" alt="Photo">

相对路径：指文件相对于当前文件的路径。例如，如果你的HTML文件和图片在同一个目录下，你可以这样写：




<img src="photo.jpg" alt="Photo">

如果图片在上一级目录：




<img src="../photo.jpg" alt="Photo">

如果图片在下一级目录的"images"文件夹中：




<img src="images/photo.jpg" alt="Photo">

在Web开发中，通常使用相对路径。绝对路径在本地测试时可以正常工作，但在部署到Web服务器上时，路径可能会发生变化，从而导致图片无法显示。因此，使用相对路径可以保证无论在哪里图片都能正常显示。

- 阅读更多 -

2小时入门 HTML

System

2024-08-16

所有,html

HTML 是用于创建网页的标准标记语言。以下是一个简单的 HTML 示例，它创建了一个包含标题和段落的网页：




<!DOCTYPE html>
<html>
<head>
    <title>我的网页</title>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个段落。</p>
</body>
</html>

在这个例子中：

<!DOCTYPE html> 声明这是一个HTML5文档。
<html> 元素是这个文档的根元素。
<head> 元素包含了此网页的标题和字符集定义等元信息。
<title> 元素定义了网页的标题，它会显示在浏览器的标题栏上。
<body> 元素包含了所有的可见的页面内容。
<h1> 元素创建了一个大标题。
<p> 元素创建了一个段落。

要使用这段代码创建一个网页，可以将其保存为 .html 文件，并通过双击或在网页服务器上运行来查看。

- 阅读更多 -

BootStrap的颜色与下拉模块

System

2024-08-16

所有,css3

在Bootstrap框架中，可以使用下拉菜单组件来创建带有颜色选项的下拉模块。以下是一个简单的例子，展示了如何使用Bootstrap的下拉菜单功能来创建一个带有颜色选项的下拉模块：




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap Dropdown Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
 
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Choose Color
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#" style="background-color: #FF0000; color: #FFFFFF;">Red</a>
    <a class="dropdown-item" href="#" style="background-color: #00FF00; color: #FFFFFF;">Green</a>
    <a class="dropdown-item" href="#" style="background-color: #0000FF; color: #FFFFFF;">Blue</a>
  </div>
</div>
 
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
</body>
</html>

在这个例子中，我们使用了Bootstrap的按钮组件来创建一个触发下拉菜单的按钮，并通过dropdown-toggle类来初始化下拉菜单。每个下拉项（dropdown-item）都设置了背景颜色和文本颜色。当用户点击按钮时，会展开一个包含多种颜色选项的下拉菜单。

- 阅读更多 -

css中给子元素添加margin-top影响到父元素

System

2024-08-16

所有,css3

这个问题是CSS盒模型的一个常见问题，当子元素设置了margin-top时，该子元素的上边距不仅会影响自己与相邻元素之间的距离，还会传递给父元素，导致父元素的内边距（padding）和内容区域发生变化。

解决方法：

为父元素设置border-top来替代margin-top。
为父元素设置overflow: hidden，这样浏览器会创建一个BFC（Block Formatting Context），里面的元素的外边距不会与外面的元素发生叠加。
为父元素设置padding-top，这样可以为子元素创建一个内边距，而不是外边距。
为父元素设置position: relative和一个top值，这样可以相对于原来的位置进行偏移，而不是传递给父元素。
使用CSS Flexbox或CSS Grid布局，这些现代布局模式可以更好地控制子元素的外边距，而不会影响到父元素。

具体使用哪种方法取决于你的布局需求和上下文。

- 阅读更多 -

如何用CSS画一个三角形？

System

2024-08-16

所有,css3

在CSS中，我们可以使用边框技巧来创建一个三角形。这是通过设置元素的上、右、下边框为透明，而左边框设置为所需的颜色和宽度来实现的。

以下是一个创建向上指向的三角形的CSS代码示例：




.triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #ff0000;
}

HTML部分：




<div class="triangle-up"></div>

这段代码会创建一个向下指向的三角形，如果你想要其他方向的三角形，你可以调整border-left、border-right和border-bottom的值。例如，要创建一个向左指向的三角形，你可以将border-right设置为透明，并将border-left设置为实色。

System

2024-08-16

所有,css3

在Taro框架中，如果你想要在Image或Video组件的全屏预览中添加一个清晰的关闭按钮，你可以使用Taro自带的API Taro.showActionSheet 或 Taro.showModal 来实现。以下是一个简单的示例代码：




import Taro from '@tarojs/taro'
 
class MyComponent extends Taro.Component {
  closeFullscreen = () => {
    // 关闭全屏预览
    Taro.hideKeyboard() // 先隐藏键盘，再关闭预览
  }
 
  showActionSheet = () => {
    Taro.showActionSheet({
      itemList: ['关闭'],
      success: (res) => {
        if (res.tapIndex === 0) { // 用户点击了关闭按钮
          this.closeFullscreen()
        }
      },
      fail: (err) => {
        // 处理错误
        console.error(err)
      }
    })
  }
 
  render() {
    return (
      <View>
        {/* 图片组件 */}
        <Image
          src="your-image-url"
          mode="aspectFit"
          onClick={this.showActionSheet} // 点击图片时显示动作菜单
        />
 
        {/* 视频组件 */}
        <Video
          src="your-video-url"
          controls
          onClick={this.showActionSheet} // 点击视频时显示动作菜单
        />
      </View>
    )
  }
}

在这个示例中，我们为Image和Video组件添加了点击事件处理函数onClick，当用户点击图片或视频时，会触发showActionSheet函数，显示一个包含“关闭”按钮的操作表。如果用户点击“关闭”，则会调用closeFullscreen函数来关闭全屏预览。这样就在全屏预览中添加了一个清晰的关闭按钮。

- 阅读更多 -