h5调用摄像头实现拍照功能
H5调用摄像头实现拍照功能需求：调用摄像头进行拍照
实现过程
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140<template> <view class="publish"> <video></video> <canvas class="canvas"></canvas> <view ...
learn_mysql
MySQLSQLDDL简介：DDL（Data Definition Language）数据定义语句。这些语句定义了不同的数据段、数据库、表、列、索引、约束等数据库对象。常用的语句关键字主要有CREATGE、DROP、ALTER等。是对数据库内部对象进行创建、删除、修改等操作的语言。
DDL - 数据库操作查询查询所有数据库
SHOW DATABASES;
查询当前数据库
SELECT DATABASE();
创建CREATE DATABASE [IF NOT EXISTS] 数据库名 [DEFAULT CHARSET 字符集] [COLLATE 排序规则];
删除DROP DATABASE [IF EXISTS] 数据库名;
使用USE 数据库名;
DDL - 表操作 - 查询查询当前数据库所有表
SHOW TABLES;
查询表结构
DESC 表名;
查询指定表的建表语句
SHOW CREATE TABLE 表名;
DDL - 表操作 - 创建1234567CREATE TABLE 表名( 字段1 字段1类型 [COMMENT 字段注释], 字段2 字段2类型 [COMMENT ...
原生Js实现深拷贝
原生 Js 实现深拷贝12345678910111213141516function deepClone(param = {}) { // 传入的参数不是对象和数组，或者是null，就直接返回 if (typeof param !== "object" || param === null) return param; // 初始化返回结果 let result = Array.isArray(param) ? [] : {}; for (key in param) { // 判断自身属性中是否存在该属性 if (obj.hasOwnProperty(key)) { // 递归调用 result[key] = deepClone(param[key]); } } return result;}
将svg文件加载为vue组件
将 svg 文件加载为 vue 组件vite-svg-loader 是一个 vite2.x 社区插件,只支持 vue3,用于将 svg 文件转换成 vue 组件进行使用
基本使用
安装插件
npm install vite-svg-loader -D
在 vite.config.js 里配置插件
12345import svgLoader from "vite-svg-loader";export default defineConfig({ plugins: [vue(), svgLoader()],});
准备 svg 文件进行引入 svg
1import avatar from "@/assets/img/avatar.svg?component";
和使用组件一样使用 svg
123<template> <avatar /></template>
使用vue3的Teleport组件实现bilibili视频穿梭功能
使用 vue3 的 Teleport 组件实现 bilibili 视频穿梭功能效果演示
安装工具西瓜视频播放器
npm install xgplayer
网址 https://v2.h5player.bytedance.com/
vueUse
VueUse 是一组基于 Composition API 的实用函数
npm i @vueuse/core
案例代码1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465<template> <!-- 小视频的播放窗口 --> <div class="player-small"></div> <!-- 被监听出入视口的站位元素 --> <div class="video-container" ref="videoContainerRef&q ...
css实现漂亮的弧形
CSS 实现漂亮的弧形HTMl 如下:
1<div class="d1"></div>
CSS 如下：
1234.d1{ width: 100%; height: 100px; position: relative; overflow: hidden; }.d1::after{ content: ""; width: 140%; height: 100px; position:absolute; left:-20%; top: 0; background-color: rgb(44, 111, 199); z-index: -1; border-radius: 00 50% 50%; }
实现效果如下：
Typescript笔记
TypeScript 学习一、TypeScript 介绍什么是 TypeScript？
TypeScript 简称 TS
TS 和 JS 之间的关系其实就是 Less/Sass 和 CSS 之间的关系
就像 Less/Sass 是对 CSS 进行扩展一样, TS 也是对 JS 进行扩展
就像 Less/Sass 最终会转换成 CSS 一样, 我们编写好的 TS 代码最终也会换成 JS
TypeScript 是 JavaScript 的超集，因为它扩展了 JavaScript，有 JavaScript 没有的东西。
硬要以父子类关系来说的话，TypeScript 是 JavaScript 子类，继承的基础上去扩展。
为什么需要 TypeScript？
简单来说就是因为 JavaScript 是弱类型, 很多错误只有在运行时才会被发现
而 TypeScript 提供了一套静态检测机制, 可以帮助我们在编译时就发现错误
TypeScript 的特点？
支持最新的 JavaScript 新特特性
支持代码静态检查
支持诸如 C,C++,Java,Go 等后端语 ...
web前端面试题
面试题一.JavaScript1. foreach 如何跳出循环?例子
123456789101112try { const arr = [1, 2, 3, 4, 5, 6]; arr.forEach((item) => { if (item === 4) { throw new Error("error"); } console.log(item); });} catch (e) { if (e.message != "error") throw e;}console.log(100); // 结果 1,2,3,100
2.箭头函数的 this 指向？为什么箭头函数没有自己的 this？箭头函数的 this 指向是上级作用域的 this，如果上级也没有 this，会继续往上找。
箭头函数没有 prototype(原型)，所有箭头函数本身没有 this。