标签 elasticsearch 下的文章

利用HTML5 MediaDevices API调用手机摄像头并结合JavaScript库实现人脸识别

2024-08-22




<!DOCTYPE html>
<html>
<head>
    <title>人脸识别示例</title>
    <script src="path/to/clmtrackr.js"></script>
    <script src="path/to/clm.js"></script>
    <style>
        #videoElement {
            width: 320px;
            height: 240px;
        }
        #canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <video id="videoElement" autoplay></video>
    <canvas id="canvas"></canvas>
    <script>
        let video = document.getElementById('videoElement');
        let canvas = document.getElementById('canvas');
        let context = canvas.getContext('2d');
        let tracker = new clm.tracker();
        let ctrack = new clm.tracker({ useWebWorker: true });
        ctrack.init();
 
        if (navigator.mediaDevices.getUserMedia) {
            navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } })
                .then(function(stream) {
                    video.srcObject = stream;
                })
                .catch(function(err) {
                    console.log("错误： " + err);
                });
        }
 
        setInterval(function() {
            context.clearRect(0, 0, canvas.width, canvas.height);
            if (ctrack.getState() === 3) {
                ctrack.draw(context);
                let positions = ctrack.getCurrentPosition();
                console.log(positions);
            }
        }, 10);
    </script>
</body>
</html>

这个示例代码展示了如何使用HTML5 MediaDevices API获取视频流，并将其显示在<video>元素中。同时，它使用了setInterval方法和clmtrackr库来实时检测视频中的脸部并绘制关键点，实现了人脸识别的功能。这个示例简洁明了，并且注重于教学如何将现代的API和库结合使用。

- 阅读更多 -

jQuery UI 实例 - 缩放（Resizable）

System

2024-08-22

所有,jquery




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 缩放(Resizable)实例</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
#resizable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
    $("#resizable").resizable();
});
</script>
</head>
<body>
 
<div id="resizable">可调整大小的区域</div>
 
</body>
</html>

这段代码展示了如何使用jQuery UI的resizable方法来使一个元素可调整大小。在页面加载完成后，#resizable元素就可以通过拖拽其右下角来改变大小。

System

2024-08-22

所有,jquery

这是一个基于SpringBoot框架的图书管理系统，后端使用MyBatisPlus操作数据库，前端使用Vue和Jquery，并通过Axios进行数据交互。

后端代码示例（只列出部分关键代码）：




@RestController
@RequestMapping("/books")
public class BookController {
 
    @Autowired
    private BookService bookService;
 
    @GetMapping
    public ResponseEntity<List<Book>> getAllBooks() {
        List<Book> books = bookService.list();
        return ResponseEntity.ok(books);
    }
 
    @GetMapping("/{id}")
    public ResponseEntity<Book> getBookById(@PathVariable("id") Long id) {
        Book book = bookService.getById(id);
        return ResponseEntity.ok(book);
    }
 
    @PostMapping
    public ResponseEntity<Void> createBook(@RequestBody Book book) {
        bookService.save(book);
        return ResponseEntity.status(HttpStatus.CREATED).build();
    }
 
    @PutMapping("/{id}")
    public ResponseEntity<Void> updateBook(@PathVariable("id") Long id, @RequestBody Book book) {
        Book bookToUpdate = new Book();
        BeanUtils.copyProperties(book, bookToUpdate);
        bookToUpdate.setId(id);
        bookService.updateById(bookToUpdate);
        return ResponseEntity.ok().build();
    }
 
    @DeleteMapping("/{id}")
    public ResponseEntity<Void> deleteBook(@PathVariable("id") Long id) {
        bookService.removeById(id);
        return ResponseEntity.noContent().build();
    }
}

前端代码示例（只列出部分关键代码）：




<div id="app">
  <table>
    <tr v-for="book in books" :key="book.id">
      <td>{{ book.name }}</td>
      <td>{{ book.author }}</td>
      <!-- 省略其他内容 -->
    </tr>
  </table>
</div>
 
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
var app = new Vue({
  el: '#app',
  data: {
    books: []
  },
  created() {
    this.fetchBooks();
  },
  methods: {
    fetchBooks() {
      axios.get('/books')
        .then(response => {
          this.books = response.data;
        })
        .catch(error => {
          console.error('There was an error!', error);
        });
    }
    // 省略其他方法
  }
});
</script>

以上代码展示了如何使用SpringBoot和MyBatisPlus创建一个简单的图书管理系统后端接口，以及如何使用Vue和Axios从后端获取数据并展示在前端页面上。

System

2024-08-22

所有,typescript

为了创建一个使用了所提及技术的Vue 3项目，你可以使用Vite官方提供的Vue CLI插件，通过如下步骤快速搭建一个基础项目：

确保你已经安装了Node.js和npm。
安装或升级到最新版本的Vue CLI：




npm install -g @vue/cli

创建一个新的Vue 3项目，并使用Element Plus、Pinia、Vue Router和Tailwind CSS：




vue create my-vite-app
cd my-vite-app

在创建过程中，选择需要的配置，确保选中了Vue 3、Vite、TypeScript、Router、Vuex（选择Pinia）、CSS Pre-processors（选择Tailwind CSS）和Linter / Formatter。
安装Element Plus和Axios：




npm install element-plus pinia axios

配置Tailwind CSS。你可以使用官方推荐的Tailwind CSS插件，例如postcss-import、tailwindcss和autoprefixer。
在vite.config.ts中配置Tailwind CSS：




// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
 
export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "${path.resolve(__dirname, 'src/styles/tailwind.scss')}";`,
      },
    },
  },
})

在src/styles/tailwind.scss中引入Tailwind CSS：




// src/styles/tailwind.scss
@tailwind base;
@tailwind components;
@tailwind utilities;

在main.ts中配置Element Plus和Pinia：




// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import { createPinia } from 'pinia'
 
const app = createApp(App)
 
app.use(ElementPlus)
app.use(createPinia())
 
app.mount('#app')

在src/router/index.ts中配置Vue Router：




// src/router/index.ts
import { createRouter, createWebHistory } from 'vue-router'
 
const routes = [
  // 定义路由
]
 
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
})
 
export default router

在src/store/index.ts中配置Pinia：




// src/store/index.ts
import { defineStore } from 'pinia'
 
export const useMainStore = defineStore({
  id: 'main',
  state: () => {
    return { counter: 0 }
  },
  actions: {
    increment() {
      this.counter++
    },
  },
})

在src/main.js中使用Vue Router和Pinia：




// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { useMainStore } from './store'
 
const app = createApp(App)
 
app.use(rou

System

2024-08-22

所有,typescript




// 假设我们有一个React组件库，并且我们想要创建一个新的按钮组件
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
 
// 使用styled-components来定义按钮样式
const StyledButton = styled.button`
  background-color: ${({ primary }) => (primary ? '#007bff' : '#00ff00')};
  color: ${({ primary }) => (primary ? '#fff' : '#000')};
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
 
  &:hover {
    background-color: ${({ primary }) => (primary ? '#0056b3' : '#008000')};
  }
`;
 
// 按钮组件
const Button = ({ primary, onClick, label }) => {
  return <StyledButton primary={primary} onClick={onClick}>{label}</StyledButton>;
};
 
Button.propTypes = {
  primary: PropTypes.bool,
  onClick: PropTypes.func,
  label: PropTypes.string
};
 
Button.defaultProps = {
  primary: false,
  onClick: () => {},
  label: 'Click me'
};
 
export default Button;

这个代码实例展示了如何创建一个React组件，使用了styled-components来定义组件样式，并且使用prop-types来确保属性类型的正确性。这个组件可以被其他React应用导入并使用，提高了用户界面的一致性和可维护性。

- 阅读更多 -

Typescript 中根据某个字段判断其他字段是否必传

System

2024-08-22

所有,typescript

在TypeScript中，你可以使用条件类型来基于一个字段决定另一个字段是否必传。下面是一个简单的例子，其中我们定义了一个RequiredIf类型，它会检查Condition字段是否为true，如果是，则DependentField就是必需的。




type RequiredIf<Condition extends boolean, DependentField> = Condition extends true ? DependentField : {};
 
interface MyForm {
  hasAddress: boolean;
  address: string;
}
 
// 如果 hasAddress 是 true，则 address 是必需的
type MyFormWithRequiredAddress = RequiredIf<true, { address: string }>;
 
// 实际使用时，你可以将 MyFormWithRequiredAddress 作为 MyForm 的子类型
const formData: MyForm & MyFormWithRequiredAddress = {
  hasAddress: true,
  address: "123 Main St", // 这里的 address 是必需的，因为 hasAddress 是 true
};

在这个例子中，MyFormWithRequiredAddress 类型会根据第一个参数 true 是否扩展为 DependentField 类型来决定 address 字段是否是必需的。如果 hasAddress 是 false 或者其它条件不满足，address 就不是必需的。

- 阅读更多 -

【TypeScript】介绍和环境搭建的详细步骤

System

2024-08-22

所有,typescript

TypeScript 是 JavaScript 的一个超集，并且添加了一些静态类型的特性。它可以编译成纯 JavaScript，以供现代的网络浏览器或者任何环境下运行。

安装TypeScript

首先，你需要在你的电脑上安装TypeScript。你可以通过npm（Node.js的包管理器）来安装它。




npm install -g typescript

创建TypeScript文件

创建一个.ts扩展名的文件，例如hello.ts。




function greet(name: string) {
    return `Hello, ${name}!`;
}
 
console.log(greet('World'));

编译TypeScript

要将TypeScript编译成JavaScript，你可以使用tsc命令。




tsc hello.ts

这将生成一个名为hello.js的文件，包含相应的JavaScript代码。

运行JavaScript代码

现在你可以运行生成的JavaScript文件。




node hello.js

你应该看到输出Hello, World!。

使用tsconfig.json

tsconfig.json文件用于配置TypeScript项目。它应该位于项目的根目录中。




{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "outDir": "./dist",
        "sourceMap": true
    },
    "include": [
        "./src/**/*"
    ]
}

使用这个配置文件，你可以一次性编译整个项目。

tsc

这将编译src文件夹中的所有TypeScript文件，并将生成的JavaScript文件放在dist文件夹中。

- 阅读更多 -

记录--Uniapp + TypeScript 配置文档

System

2024-08-22

所有,typescript




{
  "name": "uni-app-typescript-example",
  "version": "1.0.0",
  "scripts": {
    "dev": "cross-env UNI_PLATFORM=h5 vue-cli-service uni-build --watch",
    "build": "cross-env UNI_PLATFORM=h5 vue-cli-service uni-build"
  },
  "dependencies": {
    "vue": "^2.6.11",
    "uni-simple-router": "^2.4.3",
    "uni-simple-store": "^2.4.3",
    "@dcloudio/types": "^2.0.5",
    "@types/node": "^14.14.25",
    "typescript": "^4.0.5"
  },
  "devDependencies": {
    "@vue/cli-service": "^4.5.15",
    "@vue/cli-plugin-typescript": "^4.5.15",
    "cross-env": "^7.0.3"
  }
}

这个配置文件定义了一个使用uni-app和TypeScript的项目。它指定了项目的名称和版本，并定义了用于开发和构建的脚本。同时，它列出了所需的npm依赖项，包括uni-app的核心库、uni-simple-router和uni-simple-store，以及TypeScript的类型定义。这为开发者提供了一个基本的配置框架，可以根据具体需求进行扩展和定制。

- 阅读更多 -

TypeScript -- interface 接口

System

2024-08-22

所有,typescript

在TypeScript中，接口（Interface）是一种结构化的数据类型系统，它可以用来定义对象的形状（即属性和方法）。接口是TypeScript的核心部分，它能够确保对象按预定的方式工作。

以下是一个简单的TypeScript接口的示例：




interface Person {
    name: string;
    age: number;
}
 
function introduce(person: Person) {
    console.log(`My name is ${person.name} and I am ${person.age} years old.`);
}
 
const person1: Person = {
    name: 'Alice',
    age: 25
};
 
introduce(person1);

在这个例子中，我们定义了一个Person接口，它有两个属性：name和age。然后我们定义了一个introduce函数，它接受一个Person类型的参数。最后，我们创建了一个person1对象，它符合Person接口的形状，并调用了introduce函数。

接口还可以包含可选属性、只读属性、方法、类等，以及它们的混合体。例如，你可以这样定义一个带有可选属性和方法的接口：




interface Person {
    name: string;
    age: number;
    email?: string;
    introduce(): void;
}
 
const person2: Person = {
    name: 'Bob',
    age: 30,
    introduce() {
        console.log(`Hello, my name is ${this.name}.`);
    }
};
 
person2.introduce();

在这个例子中，email是一个可选属性，introduce方法是必须由实现接口的类或对象提供的。

- 阅读更多 -

BASE64算法基于Typescript实现

System

2024-08-22

所有,typescript

以下是一个使用TypeScript实现的BASE64编码和解码的简单例子：




// 定义一个BASE64编码的映射表
const keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
 
// BASE64编码函数
function encode(input: string): string {
  let output = "";
  let chr1, chr2, chr3, enc1, enc2, enc3, enc4;
  let i = 0;
 
  input = utf8_encode(input);
 
  while (i < input.length) {
    chr1 = input.charCodeAt(i++);
    chr2 = input.charCodeAt(i++);
    chr3 = input.charCodeAt(i++);
 
    enc1 = chr1 >> 2;
    enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
    enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
    enc4 = chr3 & 63;
 
    if (isNaN(chr2)) {
      enc3 = enc4 = 64;
    } else if (isNaN(chr3)) {
      enc4 = 64;
    }
 
    output +=
      keyStr.charAt(enc1) +
      keyStr.charAt(enc2) +
      keyStr.charAt(enc3) +
      keyStr.charAt(enc4);
  }
 
  return output;
}
 
// BASE64解码函数
function decode(input: string): string {
  let output = "";
  let chr1, chr2, chr3;
  let enc1, enc2, enc3, enc4;
  let i = 0;
 
  // 移除所有非BASE64字符
  input = input.replace(/[^A-Za-z0-9+\/=]/g, "");
 
  while (i < input.length) {
    enc1 = keyStr.indexOf(input.charAt(i++));
    enc2 = keyStr.indexOf(input.charAt(i++));
    enc3 = keyStr.indexOf(input.charAt(i++));
    enc4 = keyStr.indexOf(input.charAt(i++));
 
    chr1 = (enc1 << 2) | (enc2 >> 4);
    chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
    chr3 = ((enc3 & 3) << 6) | enc4;
 
    output += String.fromCharCode(chr1);
 
    if (enc3 !== 64) {
      output += String.fromCharCode(chr2);
    }
    if (enc4 !== 64) {
      output += String.fromCharCode(chr3);
    }
  }
 
  output = utf8_decode(output);
 
  return output;
}
 
// UTF-8编码函数（用于内部处理）
function utf8_encode(string: string): string {
  string = string.replace(/\r\n/g, "\n");
  let utfText = "";
 
  for (let n = 0; n < string.length; n++) {
    const c = string.charCodeAt(n);
 
    if (c < 128) {
      utfText += String.fromCharCode(c);
    } else if (c > 127 && c < 2048) {
      utfText += String.fromCharCode((c >> 6) | 192);
      utfText += String.fromCharCode((c & 63) | 128);
    } else {
      utfText += String.fromCharCode((c >> 12) | 224);
      utfText += String.fromCharCode(((c >> 6) & 63) | 128);
      utfText += String.fromCharCode((c & 63) | 128);
    }
  }

- 阅读更多 -