标签 gin 下的文章

编程笔记 html5&css&js 072 JavaScript BigInt数据类型

2024-08-07

在JavaScript中，BigInt是一种数字类型，用于安全存储大整数或任意精度的整数。它可以存储任意大的整数值，并且不会失去精度。

创建BigInt的方法很简单，只需在整数后面加上n即可。例如：




const largeNumber = 123456789123456789123456789n;
console.log(largeNumber); // 输出：123456789123456789123456789n

你也可以使用BigInt()构造函数创建BigInt：




const largeNumber = BigInt(123456789123456789123456789);
console.log(largeNumber); // 输出：123456789123456789123456789n

注意，使用BigInt()构造函数时，你需要确保传入的值可以被转换为一个字符串，这个字符串是一个有效的整数字面量，并且在字符串两侧加上一对空白符（例如空格，换行符等）以区分数字字面量和十六进制前缀。

BigInt与Number的转换：




const number = 123n;
const largeNumber = BigInt(number);
 
console.log(number); // 输出：123n
console.log(largeNumber); // 输出：123n

BigInt与Number之间不能进行直接的算术运算，需要先将BigInt转换为Number或将Number转换为BigInt。例如：




const largeNumber = 123456789123456789123456789n;
const smallNumber = 123;
 
// 将BigInt转换为Number
const largeNumberAsNumber = Number(largeNumber);
const smallNumberAsBigInt = BigInt(smallNumber);
 
// 进行算术运算
const sum = largeNumberAsNumber + smallNumber;
console.log(sum); // 输出：123456789123456790593n
 
const difference = largeNumber - smallNumberAsBigInt;
console.log(difference); // 输出：1234567891234567879859n

需要注意的是，JavaScript中的BigInt与Number是不同的类型，不能混用进行算术运算。在进行算术运算时，需要确保所有的数字都是同一种类型。

- 阅读更多 -

jqPagination - 简洁易用的jQuery分页插件

System

2024-08-07

所有,jquery




<!DOCTYPE html>
<html>
<head>
    <title>jqPagination 分页插件示例</title>
    <link rel="stylesheet" href="path/to/jqPagination.css">
    <script src="path/to/jquery.min.js"></script>
    <script src="path/to/jqPagination.js"></script>
    <script>
        $(function() {
            $('#pagination').jqPagination({
                // 设置总页数
                max_page: 100,
                // 设置当前页
                current_page: 1,
                // 设置每页显示数目
                items_per_page: 10,
                // 设置连接点击事件
                link_string: '/page/{page_number}',
                // 设置是否显示首页和尾页
                first: 'First',
                last: 'Last',
                // 设置是否显示上一页和下一页
                prev: 'Prev',
                next: 'Next',
                // 设置是否显示页码
                page_numbers: true,
                // 设置回调函数
                onChange: function(page_number) {
                    // 页面跳转逻辑
                    alert('跳转到第 ' + page_number + ' 页');
                }
            });
        });
    </script>
</head>
<body>
    <div id="pagination"></div>
</body>
</html>

这个代码示例展示了如何使用jqPagination插件创建一个简洁的分页控件，并提供了基本的自定义选项。当用户点击分页控件的页码或导航按钮时，会触发一个弹窗，显示用户当前选择的页码。这个例子可以作为开发者学习和实践如何在自己的项目中应用分页插件的起点。

System

2024-08-07

所有,typescript

在Ionic 3中，要修改摄像头预览插件cordova-plugin-camera-preview以添加水印，你需要自定义插件的功能或使用现有的图像处理技术在预览帧上绘制水印。由于cordova-plugin-camera-preview插件不直接支持水印，你可能需要使用其他方法。

以下是一个简单的示例，演示如何在摄像头预览上绘制文本水印：

安装cordova-plugin-camera-preview和cordova-plugin-canvas-watermark插件。




ionic cordova plugin add cordova-plugin-camera-preview
ionic cordova plugin add cordova-plugin-canvas-watermark

在src/pages/home/home.ts中，使用CanvasWatermark插件在预览帧上绘制水印。




import { CameraPreview } from '@ionic-native/camera-preview/ngx';
import { CanvasWatermark } from '@ionic-native/canvas-watermark/ngx';
 
export class HomePage {
 
  constructor(private cameraPreview: CameraPreview, private canvasWatermark: CanvasWatermark) { }
 
  startCameraPreview() {
    this.cameraPreview.startCamera({
      x: 0,
      y: 0,
      width: window.screen.width,
      height: window.screen.height,
      cameraDirection: this.cameraPreview.CAMERA_DIRECTION.BACK,
      tapPhoto: false,
      previewDrag: false,
      toBack: true
    });
 
    // 监听摄像头预览
    this.cameraPreview.onPictureTaken().subscribe((imageData) => {
      // 在这里处理图片数据
    });
 
    // 设置水印
    this.canvasWatermark.setOptions({
      text: 'Your Watermark',
      font: '20px Arial',
      color: 'rgba(255,255,255,0.5)',
      rotate: '45',
      x: 10,
      y: 10,
      width: 200,
      height: 50,
      position: this.canvasWatermark.POSITION_TOP_LEFT
    });
 
    // 应用水印到摄像头预览
    this.canvasWatermark.apply('camera_preview');
  }
}

请注意，camera_preview是摄像头预览视图的ID，这可能需要根据你的应用布局进行调整。此外，CanvasWatermark插件的具体选项可能需要根据实际需求进行调整。

这个示例只是一个基本的指引。在实际应用中，你可能需要处理水印位置、样式和动态数据。同时，你还需要确保这些插件在你的项目中是兼容的，并且已正确安装和配置。

System

2024-08-07

所有,html




package main
 
import (
    "github.com/gin-gonic/gin"
    "html/template"
    "net/http"
)
 
func main() {
    router := gin.Default()
 
    // 指定模板文件夹
    router.LoadHTMLGlob("templates/**/*")
 
    // 自定义模板函数
    router.SetFuncMap(template.FuncMap{
        "myFunc": func(s string) string {
            // 对s进行处理
            return s
        },
    })
 
    // 静态文件服务
    router.Static("/static", "./static")
 
    // 路由处理
    router.GET("/", func(c *gin.Context) {
        // 渲染模板并返回
        c.HTML(http.StatusOK, "index.html", gin.H{
            "title": "主页",
        })
    })
 
    // 启动服务
    router.Run(":8080")
}

这段代码演示了如何在Gin框架中设置模板渲染、自定义模板函数以及如何为静态文件提供服务。在实际开发中，你需要将myFunc和"index.html"模板文件替换为你的具体实现。

System

2024-08-07

所有,html

报错解释：

这个错误通常表示浏览器拒绝从指定的源加载脚本，因为它违反了同源策略。在这个例子中，尝试从http://127.0.0.1:8004/login加载JavaScript脚本，但是被浏览器阻止了。

可能的原因：

脚本尝试从不同的源（协议、域名、端口任一不同）加载，而不是从加载页面的源加载。
服务器响应的MIME类型不是text/javascript或application/javascript，导致浏览器不将其视为JavaScript脚本。

解决方法：

确保脚本标签的src属性指向同一源（协议、域名、端口）的资源。
如果你控制服务器配置，请确保服务器正确设置了MIME类型，对于JavaScript文件通常是text/javascript或application/javascript。
如果跨域请求是必须的，可以考虑使用CORS（跨源资源共享）。
检查是否有任何安全策略（如内容安全策略）阻止加载脚本。

- 阅读更多 -

关于margin-top失效的情况

System

2024-08-07

所有,css3

margin-top失效的情况通常发生在块级元素的直接子元素上，而该子元素又是一个块级元素，且父元素没有设置border, padding或overflow属性。

解释：

当父元素没有边框、内边距或者当overflow属性不是visible时，块级子元素的margin-top会看起来像是应用在了父元素上。这种现象被称为“margin collapse”。

解决方法：

给父元素设置边框：border: 1px solid transparent;。
给父元素设置内边距：padding: 1px;。
如果不希望使用上述方法，可以给父元素设置overflow: auto;或者overflow: hidden;。

示例代码：




/* 解决方法1：给父元素设置边框 */
.parent {
  border: 1px solid transparent;
}
 
/* 解决方法2：给父元素设置内边距 */
.parent {
  padding: 1px;
}
 
/* 解决方法3：给父元素设置overflow */
.parent {
  overflow: auto; /* 或者使用 'hidden' */
}

System

2024-08-07

所有,css

报错解释：

这个错误通常发生在使用Taro框架进行小程序或者Web应用开发时，当使用webpack进行编译打包时，会出现关于mini-css-extract-plugin插件的警告。mini-css-extract-plugin用于将CSS从JS文件中提取成独立的CSS文件，警告通常意味着CSS提取过程中出现了问题。

解决方法：

确保mini-css-extract-plugin的版本与其他依赖的webpack和Taro版本兼容。
如果问题出现在使用了代码分割（code splitting）的场景下，可以尝试调整webpack的配置，比如减少入口文件的大小，或者调整mini-css-extract-plugin的配置。
清除旧的编译文件，重新编译项目，有时候旧的编译缓存可能会导致问题。
查看具体的警告信息，如果有更详细的错误描述，根据描述进行针对性的解决。
如果问题依旧存在，可以考虑在Taro社区或者相关的技术论坛寻求帮助。

System

2024-08-07

所有,javascript

要在Nginx中部署Vite 4+ Vue 3项目，你需要确保Vite项目已经构建并且Nginx配置正确。以下是部署的基本步骤和示例配置：

构建Vite项目：
在项目根目录运行构建命令：
```
npm run build
```
或者如果你使用的是yarn：
```
yarn build
```
将构建后的内容移动到Nginx的服务目录：
通常构建后的内容会在项目目录的dist文件夹中，你需要将这个文件夹的内容移动到Nginx的服务目录下，例如/usr/share/nginx/html。
配置Nginx：
编辑Nginx的配置文件，通常这个文件位于/etc/nginx/conf.d/default.conf或者/etc/nginx/sites-available/your_site。
以下是一个基本的Nginx配置示例，确保更改root指令指向你的构建输出目录：
```
server {
    listen 80;
    server_name your-domain.com; # 你的域名或IP
 
    root /path/to/your/dist;     # 指向Vite构建的dist目录
    index index.html;
 
    location / {
        try_files $uri $uri/ /index.html;
    }
}
```
重启Nginx服务：
```
sudo systemctl restart nginx
```

确保你的安全组和防火墙设置允许80端口（或你选择的端口）的流量。

如果你遇到了跨域问题，确保在Vite配置文件中正确设置了vite.config.js中的base选项，并在Nginx配置中适当地设置了proxy。

如果你的Vite项目使用了history模式，确保Nginx配置中有正确的重写规则来处理路由。

如果你在部署过程中遇到其他问题，请确保检查Nginx的错误日志，它通常可以提供问题的线索。

System

2024-08-07

所有,javascript

要在不连接互联网的情况下使用高德地图的JS API插件，您需要先下载这些插件的JS文件，然后在您的应用中引用这些本地文件。以下是一个基本的步骤和示例代码：

下载高德地图JS API库和所需插件的JS文件。
将这些文件放在本地服务器上或您的静态资源目录中。
在HTML文件中引用本地的JS文件而不是线上的URL。

示例代码：




<!DOCTYPE html>
<html>
<head>
    <title>高德地图离线部署</title>
    <!-- 引用本地的高德地图API库 -->
    <script src="path/to/your/amap-js-v1.3.0.js"></script>
    <!-- 引用本地的插件JS文件 -->
    <script src="path/to/your/RangingTool.js"></script>
    <script src="path/to/your/ToolBar.js"></script>
</head>
<body>
    <div id="container" style="width:600px;height:400px;"></div> <!-- 地图容器 -->
    <script>
        // 初始化地图
        var map = new AMap.Map('container', {
            zoom: 11, // 缩放级别
            center: [116.397428, 39.90923] // 中心点坐标
        });
 
        // 使用离线的插件
        map.addControl(new AMap.RangingTool());
        AMap.plugin(['AMap.ToolBar'], function() {
            map.addControl(new AMap.ToolBar());
        });
    </script>
</body>
</html>

在这个示例中，请将path/to/your/替换为您本地文件的实际路径。您需要确保所有必要的JS文件都已经下载并且放置在正确的位置。这样，即使在没有网络的环境下，高德地图的JS API也可以加载并使用您的插件。

- 阅读更多 -

nginx 与 PHP 通信和交互

System

2024-08-06

所有,php

在Nginx与PHP之间通信和交互通常涉及配置Nginx以代理PHP请求到PHP-FPM（PHP FastCGI Process Manager）。以下是一个基本的配置示例：

安装Nginx和PHP-FPM。
配置Nginx以处理PHP文件请求。




server {
    listen 80;
    server_name example.com;
    root /var/www/html;
 
    index index.php index.html index.htm;
    error_log  /var/log/nginx/error.log;
    access_log /var/log/nginx/access.log;
 
    location / {
        try_files $uri $uri/ =404;
    }
 
    location ~ \.php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_pass unix:/var/run/php/php7.4-fpm.sock; # 确保路径与PHP-FPM版本和配置相匹配
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    }
}

在这个配置中，当Nginx收到一个以.php结尾的请求时，它会将请求传递给在fastcgi_pass指令中定义的PHP-FPM的socket。fastcgi_param指令设置了传递给PHP-FPM的环境变量，fastcgi_params文件包含了其他必要的参数。

确保Nginx用户有权限读取网站目录和文件，并且PHP-FPM已经启动，以便处理Nginx转发的PHP请求。

- 阅读更多 -