标签 Javascript 下的文章

2024-08-17

首先，确保你已经安装了Node.js环境。

通过npm安装gRPC库和protocol buffer编译器：




npm install @grpc/grpc-js google-protobuf

创建.proto文件定义gRPC服务：




// helloworld.proto
syntax = "proto3";
 
package helloworld;
 
// 定义服务
service Greeter {
  // 定义rpc方法
  rpc SayHello (HelloRequest) returns (HelloReply) {}
}
 
// 请求消息
message HelloRequest {
  string name = 1;
}
 
// 响应消息
message HelloReply {
  string message = 1;
}

使用protocol buffer编译器生成gRPC客户端和服务端存根代码：




npm install -g protoc
protoc --js_out=import_style=commonjs,binary:. --grpc-web_out=import_style=commonjs,mode=grpcwebtext:. helloworld.proto

上述命令会生成helloworld_pb.js和helloworld_grpc_web_pb.js两个文件。

创建gRPC客户端调用服务端：




const grpc = require('@grpc/grpc-js');
 
// 导入生成的protobuf定义
const proto = require('./helloworld_pb');
const service = require('./helloworld_grpc_web_pb');
 
// 定义gRPC服务器地址和端口
const host = 'localhost:50051';
 
// 创建gRPC通道
const channel = grpc.credentials.createInsecure();
const client = new service.GreeterClient(host, channel);
 
// 创建请求消息
const request = new proto.HelloRequest();
request.setName('World');
 
// 调用rpc方法
client.sayHello(request, {}, (err, response) => {
  if (err) {
    console.error(err);
  } else {
    console.log(response.getMessage());
  }
});

确保你的gRPC服务器在本地运行并监听50051端口。这个例子展示了如何在node.js中创建一个gRPC客户端，并向服务器发送请求。

- 阅读更多 -

vue 使用 face-api.js 实现人脸识别

System

2024-08-17

所有,vue.js




<template>
  <div>
    <video ref="video" width="640" height="480" autoplay></video>
    <canvas ref="canvas" width="640" height="480"></canvas>
    <div v-if="lastDetection">
      <p>Face found at position: {{ lastDetection.relativeBox }}</p>
    </div>
  </div>
</template>
 
<script>
import * as faceapi from 'face-api.js';
 
export default {
  data() {
    return {
      lastDetection: null
    };
  },
  async mounted() {
    await faceapi.loadModels('/models'); // 确保路径指向了正确的模型文件夹
    await this.startVideo();
    setInterval(this.detectFaces, 100);
  },
  methods: {
    async startVideo() {
      const video = this.$refs.video;
      const stream = await navigator.mediaDevices.getUserMedia({ video: {} });
      video.srcObject = stream;
      await video.play();
    },
    async detectFaces() {
      const video = this.$refs.video;
      const canvas = this.$refs.canvas;
      const context = canvas.getContext('2d');
      context.drawImage(video, 0, 0, canvas.width, canvas.height);
 
      const detections = await faceapi.detectAllFaces(video, new faceapi.TinyFaceDetectorOptions());
      this.lastDetection = detections.slice(-1)[0];
      if (this.lastDetection) {
        const resizedDetection = this.lastDetection.forSize(width, height);
        faceapi.drawDetection(canvas, resizedDetection, { withScore: false });
      }
    }
  }
};
</script>

这个例子展示了如何在Vue组件中使用face-api.js进行人脸检测。它首先加载必要的模型，然后开始视频流，并每隔100毫秒检测一次视频中的人脸。检测到的人脸位置会被标记在视频的画面上。

- 阅读更多 -

【python】最新版小红书js逆向拿到数据，非常详细教程（附完整代码）

System

2024-08-17

所有,python

获取网络数据通常涉及到发送HTTP请求，解析服务器响应，以及提取所需数据。对于小红书的反向工程，你需要找到API端点、必要的请求头、以及如果有的话，需要的认证方式。

以下是一个使用Python的requests库来发送HTTP请求并获取数据的基本例子。

首先，确保你已经安装了requests库，如果没有安装，可以使用pip安装：




pip install requests

然后，使用requests库编写代码以获取小红书的数据：




import requests
 
# 小红书的API端点
url = 'https://www.xiaohongshu.com/discovery/item/list'
 
# 发送GET请求
response = requests.get(url)
 
# 检查请求是否成功
if response.status_code == 200:
    # 解析JSON数据
    data = response.json()
    print(data)
else:
    print('请求失败，状态码：', response.status_code)
 
# 注意：以上代码可能无法直接工作，因为小红书可能有反爬虫策略。
# 你需要确保你的请求中包含了必要的headers，例如User-Agent、Cookie等。
# 如果API需要认证，你可能还需要提供认证信息，如Token或Session ID。

请注意，由于小红书可能有反爬虫策略，你可能需要设置适当的请求头（User-Agent、Referer、Cookies等）来模拟一个正常的浏览器请求。

此外，小红书的API可能有分页、限制等参数，你需要根据API文档来调整你的请求URL。

如果你需要详细的教程来进行反向工程和分析小红书的API，这涉及到对HTTP协议、网络爬虫技术、JavaScript逆向等的深入理解，这超出了简短回答的范围。通常，这需要对安全、网络和编程有深入的理解。

- 阅读更多 -

前端使用highlight.js代码高亮显示(服务端返回前端代码的字符串格式)

System

2024-08-17

所有,jquery

要在前端使用highlight.js来高亮显示从服务端返回的代码字符串，你需要按照以下步骤操作：

引入highlight.js库及相关语言高亮样式。
在页面中准备一个用于显示代码的元素。
使用highlight.js提供的API将返回的代码字符串进行高亮渲染。

以下是一个简单的示例代码：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Highlight Code Example</title>
    <!-- 引入 highlight.js 样式 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/styles/default.min.css">
    <!-- 引入 highlight.js 库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/highlight.min.js"></script>
</head>
<body>
    <pre><code id="code-container"></code></pre>
 
    <script>
        // 假设这是从服务端获取的代码字符串
        var codeString = "console.log('Hello, World!');";
 
        // 高亮渲染代码
        hljs.highlightAuto(codeString).value;
 
        // 将高亮后的代码设置到页面上的元素中
        document.getElementById('code-container').innerHTML = hljs.highlightAuto(codeString).value;
    </script>
</body>
</html>

在这个例子中，我们假设codeString是从服务端接收到的代码字符串。highlightAuto函数自动检测代码语言并应用相应的高亮样式。然后，我们将高亮后的代码字符串设置到页面上的<code>元素内。

请确保服务器返回的内容类型是正确的（如application/json），以便正确处理从服务端接收到的字符串。如果服务端返回的内容是HTML格式，你可能需要对返回的代码字符串进行HTML实体编码，以避免XSS攻击。

- 阅读更多 -

SpringBoot使用jsoup爬取HTML

System

2024-08-17

所有,html




import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
 
@RestController
public class JsoupController {
 
    @GetMapping("/parseHtml")
    public String parseHtml() {
        try {
            // 目标网页URL
            String url = "http://example.com";
            // 使用Jsoup连接网页
            Document doc = Jsoup.connect(url).get();
            // 解析你感兴趣的内容，例如标题
            String title = doc.title();
 
            return title;
        } catch (Exception e) {
            e.printStackTrace();
            return "Error parsing HTML";
        }
    }
}

这段代码展示了如何在Spring Boot应用中使用Jsoup库来解析HTML。当访问/parseHtml端点时，它会连接到指定的URL，获取HTML内容，并返回页面的标题。这是一个简单的示例，实际应用中可能需要根据具体需求来解析HTML文档中的其他部分。

- 阅读更多 -

javascript的执行机制，html5移动web开发

System

2024-08-17

所有,html5

JavaScript的执行机制主要指的是事件循环(Event Loop)和异步执行。在HTML5移动Web开发中，常用的异步操作包括setTimeout、setInterval、Promises、async/await等。

以下是一个简单的例子，展示了如何在HTML5移动Web开发中使用JavaScript的异步执行机制：




// 使用setTimeout进行异步操作
console.log('Start');
setTimeout(() => {
  console.log('Async Operation');
}, 0);
console.log('End');
 
// 使用Promise进行异步操作
function asyncOperation() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('Promise Operation');
      resolve();
    }, 0);
  });
}
 
console.log('Start');
asyncOperation().then(() => {
  console.log('Promise Resolved');
});
console.log('End');
 
// 使用async/await进行异步操作
async function asyncOperationWithAwait() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('Await Operation');
      resolve();
    }, 0);
  });
}
 
console.log('Start');
const result = asyncOperationWithAwait();
console.log('End');
await result;
console.log('Await Resolved');

在这个例子中，我们看到了如何在HTML5移动Web开发中使用不同的异步操作，并通过console.log来观察它们的执行顺序。这有助于理解JavaScript的事件循环和异步执行。

- 阅读更多 -

js判断元素是否在可视区域内

System

2024-08-17

所有,jquery

以下是几种不同的方法来判断一个元素是否在可视区域内：

方法一：使用getBoundingClientRect()方法




function isInViewport(element) {
  const rect = element.getBoundingClientRect();
  const isVisible = (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
  return isVisible;
}

方法二：使用window.scrollY和window.innerHeight属性




function isInViewport(element) {
  const elementTop = element.offsetTop;
  const elementBottom = elementTop + element.offsetHeight;
  const scrollTop = window.scrollY;
  const scrollBottom = scrollTop + window.innerHeight;
  const isVisible = (elementTop >= scrollTop) && (elementBottom <= scrollBottom);
  return isVisible;
}

方法三：使用Element.getBoundingClientRect()方法和window.pageYOffset属性




function isInViewport(element) {
  const rect = element.getBoundingClientRect();
  const isVisible = (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
  const scrollTop = window.pageYOffset;
  const scrollBottom = scrollTop + window.innerHeight;
  const isPositionVisible = (rect.top >= scrollTop) && (rect.bottom <= scrollBottom);
  return isVisible && isPositionVisible;
}

这些方法都可以判断一个元素是否在可视区域内，它们的实现方式略有不同，但都能达到相同的效果。

- 阅读更多 -

JQuery实现异步同时取多个URL的json

System

2024-08-17

所有,jquery

使用jQuery的$.when()方法可以同步获取多个URL的JSON数据。以下是一个简单的示例代码：




$.when(
  $.getJSON('/url1'),
  $.getJSON('/url2'),
  $.getJSON('/url3')
).done(function(response1, response2, response3) {
  // 处理获取到的数据
  var data1 = response1[0];
  var data2 = response2[0];
  var data3 = response3[0];
  
  // 使用数据进行操作
  console.log(data1);
  console.log(data2);
  console.log(data3);
}).fail(function(error) {
  // 处理错误情况
  console.error('An error occurred:', error);
});

在这个例子中，$.getJSON被调用三次以发出三个异步请求。$.when()接收这三个请求作为参数，并在所有请求都完成时调用done回调函数。每个响应都作为参数传递给done函数，你可以通过它们的索引或者直接访问属性来处理每个响应。如果任何一个请求失败，fail回调函数会被调用。

- 阅读更多 -

JavaScript获取异步数据的两种方法

System

2024-08-17

所有,jquery

在JavaScript中，获取异步数据通常涉及到使用fetch API或者XMLHttpRequest对象。以下是两种方法的示例代码：

使用fetch API的示例：




fetch('https://api.example.com/data')
  .then(response => {
    if (response.ok) {
      return response.json(); // 将响应数据转换为JSON
    }
    throw new Error('Network response was not ok.');
  })
  .then(data => {
    console.log('获取到的数据:', data);
  })
  .catch(error => {
    console.error('获取数据时发生错误:', error);
  });

使用XMLHttpRequest的示例：




var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data');
xhr.onload = function() {
  if (xhr.status === 200) {
    var data = JSON.parse(xhr.responseText);
    console.log('获取到的数据:', data);
  } else {
    console.error('请求失败，状态码：', xhr.status);
  }
};
xhr.onerror = function() {
  console.error('请求出错');
};
xhr.send();

现在的JavaScript开发中，推荐使用fetch API，因为它更现代、更简洁，同时提供了更多的功能和更好的错误处理机制。

- 阅读更多 -

js实现input输入框内容自动格式化工具-Cleave.js使用教程

System

2024-08-17

所有,typescript

Cleave.js 是一个 JavaScript 库，用于在数据输入时自动应用格式化模式，常用于输入框中金额、电话号码等数据的格式化。

以下是如何使用 Cleave.js 来格式化输入框的示例：

首先，在 HTML 中添加一个输入框：




<input type="text" id="phoneNumber" placeholder="Enter phone number">

接着，引入 Cleave.js 库和它的 CSS 文件：




<script src="cleave.min.js"></script>
<link rel="stylesheet" href="cleave.css">

最后，使用 JavaScript 初始化 Cleave，并指定格式化模式：




// 获取输入框元素
var phoneNumber = document.getElementById('phoneNumber');
 
// 创建 Cleave 实例，并应用格式化模式
var cleavePhone = new Cleave(phoneNumber, {
    phone: true,
    delimiter: '-',
    blocks: [0, 3, 3, 4]
});

在这个例子中，Cleave 被用来创建一个电话号码输入框，其中 phone: true 指定了电话格式，delimiter 设置了分隔符（连字符），blocks 数组定义了电话号码的组成块。

Cleave.js 还支持自定义模式、国际化等功能，可以根据具体需求进行配置。

- 阅读更多 -