- 博客(28)
- 收藏
- 关注
RSS订阅原创 webpack常用基础配置的一些总结
1.webpack的概念webpack是一个流行的前端项目构建工具，可以解决目前web开发的困境。webpack提供了模块化支持，代码压缩混淆，解决js兼容问题，性能优化等特性，提高了开发效率和项目的可维护性2.webpack的基本使用A.创建项目目录并初始化创建项目，并打开项目所在目录的终端，输入命令：npm init -yB.创建首页及js文件在项目目录中创建index.html页面，并初始化页面结构：在页面中摆放一个ul，ul里面放置几个li在项目目录中创建js文件夹，并在文件夹中
2020-07-09 11:09:39
251
原创 vant里 List 组件可以与 PullRefresh 组件结合使用的一个小提示与小坑坑
小提示List 组件可以与 PullRefresh 组件结合使用，可以实现列表下拉刷新的效果，但是当下拉刷新后更新的数据展示在页面上不能撑满 List 列表中的内容的时候，他并不会主动触发列表刷新，以至于来填满列表。可以给list组件添加ref属性，然后在下拉刷新后，在下拉刷新的事件里手动调用this.$refs.listRef(你的list的ref名称).check()来触发列表加载后续的数据// list组件<van-list v-model="loading" ref
2020-07-05 09:07:14
1991
原创 前端做上传头像等裁切图片的好朋友 Cropper.js
现在不管pc端还是移动端的网页，只要有登录功能，大多会有编辑个人信息的功能，那样就避免不了上传用户个人头像。既然要上传头像，但凡正规一些的网页那肯定会需要裁切图片，不会让你直接选择一张图就放上去，那样极度影响用户体验，不利于样式的统一渲染，影响美观。我就举vue项目为例，去使用Cropper.js吧首先就是下载npm install cropperjs它要求图片必须有根元素<div> <img id="image" src="picture.jpg" ref="im
2020-06-30 15:40:38
450
原创 移动端 REM 适配(postcss-pxtorem,lib-flexible的使用)
Vant 中的样式默认使用 px 作为单位，如果需要使用 rem 单位，推荐使用以下两个工具：postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem文档：https://github.com/cuth/postcss-pxtoremlib-flexible 用于设置 rem 基准值文档：https://github.com/amfe/lib-flexible一、使用 lib-flexible 动态设置 REM 基准值（html 标签的字体大小）1、安装# y
2020-06-27 19:07:10
2254
2
原创 json-bigint的介绍和使用(可以解决Javascript的一个有关大整数的坑)
想必，很多人都遇到过关于后端返回数据中的大数字问题。明明你写的代码没有问题，然后后台的接口也没问题，但是你调用接口返回的数据就有误。JavaScript 能够准确表示的整数范围在-2^53到 2^53之间（不含两个端点），超过这个范围，无法精确表示这个值，这使得 JavaScript 不适合进行科学和金融方面的精确计算。先举个例子Math.pow(2, 53) // 90071992547409929007199254740992 // 9007199254740992900719925474
2020-06-27 15:06:59
18434
4
原创 Loadsh，一个超级nice的工具库
LodashLodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。它内部封装了诸多对字符串、数组、对象等常见数据类型的处理函数，其中部分是目前ECMAScript尚未制订的规范，但同时被业界所认可的辅助函数。官方文档：https://www.lodashjs.com/lodash的下载 npm i -g npm npm i -g lodash-cli lodash -hlodash的引用 import _ from 'lodash' /
2020-06-26 19:42:10
324
原创 使用vant的移动端REM适配方法
Vant 中的样式默认使用 px 作为单位，如果需要使用 rem 单位，推荐使用以下两个工具：postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 remlib-flexible 用于设置 rem 基准值下面我们分别将这两个工具配置到项目中完成 REM 适配。一、使用 lib-flexible 动态设置 REM 基准值（html 标签的字体大小）1、安装# yarn add amfe-flexiblenpm i amfe-flexible2、然后在 main.
2020-06-21 09:36:07
2228
1
原创 Promise,FetchAPI,Axios(当前热门) 的个人见解
PromisePromise两个常用的静态方法：all：同时处理多个Promise，等所有的Promise都返回结果后，才会拿到结果，拿到的结果是一个数组，里面包含了所有的Promise的结果，顺序和发送时一致race：同时处理多个Pormise，只要有一个Promise返回结果了，那么就会拿到这个结果，也就是说，拿到结果是最先返回的Promise的结果，注意：其他的Promise也会去执行，只不过不会拿它们的执行结果而已补充说明：实例方法，是通过new关键字创建出来的实例调用的方法静态方法
2020-06-11 19:23:14
319
1
原创 看了就懂的vue进阶(自定义指令，侦听器，过滤器，计算属性，生命周期，插槽，组件使用及互相传值)
自定义指令：bind 和 inserted 的区别bind在inserted之前bind 时父节点el.parentNode为 nullinserted 时父节点el.parentNode存在。bind是在vue编译解析dom之前调用，inserted在vue编译解析完dom后调用以后都优先用inserted，因为inserted里获取到的信息比bind中多一些在钩子函数内部可以通过第二个参数binding的value属性，获取到指令绑定的参数指令的修饰符
2020-06-11 19:09:37
541
原创 博主费劲心血写的vue基础语法及使用
Vue2.x 的版本据目前小道消息所知，3.x的版本基本语法没用变动，主要是对底层的特性重新封装内核进行升级，提高性能，语法和2.x大同小异官网：https://cn.vuejs.org/渐进式：从简单应用到复杂应用，Vue都支持，几乎可以覆盖整个项目的生命周期框架和库：这个概念在目前已经越来越淡化了，只是一个叫法而已框架：功能相对来说比较全面的，覆盖了方方面面库：功能相对来说比较单一专精，提供具体的API（Application Program Interface）应用程序接口Vue是一
2020-06-11 18:57:46
206
原创 正则表达式的介绍及使用
1.正则表达式概述1.1什么是正则表达式正则表达式（ Regular Expression ）是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象。正则表通常被用来检索、替换那些符合某个模式（规则）的文本，例如验证表单：用户名表单只能输入英文字母、数字或者下划线， 昵称输入框中可以输入中文(匹配)。此外，正则表达式还常用于过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等 。其他语言也会使用正则表达式，本阶段我们主要是利用JavaScript
2020-05-31 18:56:22
387
原创 改变函数内部this指向、严格模式、闭包、递归
1.函数的定义和调用1.1函数的定义方式方式1 函数声明方式 function 关键字 (命名函数)function fn(){}方式2 函数表达式(匿名函数)var fn = function(){}方式3 new Function()var f = new Function('a', 'b', 'console.log(a + b)');f(1, 2);var fn = new Function('参数1','参数2'..., '函数体')注意/*Function
2020-05-31 18:50:48
258
原创 ES6概念&新增语法&内置对象拓展
ES6语法ES6相关概念什么是ES6ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范。为什么使用 ES6 ?每一次标准的诞生都意味着语言的完善，功能的加强。JavaScript语言本身也有一些令人不满意的地方。变量提升特性增加了程序运行时的不可预测性语法过于松散，实现相同的功能，不同的人可能会写出不同的代码ES6新增语法letES6中新增了用于声明变量的关键字let声明的变量只在所处于的块级有效 if (true) {
2020-05-31 18:40:54
195
原创 Object.defineProperty() 的使用
Object.defineProperty方法可以给某个对象添加或修改属性，基本语法：Object.defineProperty(对象，修改或新增的属性名，{ value:修改或新增的属性的值, writable:true/false,//如果值为false 不允许修改这个属性值 enumerable: false,//enumerable 如果值为false 则不允许遍历 configurable: false //configurable 如果为false 则不允许删除这个属性 属性是
2020-05-28 09:18:58
180
原创 ES5新增方法（数组的方法、trim、Object.keys(obj)等）
数组方法：forEach方法的第一个参数是一个函数，函数的第一个参数是元素，第二个参数才是索引号，与变量名没关系，顺序是固定的不能写continue、break，return也不能终止循环，想要终止循环，可以用some方法filter方法，是用来过滤数组元素接收一个函数作为参数，这个函数的第一个形参是元素，第二个形参是索引号内部会有循环机制，每次循环都会调用函数，如果函数返回true，则保留当前循环元素，如果返回false，则剔除当前循环元素会返回一个新数组，不会影响原来的数组，我们也
2020-05-28 09:10:40
628
原创 如何自己创建npm模块并使用（案例：图片上传模块）
npm发布自己的模块常用命令注意：必须切换到npm官方镜像上nrm lsnrm use npm查看当前登录的用户npm whoami登录npm login发布npm publish --access=public注意：当版本升级的时候，版本号不能和之前一样，需要增加整体正常流程步骤注册npm账号，验证邮箱（只有验证邮箱通过后才可以发布模块）使用npm login命令登录自己的账号（注意切换到npm官方镜像上）使用npm publish --access=publ
2020-05-25 21:19:58
406
原创 对象，及数组和对象方法
1 - 对象1.1 对象的相关概念什么是对象？在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。对象是由属性和方法组成的。属性：事物的特征，在对象中用属性来表示（常用名词）方法：事物的行为，在对象中用方法来表示（常用动词）为什么需要对象？保存一个值时，可以使用变量，保存多个值（一组值）时，可以使用数组。如果要保存一个人的完整信息呢？例如，将“张三疯”的个人的信息保存在数组中的方式为： var
2020-05-25 19:30:01
806
原创 数组、函数、作用域的简介
1 - 数组1.1 数组的概念数组可以把一组相关的数据一起存放，并提供方便的访问(获取）方式。数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。1.2 创建数组JS 中创建数组有两种方式：利用 new 创建数组var 数组名 = new Array() ；var arr = new Array(); // 创建一个新的空数组注意 Array () ，A 要大写利用数组字面量创建数组//
2020-05-25 19:11:59
340
原创 js运算符、流程控制、循环的使用
1 - 运算符（操作符）1.1 运算符的分类运算符（operator）也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号。JavaScript中常用的运算符有：算数运算符递增和递减运算符比较运算符逻辑运算符赋值运算符1.2 算数运算符算术运算符概述概念：算术运算使用的符号，用于执行两个变量或值的算术运算。浮点数的精度问题浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数。var result = 0.1 + 0.2; //
2020-05-25 18:59:43
294
转载 js的初识及数据类型简介
本资源由 itjc8.com 收集1 - 编程语言1.1 编程编程：就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码，并最终得到结果的过程。计算机程序：就是计算机所执行的一系列的指令集合，而程序全部都是用我们所掌握的语言来编写的，所以人们要控制计算机一定要通过计算机语言向计算机发出命令。1.2 计算机语言计算机语言指用于人与计算机之间通讯的语言，它是人与计算机之间传递信息的媒介。计算机语言的种类非常的多，总的来说可以分成机器语言，汇编语言和高级语言三大类
2020-05-25 18:49:55
391
原创 http协议特点及针对form表单的formidable模块的使用
node 笔记8HTML中的外链：我们都知道，浏览器如果解析到外链文件，会自动发送请求，如果你的外链地址写的是相对路径，那么相对的是浏览器地址栏中的请求路径，而非当前文件，浏览器会把地址栏中的请求路径的最后一段视为文件名，也就是说，在最后一段之前的路径才是相对路径外链的起始路径既然这么复杂，我们总结一点即可规避这个问题：HTML中所有的外链，无脑写绝对路径，绝对路径就以以/开头即可HTTP协议的特点：无状态：是指协议对于事物处理没有记忆功能，也就是说，对于服务端来讲，他不关心客户端是谁，他只
2020-05-19 16:07:20
337
原创 Express框架的应用
node 笔记7Express 框架：就是一个基于Node的web应用开发框架安装：npm i express导入：const express = require('express')创建服务实例：const app = express()路由定义更简单：app.getapp.post获取请求参数更简单：get：req.querypost：req.bodyexpress中不再使用res.end方法响应客户端，取而代之的是res.send方法：res.send方法内部
2020-05-19 16:02:47
234
原创 node模板引擎的使用
node 笔记6模板语法-输出：标准语法（推荐，和后面的高级框架一致）：{{ 数据 }}原始语法：<%= 数据 %>注意：如果包含了html，默认是会转义输出的，想要原文输出，就要写成这个样子：标准语法：{{@ 数据 }}原始语法：<%- 数据 %>建议：由于标准语法在功能性上没有原始语法强大，但是为了和后面的高级框架语法保持一致，所以我们能用标准语法的搞定的就用标准语法，实在搞不定再用原始语法模板语法-条件判断：标准语法：{{ if age >
2020-05-19 16:02:01
247
原创 mongoDB的语法和使用
node 笔记5mongoose验证：在创建集合规则的时候，可以设置当前字段的验证规则，验证失败就不允许插入必填：required字符串最小长度：minlength字符串最大长度：maxlength去除字符串两边的空格：trim可以用数组的形式的第二个参数指定错误消息，如：new mongoose.Schema({ name: String, age: Number, stuNo: { type: String, required: tru
2020-05-19 16:01:00
325
原创 Promise、异步函数
node 笔记4同步API我们是可以直接用返回值获取结果的，但是异步API是不行的，异步API需要用回调函数的形式，用回调函数的形参接收返回结果console.log(1)// 同步代码在执行时，这个setTimout也会执行，只不过回调函数当前不会调用，会先推入到异步回调队列中，等达到执行条件了，就会调用setTimout(() => { console.log(2)}, 1000)console.log(3)回调地狱：指的是多个依次的异步操作，说白了就是回调函数嵌套，当嵌套层次
2020-05-19 16:00:17
275
原创 服务器的概念以及http协议
node 笔记3服务器端概念：网站的组成：客户端：用户界面，浏览器，运行着使用html、css、js编写的网站服务端（服务器的压力远比客户端高，所以一般对服务器电脑的配置要求很高）：接收请求，做出响应，处理业务逻辑和存储数据IP：是互联网中设备的唯一标识域名：就是IP地址的别名，为了方便我们记忆端口：可以理解成银行的柜台窗口编号，是我们服务器向外提供服务的口子，范围是0~65536，我们应用程序一般从3000起步URL：统一资源定位符，是标识互联网中的资源地址的编址方式一个完整的
2020-05-19 15:59:31
251
原创 node的常用第三方模块和gulp模块的使用
node 笔记2nodemon第三方模块的使用：nodemon是一个能监听到文件保存操作后自动重新执行命令的第三方命令行形式的模块全局安装：npm i -g nodemon（全局安装的模块所有项目都能用，本地安装的只有当前项目才能用）在执行js文件的时候，就可以用nodemon命令代替之前的node命令，如：nodemon index.js，这个命令会让命令行挂起，想要退出挂起，可以按ctrl + c（如果有退出确认提示，输入一个y再回车）即可gulp：gulp是一个基于node开发的前
2020-05-19 15:58:32
187
原创 node的粗略介绍和下载
node 笔记1node 属于后端开发，node 很牛x，作为前端开发人员，node 是进入后端开发的最快途径node 不是一门语言，它是一个 JS 运行环境而已，类似浏览器一样官网：https://nodejs.org/en我们一般下载LTS版本，也就是最新稳定版，这里注意下载与自己电脑匹配的安装文件，window的x86是32位系统，x64才是64为系统我们安装目录千万不要有中文，如果路径中包含中文，后续可能会有奇奇怪怪的问题安装完后，打开命令行窗口，windows用
2020-05-19 15:56:21
257
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人