标签 Javascript 下的文章

2024-08-17

要在web端实现基于face-api.js和facenet的人脸识别，你需要遵循以下步骤：

引入face-api.js库。
加载模型。
访问用户摄像头。
实时检测视频中的脸部。
将检测到的脸部与数据库中的面孔进行匹配。

以下是实现这些步骤的示例代码：




<!DOCTYPE html>
<html>
<head>
    <title>Face Recognition</title>
    <script src="https://cdn.jsdelivr.net/npm/face-api.js/dist/face-api.min.js"></script>
</head>
<body>
    <video id="videoElement" width="720" height="560" autoplay muted></video>
    <script>
        const video = document.getElementById('videoElement');
 
        Promise.all([
            faceapi.nets.tinyFaceDetector.loadFromUri('/models'),
            faceapi.nets.faceLandmark68Net.loadFromUri('/models'),
            faceapi.nets.faceRecognitionNet.loadFromUri('/models'),
            faceapi.loadLabeledImages('/labeled_images')
        ]).then(startVideo);
 
        function startVideo() {
            navigator.mediaDevices.getUserMedia({ video: {} })
                .then((stream) => {
                    video.srcObject = stream;
                }).catch(err => console.error(err));
        }
 
        setInterval(async () => {
            const displaySize = { width: video.width, height: video.height };
            faceapi.resizeCanvas(displaySize);
            const resized = true;
 
            const detections = await faceapi.detectAllFaces(video, new faceapi.TinyFaceDetectorOptions()).withFaceLandmarks().withFaceDescriptors();
 
            const faceImages = detections.map(detection => {
                const img = new Image(detection.width, detection.height);
                img.src = detection.getImageData(resized ? displaySize : new faceapi.Point(detection.x, detection.y), resized ? displaySize : new faceapi.Rect(0, 0, detection.width, detection.height));
                return img;
            });
 
            const labeledFaceImages = await Promise.all(faceImages.map(async (img, i) => {
                const descriptors = await faceapi.computeFaceDescriptor(img);
                let label = 'Unknown';
                const bestMatch = await faceapi.findBestMatch(descriptors, ['Class1', 'Class2', ...]);
                if (bestMatch._

- 阅读更多 -

前后端交互：axios 和 json；springboot 和 vue

System

2024-08-17

所有,vue.js

在Spring Boot和Vue之间进行前后端交互时，通常使用axios在Vue中发送HTTP请求，并处理JSON格式的数据。以下是一个简单的例子：

后端（Spring Boot）:




import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.HashMap;
import java.util.Map;
 
@RestController
public class ExampleController {
 
    @GetMapping("/data")
    public Map<String, String> getData() {
        Map<String, String> data = new HashMap<>();
        data.put("key", "value");
        return data;
    }
}

前端（Vue.js）:




<template>
  <div>
    {{ data }}
  </div>
</template>
 
<script>
import axios from 'axios';
 
export default {
  data() {
    return {
      data: null
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      axios.get('/data')
        .then(response => {
          this.data = response.data;
        })
        .catch(error => {
          console.error('There was an error!', error);
        });
    }
  }
};
</script>

在这个例子中，Spring Boot后端提供了一个简单的API /data，返回JSON格式的数据。Vue前端使用axios来发送HTTP GET请求，并在成功获取响应后将数据存储在组件的data属性中。

确保在实际部署时，前后端的交互需要遵循安全最佳实践，例如使用HTTPS，避免XSS攻击，以及适当的认证和授权机制。

- 阅读更多 -

Vue.js项目中全面解析定义全局变量的常用方法与技巧

System

2024-08-17

所有,vue.js




// 方法1: 使用Vue的原型链
Vue.prototype.$myGlobal = 'my value';
 
// 方法2: 使用全局Mixin，为所有Vue实例添加全局变量
Vue.mixin({
  data() {
    return {
      $myGlobal: 'my value'
    };
  },
  created() {
    console.log(this.$myGlobal); // 访问全局变量
  }
});
 
// 方法3: 使用Vuex进行状态管理
import Vue from 'vue';
import Vuex from 'vuex';
 
Vue.use(Vuex);
 
const store = new Vuex.Store({
  state: {
    myGlobal: 'my value'
  },
  mutations: {
    // 可以定义mutations来修改全局变量
  }
});
 
// 在Vue组件中使用
export default {
  computed: {
    myGlobalValue() {
      return this.$store.state.myGlobal;
    }
  },
  methods: {
    updateGlobalValue(newValue) {
      this.$store.commit('updateMyGlobal', newValue);
    }
  }
};

在这个例子中，我们展示了三种在Vue.js项目中定义全局变量的方法。第一种方法简单地通过Vue的原型链定义全局变量，第二种方法使用Vue的mixin特性，在所有Vue实例中注入全局变量，第三种方法使用Vuex进行状态管理，这是在大型应用中管理状态的标准方法。

- 阅读更多 -

【vuejs】vue-router 路由跳转参数传递详解和应用场景及技巧

System

2024-08-17

所有,vue.js

在Vue.js中，使用vue-router时，我们经常需要在路由跳转时传递参数。这里有几种方式来传递参数：

使用query传递参数：适用于非路径参数，类似于GET参数。




// 定义路由
const routes = [
  { path: '/user', component: User }
]
 
// 通过`query`传递参数
this.$router.push({ path: '/user', query: { id: 123 }})
 
// 在User组件中获取参数
this.$route.query.id

使用params传递参数：适用于需要在路径中包含参数的场景。




// 定义路由，`userId`是路径参数
const routes = [
  { path: '/user/:userId', component: User }
]
 
// 通过`params`传递参数
this.$router.push({ name: 'user', params: { userId: 123 }})
 
// 在User组件中获取参数
this.$route.params.userId

注意：当使用params时，如果目标路由的路径中不包含对应参数的占位符（如:userId），则params将不会生效，此时应使用query。

使用name代替path：当路由的路径发生变化，使用名字可以减少因路径改变而需要更改代码的情况。




// 定义路由
const routes = [
  { path: '/user', name: 'user', component: User }
]
 
// 使用路由名字和参数
this.$router.push({ name: 'user', params: { id: 123 }})

使用replace来替换而非添加新的历史记录：




this.$router.replace({ path: '/user', query: { id: 123 }})

编程式导航：结合v-if或v-show来根据条件进行路由跳转。




// 在template中
<button @click="navigateToRegister" v-if="!isLoggedIn">Register</button>
 
// 在script中
methods: {
  navigateToRegister() {
    this.$router.push('/register')
  }
}

使用watch来监听路由参数的变化：




// 在组件中
export default {
  watch: {
    '$route.query.id': {
      immediate: true,
      handler(newId) {
        this.fetchData(newId)
      }
    }
  },
  methods: {
    fetchData(id) {
      // 根据id获取数据
    }
  }
}

以上是使用vue-router进行参数传递的一些基本方法和场景。在实际开发中，可以根据需要灵活运用。

- 阅读更多 -

java/php/node.js/python打车拼车系统【2024年毕设】

System

2024-08-17

所有,nodejs

这是一个打车拼车系统的简化版本示例，主要使用Python语言编写，但是也可以很容易地转换到Java或PHP。




# 假设有一个基本的打车服务类
class BaseTaxiService:
    def __init__(self, name, rate_per_km):
        self.name = name
        self.rate_per_km = rate_per_km
 
    def calculate_fare(self, distance):
        return self.rate_per_km * distance
 
# 创建一个打车服务实例
base_taxi = BaseTaxiService('BaseTaxi', 1.5)
 
# 打印出计算出的费用
print(base_taxi.calculate_fare(10))  # 输出: 15.0
 
# 如果需要拼车服务，可以创建一个拼车服务类
class CarpoolTaxiService(BaseTaxiService):
    def __init__(self, name, rate_per_km, capacity):
        super().__init__(name, rate_per_km)
        self.capacity = capacity
 
    def calculate_fare(self, distance, passengers):
        # 考虑乘客数量的情况下计算费用
        return (super().calculate_fare(distance) * (1 - (passengers / self.capacity)))
 
# 创建一个拼车服务实例
carpool_taxi = CarpoolTaxiService('CarpoolTaxi', 1.2, 4)
 
# 打印出计算出的费用，考虑乘客数为2
print(carpool_taxi.calculate_fare(10, 2))  # 输出: 9.6

这个示例展示了一个简单的打车服务类和一个可以考虑乘客数量的拼车服务类的定义和使用。在实际应用中，你需要完善更多的功能，例如用户管理、订单管理、地图定位等。

- 阅读更多 -

MySQL对JSON数据内对象进行更新

System

2024-08-17

所有,mysql

在MySQL中，您可以使用JSON_SET、JSON_REPLACE或JSON_INSERT函数来更新JSON数据中的对象。这些函数允许您指定键和值来更新JSON文档。

以下是一个简单的例子，展示如何使用JSON_SET来更新JSON对象中的一个属性：

假设我们有一个名为users的表，它有一个类型为JSON的列user_data，并且我们想要更新用户ID为1的用户的名字。




UPDATE users
SET user_data = JSON_SET(user_data, '$.name', '新名字')
WHERE JSON_EXTRACT(user_data, '$.id') = 1;

在这个例子中，$.name是JSON路径表达式，用于指定要更新的键（在这个例子中是name）。'新名字'是我们想要设置的新值。JSON_EXTRACT函数用于从user_data中提取id字段，以便找到需要更新的记录。

如果您只想替换存在的键，而不是创建新键，可以使用JSON_REPLACE：




UPDATE users
SET user_data = JSON_REPLACE(user_data, '$.name', '新名字')
WHERE JSON_EXTRACT(user_data, '$.id') = 1;

这两个函数都支持多个键和值的更新，您可以一次性更新多个属性。

请注意，具体的JSON路径表达式和更新逻辑可能会根据您的数据结构和需求而有所不同。

- 阅读更多 -

javascript二维数组(10)ajax的使用

System

2024-08-17

所有,ajax

在JavaScript中，可以使用AJAX来从服务器获取数据，并将这些数据存储到一个二维数组中。以下是一个简单的例子，展示了如何使用AJAX和二维数组：




// 创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();
 
// 配置AJAX请求
xhr.open('GET', 'your-server-endpoint', true);
 
// 设置请求完成的处理函数
xhr.onload = function() {
  if (this.status == 200) {
    // 请求成功，获取服务器返回的数据
    var data = JSON.parse(this.response);
 
    // 创建一个二维数组来存储数据
    var twoDimensionalArray = [];
 
    // 遍历数据，将其存入二维数组
    data.forEach(function(item) {
      var innerArray = [];
      innerArray.push(item.property1);
      innerArray.push(item.property2);
      // 添加更多属性，如果需要的话
      twoDimensionalArray.push(innerArray);
    });
 
    // 使用二维数组...
    console.log(twoDimensionalArray);
  }
};
 
// 发送AJAX请求
xhr.send();

在这个例子中，我们首先创建了一个新的XMLHttpRequest对象，然后配置了一个GET请求，指定了要请求的服务器端点。我们设置了一个onload事件处理函数，它会在请求完成时被调用。在请求成功完成后，我们解析了服务器返回的JSON数据，并创建了一个二维数组。我们遍历原始数据，将每个项目的特定属性推入内部数组，然后将内部数组推入二维数组。最后，我们在控制台中打印出这个二维数组。

请注意，你需要根据你的服务器返回的数据格式和需求来调整这段代码。上面的代码假设服务器返回的是一个对象数组，每个对象都有property1和property2属性。

- 阅读更多 -

相当流畅的js拖拽排序实现

System

2024-08-17

所有,javascript

以下是一个使用JavaScript实现的相对较流畅的拖拽排序功能的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drag and Drop Sort</title>
<style>
    #sortable {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }
    #sortable li {
        margin: 5px;
        padding: 5px;
        border: 1px solid #ddd;
        background-color: #f9f9f9;
        cursor: move;
    }
</style>
</head>
<body>
 
<ul id="sortable">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>
 
<script>
function dragStart(event) {
    event.dataTransfer.setData("text/plain", event.target.id);
}
 
function allowDrop(event) {
    event.preventDefault();
}
 
function dragOver(event) {
    event.preventDefault(); // Prevent default to allow drop
}
 
function drop(event) {
    event.preventDefault();
    const data = event.dataTransfer.getData("text");
    const draggedElement = document.getElementById(data);
    const dropZone = event.target;
    // Move dragged element to the selected drop zone
    dropZone.appendChild(draggedElement);
    const draggedItems = document.querySelectorAll('.draggableItem');
    const dropZoneItems = [...dropZone.parentNode.children].filter(el => el !== dropZone);
    const allItems = [...draggedItems, ...dropZoneItems];
    allItems.forEach((el, i) => el.setAttribute('data-order', i));
}
 
const draggableItems = document.querySelectorAll('.draggableItem');
draggableItems.forEach(item => {
    item.draggable = true;
    item.addEventListener('dragstart', dragStart);
    item.setAttribute('data-order', draggableItems.indexOf(item));
});
 
const dropZones = document.querySelectorAll('.dropZone');
dropZones.forEach(zone => {
    zone.addEventListener('dragover', dragOver);
    zone.addEventListener('drop', drop);
});
</script>
 
</body>
</html>

这段代码实现了一个简单的拖拽排序功能。用户可以点击并拖动列表中的项目来重新排列它们。代码使用了HTML、CSS和JavaScript，并且尽可能保持简洁。通过设置元素的draggable属性为true，并实现了一系列的拖拽事件处理函数，可以实现拖拽效果。这个实现允许用户将列表项放置到列表中的任何位置，并在放置时更新它们的顺序。

- 阅读更多 -

【typescript】Typescript tsconfig.json全解析

System

2024-08-17

所有,typescript

tsconfig.json 是 TypeScript 项目的配置文件，它用于指导 TypeScript 编译器如何编译项目中的文件。以下是一个常见的 tsconfig.json 配置文件的例子，以及它的各个部分的解释：




{
  "compilerOptions": {
    "target": "es5",                                  // 指定编译目标为 ECMAScript 5 或者其他版本
    "module": "commonjs",                             // 指定生成的模块系统
    "strict": true,                                   // 启用所有严格类型检查选项
    "esModuleInterop": true,                          // 启用 ES6 导入样式的 TypeScript 代码生成
    "skipLibCheck": true,                             // 跳过对声明文件的类型检查
    "forceConsistentCasingInFileNames": true,         // 确保文件名大小写一致
    "outDir": "./dist",                               // 指定输出目录
    "moduleResolution": "node",                       // 模块解析策略
    "baseUrl": ".",                                   // 解析非相对模块名的基路径
    "paths": {                                        // 路径映射
      "@/*": ["src/*"]                                // 例如，将 @/ 映射到 src/ 目录
    }
  },
  "include": [                                        // 需要包含进编译的文件或目录
    "src/**/*.ts"
  ],
  "exclude": [                                        // 需要排除在外的文件或目录
    "node_modules",
    "dist",
    "**/*.spec.ts"
  ]
}

compilerOptions: 编译器选项，包含多个子选项，如目标版本、模块系统、类型检查等。
target: 指定 ECMAScript 目标版本，如 ES5、ES2015 等。
module: 指定模块系统，如 CommonJS、AMD、ES2015、UMD 等。
strict: 启用所有严格的类型检查选项。
esModuleInterop: 允许通过 ES6 import 样式导入非 ES6 模块。
skipLibCheck: 跳过对第三方库声明文件的类型检查。
forceConsistentCasingInFileNames: 确保文件名大小写一致。
outDir: 指定编译后文件的输出目录。
moduleResolution: 模块解析策略，如 Node 或 Classic。
baseUrl: 解析非相对模块名的基路径。
paths: 路径映射，用于模块名的别名。
include: 需要编译的文件或目录的路径模式列表。
exclude: 需要排除的文件或目录的路径模式列表。

- 阅读更多 -

深入浅出Go语言的JSON处理：`encoding/json`库全攻略

System

2024-08-17

所有,golang




package main
 
import (
    "encoding/json"
    "fmt"
    "log"
)
 
// 定义一个结构体，用于序列化和反序列化
type Person struct {
    Name string `json:"name"`
    Age  int    `json:"age"`
}
 
func main() {
    // 创建一个Person实例
    person := Person{Name: "Alice", Age: 30}
 
    // 序列化：结构体转换为JSON字符串
    jsonString, err := json.Marshal(person)
    if err != nil {
        log.Fatalf("JSON marshaling failed: %s", err)
    }
    fmt.Printf("JSON representation: %s\n", jsonString)
 
    // 反序列化：JSON字符串转换为结构体
    var newPerson Person
    err = json.Unmarshal(jsonString, &newPerson)
    if err != nil {
        log.Fatalf("JSON unmarshaling failed: %s", err)
    }
    fmt.Printf("Back to Go: %+v\n", newPerson)
}

这段代码首先定义了一个Person结构体，并在结构体字段上使用json标签指定了JSON中对应的字段名。然后创建了一个Person实例，并展示了如何使用json.Marshal函数将Go的结构体转换为JSON字符串，以及如何使用json.Unmarshal函数将JSON字符串转换回Go的结构体。这个过程展示了JSON的序列化和反序列化，是学习Go语言中处理JSON的基本步骤。

- 阅读更多 -