标签 Javascript 下的文章

2024-08-16

将您写好的个人网站上传到服务器是一个简单的过程，以下是几个基本步骤：

购买服务器或托管： 您需要购买一个服务器或者使用像GitHub Pages、Netlify这样的托管服务。
域名注册： 如果您需要一个自己的域名（比如yourname.com），您需要在一个域名注册商那里注册。
域名解析： 将您的域名指向服务器的IP地址。
服务器配置： 配置服务器以托管网站。这可能包括安装Web服务器软件（如Apache或Nginx），设置数据库等。
上传网站文件： 使用FTP或SSH将您的网站文件上传到服务器。
管理权限： 设置文件权限，确保网站文件夹对所有人可读。
测试： 通过输入您的域名来测试网站是否正确上线。

示例代码（使用SSH上传文件）：




scp -r /path/to/your/local/website user@yourserver.com:/path/to/your/server/directory

确保替换/path/to/your/local/website为您本地网站文件的路径，user为您的服务器用户名，yourserver.com为您的服务器域名或IP地址，以及/path/to/your/server/directory为您网站在服务器上的目标路径。

如果您使用的是FTP，可以使用文件管理器或命令行工具上传文件。如果您使用的是托管服务，通常它们提供了一个简单的界面来上传您的网站文件。

- 阅读更多 -

【前端】在静态网页引入JS、CSS的地址上动态添加时间戳防止缓存

System

2024-08-16

所有,javascript




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://yourdomain.com/path/to/your.js?timestamp=1234567890"></script>
    <link href="http://yourdomain.com/path/to/your.css?timestamp=1234567890" rel="stylesheet">
</head>
<body>
    <!-- Your HTML content goes here -->
</body>
</html>

在这个例子中，我们在引入JS和CSS文件的URL后面加上了查询字符串（query string）?timestamp=1234567890。这个时间戳可以是任何一个特定的时间值，通常使用当前时间的时间戳。这样，每次页面加载时，浏览器都会认为是一个新的请求，从而避免了缓存的问题。这种方法在开发环境中非常有用，但在生产环境中，通常会有更好的缓存策略。

- 阅读更多 -

基于js+echarts实现数据可视化，全网疯传

System

2024-08-16

所有,javascript

以下是一个使用JavaScript和ECharts实现的简单数据可视化示例。这个例子创建了一个基本的条形图，显示了某个网站的访问量。




<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('container'));
 
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '网站访问量'
            },
            tooltip: {},
            legend: {
                data:['访问量']
            },
            xAxis: {
                data: ["主页","新闻","产品","关于"]
            },
            yAxis: {},
            series: [{
                name: '访问量',
                type: 'bar',
                data: [5, 20, 36, 10]
            }]
        };
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

这段代码首先通过<script>标签引入了ECharts库。然后，在<div>元素中创建了一个图表容器。接着，在<script>标签内，我们初始化ECharts实例，并设置图表的配置项和数据。最后，我们使用myChart.setOption(option)来显示这个图表。这个图表是一个简单的条形图，显示了四个网页的访问量。

- 阅读更多 -

【vue3】vite.config.ts(js)打包部署后页面白屏

System

2024-08-16

所有,javascript

白屏问题可能是由于多种原因导致的，以下是一些常见的原因和解决方法：

脚本错误：检查控制台是否有JavaScript错误。如果有，修复代码中的错误。
路径问题：确保项目中的所有资源路径正确，包括图片、样式表和脚本文件。
模块解析问题：确保所有模块都正确导入并且可以被Vite解析。
构建配置错误：检查vite.config.ts文件中的配置是否正确，比如入口文件、插件配置等。
第三方库问题：如果使用了第三方库，确保它们兼容Vue 3和Vite。
服务器配置问题：确认服务器配置正确，比如正确的MIME类型设置。
资源未正确加载：检查网络标签，确保所有资源都已经成功加载。
跨域问题：如果你的应用从不同的源加载资源，确保服务器已正确配置CORS。

解决方法通常涉及以下步骤：

检查浏览器控制台的错误信息。
检查vite.config.ts中的配置。
确保所有依赖项都已正确安装。
清除缓存并重新启动开发服务器。
如果使用了特定的构建工具插件，确保它们兼容Vite。
如果问题依然存在，可以尝试创建一个最小可复现问题的代码库，逐步排除问题。

如果以上步骤无法解决问题，可以考虑在Vite社区寻求帮助或者查看Vite的官方文档。

- 阅读更多 -

Golang实践录：gin绑定解析json的两种方法

System

2024-08-16

所有,golang




package main
 
import (
    "net/http"
 
    "github.com/gin-gonic/gin"
)
 
type LoginRequest struct {
    Username string `json:"username" binding:"required"`
    Password string `json:"password" binding:"required"`
}
 
func main() {
    router := gin.Default()
 
    // 方法一：使用ShouldBindJSON绑定JSON数据
    router.POST("/login1", func(c *gin.Context) {
        var json LoginRequest
        if err := c.ShouldBindJSON(&json); err != nil {
            c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
            return
        }
        c.JSON(http.StatusOK, gin.H{"status": "You are logged in", "user": json.Username})
    })
 
    // 方法二：使用BindJSON绑定JSON数据，并进行验证
    router.POST("/login2", func(c *gin.Context) {
        var json LoginRequest
        if err := c.BindJSON(&json); err != nil {
            c.JSON(http.StatusBadRequest, gin.H{"error": "Invalid JSON request"})
            return
        }
        if _, err := c.Get("username"); err != nil {
            c.JSON(http.StatusBadRequest, gin.H{"error": "Missing username field"})
            return
        }
        if _, err := c.Get("password"); err != nil {
            c.JSON(http.StatusBadRequest, gin.H{"error": "Missing password field"})
            return
        }
        c.JSON(http.StatusOK, gin.H{"status": "You are logged in", "user": json.Username})
    })
 
    router.Run(":8080")
}

这段代码定义了一个LoginRequest结构体来接收JSON请求，并展示了两种在Gin框架中绑定和解析JSON的方法。第一种方法使用ShouldBindJSON，它在绑定失败时会返回错误。第二种方法使用BindJSON和自定义的验证逻辑，它会先尝试绑定JSON，然后检查必要字段是否存在。这两种方法都会在请求体不符合要求时返回错误信息，或在符合要求时返回登录状态和用户名。

System

2024-08-16

所有,javascript

在Three.js中，可以使用THREE.Path和THREE.SplineCurv来创建一个指定路径的漫游效果。以下是一个简化的例子，展示了如何创建一个基本的路径漫游系统，包括开始、暂停、继续和退出等功能。




// 假设已经有了Three.js的scene和camera对象
 
// 创建路径曲线
var path = new THREE.Path();
path.moveTo(0, 0);
path.lineTo(10, 0);
path.lineTo(10, 10);
path.lineTo(0, 10);
path.lineTo(0, 0);
 
// 创建基于路径的曲线
var spline = new THREE.SplineCurve3(path.createPointsGeometry().vertices);
 
// 创建沿路径运动的网格
var geometry = new THREE.BufferGeometry();
var vertices = [];
 
for (var i = 0; i < spline.getPointCount(); i++) {
    vertices.push(spline.getPoint(i).x, spline.getPoint(i).y, spline.getPoint(i).z);
}
 
geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
 
// 创建材质和材质
var material = new THREE.LineBasicMaterial({ color: 0xffffff });
var splineObject = new THREE.Line(geometry, material);
scene.add(splineObject);
 
// 定义动画相关参数
var currentPosition = 0;
var nextPosition = 0;
var play = true;
var pause = false;
var duration = 5000; // 5秒
 
// 动画函数
function animate() {
    requestAnimationFrame(animate);
    if (play && !pause) {
        // 更新当前和下一个点的位置
        currentPosition += 0.05; // 每帧移动0.05
        nextPosition = currentPosition + 0.05;
 
        // 如果超过总长度，重置
        if (currentPosition >= 1) {
            currentPosition = 0;
            nextPosition = 0.001; // 防止立即重启
        }
 
        // 更新动画点
        var points = spline.getPoints(50); // 50个点
        geometry.setFromPoints(points);
 
        // 更新网格的顶点位置
        geometry.verticesNeedUpdate = true;
 
        // 更新下一个点的位置
        splineObject.geometry.attributes.position.setXYZ(
            Math.floor(nextPosition * (spline.getPointCount() - 1)),
            spline.getPoint(nextPosition).x,
            spline.getPoint(nextPosition).y,
            spline.getPoint(nextPosition).z
        );
    }
    renderer.render(scene, camera);
}
 
// 开始
function start() {
    play = true;
    animate();
}
 
// 暂停
function pauseWalk() {
    play = false;
    pause = true;
}
 
// 继续
function continueWalk() {
    play = true;
    pause = false;
}
 
// 退出
function exit() {
    play = false;
    pause = false;
}
 
// 调用start函数开始漫游
start();

这个例子创建了一个简单的路径，并且使用\`r

- 阅读更多 -

【Go】在 JSON 中解析 time.Duration

System

2024-08-16

所有,golang

在Go中，time.Duration是一种用于记录持续时间的类型，通常以纳秒为单位。当你需要在JSON中解析或生成time.Duration时，你可以将其视为一个数字，并使用相应的JSON编码/解码机制。

以下是一个简单的例子，展示了如何在JSON中解析time.Duration：




package main
 
import (
    "encoding/json"
    "fmt"
    "time"
)
 
type DurationJSON struct {
    Duration time.Duration `json:"duration"`
}
 
func main() {
    // 示例JSON数据
    jsonData := `{"duration": 5000000000}` // 5秒（以纳秒为单位）
 
    // 解码JSON数据到结构体
    var durationJSON DurationJSON
    if err := json.Unmarshal([]byte(jsonData), &durationJSON); err != nil {
        panic(err)
    }
 
    // 输出解析后的时长
    fmt.Println(durationJSON.Duration) // 输出：5s
}

在这个例子中，我们定义了一个DurationJSON结构体，它有一个time.Duration字段。我们使用json.Unmarshal函数将含有时长的JSON数据解码到这个结构体。

如果你需要将time.Duration编码为JSON，可以使用相同的方法：




package main
 
import (
    "encoding/json"
    "fmt"
    "time"
)
 
func main() {
    duration := 5 * time.Second // 5秒的时长
 
    // 编码时长到JSON
    jsonData, err := json.Marshal(duration)
    if err != nil {
        panic(err)
    }
 
    // 输出JSON字符串
    fmt.Println(string(jsonData)) // 输出："5000000000"
}

在这个例子中，我们直接将time.Duration值编码为JSON。

- 阅读更多 -

Vue3 之 JsBarcode打印条形码

System

2024-08-16

所有,javascript

在Vue 3中，你可以使用JsBarcode库来生成并打印条形码。首先，确保安装了JsBarcode：




npm install jsbarcode

然后，在你的Vue组件中，你可以这样使用JsBarcode：




<template>
  <div>
    <canvas ref="barcodeCanvas"></canvas>
    <button @click="printBarcode">打印条形码</button>
  </div>
</template>
 
<script>
import JsBarcode from 'jsbarcode';
 
export default {
  methods: {
    generateBarcode(code) {
      JsBarcode(this.$refs.barcodeCanvas, code, {
        format: 'CODE128', // 选择适合你数据的编码格式
        lineColor: '#0aa',
        width: 2,
        height: 100,
      });
    },
    printBarcode() {
      const canvas = this.$refs.barcodeCanvas;
      const img = canvas.toDataURL('image/png');
      const printWindow = window.open('', '_blank');
      printWindow.document.write('<img src="' + img + '">');
      printWindow.document.close();
      printWindow.focus();
      printWindow.print();
      printWindow.close();
    }
  },
  mounted() {
    this.generateBarcode('123456789012');
  }
};
</script>

在这个例子中，我们首先在模板中定义了一个canvas元素，用于绘制条形码。然后，在generateBarcode方法中，我们使用JsBarcode生成条形码并将其绘制在canvas上。printBarcode方法打开一个新窗口，将条形码图片写入，然后调用打印方法来打印图片。

System

2024-08-16

所有,php

该代码问题涉及到的是使用PHP和Auto.js构建的手机云控系统。具体的代码实现可能会涉及到以下几个部分：

PHP后端：负责接收和处理来自Auto.js前端的请求，并执行相应的操作。
Auto.js前端：运行在Android手机上的JavaScript脚本，负责远程控制手机。

以下是一个简单的示例来说明如何在PHP和Auto.js之间建立通信和执行远程控制。

PHP后端 (index.php):




<?php
// 连接ws服务器
$server = 'ws://127.0.0.1:8080';
$data = json_encode(['action' => 'command', 'params' => 'your_command_here']);
 
// 使用WebSocket发送数据
$ch = curl_init("$server");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, array(
    'Content-Type: Application/json',
    'Content-Length: ' . strlen($data))
);
curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
curl_setopt($ch, CURLOPT_POST, 1);
$result = curl_exec($ch);
 
// 处理返回的结果
echo $result;
curl_close($ch);
?>

Auto.js前端:




// Auto.js 脚本
 
// 连接ws服务器
var ws = new WebSocket('ws://127.0.0.1:8080');
 
// 监听WebSocket事件
ws.onmessage = function(event) {
    // 处理接收到的数据
    var data = JSON.parse(event.data);
    if (data.action === 'command') {
        // 执行远程命令
        if (data.params === 'your_command_here') {
            // 执行你想要的操作
            // 例如: 屏幕亮度调整
            runtime.setScreenBrightness(1.0);
        }
    }
};
 
// 发送命令
ws.send(JSON.stringify({'action': 'command', 'params': 'your_command_here'}));

在这个例子中，PHP后端负责与WebSocket服务端进行通信，Auto.js脚本负责与后端进行消息的发送和接收，并执行相应的操作。这个简单的框架可以根据具体需求进行扩展和定制。

- 阅读更多 -

【Npm】一文了解透彻package.json里的script字段以及相关知识

System

2024-08-16

所有,npm

package.json 文件中的 scripts 字段是一个对象，它定义了运行脚本命令的脚本。这些命令通过 npm 的 run 命令（简写为 npm run）来执行。

下面是一个简单的 package.json 文件示例，其中包含了 scripts 字段：




{
  "name": "example-package",
  "version": "1.0.0",
  "scripts": {
    "start": "node app.js",
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js"
  },
  "dependencies": {
    "express": "^4.17.1",
    "webpack": "^5.24.2"
  }
}

在这个例子中，scripts 对象定义了三个脚本：

start：当运行 npm start 时执行的命令，这里是启动一个使用 Node.js 的应用。
test：当运行 npm test 时执行的命令，这里是简单地打印一条错误信息并退出。
build：当运行 npm run build 时执行的命令，这里是使用 webpack 打包应用。

可以通过传递参数给 npm run 命令来给脚本传递参数，例如 npm run build -- --watch。

scripts 字段还支持使用环境变量和预设的 npm 生命周期脚本（如 prepublish, postpublish 等）。通过这种方式，可以轻松地管理项目构建、测试和部署等流程。

- 阅读更多 -