- 博客(52)
- 收藏
- 关注
RSS订阅
原创 vue使用高德地图导航路线失败，获取驾车数据失败：INVALID_USER_SCODE(解决方法)
高德地图使用路线导航最近做大屏项目，里面有地图定位，路线导航等方面的功能，在做路线定位是一直都是获取不到导航的路线，经过好长时间的百度看高德api文档终于找到解决方法。解决方法 添加高德地图安全密钥// 添加高德安全密钥 安全密钥是和key一起申请的，可能很多人会忽略掉。他也大有用处// window._AMapSecurityConfig = {// securityJsCode: "‘xxxxxxxx’"// };效果代码<template> <di
2022-04-23 14:52:18
8176
15
原创 vue总结实现流程
一. MVVMMVVM 是 Model - View - ViewModel 的缩写 可以看到他和之前的MVC很像，的确有人称之为一个加强优化版的MVC. 是一种模块化开发代码分层的思想或者框架;MVVM 的优点1、主要目的是分离视图（View）和模型（Model）2、降低代码耦合，提高视图或者逻辑的重用性。3、提高了模块的可测试性模型（Model）: 模型和业务数据绑定，方便数据的使用和传递;视图（View): 视图是应用程序中用户界面相关的部分，是用户看到并与之交互的界面。View
2021-12-16 17:35:53
1093
原创 前端vue从服务器获取当前时间然后累加处理
最近做的一个医院大屏显示的需求，在大屏上需要显示当前实时的时间，在医院的大屏就是医院排队叫号显示的那种大屏，这种大屏不需要登录是通过配置好的连接直接打开的，医院是内网，没有联网。开始是前端直接获取当前实时时间显示。到医院然后实施说，医院是内网，不能获取网络当前时间后来和后端沟通了一下。刚打开大屏是调接口获取当前时间，前端对时间做处理，累加实现时间实时更新，下面是代码。很简单、 created() { this.getRealTimeData(); }, met
2021-11-30 20:21:52
2343
4
原创 vue使用B站开源播放器flv.js和原生video实现视频直播,播放
flv.js<template> <div class="flv_box"> <video id="myvideo" controls autoplay muted></video> <button @click="onClick()">播放</button> <button @click="clickStop()">暂停</button> </div></templ
2020-09-07 11:54:53
3463
原创 高德地图通过地理位置转经纬度,报跨域问题解决方法 https://restapi.amap.com/v3/geocode/
高德地图逆地理地址转经纬度
2022-06-14 13:13:55
2900
原创 MySQL数据库查询（二）
2. 统计一下工作岗位的数量？3. 什么是连接查询？3. 连接查询的分类？怎么避免笛卡尔积现象？内连接之等值连接。内连接之非等值连接4.内连接之自连接外连接案例：查询每个员工的上级领导，要求显示所有员工的名字和领导名？三张表，四张表怎么连接？案例：找出每个员工的部门名称以及工资等级，还有上级领导，要求显示员工名、领导名、部门名、薪资、薪资等级？什么是子查询？子查询都可以出现在哪里呢？where子句中的子查询from子句中的子查询select后面出现
2022-05-31 22:45:35
238
原创 Typescript基本使用
记录学习Typescript安装 Typescript: npm install -g typescript原始数据类型BooleanNullUndefinedNumberBigIntStringSymbollet isDone: boolean = false// 接下来来到 numberlet age: number = 10let binaryNumber: number = 0b1111// 之后是字符串，注意es6新增的模版字符串也是没有问题的let f
2022-05-31 17:47:17
85
原创 MySQL数据库查询
1. 导入一下提前准备好的数据：bjpowernode.sql 这个文件中是我提前为大家练习准备的数据库表。怎么将sql文件中的数据导入呢？mysql> source D:\course\03-MySQL\document\bjpowernode.sql注意：路径中不要有中文！！！！2. 关于导入的这几张表？mysql> show tables;+-----------------------+| Tables_in_bjpowernode |+--------------
2022-05-31 17:43:32
304
原创 MySQL卸载和本地数据库登录及基本指令。
MySQL数据库的完美卸载！第一种方式 第一步：双击安装包进行卸载删除。 第二步：删除目录： 把C:\ProgramData下面的MySQL目录干掉。 把C:\Program Files (x86)下面的MySQL目录干掉。 这样就卸载结束了！第二种方式计算机-->右键-->管理-->服务和应用程序-->服务-->找mysql服务MySQL的服务，默认是“启动”的状态，只有启动了mysql才能用。默认情况下是“自动”启动，自动启动表示下一次重启操作
2022-05-31 15:43:36
238
原创 vue 使用高德地图 和 vue-amap高德地图组件库基本使用
最近在做大屏地图项目。之前一直没接触过地图之类的项目，然后在网上搜如何使用。看高德地图的api。和组件库。vue-amap组件库和高德原生的api都差不多也可以混合使用。下面介绍一下基本的引入和使用。高德地图引入使用高德地图在vue中是直接用比较方便不过需要注意写法，他是有异步加载的顺序，可以写个js文件引入到文件中使用export default function MapLoader () { return new Promise((resolve, reject) => { i
2022-04-07 19:07:40
7963
4
原创 vue项目 安装依赖报错 node-sass报错
node安装错误报错比较老的项目，需要维护。安装依赖包是一直报这个错， npm intsall 安装依赖一直失败，到网上查是 node-sass 安装的问题。> [email protected] postinstall B:\vue\Code\vue-cars-admin-master\node_modules\core-js> node -e "try{require('./postinstall')}catch(e){}"> [email protected] postinstall B:\vu
2022-04-06 19:00:27
2800
2
原创 vue相关知识汇总
前言最近复盘了一下vue相关知识，对vue有了进一步的认识了解（数据绑定、响应式原理、diff算法、一些工作中常用的属性方法是具体怎么实现等），空余时间整理了一下分享给大家，希望对你有所帮助~~~vue 的优点低耦合，视图（View）可以独立于 Model 变化和修改，一个 ViewModel 可以绑定到不同的"View"上，当 View 变化的时候 Model 可以不变，当 Model 变化的时候 View 也可以不变可重用性，你可以把一些视图逻辑放在一个 ViewModel 里面，让很多 vi
2022-02-25 11:45:25
105
原创 前端性能优化
一. css、js 的加载与执行一个网站在浏览器端是如何进行渲染的呢？基本过程1．解析HTML文件，创建DOM树2．解析CSS,形成CSS对象模型3．将CSS与DOM合并，构建渲染树（renderingtree）4．布局和绘制对渲染树上的每个元素，计算它的坐标，称之为布局。浏览器采用一种流方法，布局一个元素只需通过一次，但是表格元素需要通过多次。最后，渲染树上的元素最终展示在浏览器里，这一过程称为“painting”。当用户与网页交互，或者脚本程序改动修改网页时，前文提到的一些操作将会重
2022-01-24 13:12:24
454
原创 Vue3初体验快速上手
认识Vue3性能提升打包大小减少41%。初次渲染快55%, 更新渲染快133%。内存减少54%。使用Proxy代替defineProperty实现数据响应式。重写虚拟DOM的实现和Tree-Shaking。新增特性Composition (组合) APIsetupref 和 reactivecomputed 和 watch新的生命周期函数provide与inject…新组件Fragment - 文档碎片Teleport - 瞬移组件的位置Suspens..
2022-01-10 15:34:42
171
原创 前端数组对象去重的几种方法，拿来即用
工作中有许多地方地方需要前端处理数据，总结了几种数据去重的方法都实验过，可以使用 初始数据 id有相同的需要去重 let person = [ { id: 0, name: "小明" }, { id: 1, name: "小张" }, { id: 2, name: "小李" }, { id: 3, name: "小孙" }, { id: 1, name: "小周" }, { id: 2, na
2021-12-30 13:48:08
4542
2
原创 防抖和节流及案例实现
防抖const input1 = document.getElementById('input1')let timer = nullinput1.addEventListener('keyup', function () { if (timer) { clearTimeout(timer) } timer = setTimeout(() => { // 模拟触发 change 事件 console.log(input1.v
2021-12-12 20:52:00
447
原创 宏任务和微任务的区别
宏任务：DOM 渲染后再触发微任务：DOM 渲染前会触发// 修改 DOMconst $p1 = $('<p>一段文字</p>')const $p2 = $('<p>一段文字</p>')const $p3 = $('<p>一段文字</p>')$('#container') .append($p1) .append($p2) .append($p3)// // 微任务：渲染之前执行（DOM 结构.
2021-12-12 20:45:35
617
原创 前端开发中常用正则表达式
创建js文件，在页面中直接使用/** * 常用正则表达式 */export const regExps = { /** url校验 */ url: new RegExp('^(?!mailto:)(?:(?:http|https|ftp)://|//)(?:\\S+(?::\\S*)?@)?(?:(?:(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}(?:\\.(?:[0-
2021-01-13 14:50:30
186
原创 vue 长按图片保存分享
<html><head><title>长按图片保存分享</title><meta name="viewport" content="640, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0"><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></scr
2020-12-04 13:46:29
1573
原创 深度解析 JavaScript 中call方法原理
一丶深度解析 JavaScript 中call方法原理call 方法是 Function 类原型上的一个公共方法，我们知道所有的函数都是 Function 类的一个实例(对象)，当然，call函数本身也是Function类的一个实例。任何一个函数都可以调用call方法，包括call方法本身。函数调用call方法时，是把函数作为Function的实例也就是对象身份的。function fn1() {}console.log(Function.prototype.call.__proto__ === F
2020-11-19 17:52:05
1932
原创 Vue中computed和watch的区别
计算属性computed :支持缓存，只有依赖数据发生改变，才会重新进行计算不支持异步，当computed内有异步操作时无效，无法监听数据的变化3.computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed5.如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性
2020-09-16 11:17:39
111
原创 webSocket在vue项目中实现获取实时在线人数
//本地服务 http协议 使用 ws var socket = new WebSocket("wss://xxxxxxxxxxxxxxxxx"); // 服务器长链接路径 // 建立 web socket 连接成功触发事件 socket.onopen =function (e) { console.log("连接成功opened", e); }; // 接收服务端数据时触发事件 var that =this socket.onme.
2020-08-28 15:14:48
1709
4
原创 前端之回流（Reflow）与重绘（Repaint）
回流：当我们对 DOM 的修改引发了 DOM 几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性（其他元素的几何属性和位置也会因此受到影响），然后再将计算的结果绘制出来。这个过程就是回流（也叫重排）。重绘：当我们对 DOM 的修改导致了样式的变化、却并未影响其几何属性（比如修改了颜色或背景色）时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式（跳过了上图所示的回流环节）。这个过程叫做重绘。由此我们可以看出，重绘不一定导致回流，回流一定会导致重绘。硬要比较的
2020-07-21 17:43:29
920
原创 前端vue组件间通信六种方式（完整版）
方法一、props/$emit 父组件home通过props的方式向子组件About传递， 子组件 向 父组件传值 通过在 子组组件中$emit, 父组件 组件中 v-on 的方式实现一 父组件向子组件传值接下来我们通过一个例子，说明父组件如何向子组件传递值：在子组件About组件中如何获取父组件 home中的数据 users//home.vue父组件<template> <div id="app"> <About:users="users" >
2020-07-10 15:38:45
1639
2
原创 Websocket的简单实现
直接贴代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> &l
2020-06-19 18:58:04
197
原创 JS是单线程，js的同步和异步
1.JS是单线程的所以JS中的代码都是串行的, 前面没有执行完毕后面不能执行2.同步代码和异步代码除了"事件绑定的函数"和"回调函数"以外的都是同步代码1，程序运行会从上至下依次执行所有的同步代码2，在执行的过程中如果遇到异步代码会将异步代码放到事件循环中3，当所有同步代码都执行完毕后, JS会不断检测 事件循环中的异步代码是否满足条件4，一旦满足条件就执行满足条件的异步代码3.为什么JS是单线程的?avaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主
2020-06-15 16:38:16
205
原创 scrollReveal，兼容PC端和移动设备的滚动动画库
和 WOW.js 一样，scrollReveal.js 也是一款页面滚动显示动画的 JavaScript，能让页面更加有趣，更吸引用户眼球。不同的是 WOW.js 的动画只播放一次，而 scrollReveal.js 的动画可以播放一次或无限次；WOW.js 依赖 animate.css，而 scrollReveal.js 不依赖其他任何文件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF
2020-06-15 16:31:09
485
1
原创 react 初始化项目暴露隐藏的webpack配置报错。
报错如下Cannot find module '@babelt find module ‘@babel/helper-create-regexp-features-plugin’解决办法安装依赖插件即可 cnpm i @babel/corm i @babel/core @babel/preset-env -S
2020-06-11 18:38:58
713
原创 【react】babel-loader版本不一致报错
在做项目的时候出现一个问题，由于babel-loader版本号不一致报错，报错如下图:图中说：用create-react-app创建项目的时候所用到的babel-loader依赖是8.1.0版本，但是在我启动项目的node_modules下的babel-loader版本是8.0.6版本的（老项目版本低）然后不一致报错.解决：1.卸载package.json文件中的babel-loader 即npm uninstall babel-loader2.安装你用到的版本 npm install babel
2020-06-10 17:16:31
458
原创 前端JavaScript基础面试题
一，JavaScript 的数据类型都有什么？基本数据类型：String,Boolean,Number,Undefined,Null ,Symbol引用数据类型：Object(Array,Date,RegEx p,Function)二，javascript 中和=的区别是什么===会自动进行类型转换，==不会三，简述创建函数的几种方式第一种（函数声明）： function sum1(num1,num2){ return num1+num2; }第二种（函数表达式）： var sum2
2020-05-29 16:20:21
200
原创 （移动端适配）如何在vue项目中使用rem 和vw适配移动端
rem适配一、项目中安装lib-flexible 在main.js中引入lib-flexiblelib-flexible会自动在html的head中添加一个meta name="viewport"的标签，同时会自动设置html的font- size为屏幕 宽度除以10，也就是1rem等于html根节点的font-size。假如设计稿的宽度是750px，此时1rem应该 等 于75px。假如量的某个元素的宽度是150px，那么在css里面定义这个元素的宽度就是 width: 2rem第二部分：安装
2020-05-29 15:28:33
761
原创 前端css基础面试题全面解析
一 :CSS的“重置”和“规范化”有什么区别？你会选择哪个，为什么？重置 - 重置旨在去除元素上的所有默认浏览器样式。对于例如margins，paddings，font-sizes，所有元素的s被重置为相同。您必须为常见的印刷元素重新设计样式。规范化 - 规范化保留有用的默认样式而不是“取消”所有内容。它还纠正了常见浏览器依赖项的错误。当我有一个非常定制或非常规的网站设计时，我会选择重置，这样我需要做很多自己的样式，不需要保留任何默认样式二 :描述float它们以及它们如何工作?Float是
2020-05-29 15:00:03
450
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人