狼丶宇先森的网络科技空间

在当今快节奏的Web开发环境中，算法扮演着至关重要的角色，对于前端开发者而言，深入了解算法不仅是一种挑战，更是提升技能水平的必要途径。让我们一起探讨算法在Web前端中的意义和作用。

如何使用浏览器来调用相机进行拍照

一、写在前面想信你看到这篇文章的时候,就知道,你需要一个最简单的一键全屏解决方案了。二、进入主题1.最简单的就是使用一个第三方的包,screenfull copy下面的命令即可安装:npm i screenfull --save//orcnpm i screenfull --save//oryarn add screenfull2.封装一个全屏的按钮: AppScreenfull/index.vue<template> <span :title="title"

一、写在前面最近接手了两个vue的项目，打开之后发现各个的编码风格都不太一样，那怎么才算良好的编码风格呢。可能有很多小伙伴都知道vue的基本语法和用法。但是认真看过一遍官网的说明的有几个呢？那接下来让我们一起来看看官方是推荐的哪种风格。以下的规则内容部分引用的官网原文：二、参考官网（这段内容引用的官网原文）这里是官方的 Vue 特有代码的风格指南。如果在工程中使用 Vue，为了回避错误、小纠结和反模式，该指南是份不错的参考。不过我们也不确信风格指南的所有内容对于所有的团队或工程都是理想的。

在使用html2canvas截屏生成图片的时候,会出现has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.这个问题.如下:正常的图片应该是这样:异常的图片,头像部分无法显示:报错:Access to image at 'http://192.168.0.220/cwcdstatic/studentheadimage/444444

写在前面用了element-ui的小伙伴们都应该知道,官方给的案例中,el-table是最简单的,未经过二次封装写起来肯定是如下: <template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </

如何使用elementui中的树形组件在懒加载模式中会默认展开N层;需求如下:用tree组件进行懒加载默认会展开4层.剩下的使用异步加载.<template> <div id="app"> <el-tree :props="props" :load="loadNode" lazy show-checkbox> </el-

1.获取时间戳精确到秒,13位const timestamp = Date.parse(new Date());console.log(timestamp);//输出 1591669256000 13位2.获取时间戳精确到豪秒,13位const timestamp = Math.round(new Date());console.log(timestamp);//输出 1591669961203 13位3.获取时间戳精确到豪秒,13位const timestamp =

draggable 是个非常不错,而且很方便的拖拽组件,但是你在项目中可能会遇到被包裹的拖拽元素对象的点击事件失效的问题,事件冲突了.先看代码示例,再看解决思路及方法.1. 被拖拽组件的父组件 Warp.vue<template> <draggable v-model="sendData.template" class="app-form-items" @change="handleDraggableFormItemChange"> <t.

vue中的富文本编辑器,vue2-editor, 使用use-custom-image-handler 自定义图片上传的时候 @imageAdded 不触发,无效;<!--@imageAdded="handleImageAdded"这里不要使用驼峰,否则不太好使-->要用@image-added="handleImageAdded" 才行...<template> <vue-editor v-model="editorVal...

vue中报错[Vue warn]: Duplicate keys detected: 'true'. This may cause an update error.found in xxx可能是的你绑定的key重复了.

本文主旨长列表渲染、无限下拉也算是前端开发老生常谈的问题之一了，本文将介绍一种简洁、巧妙、高效的方式来实现。话不多说，看下图，也许你可以发现什么？不知你是否从上面这张图中注意到了什么，比如只是渲染了可视区域的部分 DOM ，滚动过程中只是外层容器的 padding 在改变？前一点很好理解，我们考虑到性能，不可能将一个长列表（甚至是一个无限下拉列表）的所有列表元素都进行渲染；而...

此文章全文均为转载:原文链接:https://juejin.im/post/5a6547d0f265da3e283a1df7前言见解有限，如有描述不当之处，请帮忙及时指出，如有错误，会及时修正。———-超长文+多图预警，需要花费不少时间。———-如果看完本文后，还对进程线程傻傻分不清，不清楚浏览器多进程、浏览器内核多线程、JS单线程、JS运行机制的区别。那么请回复我，一...

在vue或者nuxt的项目里可能会用到的分页插件.url分页效果是通过跳转url的形式来传递页面参数,或者url?page=1等的方法,下面是源码部分,别的需要的自行修改即可.AppPager.vue<template> <ul class="app-pagination"> <template v-if="type == ...

vue项目开发过程中,每次都引入一次全局变量觉得很麻烦,接下来就可以解决你的麻烦了.首先我们要用到一个工具style-resources-loader执行这个命令安装.npm i style-resources-loader --save-dev然后在vue.config.js中配置const path = require('path');/** * 自动引入全局...

这是一个基于Alipayer 开发并封装于vue的播放器由于项目需要接入rtmp协议的直播流,用于实时监控,看了网上的几个开源播放器,最后选择了阿里云的开源播放器,Alipayer,但是Alipayer是cdn加载的,且没得一个正式的vue版本,最后还是选择了自己手写吧.废话不多说,直接上代码,如下:项目地址:https://github.com/langyuxiansheng/vue-...

$ git push origin masterCounting objects: 251, done.Delta compression using up to 8 threads.Compressing objects: 100% (238/238), done.Writing objects: 100% (251/251), 12.20 MiB | 132.00 KiB/s,...

1 Array.includes 与条件判断一般我们判断或用 ||// conditionfunction test(fruit) { if (fruit == "apple" || fruit == "strawberry") { console.log("red"); }}如果我们有更多水果function test(fruit) { const r...

nuxt 官网说的 专注于UI的渲染,作者想试一下用来写后台管理的界面感觉何如,可以开启 spa模式,或者不改变,也会有不一样的体验哦.基于nuxt.js的管理后台项目,一个项目部署,可以一站式管理数据库和你的业务的增删改查操作,项目暂未完善,待完善后开源于github 一个问题,想了好多种办法,终于用了一个笨方法解决了这个问题如下所示: routes.js 如下:/**...

通过vue-cli3.x版本构建的项目使用proxy和以前的项目不同，而且3.x版本构建的时候可以选用typescript了。下面记录一下如何使用proxy跨域。首先在根目录创建vue.config.js文件，这个配置文件在运行项目的时候自动加载。 // vue.config.jsmodule.exports = { //webpack - dev - server 的配置项...

定义 getter 与 setter1.通过对象初始化器在创建对象的时候指明（也可以称为通过字面值创建对象时声明）(function () { var o = { a : 7, get b(){return this.a +1;},//通过 get,set的 b,c方法间接性修改 a 属性 set c(x){this.a = x/2} }; conso...

我也看了许多的开源框架,各有各的好吧 我整理了一下我之前的项目 提供了一套基本的基础框架 开箱即用的使用了vue-router 和 vuexajax请求使用的axios提供最基本的脚手架服务github:https://github.com/langyuxiansheng/base-vueadmin-client配套使用的后台服务 https://github.com/la...

 垂直滚动效果&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, user-scalable=no

  同样的接口和响应数据 这里是浏览器响应的: 这是postman响应的: postman的id就是正确的..... 浏览器的返回数据的id就不对,浏览器将long型的id超出部分转换为00, 由于JavaScript中Number类型的自身原因，并不能完全表示Long型的数字，在Long长度大于17位时会出现精度丢失的问题。解决方法:让后端...

此篇文件仅仅作为笔记分享,不用于其他用途!!! 看了许多关于vue的书籍和学习材料之类的,稍微做个总结吧先打开官网的首页:https://cn.vuejs.org/  官网里说的是Vue 是渐进式框架的:渐进式含义：没有多做职责之外的事。 你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用； 也可以整个用它全家桶开发，当Angular用；...

1.得到原本的镜像地址npm get registry &gt; https://registry.npmjs.org/设成淘宝的npm config set registry http://registry.npm.taobao.org/  2.换成原来的npm config set registry https://registry.npmjs.org/...

分享一个axios的通用配置在项目开发中,可能会用到这个/*** * Created by Simple on 2018/1/14 0014. * Http请求控制器模块 */import axios from 'axios';import store from '@/store/index';import types from '@/store/types';impor...

在新开始的前端项目里肯定会用到ajax请求,这里手把手的教你封装一个通用的全局http模块首先新建一个文件夹 作为一个"模块",如下:然后继续创建文件:index.js 如下:/** * 在这里导出你需要用到的api方法,apis里面的那些 */import apis from './wrapper';/* 这里是方便看业务模块里有哪些方法,除了就没啥用了var ...

原文标题 "拯救尴尬：鉴黄神器NSFW JS开源了！"近日，GitHub 上开源了一款鉴定不雅内容的 js 库 NSFW JS，你可以使用 NSFW JS 识别不雅内容，所有操作都只在客户端进行，甚至都不需要让文件离开用户的电脑。演示地址：https://nsfwjs.com/项目地址：https://github.com/infinitered/nsfwjs你有没有过这样的经历，...

原文标题:"2018年最好的45个Vue开源项目汇总"在过去的一年里，我们比较了将近 12,000 个 Vue.js 开源项目和库，从中挑选了最好的 45 个（0.37％）。这些项目和库可以分为 3 类： 用户界面（1~19） Vue.js 工具（20~36） 项目（37~45） 这是一个非常好的清单，精心挑选了 2018 年 1 月至 12 月期间发布的最佳...

最近遇到调试本地的车牌识别相机,需要解码视频编码H.264/MJPEG/支持双码流2格式的视频,解析方法如下<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <title>WebSocket Test</title> <me...

当你的vue项目中出现这种报错的时候,页面肯定是显示不出来,找了半天,似乎也没发现有循环引用的呀 为啥会报内存溢出呢?vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in nextTick: "RangeError: Maximum call stack size exceeded"warn @ vue.runtime.esm.js?2b0e:...

有部分项目里会出现这样的一个功能:github:https://github.com/langyuxiansheng/slider-verification-code对的,就是滑块验证码.我做了一个比较简单的,在网上看了一些轮子,居然不是完全适用的,然后借鉴了一部分,然后封装为vue的组件.废话不多说,直接上代码:直接安装使用npm i slider-veri...

没办法,在项目中要求车牌输入的键盘要专门使用一个车牌输入的软键盘项目地址:https://github.com/langyuxiansheng/vue-license-keyboard最近重新写了里面的一部分属性,和方法,现在支持pc和移动端了.如果使用遇到了问题或者发现bug请留言.附上截图PC端展示:移动端展示:使用方法看这里npm i ...

前言 在互联网的登陆系统中一般有session cookie 和 jwt token来进行验证用户是否登录的.下面来说一下关于 jwt的坑:1.首先登录成功的返回,其中jwt的有效期为2小时,refreshJwt的有效期为30天如下:2.保存jwt 和refreshJwt在cookie中,当然这里不一定要保存在cookie中,也可以保存在别的地方.这里以cookie为例子:3....

阿里云那边的配置就先不说了.遇到跨域的问题看这里https://help.aliyun.com/document_detail/31870.html?spm=a2c4g.11186623.4.1.4fec49e8JjFWF9直接上代码.1.下载安装ali-ossnpm i ali-oss --save2. 新建一个文件aliyun.oss.client.js 如下...

异步获取的对象,打印的时候可以看到有值,但是实际使用的时候是没有值的 ,原因是vuex的state未初始化定义.

1.校验字符串是否有效(null/空串/undefined);/* * 校验字符串是否有效(null/空串/undefined) */ const isInvalid = (str) =&gt; { return str == null || str == "" || str == undefined;} 2.校验是否为纯数字/* * 校验是...

&lt;script&gt;let iterator=(els,arr)=&gt;{ arr=[] for (let { localName, innerText, children } of els){ let obj={localName, innerText, children:[]} if (children &amp;&amp; chi...

原文标题:"Vue 3.0对Web开发意味着什么？"18 年 11 月，尤雨溪向外宣布了 Vue 3.0 的关键更新。新版本所带来的优化让 Vue 更加高效、更加模块化且更加易于使用。这篇文章将讨论这些变化，以及我认为这些变化将在 Vue 3.0 发布后给 Web 开发世界带来哪些影响。Vue 的现状Vue 是“一个用于构建用户应用程序的渐进式框架”。它的设计非常灵活，可以将单个 Vu...