标签 Javascript 下的文章

2024-08-19

在JavaScript中，可以使用Object.keys()方法来获取对象的所有键（key）值，使用Object.values()方法来获取对象的所有值（value）。如果数组中包含对象，可以遍历数组并分别获取键和值。

以下是获取数组对象中所有键和值的示例代码：




// 假设有如下数组对象
let arrayOfObjects = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 28 }
];
 
// 获取所有key值
let keys = arrayOfObjects.flatMap(obj => Object.keys(obj));
// 获取所有value值
let values = arrayOfObjects.flatMap(obj => Object.values(obj));
 
console.log(keys); // 输出：['name', 'age', 'name', 'age', 'name', 'age']
console.log(values); // 输出：['Alice', 25, 'Bob', 30, 'Charlie', 28]

在这个例子中，flatMap 方法用于遍历数组对象，并分别获取每个对象的键和值数组，然后将它们扁平化为一个单一数组。这样keys数组包含了所有键的值，values数组包含了所有值的值。

- 阅读更多 -

three.js零基础入门超全超细的教程整理

System

2024-08-19

所有,javascript

在这个系列中，我们将从零开始，逐步教你如何使用three.js创建一个3D场景。首先，我们需要在HTML文件中引入three.js库。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Three.js 入门示例</title>
    <style>
        body { margin: 0; overflow: hidden; } 
    </style>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/three@0.125.1/build/three.min.js"></script>
    <script>
        // 这里是我们的Three.js代码
    </script>
</body>
</html>

接下来，我们将创建一个简单的3D场景，包括一个立方体和一个平面。




// 创建场景
const scene = new THREE.Scene();
 
// 创建摄像机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
 
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
// 创建立方体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
 
// 创建平面
const planeGeometry = new THREE.PlaneGeometry(10, 10);
const planeMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -Math.PI / 2;
scene.add(plane);
 
// 将立方体置于平面上方
cube.position.set(5, 5, 0);
 
// 渲染循环
function animate() {
    requestAnimationFrame(animate);
 
    // 旋转立方体和平面
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    plane.rotation.z += 0.01;
 
    renderer.render(scene, camera);
}
 
animate();

在这个简单的例子中，我们创建了一个场景，一个摄像机，一个渲染器，一个立方体和一个平面。然后，我们将立方体和平面添加到场景中，并设置了它们的渲染位置。最后，我们进入了一个渲染循环，使得所有的物体可以不断旋转，从而形成一个动态的3D场景。

- 阅读更多 -

js实现字符串转json对象的四种方法

System

2024-08-19

所有,javascript

在JavaScript中，可以使用以下四种方法将字符串转换为JSON对象：

使用JSON.parse()方法
使用eval()函数
使用new Function()构造函数
使用第三方库如jQuery.parseJSON()

方法1: 使用`JSON.parse()`

这是最常用的方法，它是原生的JavaScript方法，无需任何依赖。




var jsonString = '{"name":"John", "age":30, "city":"New York"}';
var jsonObj = JSON.parse(jsonString);
console.log(jsonObj.name); // 输出: John

方法2: 使用`eval()`

虽然eval()可以解析JSON字符串，但它也能执行任何JavaScript代码，这在安全性上是一个问题。因此，不推荐使用。




var jsonString = '({"name":"John", "age":30, "city":"New York"})';
var jsonObj = eval('(' + jsonString + ')');
console.log(jsonObj.name); // 输出: John

方法3: 使用`new Function()`

这种方法虽然看起来有些复杂，但在某些情况下可以避免eval()的问题。




var jsonString = '{"name":"John", "age":30, "city":"New York"}';
var jsonObj = (new Function('return ' + jsonString))();
console.log(jsonObj.name); // 输出: John

方法4: 使用jQuery.parseJSON()

如果你使用jQuery，可以使用$.parseJSON()方法解析JSON字符串。




var jsonString = '{"name":"John", "age":30, "city":"New York"}';
var jsonObj = $.parseJSON(jsonString);
console.log(jsonObj.name); // 输出: John

注意：从jQuery 3.0开始，$.parseJSON()已被内置的JSON.parse()取代。因此，推荐使用JSON.parse()方法。

- 阅读更多 -

OpenCV实战——OpenCV.js介绍

System

2024-08-19

所有,javascript

OpenCV.js是OpenCV（Open Source Computer Vision Library）在Web上的版本，它允许在浏览器中使用计算机视觉功能。

要在网页中使用OpenCV.js，你需要在HTML文件中包含OpenCV.js库。你可以从OpenCV的GitHub仓库或通过CDN获取OpenCV.js。

以下是一个简单的HTML示例，展示了如何在网页中包含OpenCV.js并使用它来读取图像：




<!DOCTYPE html>
<html>
<head>
    <title>OpenCV.js Example</title>
</head>
<body>
    <img id="image" src="example.jpg" alt="Image to process" />
    <script async src="https://docs.opencv.org/master/opencv.js" onload="onOpenCvLoaded();"></script>
    <script type="text/javascript">
        function onOpenCvLoaded() {
            const imgElement = document.getElementById('image');
            const src = cv.imread(imgElement);
            cv.imshow('Canvas', src);
            // 清理资源
            src.delete();
        }
    </script>
</body>
</html>

在这个例子中，我们首先在<head>标签中包含了OpenCV.js库。我们使用onload事件确保在OpenCV.js加载完成后执行一个函数onOpenCvLoaded()。在这个函数中，我们使用cv.imread()函数读取图像，然后使用cv.imshow()在网页上显示图像。最后，我们使用delete()方法清理资源。

请注意，由于浏览器的安全限制，你不能直接从本地文件系统读取文件并使用OpenCV.js进行操作。你需要将你的网页和图像文件托管在web服务器上才能正常工作。

- 阅读更多 -

Vue.js 清除页面缓存的方法

System

2024-08-19

所有,vue.js

在Vue.js中，清除页面缓存通常涉及到使用vue-router的导航守卫来处理缓存清除的逻辑。以下是一个简单的示例，展示了如何在路由切换时清除缓存的页面：




// 引入Vue和VueRouter
import Vue from 'vue'
import Router from 'vue-router'
 
// 引入页面组件
import HomePage from '@/components/HomePage'
import AboutPage from '@/components/AboutPage'
 
// 使用Vue.use注册VueRouter
Vue.use(Router)
 
// 创建Router实例
const router = new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: HomePage
    },
    {
      path: '/about',
      name: 'About',
      component: AboutPage
    }
    // ...其他路由
  ]
})
 
// 添加全局前置守卫
router.beforeEach((to, from, next) => {
  // 如果要求清除页面缓存，可以在这里添加清除缓存的逻辑
  // 例如，清除localStorage中的缓存数据
  if (from.meta.clearCache) {
    localStorage.removeItem('cacheKey');
  }
  next();
})
 
export default router

在上述代码中，我们为router.beforeEach添加了一个全局前置守卫，在每次路由切换前检查是否需要清除缓存。这里的from.meta.clearCache是一个假设的字段，你可以根据实际需求自定义字段名。如果你想在离开某个页面时清除其缓存，你可以在路由配置中设置meta字段：




const router = new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: HomePage,
      // 设置meta字段，指示需要清除缓存
      meta: {
        clearCache: true
      }
    },
    // ...其他路由配置
  ]
})

当路由/home被离开时，前置守卫会检测到meta.clearCache为true，并执行缓存清除的逻辑。这只是一个简单的示例，根据你的具体需求，你可能需要使用其他的缓存清除策略，例如sessionStorage、cookies或者是应用层的状态管理库如Vuex的状态清除。

System

2024-08-19

所有,爬虫

在Python中解密由JavaScript加密的数据，通常需要确定加密的算法和密钥。以下是一个使用PyCryptodome库解密AES算法的示例：

首先，安装PyCryptodome库：




pip install pycryptodome

然后，使用以下代码解密AES加密的数据：




from Crypto.Cipher import AES
from Crypto.Random import get_random_bytes
 
# 假设这是你已知的密钥和初始向量
key = b'1234567890123456'  # 密钥长度必须是16、24或32字节
iv = b'1234567890123456'  # 初始向量长度必须是16字节
 
# 加密的数据样例（16字节的整数倍）
encrypted_data = b'...'
 
# 创建AES解密对象
cipher = AES.new(key, AES.MODE_CBC, iv)
 
# 解密数据
decrypted_data = cipher.decrypt(encrypted_data)
 
# 删除填充（如果有PKCS#7填充）
decrypted_data = pad(decrypted_data)
 
print(decrypted_data)

注意：以上代码假设你已知密钥和初始向量。在实际情况中，你需要从JavaScript代码中分析或猜测这些值。解密过程可能需要对JavaScript加密代码进行详细分析，这涉及到逆向工程JavaScript加密算法。

- 阅读更多 -

爬虫系列----Python解析Json网页并保存到本地csv

System

2024-08-19

所有,爬虫




import requests
import json
import csv
 
# 定义一个函数来解析JSON数据并将其保存到CSV文件中
def save_to_csv(json_data, filename):
    # 打开文件进行写入
    with open(filename, 'w', newline='', encoding='utf-8') as csvfile:
        # 创建csv字典写入器
        writer = csv.DictWriter(csvfile, fieldnames=json_data[0].keys())
        # 写入表头
        writer.writeheader()
        # 写入数据
        writer.writerows(json_data)
 
# 定义要获取的URL
url = 'http://example.com/api/data'
 
# 发送HTTP请求
response = requests.get(url)
 
# 确认请求成功
if response.status_code == 200:
    # 加载JSON数据
    data = json.loads(response.text)
    
    # 解析数据并保存到CSV
    save_to_csv(data, 'output.csv')

这段代码首先定义了一个函数save_to_csv，它接受JSON数据和文件名作为参数，然后将JSON数据写入到CSV文件中。代码中包含了错误处理，以确保在请求数据时如果出现问题可以给出相应的提示。

- 阅读更多 -

21.网络爬虫—js逆向详讲与实战

System

2024-08-19

所有,爬虫

由于提出的问题是关于JavaScript逆向的，我们需要提供相关的解释和实战代码。JavaScript逆向主要是分析和理解JavaScript加密代码的过程，以下是一个简单的示例：

假设有以下JavaScript加密函数：




function encrypt(data) {
    var secretKey = "mySecretKey";
    var encrypted = '';
    for (var i = 0; i < data.length; i++) {
        encrypted += String.fromCharCode(data.charCodeAt(i) ^ secretKey.charCodeAt(i % secretKey.length));
    }
    return encrypted;
}

这个函数通过异或操作对数据进行了简单的加密。我们的目标是逆向这个过程，恢复原始数据。




function decrypt(encrypted) {
    var secretKey = "mySecretKey";
    var decrypted = '';
    for (var i = 0; i < encrypted.length; i++) {
        decrypted += String.fromCharCode(encrypted.charCodeAt(i) ^ secretKey.charCodeAt(i % secretKey.length));
    }
    return decrypted;
}

使用方法：




var encryptedData = encrypt("Hello World!");
console.log(encryptedData); // 输出加密后的数据
 
var decryptedData = decrypt(encryptedData);
console.log(decryptedData); // 输出解密后的数据 "Hello World!"

这个简单的例子展示了如何实现基本的异或加密和解密。在实际的逆向工程中，你可能需要分析更复杂的代码，使用更高级的技术来破解加密。

System

2024-08-19

所有,爬虫




import scrapy
 
class MySpider(scrapy.Spider):
    name = 'example.com'
    allowed_domains = ['example.com']
    start_urls = ['http://www.example.com/']
 
    def parse(self, response):
        # 提取页面中的所有链接并进一步爬取
        for href in response.css('a::attr(href)').getall():
            # 构造绝对URL，并进行请求，parse_page方法将在下一页的响应中被调用
            yield response.follow(href, callback=self.parse_page)
 
    def parse_page(self, response):
        # 提取页面中的有效数据
        for item in response.css('div.item'):
            yield {
                'title': item.css('a::text').get(),
                'link': item.css('a::attr(href)').get(),
                'desc': item.css('span::text').get(),
            }

这个简单的Scrapy爬虫示例展示了如何定义一个Spider，包括名称、允许爬取的域名、起始URL和解析方法。parse方法用于提取起始页面的链接，并通过response.follow方法递归地爬取每个页面。parse_page方法用于提取每个页面上的数据项，这里的CSS选择器仅为示例，需要根据实际页面结构进行相应调整。

- 阅读更多 -

Nodejs使用mysql2操作数据库【完整讲解】

System

2024-08-19

所有,javascript




// 引入mysql2模块
const mysql = require('mysql2');
 
// 创建连接对象
const connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: '你的数据库密码',
  database: '你的数据库名'
});
 
// 开启连接
connection.connect();
 
// 执行查询操作
connection.query('SELECT * FROM your_table_name', (error, results, fields) => {
  if (error) throw error;
  // 处理查询结果
  console.log(results);
});
 
// 关闭连接
connection.end();

确保替换 '你的数据库密码' 和 '你的数据库名' 为你自己的数据库信息，同时将 'your_table_name' 替换为你要查询的表名。这段代码展示了如何使用 mysql2 模块在 Node.js 中连接到 MySQL 数据库，执行一个简单的查询，并处理结果。

- 阅读更多 -

方法1: 使用JSON.parse()

方法2: 使用eval()

方法3: 使用new Function()

方法4: 使用jQuery.parseJSON()

方法1: 使用`JSON.parse()`

方法2: 使用`eval()`

方法3: 使用`new Function()`