标签 Javascript 下的文章

2024-08-23

在Node.js环境中，可以使用ssh2库来实现SSH免密登录。以下是一个简单的例子，展示了如何使用ssh2库在Node.js中通过SSH进行免密登录：

首先，安装ssh2库：




npm install ssh2

然后，使用以下代码进行SSH免密登录：




const { Client } = require('ssh2');
 
const conn = new Client();
conn.on('ready', () => {
  console.log('Client :: ready');
  conn.shell((err, stream) => {
    if (err) throw err;
    stream.on('close', () => {
      console.log('Stream :: close');
      conn.end();
    }).on('data', (data) => {
      console.log('OUTPUT: ' + data);
    });
    // 输入命令，例如：ls
    stream.end('ls\n');
  });
}).on('error', (err) => {
  console.log('Client :: error :: ' + err);
}).connect({
  host: 'your.ssh.server.com',
  port: 22,
  username: 'your_username',
  privateKey: require('fs').readFileSync('/path/to/your/private/key/id_rsa')
});

在这个例子中，你需要将your.ssh.server.com替换成你的SSH服务器地址，your_username替换成你的用户名，并且在/path/to/your/private/key/id_rsa处提供你的私钥文件路径。

注意，私钥应该保存在一个安全的地方，并且不应该有对外访问的权限。

这段代码会创建一个SSH连接，当连接准备好后，它会请求一个shell，并且可以输入命令。在实际应用中，你可能需要处理用户输入和服务器响应，但这是SSH免密登录的基本示例。

- 阅读更多 -

vue 预览 pdf pdf.js 的具体使用

System

2024-08-23

所有,javascript

在Vue项目中使用pdf.js来预览PDF文件，你需要按照以下步骤操作：

安装pdf.js库：




npm install pdfjs-dist

在Vue组件中引入pdf.js库并使用。




<template>
  <div>
    <canvas ref="pdfCanvas"></canvas>
  </div>
</template>
 
<script>
import pdfjsLib from 'pdfjs-dist/build/pdf';
 
export default {
  props: {
    pdfUrl: {
      type: String,
      required: true
    }
  },
  mounted() {
    this.loadPdf();
  },
  methods: {
    loadPdf() {
      const canvas = this.$refs.pdfCanvas;
      const ctx = canvas.getContext('2d');
      const loadingTask = pdfjsLib.getDocument(this.pdfUrl);
 
      loadingTask.promise.then(pdf => {
        console.log('PDF loaded');
        pdf.getPage(1).then(page => {
          const viewport = page.getViewport({ scale: 1.5 });
          canvas.height = viewport.height;
          canvas.width = viewport.width;
          const renderContext = {
            canvasContext: ctx,
            viewport: viewport
          };
          page.render(renderContext).promise.then(() => {
            console.log('Page rendered');
          });
        }).catch(err => {
          console.error('Cannot load page', err);
        });
      }).catch(err => {
        console.error('Cannot load PDF document', err);
      });
    }
  }
};
</script>

在这个例子中，我们创建了一个简单的Vue组件，它接收一个pdfUrl属性，该属性是要预览的PDF文件的URL。组件在mounted钩子中调用loadPdf方法，该方法使用pdfjsLib.getDocument来获取PDF文档，然后获取第一页并渲染到canvas元素中。

确保你的Vue项目配置能够处理PDF.js的大小，如果有必要，可以在webpack配置中添加对应的loader规则来处理PDF.js的大文件。

- 阅读更多 -

js实时监听input输入框值的变化

System

2024-08-23

所有,javascript

在JavaScript中，可以使用input元素的oninput事件来实时监听输入框值的变化。以下是一个简单的例子：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Input Event Example</title>
<script>
function handleInputChange(event) {
    console.log(event.target.value);
}
</script>
</head>
<body>
 
<input type="text" oninput="handleInputChange(event)" placeholder="Type something here...">
 
</body>
</html>

在这个例子中，每当用户在输入框中输入或更改文本时，都会触发handleInputChange函数，并将输入框的当前值记录到控制台。

- 阅读更多 -

NodeJS Web 开发第五版

System

2024-08-23

所有,javascript

这是一个使用Express框架创建简单的RESTful API的示例代码。




const express = require('express');
const app = express();
const port = 3000;
 
// 中间件，用于解析JSON格式的请求体
app.use(express.json());
 
// 用户列表
const users = [];
 
// 用户API路由
app.get('/users', (req, res) => {
  res.send(users);
});
 
app.post('/users', (req, res) => {
  const newUser = {
    id: users.length + 1,
    name: req.body.name,
    email: req.body.email
  };
  users.push(newUser);
  res.status(201).send(newUser);
});
 
// 启动服务器
app.listen(port, () => {
  console.log(`服务器运行在 http://localhost:${port}`);
});

这段代码首先导入了Express框架，并初始化了一个简单的应用。定义了一个用户列表，并实现了两个API端点：一个用于获取用户列表，另一个用于创建新用户。创建新用户时，为用户分配了一个唯一的ID，并将其加入用户列表。最后，应用程序在指定端口监听请求。

System

2024-08-23

所有,javascript

题目描述：

给定一组URL组件，请编写代码将这些组件拼接成一个完整的URL。

示例：




输入：
protocol = "http"
host = "leetcode.com"
path = "/path"
query = "query=123"
fragment = "fragment"
输出：
"http://leetcode.com/path?query=123#fragment"

解决方案：

Java 实现：




public class Solution {
    public String buildUrl(String protocol, String host, String path, String query, String fragment) {
        StringBuilder url = new StringBuilder();
        url.append(protocol).append("://").append(host);
        if (path != null) {
            url.append('/').append(path.startsWith("/") ? path.substring(1) : path);
        }
        if (query != null) {
            url.append('?').append(query);
        }
        if (fragment != null) {
            url.append('#').append(fragment);
        }
        return url.toString();
    }
}

Python 实现：




class Solution:
    def buildUrl(self, protocol, host, path, query, fragment):
        url = protocol + "://" + host
        if path:
            url += '/' + path.lstrip('/')
        if query:
            url += '?' + query
        if fragment:
            url += '#' + fragment
        return url

C++ 实现：




#include <iostream>
#include <string>
 
std::string buildUrl(std::string protocol, std::string host, std::string path, std::string query, std::string fragment) {
    std::string url = protocol + "://" + host;
    if (!path.empty()) {
        url += '/' + path.substr(path.starts_with('/') ? 1 : 0);
    }
    if (!query.empty()) {
        url += '?' + query;
    }
    if (!fragment.empty()) {
        url += '#' + fragment;
    }
    return url;
}
 
int main() {
    std::string protocol = "http";
    std::string host = "leetcode.com";
    std::string path = "/path";
    std::string query = "query=123";
    std::string fragment = "fragment";
    std::cout << buildUrl(protocol, host, path, query, fragment) << std::endl;
    return 0;
}

JavaScript 实现：




function buildUrl(protocol, host, path, query, fragment) {
    let url = protocol + "://" + host;
    if (path) {
        url += '/' + path.replace(/^\//, '');
    }
    if (query) {
        url += '?' + query;
    }
    if (fragment) {
        url += '#' + fragment;
    }
    return url;
}
 
// 测试示例
console.log(buildUrl("http", "leetcode.com", "/path", "query=123", "fr

System

2024-08-23

所有,javascript




// Object.assign 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。
// 它将返回目标对象。
let target = { a: 1, b: 2 };
let source = { b: 4, c: 5 };
 
let returnedTarget = Object.assign(target, source);
console.log(returnedTarget); // { a: 1, b: 4, c: 5 }
 
// Object.values 方法返回一个给定对象自身可枚举属性值的数组，其顺序与对象中的顺序相同。
let obj = { foo: 'bar', baz: 42 };
console.log(Object.values(obj)); // ['bar', 42]
 
// reduce 方法对数组中的每个元素执行一个提供的reducer函数（升序执行），
// 将其结果汇总为单个输出值。
let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((total, num) => total + num, 0);
console.log(sum); // 15
 
// rest 运算符(spread operator) 允许一个表达式被展开为一个新的数组
let fruits = ['apple', 'banana', 'mango'];
let newFruits = [...fruits];
console.log(newFruits); // ['apple', 'banana', 'mango']
 
// 使用 rest 运算符和 Object.assign 来复制数组
let clone = [...numbers];
console.log(clone); // [1, 2, 3, 4, 5]
 
// 使用 Object.values 和 reduce 来计算对象值的总和
let values = { first: 10, second: 20, third: 30 };
let sumOfValues = Object.values(values).reduce((total, num) => total + num, 0);
console.log(sumOfValues); // 60

System

2024-08-23

所有,javascript

在前端JavaScript、Java和MySQL中，字符串截取通常使用substr或substring方法。在Oracle中，使用SUBSTR函数。

JavaScript:
- substr方法：substr(startIndex, length)，从startIndex开始，截取长度为length的字符串。
- substring方法：substring(startIndex, endIndex)，从startIndex开始到endIndex（不包括endIndex）之间的字符串。
```
var str = "Hello, World!";
var substrResult = str.substr(0, 5); // 结果："Hello"
var substringResult = str.substring(0, 5); // 结果："Hello"
```
Java:
- substring方法：substring(startIndex, endIndex)，从startIndex开始到endIndex（不包括endIndex）之间的字符串。
```
String str = "Hello, World!";
String substrResult = str.substring(0, 5); // 结果："Hello"
```
MySQL:
- SUBSTR函数：SUBSTR(str, startIndex, length)，从startIndex开始，截取长度为length的字符串。
```
SET @str = 'Hello, World!';
SELECT SUBSTR(@str, 1, 5); // 结果：'Hello'
```

Oracle:

SUBSTR函数：与MySQL的SUBSTR用法相同。




SELECT SUBSTR('Hello, World!', 1, 5) FROM DUAL; // 结果：'Hello'

注意：在JavaScript中，如果省略length参数，则substr会截取从startIndex到字符串末尾的所有字符；在Java和MySQL中，如果省略length参数，则substring和SUBSTR会截取从startIndex到字符串末尾的所有字符。

- 阅读更多 -

压缩js 和还原压缩min.js

System

2024-08-23

所有,javascript

压缩（压缩js）和解压（还原压缩min.js）JavaScript 文件通常是开发过程中的一个步骤，以减少文件大小，便于网络传输。这可以通过工具如 Google Closure Compiler, Terser 或其他压缩工具实现。

压缩 JS 文件:

压缩 JS 文件通常会移除空格、换行和注释，并且还可能会进行更复杂的优化，例如 mangle 变量名、内联简单的函数等。

使用 Node.js 和 Terser 压缩 JS 文件:




const Terser = require('terser');
 
const filePath = 'path/to/yourfile.js';
const fileContent = fs.readFileSync(filePath, 'utf-8');
 
(async () => {
    const result = await Terser.minify(fileContent);
    fs.writeFileSync('path/to/yourfile.min.js', result.code);
})();

解压（还原压缩min.js）:

解压缩的过程通常是不可逆的，因为许多压缩工具会丢失元数据和注释。但是，可以使用一些工具进行反压缩，例如：

使用在线工具:

使用 Node.js 和 Terser 反压缩:




const Terser = require('terser');
 
const filePath = 'path/to/yourfile.min.js';
const fileContent = fs.readFileSync(filePath, 'utf-8');
 
(async () => {
    const result = await Terser.format(fileContent);
    fs.writeFileSync('path/to/yourfile.pretty.js', result.code);
})();

注意：压缩和解压缩的过程可能不是完全可逆的，压缩后的代码可能会丢失部分格式和注释，一些变量名也可能被 mangle （变形），所以在某些情况下可能无法完全还原原始代码。

- 阅读更多 -

js获取浏览器指纹

System

2024-08-23

所有,javascript

在JavaScript中，通常无法直接获取浏览器的指纹，因为这会涉及到用户的隐私。不过，可以通过一些技巧生成一个伪指纹，例如结合浏览器的fingerprint2库来生成一个基于用户设备的唯一标识。

以下是使用fingerprint2库生成浏览器指纹的示例代码：

首先，你需要引入fingerprint2库：




<script src="path/to/fingerprint2.js"></script>

然后，使用fingerprint2生成浏览器指纹：




// 初始化fingerprint2
Fingerprint2.get(function (result, components) {
    console.log(result); // 这是生成的浏览器指纹
});

这段代码会根据用户的浏览器信息（包括用户的浏览器名称、版本、插件、语言、屏幕分辨率等）生成一个唯一标识符，但请注意，这并不是真正的浏览器指纹，因为它不包含任何能够独一无二地识别用户身份的信息。

为了保护用户隐私，请务必在使用这类技术时清楚地向用户说明收集信息的目的，并确保这些信息不会被用于追踪用户。

- 阅读更多 -

JS ：深拷贝解析与实现（附structuredClone语法测试）

System

2024-08-23

所有,javascript




// 深拷贝解析与实现示例
 
// 定义一个深拷贝函数
function structuredClone(obj) {
    return new structuredClone.structuredClone(obj);
}
 
// 定义一个测试对象
const testObject = {
    a: 1,
    b: {
        c: 2,
        d: [3, 4]
    }
};
 
// 测试深拷贝函数
const clone = structuredClone(testObject);
console.log(clone); // 输出: { a: 1, b: { c: 2, d: [ 3, 4 ] } }
 
// 修改原始对象并确认深拷贝对象不受影响
testObject.a = 100;
testObject.b.c = 200;
testObject.b.d.push(5);
 
console.log(testObject); // 输出: { a: 100, b: { c: 200, d: [ 3, 4, 5 ] } }
console.log(clone);       // 输出: { a: 1, b: { c: 2, d: [ 3, 4 ] } }
 
// 注意: 实际的深拷贝实现可能需要递归地处理嵌套对象和数组，
// 并且需要考虑特殊的引用类型比如函数、Date、RegExp等。
// 这里的示例只是为了展示基本的用法。

这段代码定义了一个简单的structuredClone函数，用于执行深拷贝操作。然后定义了一个测试对象，并使用该函数创建了一个对象的深拷贝。接下来，修改原始对象的属性，并验证深拷贝对象不受影响。这个例子旨在展示如何使用structuredClone函数进行深拷贝操作，并提醒开发者深拷贝需要考虑到对象的所有引用。

- 阅读更多 -