![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 57
李卓书
这个作者很懒,什么都没留下…
展开
-
使用nodejs操作postgresql
4 pgsql.js postgresql用来连接数据库的配置。自己建立一个用户表users,然后随机生成一些数据即可。这里我将项目放到了gticode里,可以下载下来使用。2 package-lock.json 锁定的版本。5 server.js 依赖express的配置。1 node_modules 依赖。3 package.json 配置。然后运行npm start。原创 2023-06-28 00:01:03 · 2189 阅读 · 0 评论 -
如何保证script标签的加载顺序
本章博文主要解决script标签的加载顺序问题。原创 2023-06-21 10:49:24 · 1855 阅读 · 0 评论 -
viewerjs在vue@cli脚手架中的使用详解
文章目录需求分析使用环境分析安装options讲解需求分析项目中使用了vue脚手架,要在vue组件中使用一个图片预览的功能,提供给客户一些基本的图片预览功能,包括缩略图,放大缩小,全屏浏览等基础功能,这里看了一些轮子,有view-photo-view,viewer,js等等库;对比了,感觉项目中使用viewerjs就可以了,然后去github上看了它的readme和一些api,算是比较详细;上手比较简单,应用不复杂,价值交付性价比较高,所以选择了viewerjs;接下来,对viewerjs在项目中的学习原创 2021-07-02 09:47:57 · 742 阅读 · 0 评论 -
【精】vue中v-for循环为什么要使用key
文章目录下载源码官网说明举个例子探索本源下载源码https://vuejs.org/js/vue.js下载完源码后直接script引用,方便调试官网说明维护状态:当 Vue 正在更新使用 v-for 渲染的元素列表时,它默认使用“就地更新”的策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序,而是就地更新每个元素,并且确保它们在每个索引位置正确渲染。这个默认的模式是高效的,但是只适用于不依赖子组件状态或临时 DOM 状态 (例如:表单输入值) 的列表渲染输出。原创 2021-07-01 13:59:21 · 496 阅读 · 0 评论 -
【精】vue中computed、methods、watch的异同比较
vue中methods、computed和watch原创 2021-06-29 14:18:44 · 127 阅读 · 1 评论 -
前端console的用处总结
1 输出作用 console.log("log") console.info("info") console.warn("warn") console.error("error")2 信息分组console.group("第一组信息"); console.log("第一组第一条"); console.log("第一组第二条");console.groupEnd(); console.group("第二组信息"); console.log("第二组第一原创 2021-06-21 00:12:15 · 565 阅读 · 1 评论 -
【宇宙理论】前端的洪荒开篇
我们可以利用宇宙的框架去渐进式的理解前端javascript的相关概念。首先啊,我们知道,前端是通过浏览器的渲染机制,把一些html,css,js等文档渲染成我们人肉眼可见的相关画面。那么他的运行机理是很耐人寻味的,人们往往对一些微小的事物不可查见,那我们可以进行宏观描述。首先我们来说下环境。我们知道js,也就是我们说的javascript,是用来操作一些浏览器内容的脚本语言。使网页具有交互性。其实整个javascript脚本空间,就相当于是一个宇宙宏。从我们常见的银河系为例,里面有九大行星等物理天体原创 2021-06-18 12:48:29 · 891 阅读 · 0 评论 -
javascript数组
ES5名称描述详细内容concat()连接两个或更多的数组,并返回结果。返回一个新的数组。arrayObject.concat(arrayX,arrayX,…,arrayX)join()把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。返回一个字符串。arrayObject.join(separator)pop()pop() 方法将删除 arrayObject 的最后一个元素,把数组长度减 1,并且返回它删除的元素的值。如果数组已经为空,则 pop(原创 2021-06-14 18:31:56 · 133 阅读 · 2 评论 -
javascript字符串
ES5方法描述详细内容charAt()返回指定索引位置的字符string.charAt(index)charCodeAt()返回指定索引位置字符的 Unicode 值string.charCodeAt(index)concat()连接两个或多个字符串,返回连接后的字符串string.concat(stringX,stringX,…,stringX)fromCharCode()将 Unicode 转换为字符串String.fromCharCode(n1原创 2021-06-12 22:53:23 · 58 阅读 · 0 评论 -
jsdoc-前端文档注释利器入门教程
前端注释文档jsdoc原创 2021-06-01 11:00:16 · 266 阅读 · 0 评论 -
前端去重总结
1 循环去重var arrs = [2,3,4,2,5,6,1,1,3];function unique(arr){ var temp =[]; for(var i = 0;i<arrs.length;i++){ var item = arrs[i]; if(-1 == temp.indexOf(item)){ temp.push(item) } } return temp;原创 2021-05-31 09:58:58 · 809 阅读 · 0 评论 -
浏览器的宽高获取
认识一下浏览器这里有几个元素,我们拆分开:浏览器(不包含底边任务栏的)浏览器显示内容的,不包括浏览器中的导航栏和搜索框等的浏览器的内容区域,不包括旁边滑动栏的浏览器的内容可视区域,不包括旁边滑动栏的以及需要下滑的内容区域的其实归根结底,就两个元素我们比较在意:width 和 height;后面的所有只不过是加前缀而已那么,我们需要重新认识几个元素1 html看图片左下角,html = 1903*2015所以 html是不包括滑动栏的内容区域,它的高是包括下面没有显示出的内原创 2021-05-28 10:49:25 · 479 阅读 · 0 评论 -
前端监听dom元素在浏览器改变时的自适应问题
问题描述在写vue的过程中,我们有一个固定的表头,在浏览器上面,大小为20px,然后下面是一个div,高度总是铺满屏幕的,显然设置为高度100%是不可取的;会有一个20px的下移。解决办法1 显然用setInterval去实时的获取dom元素的高度是可行的,但是在体验上是不好的。2 在浏览器大小变化时,获取dom元素;这时通过$(selector).width这种方法,或者原生的方法去获取,总是获取的变化前的宽高,也是行不通的。不过这个时候可以这样去获取dom变化后的宽高: $(window)原创 2021-05-28 09:17:15 · 539 阅读 · 1 评论 -
前端监听dom元素改变后的尺寸获取
说明在vue中,要获取dom元素的高度当窗口尺寸变化后;由于直接用resize等方法去监听,获取的dom元素都是改变前的;所以产生了这个需求。解决办法ResizeObservermounted() { this.observer = new ResizeObserver(entries=>{ console.log(entries); }) this.observer.observe($("#overlinebywind")[0]);原创 2021-05-25 10:03:15 · 595 阅读 · 0 评论 -
原型、原型链的应用以及this的指向问题
文章目录说明原型说明由于在前端越来越深入,碰到了很多实际上需要通过原型及原型链解决的问题,以及this指向的问题;在这里在复习一下。前面也写过有关原型及原型链的文章https://blog.csdn.net/wangbiao9292/article/details/90674841https://blog.csdn.net/wangbiao9292/article/details/91039724我会在这两篇文章的基础上,在做一步深化。原型...原创 2021-05-20 11:37:37 · 264 阅读 · 0 评论 -
vue3.x全局引入element-ui
参考地址:https://element-plus.gitee.io/#/zh-CN/component/installationnpm install element-plus --saveimport { createApp } from 'vue'import ElementPlus from 'element-plus';import 'element-plus/lib/theme-chalk/index.css';import App from './App.vue';const原创 2021-05-19 10:53:21 · 1736 阅读 · 4 评论 -
vue3.x全局引入echarts5.x
echarts5和4有一些区别打开之后查看:引用 ECharts去除 default exports 的支持如果使用者在 v4 中这样引用了 echarts:import echarts from 'echarts';// 或者按需引入import echarts from 'echarts/lib/echarts';这两种方式,v5 中不再支持了。使用者需要如下更改代码解决这个问题:import * as echarts from 'echarts';// 按需引入impor原创 2021-05-19 10:42:52 · 2815 阅读 · 1 评论 -
前端节流防抖学习2--节流
上面说了防抖的,收获很多,在来看看节流,争取自己做出来题目:有时候,用户会用滚轮滑动页面,滑动页面后,会产生请求,但是此时的请求页面结果并不是用户想要的,很有可能用户要滑动到某一处停下来后,去看页面,但是监听用户停下来的时候去发送请求,明显会造成不良的用户体验,小明心想,那么我就隔一段时间去处理一下请求不就可以了,于是小明写了如下代码:function ajax(){ console.log("发送请求"); } var time = null;原创 2021-04-16 00:03:19 · 83 阅读 · 0 评论 -
前端节流防抖技术的学习
说明今天被问到了节流防抖技术,由于以前在项目中没有用到过,所以一脸蒙蔽;不百度都不知道是什么;思路其实问题的本质,就是多次触发后如何一次性调用的问题。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi原创 2021-04-15 22:19:53 · 128 阅读 · 0 评论 -
Vue从零单排2-CSS相关处理
css的静态资源处理静态资源的两种处理方式:在javascript被导入或者在template/css中通过相对路径被引用,这样的资源就会被webpack处理。放在public目录下,或者通过绝对路径被引用,这类资源将会直接拷贝,而不会经过webpack处理。从这里可以看出来4点要素:处理类型要素webpack处理在javascript中被导入+通过相对路径导入webpack不处理放在public中+绝对路径引用模块类型...原创 2020-11-06 00:06:00 · 103 阅读 · 0 评论 -
Vue从零单排1-vue@cli的安装与使用
说明今天心血来潮,想对vue复盘一下;也是做了一个完整的大型项目,使用了vue@cli 3.x以上版本,springboot+mybatits的后台以及各种技术,包括最新的docker技术及微服务;本身我是前端出身,所以,还是从前端,对vue进行一期知识的回顾,查漏补缺;想了想,就从vue@cli开始,至于vue的本身基础知识,我想从自己搭建一个小型项目开始慢慢回顾框架搭建...原创 2020-11-05 22:34:25 · 158 阅读 · 1 评论 -
vue:无法加载文件..
PS C:\Users\Administrator\Desktop\vuedemo> vue -vvue : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\vue.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。所在位置 行:1 字符: 1+ vue -v+ ~~~ + Ca原创 2020-11-05 21:28:17 · 497 阅读 · 0 评论 -
再探异步编程之与for循环的调用顺序
文章目录需求与研究目的什么是异步一个异步的情景带着问题来学习aynsc await学习需求与研究目的最近在项目中遇到了这样的问题;进行循环几千次的时候,渲染一个模型;由于模型渲染的比较缓慢,所以模型渲染函数是进行异步调用的;而且是异步里嵌套异步,这就导致了业务流程异常繁琐.所以在这里,想探究总结下前端对异步操作的理解.什么是异步我们在日常开发中,常碰到的异步操作如下:1 ajax服务请求,包括请求什么图片啊,数据啊…2 常见的一些回调啊,promise类的理解:个人对异步的理解还停留在表现;原创 2020-07-16 10:40:07 · 265 阅读 · 0 评论 -
ES6中的class详解及拓展
文章目录需求基本概念讲解高级概念讲解需求最近项目中,需要针对项目封装一些常用的class类,由于ES6提供了class,肯定再用模拟类写法就不太好了,所以尝鲜,对class类进行学习和研究基本概念讲解1 class理解1 在ES6中,class (类)作为对象的模板被引入,可以通过 class 关键字定义类2 class 的本质是 function3 它可以看作一个语法糖,让对象原型的写法更加清晰、更像面向对象编程的语法需要弄清楚的几个常见概念,这里我就不一一列举了,都很简单1 类定义原创 2020-06-24 11:55:14 · 467 阅读 · 0 评论 -
http总结及实践
HTTP定义1 HTTP协议(超文本传输协议)是因特网上应用最为广泛的一种网络传输协议。 是用于从万维网(WWW:World Wide Web )服务器传输超文本到本地浏览器的传送协议2 HTTP是一个基于TCP/IP通信协议来传递数据(HTML 文件, 图片文件, 查询结果等)。从上面可以得到结论:1 还是有其它协议的,只不过HTTP协议市场占有率最高2 HTTP协议可以传输数据,其实这些数据才是我们最本质的东西HTTP常见知识...原创 2020-06-09 22:54:29 · 377 阅读 · 0 评论 -
v-router全面学习
文章目录安装简单使用动态路由匹配嵌套路由编程式导航命名路由命名视图重定向和别名路由组件的传参路由守卫路由元信息过度动效数据获取滚动行为路由懒加载安装<script src="/path/to/vue.js"></script><script src="/path/to/vue-router.js"></script>npmnpm inst...原创 2020-02-10 02:46:18 · 346 阅读 · 0 评论 -
js-数组去重方法兼思想详解
前言数组去重方法繁多,今日项目中偶有小用,决定参略一二,以备他用方法构建var list=["老王","老王","老王","老李","老王","老王","老李","老王","小三","小三","老王"];我们的目标就是将上面的数组去重想法:数组去重的本质就是对比然后作用于相同元素或者不同元素,从而达到自己的目的方法列举:1.不构建新数组function derepeat(li...原创 2019-05-21 17:45:05 · 310 阅读 · 0 评论 -
javascript之数组常用操作
前言今天做项目,遇到一个需求,在data:_data数据格式里,_data要求是一个json数组;简单的说,我希望_data的数据格式如下:_data:[{"name":"国1","icon":"circle"},{"name":"国2","icon":"circle"},{"name":"国3","icon":"circle"},{"name":"国4","icon":"circle...原创 2019-05-22 11:39:42 · 158 阅读 · 0 评论 -
史上最全js原型/原型链,面向对象编程讲解
前言本少观过诸多视频和文章,奈何使用频率少之又少,每次一到用处,发现忘的一干二净.然后又重头温习,记得笔记也丢三落四,找不到;所以存到网上,方便以后查询.这里吐槽一句,很多文章以偏概全,不得要领,实在让我头皮发麻.还是自己写一篇全文记载,美滋滋.场景模拟俗话说,好的解决方法,都是由于碰到了问题.没有问题的理论讲解,都是赤裸裸的耍流氓.讲解问题没有场景模拟,都是凑不要脸.那么看下,是哪些问题让...原创 2019-05-31 10:32:17 · 2929 阅读 · 1 评论 -
js立即执行函数和链式编程以及面向对象的思考
前言需要弄清的几个问题:1.为什么要有new关键词的诞生2.为什么使用立即执行函数3.链式编程(可能会涉及到闭包)4.立即执行函数和构造函数及原型写法的好处5.风格确立1 new 关键词的诞生我们先来回顾下,js中函数的写法1 声明式function add(x,y){return x+y};2 表达式var z=function(x,y){return x+y};3 匿...原创 2019-06-06 14:14:26 · 213 阅读 · 0 评论 -
cesium--3d-tiles译文[官方]
前言3d-tiles文件是cesium官方和开源社区发布的专用格式.要想深刻体会,还的看官方原文档.借此机会翻译,以便日后查用.译文3d tiles 格式规范 2018年6月6日 版本1.0...翻译 2019-06-20 16:25:34 · 5564 阅读 · 0 评论 -
关于js/jq对动态创建元素获取不到的问题分析讨论及扩展
问题最近在项目中遇到了这样一个问题:我需要动态改变一个div的class,改变他的样式,但是每一个class都需要绑定一个函数动作,但是通过增加删除class后就获取不到这个元素了问题复现html<body> <div class="cl1"></div></body>css.cl1{ widt...原创 2019-06-05 09:11:32 · 2937 阅读 · 0 评论 -
Cesium--Property机制中的CallbackProperty理解与回调函数闭包的试探性理解
闭包,回调函数,CallbackProperty原创 2019-07-08 17:01:15 · 10666 阅读 · 7 评论 -
javascript中call,apply,bind的详细攻略
call,apply,bind讲解call,apply和bind是为了解决this的指向问题;问题复现:有一个对象–人,我需要获取到这个人的身高;通过上面例子,我们可以看到,第一个this–>person;第二个this–>window;所以当我们返回this.height的时候,是找不到person的height属性的;为了解决这个问题;我们可以这样写:这样就改变了th...原创 2019-07-04 14:29:48 · 121 阅读 · 0 评论 -
body里面禁止右键功能
代码功能οncοntextmenu=“return false”禁止鼠标右键onselectstart=“reture false”禁止选中内容οndragstart=“return false”禁止拖放内容οncοpy=document.selection.empty()禁止拷贝内容οncοpy=“return false”禁止复制...原创 2019-07-31 15:51:01 · 597 阅读 · 0 评论 -
@vue/cli(vue-cli 3.0)框架搭建并整合cesium
vue-cli 3.x整合cesuim超详细攻略及解释原创 2019-08-08 15:22:54 · 4666 阅读 · 2 评论 -
搭建vue框架
版本选择node v10.15.1npm v6.4.1vue v2.9.6cnpm 6.1.0安装vue-cli1.全局安装安装命令作用$ npm install vue-cli -g安装2.x的vue-cli脚手架$ npm install -g @vue/cli安装的3.x的vue-cli脚手架2.创建webpack...原创 2019-08-06 14:26:06 · 177 阅读 · 0 评论 -
javascript/jquery对Iframe的操作详解
前言及注意事项背景:在网上查阅了诸多相关介绍,大凡错误连篇或者是不能直达痛处;所以痛定思痛,自己写一篇相关记录,以备查用注意事项父页面调用子页面元素时,需要注意子页面是否加载完成,否则报错测试结构说明创建两个测试页面,iframe1.html和iframe2.html内容分别如下:iframe1.htmliframe2.html总结及归纳1.无论是父页面调用子页面,...原创 2019-05-21 10:36:12 · 1942 阅读 · 0 评论