前端
风风草
这个作者很懒,什么都没留下…
展开
-
如何用手机访问电脑本地的localhost
手机访问电脑本地的localhost原创 2022-08-12 10:25:49 · 7038 阅读 · 1 评论 -
【动态生成带水印的图片】利用canvas.toDataURL 将图片转为base64
canvas.toDataURL(type, encoderOptions);1、type【可选】 图片格式,默认为 image/png,可选格式:“image/webp”,“image/jpeg”,“image/png”。其中png图片最大,jpeg次之,webp最小,可以用于压缩图片2、encoderOptions【可选】在指定图片格式为 image/jpeg 或 image/webp的情况下,可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围,将会使用默认值 0.92。可以通过数值大.原创 2021-11-16 14:41:37 · 608 阅读 · 0 评论 -
web存储的方式
原创 2021-11-02 15:13:08 · 278 阅读 · 0 评论 -
face-api.js、webcamjs实现人脸比对
import React, { Component } from 'react';import * as faceapi from 'face-api.js';import * as webcamjs from 'webcamjs';import { Button } from 'antd';class FaceCompare extends Component { // 初始化摄像机 _initCamera = async () => { await faceapi.nets原创 2021-10-28 14:10:52 · 1454 阅读 · 1 评论 -
face-api.js、webcamjs循环拍照识别人脸数量
import React, { Component } from 'react';import * as faceapi from 'face-api.js';import * as webcamjs from 'webcamjs';import { Button } from 'antd';class FaceRecognition extends Component { // 初始化摄像机 _initCamera = async () => { await faceapi.原创 2021-10-28 11:38:47 · 475 阅读 · 0 评论 -
移动端“锚点”使用
document.getElementById(“id的值”).scrollIntoView()若不起效:加上延迟 setTimeout(() => { document.getElementById(“id的值”).scrollIntoView(); }, 100);原创 2021-08-09 09:38:02 · 829 阅读 · 0 评论 -
【react 标准-科学计算器】计算器组件源码
Calculator.jsximport React, { Component } from 'react';import './Calculator.less';// 计算器class Calculator extends Component { state = { mode: false, // 标准版 current: '', // 回显输入的内容或计算结果 }; modeEvent = (flag) => { this.setState({.原创 2021-07-30 15:37:33 · 446 阅读 · 0 评论 -
css自定义滚动条样式
// 谷歌浏览器下滚动条样式 :global ::-webkit-scrollbar { width: 5px; } :global ::-webkit-scrollbar-track { box-shadow: inset000pxrgba(240, 240, 240, 0.5); border-radius: 10px; background: rgba(240, 240, 240, 0.5); } :global ::-webkit-scroll..原创 2021-07-27 09:42:23 · 181 阅读 · 0 评论 -
npm ERR! cb() never called! npm ERR! This is an error with npm itself. Please report this error at:
网上有npm cache clean -f的解决办法最直接的方法,使用yarn安装yarn install原创 2021-07-22 17:07:28 · 739 阅读 · 0 评论 -
umi中添加title
1、引入Helmetimport { Helmet } from 'umi';2、在对应页面组件中插入如下<div> <Helmet> <title>考试</title> </Helmet> .......内容内容............ </div>原创 2021-07-21 17:34:24 · 1776 阅读 · 0 评论 -
解决fixed导致的鼠标弹起问题
// 示例 @media (max-height: 667px) {//自己控制高度 .bottom {//被fixed的元素 display: none; } .middle { height: calc(100% - 152px); } }原创 2021-07-21 15:50:42 · 110 阅读 · 0 评论 -
vue项目中eslint报“Missing space before function parentheses”的问题解决
1、问题原因:使用eslint时,严格模式下,报错Missing space before function parentheses(函数括号前缺少空格)的问题2、问题解决在项目根目录下找到.eslintrc.js文件,为rules 属性新增配置:"space-before-function-paren": 0...原创 2020-06-15 21:38:04 · 5276 阅读 · 0 评论 -
【码云/github】 提交代码时密码输错不能上传的解决方法Incorrect username or password ( access token )
以码云为例说明:报如下错误Incorrect username or password ( access token )解决方法:1、进入控制面板-> 用户帐号2、继续进入 凭证管理器 ->管理Windows凭证3、鼠标向下滚动,找到普通凭证 -> git:https://gitee.com注意:github的话,找到git://https://github.com4、展开此条信息,点击下方的编辑或删除编辑:可以直接修改输入错误的邮箱与密码删除:删除掉错误的邮原创 2020-06-14 19:53:17 · 1403 阅读 · 0 评论 -
【解决】WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB)
运行vue项目 npm run build 时,终端webpack报错:解决方案:在webpack.config.js配置文件中,添加配置项如下:module.exports = { //该选项可以控制 webpack 如何通知「资源(asset)和入口起点超过指定文件限制」 performance: { hints: "warning", // 枚举 hints: "error", // 性能提示中抛出错误 hints: false, // 关闭性能提示原创 2020-06-13 17:35:43 · 8511 阅读 · 0 评论 -
Typora书写.md文件时自动生成编号
前言:Typora的实现基于浏览器,各个界面都是HTML语言渲染出来的,所以,我们就可以通过添加css样式表,来添加自动编号的功能1、新建一个名称为“base.user.css”的样式文件,将下面的代码复制进去,保存/** * 说明: * 正文标题区: #write * 侧边栏的目录大纲区: .sidebar-content * 要完成自动编号功能,必须借助CSS3中的如下特性: * 计数器:counter(基准计数器),用于计算基准计数器的值 * 计数器增量:counter-inc.原创 2020-05-20 11:41:59 · 3313 阅读 · 1 评论 -
【GIT】官网下载过慢的问题
GIT官网下载地址:https://git-scm.com/downloadswindows版本推荐下载地址:https://npm.taobao.org/mirrors/git-for-windows/下载过程:1、打开页面,页面滚动到最底端,可以下载最新版本2、点击需要下载的版本后,进入如下页面,根据需要点击要下载的格式,即可...原创 2020-05-19 10:38:55 · 288 阅读 · 0 评论 -
【API】的restful风格
一套关于设计请求的规范核心:GET :获取数据 ;POST:添加数据; PUT:更新数据 ;DELETE:删除数据参考代码:服务器端路由代码://获取用户列表信息app.get('/users', (req, res) => { res.send('当前是获取用户列表信息')})//获取某一个用户具体信息的app.get('/users/:id', (req, res) => { //获取客户端传递过来的用户id const id = req.par.原创 2020-05-19 00:25:36 · 188 阅读 · 0 评论 -
filter()与find()
共同点:find 和 filter 都是不改变原数组的方法不同点:1、filter返回的是数组,find找到就返回该元素,找不到返回undefined。返回的是对象2、find()找到第一个元素后就不会在遍历其后面的元素,所以如果数组中有两个相同的元素,他只会找到第一个,第二个将不会再遍历了。...原创 2020-05-18 20:34:02 · 1061 阅读 · 0 评论 -
mongoose中findOneAndUpdate()方法
// 执行修改操作const task = await Task.findOneAndUpdate({_id: req.body._id}, _.pick(req.body, ['title', 'completed']),{new: true})//findOneAndUpdate()默认返回原始的数据//其中{_id: req.body._id}按id=req.body._id进行查询//其中{new: true},需要将new属性设置为true,返回更新后的数据//其中_.pick()为lo原创 2020-05-18 17:40:56 · 6606 阅读 · 0 评论 -
jquery中serializeArray()与serialize()
示例表单: <form id="form"> 用户名:<input type="text" name="username"> 密码:<input type="password" name="password"> <input type="submit" value="提交"> </form>1、serialize()作用:序列化表单内容为字符串,一般用于Ajax请求,将表单内容拼接成字符串类型的参数var pa原创 2020-05-18 00:01:52 · 249 阅读 · 0 评论 -
VSCode中利用Live Server让HTML等文件在服务器上运行
1、安装Live Server2.配置服务器信息参考配置代码: "liveServer.settings.port": 5000,//设置端口(不要与其他程序端口重复) "liveServer.settings.AdvanceCustomBrowserCmdLine": "Chrome"//设置浏览器3、html文档中鼠标右键,在服务端查看文件查看该文件显示结果:...原创 2020-05-16 23:58:40 · 3310 阅读 · 0 评论 -
【gulp命令报错】The following tasks did not complete:xxx Did you forget to signal async completion?
问题描述1、编写代码//引用gulp 模块const gulp = require('gulp')//引入gulp-less插件const less = require('gulp-less');//创建任务gulp.task('cssmin', () => { gulp.src('./src/css/*.less') .pipe(less()) .pipe...原创 2020-05-02 19:28:48 · 620 阅读 · 1 评论 -
【zyMedia】前端视频插件:zy.media.js
zyMedia : 一个轻量级媒体播放器,其github地址为:https://github.com/ireaderlab/zyMedia原创 2020-04-27 20:48:12 · 7338 阅读 · 1 评论 -
常见行内元素、块级元素、行内块元素
1、常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等,其中<div>标签是最典型的块元素。2、常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、...原创 2020-04-11 22:50:24 · 15617 阅读 · 0 评论 -
Emmet常用语法
Emmet的前身是Zen coding,它使用缩写,能大幅度提高前端开发效率的一个工具m,来提高html/css的编写速度。详情可看:https://www.w3cplus.com/tools/emmet-cheat-sheet.html1、生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键, 就可以生成<div></div>...原创 2020-04-09 17:20:50 · 352 阅读 · 0 评论 -
webpack : 无法加载文件 C:\Users\ping4\AppData\Roaming\npm\webpack.ps1,因为在此系统上禁止运行脚本。
1、利用管理员身份打开powershell键入:Set-ExecutionPolicy RemoteSigned,弹出如下内容,继续输入:Y2、继续键入:webpack -v,弹出如下内容,继续输入:yes补充说明:产生原因:是因为powershell对于脚本的执行有着严格的安全限制。可以使用Set-ExecutionPolicy来修改PowerShell中执行策略的用户首选项(...原创 2020-04-08 18:13:56 · 2189 阅读 · 0 评论 -
vscode中常用图标主题:【vscode-icons】
1、搜索扩展:vscode-icons,点击对应的“安装”按钮2、验证安装效果建立不同的文件、文件夹,会出现不同的图标,如下所示原创 2020-04-08 16:53:15 · 5777 阅读 · 0 评论 -
vscode创建一个vue简单的模板
1、打开“文件“->“首选项”-“用户代码片段”2、弹出页中选中“新代码片段”3、键入名称,例如“vue-template”,输入完成后,按下“Enter”键即可4、弹出如下页面,{}全是英文注释5、在英文注释后,{}之间,输入以下代码,保存 "vue_learn_template": { "prefix": "vl",//键入快捷键 "body": [ "&...原创 2020-04-08 11:44:53 · 2672 阅读 · 1 评论 -
Vue Devtools安装到Chrome浏览器
1、下载插件,也可以从其他地方下载地址:https://chrome.zzzmh.cn/info?token=nhdogjmejiglipccpnnnanhbledajbpd下载的zip文件中解压得到的文件如下:2、.在chrome中进行安装打开chrome的扩展程序(可直接在地址栏输入:chrome://extensions/),同时需要打开开发者模式,将上一步得到的文件拖进来即...原创 2020-04-07 12:26:37 · 550 阅读 · 0 评论 -
vue-resource实现ajax
综合代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&...原创 2020-03-25 21:36:25 · 140 阅读 · 0 评论 -
Vscode中更换多行注释快捷键
1、进入:文件->首选项->键盘快捷方式2、搜索:注释英文搜索:comment3、选择:切换块注释->更改键绑定4、键入快捷键ctrl + Shift + /,按下Enter键后即可,也可以改为其他自定义快捷键...原创 2020-03-22 22:42:59 · 2305 阅读 · 1 评论 -
经典的REPL是什么
R:Read 读取 - 读取用户输入E:Eval 执行 - 执行输入的数据结构P: Print 打印 - 输出结果L:Loop 循环 - 循环操作以上步骤直到用户退出REPL 翻译为“交互式解释器”,表示电脑的一个环境,我们常用的Node 的交互式解释器可以很好的调试 Javascript 代码。类似Windows 系统的终端或Unix/Linux shell,我们可以在终端...原创 2020-03-19 00:04:24 · 1258 阅读 · 0 评论 -
【vscode代码格式化】Prettier - Code formatter插件实现
1、安装扩展 Prettier - Code formatter2、希望实现vue的格式化可以额外添加插件 vetur3、在配置文件中加入如下代码,可以实现用户保存代码时即格式化具体规则可以根据代码风格自行更改,官方配置文档地址:https://prettier.io/docs/en/configuration.html // tab 大小为2个空格 "editor.tab...原创 2020-03-10 10:46:30 · 20446 阅读 · 0 评论 -
借助checkbox实现自定义radio
1、需要用到相邻兄弟选择器、伪元素选择器、伪类选择器2、需要借助label标签的特性:用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。代码详细:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Docume...原创 2020-02-29 22:34:03 · 165 阅读 · 0 评论 -
谷歌浏览器如何在Elements状态下调用控制台
1、先调出开发者模式2、再找到键盘左上角的“Esc”按钮,就可看到如下界面:原创 2020-02-29 16:13:22 · 1219 阅读 · 0 评论 -
twbs-pagination分页插件的简单应用
1、介绍jQuery Pagination Plugin for Bootstrap 这个 jQuery 插件简化了 Bootstrap 分页功能的使用。它使用适当的类:.pagination, .active 和 .disabled。2、使用界面上:<ul class="pagination pagination-sm pull-right"> </ul>...原创 2020-02-28 23:53:15 · 880 阅读 · 0 评论 -
模板引擎jsrender简单使用
1、下载jsrender.js2、简单使用<!-- 引入模板引擎 --> <script src="/static/assets/vendors/jsrender/jsrender.js"></script><!-- 使用模板引擎 --> <script id="comments_tmpl" type="text/x-jsren...原创 2020-02-28 10:21:14 · 658 阅读 · 0 评论 -
JS中不要重复使用无意义的选择操作,应该采用变量的本地化
例如: $('tbody input').on('change',function(){ //有任意一个checkbox选中就显示,反之隐藏 $('tbody input').each(function(i,item){ //content })上述代码,可以换成如下的形式 //变量的本地化var $tbodyCheckBoxs=$('tbo...原创 2020-02-20 22:31:05 · 247 阅读 · 0 评论 -
js正则表达式(邮箱为例)
测试正则匹配//定义正则var emailFormat=/^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[a-zA-Z0-9]+$///匹配正则emailFormat.test('admin@demo.com')输出:true正则提取组,按照()提取//定义正则var emailFormat=/^([a-zA-Z0-9]+)@[a-zA-Z0-9]+\.[a-zA-Z0...原创 2020-02-19 14:34:48 · 831 阅读 · 0 评论 -
php创建登录标识
1、其他页面没有检测到当前用户登录信息,即为没有登录,跳转回登录页在其他页面写上session_start();if(empty($_SESSION['current_logged_user'])){ //没有当前用户没有登录,跳转回登录页 header('Location: /admin/login.php');}2、登录页,通过session存储登录标识 sessio...原创 2020-02-19 12:00:43 · 214 阅读 · 0 评论