自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

yw00yw的博客

技术共享、技术学习、技术交流

  • 博客(290)
  • 资源 (26)
  • 收藏
  • 关注

原创 scrollIntoView+锚点两种方式实现页面的平滑滚动,长页面分页

scrollIntoView简介该scrollIntoView()方法将调用它的元素滚动到浏览器窗口的可见区域。语法element.scrollIntoView(); // 等同于element.scrollIntoView(true)element.scrollIntoView(alignToTop); //布尔参数element.scrollIntoView(scrollIntoViewOptions); //对象参数用法// 点击菜单实现滚动 handleChildNodeCo

2021-02-04 15:11:39 119

原创 chrome pdf 打印边距问题处理

需求将网页打印成pdf,Chrome 可直接将网页保存(打印)为 PDF (无需安装 Adobe ),或者邮件点击打印,但是式样跟网页上显示的有很大不同。问题是无法选择「纸张大小」,Chrome 在保存为 PDF 文件时,默认纸张大小是 A4。若布局为纵向,显示大小为 210mm×297mm ;若布局为横向,显示大小为 297mm×210mm。打印方式地址:打印地址:https://oss.phxg.cn/download/genFileByGotenberg/%E4%BC%98%E5%B

2021-01-29 20:09:18 263

原创 Chrome浏览器常用插件记录

WEB前端助手(FeHelper)作用:集前端各种常用工具与一体的chrome插件WhatRuns作用:可以快速检测到当前站点使用的技术书签侧边栏作用:在浏览器视图区左侧添加固定式的, 管理所有书签的侧边栏....

2021-01-29 09:11:32 56

原创 React 重难点

为什么要引入 React在写 React 的时候,你可能会写类似这样的代码:import React from 'react'function A() { // ...other code return <h1>前端桃园</h1>}你肯定疑惑过,下面的代码都没有用到 React,为什么要引入 React 呢?如果你把 import React fro...

2021-01-28 17:42:15 44

原创 angular7中httpClient封装get/post请求

login.component.tsimport { HttpService } from 'src/app/services/http.service';constructor(private http: HttpService) {}// ajax数据测试 get doGet() { const obj = { _userName: '...

2021-01-28 17:41:26 232

原创 angular7中使用请求拦截和token验证

对于任何一个应用来说,安全都是必不可少的操作。一般安全验证的比较流行的方式是:token验证后台生成一个token,第一次登陆成功之后,将token从后台携带回来,然后前端每次的请求都要将token带到后台。后台验证有没有token且是否相同,并且设置token的有效期。编写拦截器interceptor.service.tsimport { Injectable } from '@ang...

2021-01-28 17:41:01 296 2

原创 vue配置多代理服务接口地址操作

接口地址http://api.baidu.cn/ReportApi/monthAnalysisReport/monthAnalysisReport/802244685862010880直接用get请求返回一个json字符串代理配置module.exports = { // development server port 8000 port: 9999, https: true, // If you want to turn on the proxy, please rem

2021-01-28 14:06:23 220

原创 vue-cli3.x配置babel转换node-modules,兼容chrome低版本浏览器

问题描述vue-cli3创建的项目,在低版本浏览器中运行,运行不起来,因为默认都是开启高版本浏览器。控制台会报一系列错误,特别是node_modules中的插件的es6等高级语法不识别问题。所以按照下面的配置一步解决。请注意默认情况下,babel-loader会忽略所有 node_modules 中的文件,但是我们在某一些安装包引入的时候也需要进行babel转换,那怎么办呢transpileDependencies:转换node-modules必备以vue为例核心配置:vue.conf

2021-01-25 20:23:46 383

原创 vue集成海康威视视频监控方案采坑之路

注意问题高版本监控与低版本监控高版本监控可以在高版本浏览器上使用websocket进行解析播放,低版本监控只能在低版本浏览器上使用插件播放。针对不同的设备选择不同的集成方案即可。可以在我的资源中下载。集成方式根据demo,输入ip地址、端口、用户名、密码就可以进行预览测试,测试没问题可以根据demo进行集成。将对应的demo目录下的资源放到我们项目的静态资源中,以vue为例,在vue.config.js中进行配置,导出对应的全局变量变量,也可以直接引入使用。以vue为例谷歌版本chro

2021-01-20 09:40:11 820 6

原创 Web浏览器基于Flash实时播放监控视频(二)

vue项目中应用vue-video-player与videojs-flash实现RTMP流播放所需插件npm install vue-video-player --savenpm install videojs-flash --save版本"videojs-flash": "^2.2.1","vue-video-player": "^5.0.2"全局使用main.jsimport VueVideoPlayer from 'vue-video-player'import 'vi.

2020-12-29 18:00:40 139

原创 Web浏览器基于Flash实时播放监控视频(一)

安装插件插件安装npm install video.js --savecnpm install --save videojs-flashcnpm install --save videojs-swfcnpm install --save vue-video-player // 使用video.js播放不安装这个插件对应版本“video.js”: “^7.10.2”,“videojs-flash”: “^2.2.1”,“videojs-swf”: “^5.4.2”,“vue-vide

2020-12-29 16:54:07 127 1

原创 前端经典问题收集

前端渲染几十万条数据不卡顿核心APIcreateDocumentFragmentrequestAnimationFrame<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>

2020-12-22 11:42:21 46

原创 基于iview对table进行二次封装处理

模板<template> <div> <div class="table_box"> <Table :columns="tableColumns" :data="tableData" :height="tableHeight" v-if="tableColumns.length > 0"> <!-- 渲染数据 --> <te

2020-12-22 11:01:34 188 2

原创 echarts环状饼图默认选中且图例可点击选择二次封装

核心库echartslodashResizeListener代码<!-- * @Author: your name * @Date: 2020-11-04 10:39:39 * @LastEditTime: 2020-12-08 14:05:46--><template> <div class="charts" ref="charts"></div></template><script>impor

2020-12-08 14:20:40 96

原创 可视化-svg

svg特点SVG 指可伸缩矢量图形 (Scalable Vector Graphics)SVG 用来定义用于网络的基于矢量的图形SVG 使用 XML 格式定义图形SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失SVG 是万维网联盟的标准SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体SVG 可被非常多的工具读取和修改(比如记事本)SVG 与 JPEG 和 GIF 图像比起来,尺寸更小,且可压缩性更强。SVG 是可伸缩的SVG 图像可在任何的分辨率下被高质量地

2020-12-01 11:33:36 54

原创 iframe + postMessage 实现跨域通信

VScode安装Live Server 插件注释:上面右键即可通过服务的方式打开html格式文件postMessagepostMessage方法允许来自不同源的脚本采用异步方式进行有限的通信,可以实现跨文本档、多窗口、跨域消息传递。main.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" cont

2020-11-30 11:52:20 51 1

原创 vue-awesome-swiper的基本使用

安装安装地址:https://www.npmjs.com/package/vue-awesome-swiper引入import { swiper, swiperSlide } from "vue-awesome-swiper";import "../../../node_modules/swiper/css/swiper.css";注册组件components: { swiper, swiperSlide},组件使用<div class="banner_box

2020-11-26 16:55:31 387

原创 基于echarts对雷达图的封装

核心库echartslodashResizeListener代码<!-- * @Author: your name * @Date: 2020-11-04 10:39:39 * @LastEditTime: 2020-11-19 11:44:45--><template> <div class="charts" ref="charts"></div></template><script>impor

2020-11-26 16:39:50 69

原创 基于echarts对饼图的封装

核心库echartslodashResizeListener代码<!-- * @Author: your name * @Date: 2020-11-04 10:39:39 * @LastEditTime: 2020-11-26 14:11:28--><template> <div class="charts" ref="charts"></div></template><script>impor

2020-11-26 16:33:59 92

原创 基于echarts对折线图的封装

核心库echartslodashResizeListener代码<!-- * @Author: your name * @Date: 2020-11-04 14:56:52 * @LastEditTime: 2020-11-19 15:14:00--><template><div class="charts" ref="charts"></div></template><script>import ec

2020-11-26 16:29:46 100

原创 基于echarts对柱状图的封装

核心库echartslodashResizeListener代码<!-- * @Author: your name * @Date: 2020-11-03 10:39:39 * @LastEditTime: 2020-11-21 16:04:42--><template> <div class="charts" ref="charts"></div></template><script>impor

2020-11-26 16:20:58 100

原创 Vue中父组件传递给子组件一个对象的时候,子组件监听调用多次问题

界面效果传递方式<Col span="16"> <Card class="mg_left5"> <p class="title themeBackground">拆回原因分析</p> <div class="panel_content"> <FaultAnalysis :paramsGroup="{deptCode, statisDateStart: startDate, stat

2020-11-24 09:41:39 485

原创 nestjs利用定时任务发送邮件

邮件服务安装邮件模块yarn add @nestjs-modules/mailer nodemailer#ornpm install --save @nestjs-modules/mailer nodemailer安装模板引擎yarn add handlebars#oryarn add pug#oryarn add ejs新建邮件模块、控制器、服务nest g module modules/emailnest g co modules/email --no-specnest

2020-09-20 09:56:04 1154 2

原创 nestjs操作mongodb实现增删改查

前置步骤见上https://blog.csdn.net/yw00yw/article/details/108490087控制器students.controller.tsimport { Controller, Get } from '@nestjs/common';import { StudentsService } from './students.service';@Controller('students')export class StudentsController {

2020-09-09 17:35:23 291

原创 nestjs连接并操作mongodb数据库

安装nestjs/mongoose 以及mongoose模块cnpm install --save @nestjs/mongoose mongoose配置数据库连接地址在app.module.ts中配置数据库连接import { AppController } from './modules/app/app.controller';import { StudentsModule } from './modules/students/students.module';@Module({ i

2020-09-09 15:17:49 689 1

原创 前端刷题站点集锦

520mghttps://www.520mg.com/前端面试题精编https://www.kancloud.cn/lemon-m/js-html-css/998102力扣https://leetcode-cn.com/problemset/all/js中文网https://www.javascriptc.com/tag/vue3-0

2020-09-04 09:25:15 298

原创 纯css3实现表格固定列效果

使用css3的sticky属性父元素不能overflow:hidden或者overflow:auto属性。必须指定top、bottom、left、right4个值之一,否则只会处于相对定位<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-

2020-09-01 14:59:00 246

原创 js的for循环中return可以跳出循环,而使用forEach等不可以跳出循环

描述在vue项目中做表格增加行的时候,校验行内单元格某些字段的必填项,刚开始使用forEach进行循环遍历数组对象,然后判断对象的键值是否为空,为空则跳出循环,提示需要填写必填项,否则提示进行增加行。forEach形式返回isCheckRowRequired () { // 检测新增行内容必填项 // let checkArr = ['packageName', 'bidFee', 'checkPrice', 'bidStatus']; let checkArr = ['packageNam

2020-08-20 16:56:30 544

原创 echarts图例的显示与隐藏

需求在图表加载的时候,默认只显示部分图例,只要图例显示部分,对应的柱图或者折线图也只显示对应的。点击一个按钮显示剩余的图例,或者点击置灰的图例让恢复显示。核心在legend里面的字段加个selected,然后设置不需要显示的数据标题:以官方案例为例:selected: {'邮件营销': false, '联盟广告': false}使用按钮切换可以动态改变selected里面对象的键值即可:this.options.legend.selected = {'邮件营销': false, '联盟广告'

2020-08-04 10:17:57 3071

原创 vue的provide/inject实现响应式数据监听

provide/inject 这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。无论多少层都会被子组建拿到主要用在高阶组件provide 选项应该是一个对象或返回一个对象的函数。inject 选项应该是:一个字符串数组,或 一个对象,对象的 key 是本地的绑定名提示: provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的。正常使用

2020-07-14 17:11:38 2501

原创 Vue开发技巧总结(四)图片加载失败、组件级路由钩子、递归组件、路由参数解耦、install自定义组件

img图片加载失败场景:有些时候后台返回的图片不一定能加载成功,加载失败默认显示一张图片<template> <div> <img :src="imgUrl" @error="handleError" alt=""> </div></template><script>export default { data () { return { imgUrl: '' } },

2020-07-13 11:17:16 116

原创 Vue开发技巧总结(三)自定义事件、长列表性能优化、函数式组件、作用域插槽

自定义事件及事件总线父子组件自定义事件子组件:this.$emit("my-event") 发送事件父组件:<dialog-component @dialog-closed="eventHandler" /> 监听事件事件总线可以将事件发送到同级、祖父母、层次结构中的任何其他组件为此,我们可以使用一种称为事件总线的模式。在这里,我们创建了一个单独的Vue实例,以将事件传输到导入该事件的任何组件。eventBus.js:// 首先,在新的模块文件中创建并导出Vue实例:imp

2020-07-10 14:46:56 122

原创 用vue-i18n实现中英文切换国际化

安装npm install vue-i18n目录结构i18n.jsimport Vue from 'vue'import VueI18n from 'vue-i18n'import zh from './langs/zh'import en from './langs/en'Vue.use(VueI18n)const messages = { zh, en}const i18n = new VueI18n({ locale: localStorage.getIt

2020-07-10 11:12:29 96

原创 Vue开发技巧总结(二)$set的使用、作用域级别、props的声明、地址栏传参、vue filters过滤器、组件刷新

$set的使用需求:生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去,此时需要用到$set。由于 Vue 会在初始化实例时进行双向数据绑定,使用Object.defineProperty()对属性遍历添加 getter/setter 方法,所以属性必须在 data 对象上存在时才能进行上述过程 ,这样才能让它是响应的。data () { return { userinfo: { name: 12, age: 23 }, arr

2020-07-09 17:55:46 130

原创 Vue开发技巧总结(一)props、$attrs、单向数据流、事件修饰符、样式穿透、watch高阶使用、事件传参$event、事件侦听器、监听组件声明周期

自定义属性propsprop 定义了这个组件有哪些可配置的属性,组件的核心功能也都是它来确定的。写通用组件时,props 最好用对象的写法,这样可以针对每个属性设置类型、默认值或自定义校验属性的值,这点在组件开发中很重要,然而很多人却忽视,直接使用 props 的数组用法,这样的组件往往是不严谨的。props: { type: { type: String, validator: (value) => { return ['success', 'warning'

2020-07-09 17:55:34 208

原创 echarts的tooltip提示内容过多分列显示及自定义图例

效果图效果图描述tooltip内容太多,超出图表的显示区域,导致显示不全代码<template> <div class="chart_box"> <ChartBar :option="options"></ChartBar> </div></template><script>import lodash from "lodash";import { ChartBar } fr

2020-07-09 17:52:26 745

原创 echarts柱图点击事件改变图例

效果图效果图描述点击柱状图的每根柱子显示对应的值和name及图例对应的总额柱图点击事件<template> <div ref="dom" class="charts chart-bar"></div></template>this.dom = echarts.init(this.$refs.dom, theme);this.dom.on('click', (event) => { // 柱图绑定点击事件 this.$emit('

2020-07-08 09:29:09 721

原创 使用vuepress搭建个人博客必备指南

vuepress官网https://www.vuepress.cn/基本构建安装yarn global add vuepress 或者:npm install -g vuepress新建README.md文件在根目录下新建一个markdown 文件开发环境编译vuepress dev .构建打包发布vuepress build .评论系统https://valine.js.org/Valine - 一款快速、简洁且高效的无后端评论系统。vuepress-

2020-05-14 11:49:52 360

原创 electron主进程和渲染进程的调试

主进程和渲染进程主进程在 Electron 里,运行 package.json 里 main 脚本的进程被称为主进程。在主进程运行的脚本可以以创建 web 页面的形式展示 GUI。渲染进程由于 Electron 使用 Chromium 来展示页面,所以 Chromium 的多进程结构也被充分利用。每个 Electron 的页面都在运行着自己的进程,这样的进程我们称之为渲染进程。在一般浏览器中,网页通常会在沙盒环境下运行,并且不允许访问原生资源。然而,Electron 用户拥有在网页中调用 io.j

2020-05-13 15:37:02 1591

原创 electron基础环境的搭建及项目的创建

克隆远程仓库克隆这仓库git clone https://github.com/electron/electron-quick-start进入仓库cd electron-quick-start安装依赖库npm install运行应用npm start手动创建新建文件夹mkdir electron-demo安装依赖npm install electron --save-dev新建文件index.html<!DOCTYPE html><html la

2020-05-13 09:11:38 198

传统MVC架构和前后端分离架构模式对比

通过多维度对传统的MVC和前后端分离架构进行对比,深入对比了两种架构方式的优缺点,还有MVC和MVVM的区别与联系。

2019-02-25

前端技术选型分析文档

通过对前端如何技术选型的分析,清晰深入的对前端常见框架jquery,vue,react,angular的横向分析对比。

2019-02-14

黑马程序员西安校区前端学科面试宝典-2019.pdf

前端最新面试题:html5, css3, jquery, vue, react, javascript, es6, webpack, git等常见面试题~

2020-01-16

nodejs+express实现增删改查

使用nodejs+express操作文件,是数据持久化,实现数据的增删改查操作!

2018-08-14

海康威视摄像头集成方式.rar

在项目中,需要集成监控,可以针对不同的设备情况集成不同的监控插件进行监控视频播放。

2021-01-20

vue项目最新最全开发规范文档

通过整合、结合自身项目需要,为了便于后期项目团队成员的配合,是一份最新,最全的vue开发文档规范。

2019-02-21

nginx-1.12.2.zip

nginx不仅可以作为服务器,还可以进行代理解决跨域问题,并且还可以解决单页应用的hash模式切换为H5 history模式刷新404问题,改代理已经配置好了解决angular在H5 history模式下刷新404问题

2019-08-27

gnvm地址.zip

随着时间的流逝,node版本升级的还是比较快的。曾几何时使用低版本的node 创建的项目,在升级到高版本的node启动应用程序的时候,发现启动不起来了,提示node版本错误。可以通过gnvm控制不同的node版本,在自己电脑上切换自如,不用每次卸载重装。

2020-03-18

vue-cli+mock增删改查

使用mockjs可以事先模拟数据,前提是和后端约定好了数据接口,怎样的数据。使用mock就可以生成你要的数据了,从而实现开发时前后端分离。

2018-08-06

vue项目规范文档

vue项目开发常见规范,可以帮助代码易于阅读,团队合作,提高开发效率,提高个人代码编码规范。

2018-03-19

DTLite虚拟光驱

这个软件是虚拟光驱软件,用来加载解压ISO文件的。具体安装步骤可以百度。

2019-02-12

mpvue小程序项目

使用mpvue结合vue和小程序开发的一款小程序项目。具有文章登录,新闻详情、列表,电影列表,电影详情等,使用vuex、fly相关技术完成。

2018-12-27

react最全项目实战

该项目采用react最新技术,结合react-redux,redux-thunk等核心技术,使用axios来获取数据请求。immutable.js、redux-immutable等核心技术。

2019-01-08

ckplayer.zip

一般在前端做视频播放的时候,直接使用H5的video属性会存在问题,虽然各大主流浏览器都能够支持,但是难免部分浏览器出错,比如IE。在angular中使用ckplayer.js可以解决这个问题,也可以在其他项目中使用。

2019-08-27

react js基本文件.rar

开始学习react了,刚开始还没有使用脚手架搭建项目,想直接引入react核心文件来开始学习,上次备份至此。

2019-08-24

Web浏览器基于Flash实时播放监控视频

使用videojs和vue-video-palyer两种方式实现视频播放,监控播放。

2020-12-30

ionic4自定义tabs切换.zip

使用angular路由自定义ionic4中的tabs切换,因为在实际项目中,需要自定义项目目录,需要手动定义tabs。

2019-07-03

微信小程序最新实战项目

使用微信小程序工具,编写的最新小程序实战。调用豆瓣api获取数据,实现电影详情,搜索等功能以及文章阅读等功能。

2018-07-23

react项目之TodoList

使用react实现todolist功能,运用了react的基本语法,父子组件的传值,jsx基本语法,性能优化。

2018-12-31

webpack+typescript环境配置.zip

采用当前最火的前端技术之一typescript结合webpack打包工具实现typescript环境的配置、项目结构的搭建、并实现打包与发布。

2020-04-23

angular英雄指南

结合最新的angular官方文档,和官方文档一致的开发流程,手动搭建项目结构,完整实现angular官方英雄指南系列。

2019-03-21

Autograph-签名.vue

在vue中,通过使用canvas技术实现签名技术,并且可以重置/保存等功能。不仅可以在移动端使用,而且还可以在pc端使用。

2020-07-10

ajv.min.js

通过使用ajv.js文件对json文件数据格式进行校验、可以校验必填项、json类型等。 对于前端程序来说可以直接方便的引入,直接会将校验结果打印出来,可以很快的定位到问题。

2019-12-22

react结合redux实现TodoList.rar

通过react脚手架创建的todolist项目,在react实现组件的基础上运用redux进行状态管理

2019-09-08

node egg 爬虫.rar

基于node, koa2的egg实现一个新闻爬虫系统。运用技术有:控制器、路由、视图、中间件等 、

2019-07-28

angular2+的响应式表达校验.rar

在angular2及以上的版本中对响应式表单的校验及校验规则的使用。

2019-06-09

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除