分类前端技术下的文章

2024-08-07

在Eclipse中创建一个简单的HTML页面，包含折线图和条形图的示例代码如下：




<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 折线图和条形图示例</title>
    <!-- 引入 ECharts 文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
</head>
<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM 容器 -->
    <div id="line-chart" style="width: 600px;height:400px;"></div>
    <div id="bar-chart" style="width: 600px;height:400px;"></div>
    
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var lineChart = echarts.init(document.getElementById('line-chart'));
        var barChart = echarts.init(document.getElementById('bar-chart'));
 
        // 指定图表的配置项和数据
        var optionLine = {
            title: {
                text: '折线图示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'line',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
 
        var optionBar = {
            title: {
                text: '条形图示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
 
        // 使用刚指定的配置项和数据显示图表。
        lineChart.setOption(optionLine);
        barChart.setOption(optionBar);
    </script>
</body>
</html>

这段代码首先引入了ECharts库，然后创建了两个div容器，分别用于显示折线图和条形图。接着，通过echarts.init方法初始化了两个ECharts实例，并为它们指定了相应的配置项和数据。最后，使用setOption方法将配置项应用到实例上，渲染出折线图和条形图。

System

2024-08-07

所有,html




#include <iostream>
#include <gumbo.h>
 
// 假设GumboNodeToString已经实现，用于将Gumbo节点转换为字符串
std::string GumboNodeToString(const GumboNode* node);
 
// 假设GumboOutputFree已经实现，用于释放Gumbo解析输出内存
void GumboOutputFree(GumboOutput* output);
 
// 解析HTML并查询特定标签的函数
std::string queryHtmlTag(const std::string& html, const std::string& tag) {
    // 解析HTML
    GumboOutput* output = gumbo_parse(html.c_str());
    if (!output) {
        return "HTML解析失败";
    }
 
    // 查询特定标签
    std::string result;
    auto root = output->root;
    if (root->type == GUMBO_NODE_DOCUMENT) {
        gumbo_query((GumboNode*)root, [&](GumboNode* node)
            if (node->type == GUMBO_NODE_ELEMENT &&
                tag == GumboStringPieceToString(node->v.element.tag)) {
                result = GumboNodeToString(node);
                return true;  // 找到第一个匹配即停止查询
            }
            return false;
        });
    }
 
    // 清理Gumbo使用的内存
    GumboOutputFree(output);
 
    return result;
}
 
int main() {
    std::string html = "<html><body><p>Hello, world!</p></body></html>";
    std::string tag = "p";
    std::string result = queryHtmlTag(html, tag);
    std::cout << result << std::endl;
    return 0;
}

这个例子展示了如何使用Gumbo库来解析HTML并查询特定标签。在实际应用中，你需要实现GumboNodeToString和GumboOutputFree这两个函数，以及gumbo_query的相关实现（这个函数在Gumbo库中不存在，需要自行实现或使用其他方式进行查询）。

- 阅读更多 -

vue快速入门v-html

System

2024-08-07

所有,html

在Vue中，v-html指令用于设置元素的innerHTML。这意味着它会渲染实际的HTML，并不会转义字符串。

警告：在生产环境中使用 v-html 可能会导致 XSS 攻击，如果你的内容是用户提供的，请确保你清理了它。

示例代码：




<template>
  <div>
    <!-- 将innerHtml属性的值渲染到p元素中 -->
    <p v-html="innerHtml"></p>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      // 这里的内容将被渲染为HTML
      innerHtml: '<span style="color: red;">这是红色的文本</span>'
    }
  }
}
</script>

在这个例子中，<span>标签和它的内容会被渲染，而不是作为纯文本显示。这使得你可以在Vue组件中动态地插入HTML内容。

- 阅读更多 -

【HTML——3d粒子特效，JNI层MediaScanner的分析

System

2024-08-07

所有,html

由于提问中涉及到两个不同的主题，HTML中的3D粒子特效和JNI层MediaScanner的分析，我将分别给出解答。

HTML中的3D粒子特效：

HTML中可以使用WebGL和Three.js来创建3D粒子特效。以下是一个简单的例子，展示如何使用Three.js创建一个简单的3D粒子系统：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D Particle Effect</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
 
        var geometry = new THREE.Geometry();
        var material = new THREE.ParticleBasicMaterial({ color: 0xFFFFFF, size: 1 });
 
        for (var i = 0; i < 1000; i++) {
            var particle = new THREE.Vector3(
                Math.random() * 2 - 1,
                Math.random() * 2 - 1,
                Math.random() * 2 - 1
            );
            particle.multiplyScalar(Math.random() * 10 + 10);
            geometry.vertices.push(particle);
        }
 
        var system = new THREE.ParticleSystem(geometry, material);
        scene.add(system);
 
        camera.position.z = 5;
 
        var render = function () {
            requestAnimationFrame(render);
            system.rotation.y += 0.0001;
            renderer.render(scene, camera);
        };
 
        render();
    </script>
</body>
</html>

JNI层MediaScanner的分析：

JNI（Java Native Interface）是Java的一个功能，允许Java代码和其他语言写的代码进行交互。在Android中，MediaScanner是一个用C/C++编写并通过JNI与Java层互动的框架服务，它负责扫描媒体文件并将信息存储到数据库中。

如果你需要分析MediaScanner的JNI部分，你可以在Android源码中找到它的实现，通常位于如下路径：




frameworks/base/media/jni/android_media_MediaScanner.cpp

这个文件定义了JNI方法，它们被注册并使Java层的MediaScanner类能够调用本地代码。

由于分析JNI代码涉及到对Android源码的理解，并且通常涉及到设备的具体硬件和Android版本的细节，所以不适合在这里详细展开。如果你有具体的代码问题或者分析问题，欢迎提问。

- 阅读更多 -

纯css实现太极八卦图

System

2024-08-07

所有,css

使用纯CSS实现太极八卦图，可以通过使用CSS的@keyframes规则来创建动画，并使用transform属性进行旋转等变换。以下是一个简单的例子，展示了如何使用CSS创建一个基本的太极八卦图：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Taiji Icon</title>
<style>
  .taiji {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: black;
    border-radius: 50%;
    animation: rotate 4s infinite linear;
  }
 
  .taiji::before,
  .taiji::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: white;
    border-radius: 50%;
  }
 
  .taiji::before {
    width: 50%;
    height: 50%;
    transform: translate(-50%, -50%);
  }
 
  .taiji::after {
    width: 30%;
    height: 30%;
    transform: translate(-50%, -50%) rotate(45deg);
  }
 
  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(180deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
</style>
</head>
<body>
<div class="taiji"></div>
</body>
</html>

这段代码创建了一个简单的太极图标，其中.taiji代表天，而.taiji::before和.taiji::after分别代表地和阳。通过@keyframes rotate动画，它们会不断旋转和切换位置，模拟出太极旋律的动态效果。

- 阅读更多 -

Web框架开发-基于Ajax实现的登录

System

2024-08-07

所有,ajax

以下是一个简单的例子，展示了如何使用JavaScript和Ajax实现登录功能：

HTML部分：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login Page</title>
</head>
<body>
    <form id="loginForm">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username"><br><br>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password"><br><br>
        <button type="button" id="loginBtn">Login</button>
    </form>
 
    <script src="login.js"></script>
</body>
</html>

JavaScript部分 (login.js):




document.getElementById('loginBtn').addEventListener('click', function() {
    var username = document.getElementById('username').value;
    var password = document.getElementById('password').value;
 
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/login', true);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            // 登录成功的处理逻辑
            console.log('Login successful');
            // 可以在这里跳转到另一个页面
        } else if (xhr.readyState === 4 && xhr.status === 401) {
            // 登录失败的处理逻辑
            console.log('Login failed');
        }
    };
 
    var data = JSON.stringify({
        username: username,
        password: password
    });
 
    xhr.send(data);
});

在这个例子中，我们为登录按钮添加了一个点击事件监听器。当按钮被点击时，它会读取用户名和密码，并通过Ajax向服务器的/login路径发送一个POST请求。服务器端需要有相应的路由来处理登录请求，并返回合适的状态码（如200表示成功，401表示未授权）。

请注意，这个例子没有处理CSRF tokens，HTTPS，或者输入验证。在实际应用中，你需要添加这些安全措施。

- 阅读更多 -

【Ajax】ajax 基本使用 / 跨域问题 / get和post

System

2024-08-07

所有,ajax

Ajax基础使用：




// 创建一个新的XMLHttpRequest对象
var xhr = new XMLHttpRequest();
 
// 配置请求类型、URL 以及是否异步处理
xhr.open('GET', 'http://example.com/api/data', true);
 
// 设置请求完成的回调函数
xhr.onreadystatechange = function () {
  // 请求完成并且响应状态码为200
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      // 处理请求响应的数据
      console.log(xhr.responseText);
    } else {
      // 处理错误情况
      console.error('请求失败，状态码：' + xhr.status);
    }
  }
};
 
// 发送请求
xhr.send();

Ajax处理跨域问题：

JSONP：只支持GET请求，通过动态创建<script>标签发送请求。
CORS：服务器需要设置适当的CORS头部，如Access-Control-Allow-Origin。
代理服务器：在服务器端创建一个代理，所有Ajax请求首先发送到这个代理，由代理转发请求到目标服务器。
使用服务端代理：在服务器端设置一个接口，前端发送Ajax请求到这个服务器端接口，由服务器代理发送真正的请求到目标URL。

Ajax GET和POST请求：




// GET请求
xhr.open('GET', 'http://example.com/api/data?param=value', true);
xhr.send();
 
// POST请求
xhr.open('POST', 'http://example.com/api/data', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // 设置请求头
xhr.send('param=value');

以上代码展示了如何使用Ajax发送GET和POST请求，以及处理跨域问题的基本方法。

- 阅读更多 -

nuxt.js中使用axios以及二次封装

System

2024-08-07

所有,javascript

在Nuxt.js中使用axios并进行二次封装，可以通过以下步骤实现：

安装axios:




npm install axios

在plugins目录下创建axios.js文件，并编写二次封装的代码:




// plugins/axios.js
import axios from 'axios';
 
let axiosInstance = axios.create({
  baseURL: 'http://your-api-url/',
  // 其他配置...
});
 
// 添加请求拦截器
axiosInstance.interceptors.request.use(config => {
  // 可以在这里添加例如token等请求头
  // if (store.state.token) {
  //   config.headers.common['Authorization'] = `Bearer ${store.state.token}`;
  // }
  return config;
}, error => {
  return Promise.reject(error);
});
 
// 添加响应拦截器
axiosInstance.interceptors.response.use(response => {
  // 对响应数据做处理
  return response.data;
}, error => {
  // 处理响应错误
  return Promise.reject(error);
});
 
export default axiosInstance;

在nuxt.config.js中配置axios插件:




// nuxt.config.js
export default {
  // ...
  plugins: [
    '@/plugins/axios'
  ],
  // ...
}

在组件或页面中使用封装后的axios实例:




// 在组件中
export default {
  async fetch() {
    const response = await this.$axios.get('/your-endpoint');
    this.data = response;
  }
}

通过以上步骤，你可以在Nuxt.js项目中使用二次封装的axios实例，并能够方便地在请求和响应中添加全局的处理逻辑。

System

2024-08-07

所有,javascript

Highlight.js 和 Markdown-it 是两个常用的JavaScript库，分别用于代码高亮和Markdown解析。以下是如何将它们结合使用的示例代码：

首先，确保在你的项目中包含了这两个库的CSS和JavaScript文件。
在HTML文件中，创建一个容器来显示高亮后的代码和解析后的Markdown。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Highlight.js and Markdown-it Example</title>
    <link rel="stylesheet" href="path/to/highlight.js/styles/default.css">
    <script src="path/to/highlight.js/highlight.pack.js"></script>
    <script src="path/to/markdown-it.js"></script>
</head>
<body>
    <div id="code-container"></div>
    <div id="markdown-container"></div>
    <script>
        // 初始化Markdown-it
        var md = markdownit();
 
        // 初始化Highlight.js
        hljs.initHighlightingOnLoad();
 
        window.onload = function() {
            // 示例代码
            var code = '```javascript\nconsole.log("Hello, World!");\n```';
 
            // 将代码放入代码容器
            document.getElementById('code-container').innerHTML = code;
 
            // 解析Markdown并放入Markdown容器
            document.getElementById('markdown-container').innerHTML = md.render(code);
        };
    </script>
</body>
</html>

在这个例子中，我们首先在HTML的<head>部分包含了Highlight.js和Markdown-it的CSS和JavaScript文件。然后，在<body>中创建了两个<div>容器，分别用于显示高亮后的代码和解析后的Markdown。在<script>标签中，我们初始化了Markdown-it，并在页面加载完成后通过Highlight.js的initHighlightingOnLoad函数进行代码高亮。最后，我们使用Markdown-it的render函数将代码块解析为HTML，并将其显示在页面上。

System

2024-08-07

所有,javascript

AST-HOOK是一种用于JavaScript的逆向工程技术，它允许开发者在JavaScript的抽象语法树(AST)级别进行代码分析和操作。

在这里，我们将使用ast-hook-for-js-re库来实现一个简单的内存漫游的例子。首先，我们需要安装这个库：




npm install ast-hook-for-js-re

下面是一个简单的使用ast-hook-for-js-re的例子，它会在AST层面修改一个函数的行为，使其在执行时打印一条特定的消息：




const hook = require('ast-hook-for-js-re');
 
// 要修改的JavaScript代码
const code = `
function add(a, b) {
  return a + b;
}
`;
 
// 创建一个hook实例
const hookInstance = hook(code);
 
// 定义一个钩子函数，它会在add函数执行时被调用
const hookedAdd = hookInstance.hookFunction('add', function(args, original) {
  console.log('Function add is about to be called with arguments:', args);
  // 调用原始函数
  const result = original(...args);
  console.log('Function add has been called with result:', result);
  // 返回结果
  return result;
});
 
// 执行修改后的代码
const addResult = hookInstance.exec(); // 这将执行add函数，并应用了我们的钩子函数
 
// 打印结果
console.log(addResult); // 这将输出我们在钩子函数中记录的信息

在这个例子中，我们首先导入了ast-hook-for-js-re库，然后定义了一些JavaScript代码。接着，我们使用hook函数创建了一个hook实例，并使用hookFunction方法钩住了add函数的执行。在hookFunction方法中，我们记录了函数调用的参数和结果，并在函数执行前后打印了相关信息。最后，我们执行了修改后的代码，并打印了结果。

这个例子展示了如何使用AST-HOOK进行代码的逆向工程和修改，这在进行安全研究、逆向工程和调试等领域有着广泛的应用。

- 阅读更多 -