前端学习
文章平均质量分 80
从前端基础知识开始学习,记录学习的知识和自己的理解。
shakalaca
这个作者很懒,什么都没留下…
展开
-
小程序使用getUserInfo获取用户信息失败
1.使用getUserInfo wx.getUserInfo({ success: (res) => { console.log(res); this.setData({ userInfo: res.userInfo }) }, fail: (err) => { console.log(err); } }) },获取得到的信息:也就是不能获取用原创 2022-04-23 22:02:20 · 11171 阅读 · 0 评论 -
freeCodeCamp的JS数据结构五道算法(一)
1. 回文检查器如果传入的字符串是回文字符串,则返回 true。 否则返回 false回文 palindrome,指在忽略标点符号、大小写和空格的前提下,正着读和反着读一模一样。注意:检查回文时,你需要先去除所有非字母数字的字符(标点、空格和符号),并将所有字母都转换成大写或都转换成小写。我们会传入具有不同格式的字符串,如 racecar、RaceCar 和 race CAR 等等。我们也会传入一些包含特殊符号的字符串,例如 2A33a2、2A3 3a2、2_A33#A2。1.1 想法已原创 2022-04-18 20:50:29 · 586 阅读 · 0 评论 -
JS算法(三)
1.爬楼梯1.思想2.JS代码2.爬楼梯2.1 思想2.2 JS代码3.爬楼梯3.1 思想3.2 JS代码4.爬楼梯4.1 思想4.2 JS代码5.爬楼梯5.1 思想5.2 JS代码6.爬楼梯6.1 思想6.2 JS代码7.爬楼梯7.1 思想7.2 JS代码8.爬楼梯8.1 思想8.2 JS代码9.爬楼梯9.1 思想9.2 JS代码10.爬楼梯10.1 思想10.2 JS代码...原创 2022-04-10 18:15:18 · 1308 阅读 · 0 评论 -
NodeJS(四)Express 接口实例
系列文章目录NodeJS(三)Express 实践文章目录系列文章目录前言一、Express 接口实例1.1 创建基本的服务器1.2 创建 API 路由模块1.3 编写 POST 接口1.4 编写 GET 接口二、CORS 跨域资源共享2.1 接口的跨域问题2.2 什么是 CORS2.3 CORS 的注意事项2.4 使用 cors 中间件解决跨域问题前言前面已经了解了 Express 的创建web服务器的基本方法,今天来进行接口实例的编写。一、Express 接口实例1.1 创建基本的服原创 2022-04-08 15:26:47 · 1389 阅读 · 0 评论 -
NodeJS(三)Express 实践
系列文章目录NodeJS(三)path+http 模块实践文章目录系列文章目录一、什么是 Express1.1 Express的概念1.2 为什么有了HTTP模块还要用Express ?二、 Express 的基本使用2.1 创建基本的 Web 服务器总结一、什么是 Express1.1 Express的概念官方的概念:Express 是基于 Node.js 平台,快速、开放、极简的 Web 开发框架。通俗的理解:Express 的作用和 Node.js 内置的 http 模块类似,是专门用原创 2022-04-07 20:27:51 · 346 阅读 · 0 评论 -
NodeJS(三)path+http 模块实践
系列文章目录NodeJS(二)预备知识+fs 实战文章目录系列文章目录前言一、path模块1.1 回顾相对类路径的使用1.1.1 相对类路径的使用方法1.1.2 相对类路径出现的问题1.2 什么是 path 路径模块?1.3 path 路径模块的使用1.3.1 path 路径模块的导入1.3.2 路径拼接1.3.3 获取路径中的文件名1.3.4 获取路径中的文件扩展名二、http 模块1. 回顾什么是客户端、什么是服务器?2. 什么是 http 模块?3. 创建 web 服务器3.1 创原创 2022-04-07 15:46:42 · 343 阅读 · 0 评论 -
NodeJS(二)预备知识+fs 实战
系列文章目录NodeJS(一)通俗理解 NodeJS文章目录系列文章目录前言一、工欲善其事必先利其器1.1 Node.js 环境的安装1.2 明确Node.js 的学习路径二、预备知识2.1 命令行终端命令:2.2 Node 文件基础2.2.1包(package)2.3 JS 语法知识基础2.3.1 模块化2.3.2 模块的引用2.3.2模块的定义2.3.3 模块的标识三、 fs 实战3.1 什么是 fs 文件系统模块3.2 fs 文件系统模块的使用3.2.1 导入 fs 模块,来操作文件3.2.原创 2022-04-07 13:47:00 · 890 阅读 · 0 评论 -
NodeJS(一)通俗理解 NodeJS
文章目录前言一、nodeJS是什么?二、nodeJS之前的主流是什么?三、为什么要用nodeJS?总结前言nodeJS一、nodeJS是什么?Node.js 是一个基于 V8 JavaScript 引擎构建的 JavaScript 运行时(runtime)。官网:http://nodejs.cn/也可以理解为用JavaScript写的服务端平台,能运行在服务端的框架。二、nodeJS之前的主流是什么?NodeJS是近年来比较火的,这一方面得益于其在后端处理高并发的卓越性能,另一方面在no原创 2022-04-06 19:53:13 · 9203 阅读 · 0 评论 -
webpack构建项目(四)webpack六大配置模块
系列文章目录webpack构建项目(三)性能优化文章目录系列文章目录前言一、entry二、output三、module四、resolve五、devServer六、optimization总结前言前面已经大致学习了webpack并且已经有了一定的实战经验,下面来深入理解 webpack的五大核心概念。一、entry单入口打包形成一个chunk。 输出一个bundle文件。此时chunk的名称默认是 main `entry:'./src/index.js'`多入口所有入口原创 2022-04-05 19:56:30 · 844 阅读 · 1 评论 -
webpack构建项目(三)性能优化
系列文章目录webpack构建项目(一)框架搭建webpack构建项目(二)打包实战文章目录系列文章目录前言接下来会一个个的去介绍这些方法一、开发环境性能优化1.1 优化打包构建速度1.1.1 HMR1.2 优化代码调试1.2.1 source-map二、生产环境性能优化2.1 优化代码运行2.1.1 文件资源缓存2.1.2 code split2.1 .3 懒加载 与 预加载2.1.4 PWA2.1 .5 tree shaking2.2 优化打包构建速度2.2.1 oneOf2.2.2原创 2022-04-05 19:13:08 · 692 阅读 · 0 评论 -
webpack构建项目(二)打包实战
1.准备工作1.1初始化package.jsonnpm init1.2下载命令行工具npm install webpack webpack-cli -gnpm install webpack webpack-cli -D1.3 创建文件1 ) build文件夹2 ) src文件夹:创建入口文件 index.js3 )package.json配置webpack“dev”: “webpack-dev-server” // script节点下的脚本,可以通过 npm run 执行原创 2022-04-05 16:11:48 · 695 阅读 · 0 评论 -
webpack构建项目(一)框架搭建
0. 准备工作1 )Windows 操作系统2 )下载nodejs环境 (官网 :https://nodejs.org/zh-cn/)3 )淘宝镜像源 (控制台执行命令:npm install -g cnpm --registry=https://registry.npm.taobao.org)4 )VScode编码环境1.新建工程1.1 打开VScode 新建文件夹WebpackTemp,在控制台执行npm init -y生成默认 package.json 配置文件;(package原创 2022-04-05 11:12:55 · 675 阅读 · 0 评论 -
浅谈axios
1. 预备知识1.1 前后台交互的基本过程前台应用从浏览器向服务器发送HTTP请求(请求报文)。后台服务器接收到请求,并调度应用处理请求,像浏览器返回HTTP响应(响应报文)浏览器接收到响应,解析显示响应体。1.2 HTTP请求报文2. 什么是axios?前端最流行的ajax请求库.文档:http://www.axios-js.com/zh-cn/docs/2.1 axios的特点基于promise的封装XHR的异步ajax请求库浏览器端/node端都可以使用支持请求/响应拦截原创 2022-04-04 22:25:34 · 2362 阅读 · 0 评论 -
浅谈Ajax
1. 什么是Ajax(Asynchronous Javascript and XML)?略答:一种更新网页的技术。简答:在无需重新加载整个网页的情况下,能够更新部分网页的技术。通俗易懂的说:就是没用AJAX技术的网页,你点一个按钮就要刷新整个页面,尽管新页面上只有一行字和当前页面不一样,但你还是等待页面刷新。用了AJAX之后,你点击,只有需要更新的部分刷新,不用整个页面刷。1.1 Ajax全称Ajax全称: Asynchronous Javascript and XML ,即异步的JS和XM原创 2022-04-04 19:52:22 · 685 阅读 · 0 评论 -
async和await
1.async函数1.1 async函数概述async函数是使用async关键字声明的函数。async函数是AsyncFunction构造函数的实例, 并且其中允许使用await关键字。async和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为,而无需刻意地链式调用promise。async函数还可以被作为表达式来定义。1.2 async函数语法async function name([param[, param[, ... param]]]) { sta原创 2022-04-04 16:58:47 · 740 阅读 · 0 评论 -
ES6的promise(期约)
1. promise(期约)是什么?一种异步程序执行的机制。ECMAScript 6 新增的引用类型 Promise,可以通过 new 操作符来实例化。创建新期约时需要传入执行器(executor)函数作为参数。1.1 promise状态1.1.1 promise的状态是私有的promise的状态是私有的,不能直接通过 JavaScript 检测到,也不能被外部 JavaScript 代码修改。这主要是为了避免根据读取到的promise状态,以同步方式处理promise对象。promise故原创 2022-04-04 14:41:20 · 376 阅读 · 0 评论 -
跨域的几种方案
文章目录1. 跨域1.1什么是跨域?1.2为什么跨不过去?1.3跨域原理2.跨域的方法2.1 JSONP2.1.1 实现原理2.1.2 实现代码2.1.3缺点2.2 document.domain + iframe跨域2.2.1 实现原理2.2.2 实现代码2.2.3 缺点2.3 window.name2.3.1 实现原理2.3.2 实现代码2.4 CORS2.4.1 实现原理2.4.2 实现代码2.5 proxy代理2.5.1 实现原理2.5.2 实现代码2.6 WebSocket protocol2.6原创 2022-04-02 23:59:20 · 1243 阅读 · 0 评论 -
通俗易懂理解TCP/IP和UDP
1.TCP三次握手第一次握手:建立连接时,客户端发送syn包(syn=j)到服务器,并进入SYN_SENT状态,等待服务器确认;SYN:同步序列编号(Synchronize Sequence Numbers)。第二次握手:服务器收到syn包并确认客户的SYN(ack=j+1),同时也发送一个自己的SYN包(syn=k),即SYN+ACK包,此时服务器进入SYN_RECV状态;第三次握手:客户端收到服务器的SYN+ACK包,向服务器发送确认包ACK(ack=k+1),此包发送完毕,客户端和服务器进入E原创 2022-04-01 23:13:47 · 2703 阅读 · 0 评论 -
JS算法(二)
1.爬楼梯1.思想2.JS代码var climbStairs = function(n) { let dp = []; dp[0] = 0,dp[1] = 1,dp[2] = 2; for(let i = 3;i <= n;i++){ dp[i] = dp[i-2] + dp[i-1]; } return dp[n];};2.爬楼梯2.1 思想2.2 JS代码3.爬楼梯3.1 思想3.2 JS代码4.爬楼梯4.1 思想原创 2022-03-29 17:21:07 · 1458 阅读 · 0 评论 -
node : 无法将“node”项识别为 cmdlet、函数、脚本文件或可运行程 序的名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后 再试一次。
1. 问题报错用vscode调试JS时出现如下错误:2. 出现原因是因为我把HTML文件误删了,导致整个JS文件里没有能进行控制台输出。但是在调试过程中,我使用了console.log() 方法。VScode 又找不到网页文件,所以报错。3. 解决方法3.1添加HTML文件3.1在HTML文件中导入js文件4.控制台运行成功s= [2, 3, 1, 0, 2, 5, 3] console.log(s); ...原创 2022-03-29 11:16:35 · 1479 阅读 · 0 评论 -
JS算法(一)求出数组、字符串中第一个只出现一次的索引及数组、字符串转换方法
1 .取字符串第一个只出现一次的字母//取a-z字符串中第一个只出现一次的字母function firstUniqueChar(arr){ var obj={}, //存储每个字母出现的次数 字母:次数 len=arr.length; for(var i=0;i<len;i++){ if(obj[arr[i]]){ obj[arr[i]]++; //存在次数+1 } else {原创 2022-03-28 19:33:55 · 912 阅读 · 0 评论 -
前端学习之vue+element-ui电商项目(十)echarts数据图表
文章目录0. 准备工作1.搜索与添加1.1 界面样式1.2 数据添加1.3 方法实现2.搜索与添加2.1 界面样式2.2 数据添加2.3 方法实现3.搜索与添加3.1 界面样式3.2 数据添加3.3 方法实现4.搜索与添加4.1 界面样式4.2 数据添加4.3 方法实现5.搜索与添加5.1 界面样式5.2 数据添加5.3 方法实现6.搜索与添加6.1 界面样式6.2 数据添加6.3 方法实现7.搜索与添加7.1 界面样式7.2 数据添加7.3 方法实现0. 准备工作component下新建文件夹powe原创 2022-03-25 17:20:04 · 963 阅读 · 0 评论 -
前端学习之vue+element-ui电商项目(九)订单管理
文章目录0. 准备工作1.搜索与添加1.1 界面样式1.2 数据添加1.3 方法实现2.搜索与添加2.1 界面样式2.2 数据添加2.3 方法实现3.搜索与添加3.1 界面样式3.2 数据添加3.3 方法实现4.搜索与添加4.1 界面样式4.2 数据添加4.3 方法实现5.搜索与添加5.1 界面样式5.2 数据添加5.3 方法实现6.搜索与添加6.1 界面样式6.2 数据添加6.3 方法实现7.搜索与添加7.1 界面样式7.2 数据添加7.3 方法实现0. 准备工作component下新建文件夹powe原创 2022-03-25 17:10:29 · 2387 阅读 · 0 评论 -
前端学习之vue+element-ui电商项目(八)商品信息添加
文章目录0. 准备工作1.搜索与添加1.1 界面样式1.2 数据添加1.3 方法实现2.搜索与添加2.1 界面样式2.2 数据添加2.3 方法实现3.搜索与添加3.1 界面样式3.2 数据添加3.3 方法实现4.搜索与添加4.1 界面样式4.2 数据添加4.3 方法实现5.搜索与添加5.1 界面样式5.2 数据添加5.3 方法实现6.搜索与添加6.1 界面样式6.2 数据添加6.3 方法实现7.搜索与添加7.1 界面样式7.2 数据添加7.3 方法实现0. 准备工作component下新建文件夹powe原创 2022-03-25 16:47:13 · 3159 阅读 · 0 评论 -
前端学习之vue+element-ui电商项目(七)商品分类
文章目录0. 准备工作1.搜索与添加1.1 界面样式1.2 数据添加1.3 方法实现2.搜索与添加2.1 界面样式2.2 数据添加2.3 方法实现3.搜索与添加3.1 界面样式3.2 数据添加3.3 方法实现0. 准备工作component下新建文件夹power下新建文件Roles.vue,并在路由中引入文件1.搜索与添加1.1 界面样式1.2 数据添加1.3 方法实现2.搜索与添加2.1 界面样式2.2 数据添加2.3 方法实现3.搜索与添加3.1 界面样式3.2 数据添加3.原创 2022-03-25 16:02:19 · 2411 阅读 · 0 评论 -
前端学习之vue+element-ui电商项目(六)分类参数
文章目录0. 准备工作1.搜索与添加1.1 界面样式1.2 数据添加1.3 方法实现2.搜索与添加2.1 界面样式2.2 数据添加2.3 方法实现3.搜索与添加3.1 界面样式3.2 数据添加3.3 方法实现0. 准备工作component下新建文件夹power下新建文件Roles.vue,并在路由中引入文件1.搜索与添加1.1 界面样式1.2 数据添加1.3 方法实现2.搜索与添加2.1 界面样式2.2 数据添加2.3 方法实现3.搜索与添加3.1 界面样式3.2 数据添加3.原创 2022-03-25 15:31:42 · 332 阅读 · 0 评论 -
前端学习之vue+element-ui电商项目(五)商品列表
文章目录0. 准备工作1.搜索与添加1.1 界面样式1.2 数据添加1.3 方法实现2.搜索与添加2.1 界面样式2.2 数据添加2.3 方法实现3.搜索与添加3.1 界面样式3.2 数据添加3.3 方法实现0. 准备工作component下新建文件夹power下新建文件Roles.vue,并在路由中引入文件1.搜索与添加1.1 界面样式1.2 数据添加1.3 方法实现2.搜索与添加2.1 界面样式2.2 数据添加2.3 方法实现3.搜索与添加3.1 界面样式3.2 数据添加3.原创 2022-03-25 15:06:09 · 2407 阅读 · 0 评论 -
前端学习之vue+element-ui电商项目(四)角色列表
文章目录0. 准备工作1.界面布局1.1 导航界面样式2.角色界面卡片试图2.1 界面样式2.2 数据添加2.3 方法实现3.添加角色的对话框3.1 界面样式3.2 数据添加3.3 方法实现4.修改用户的对话框4.1 界面样式4.2 数据添加4.3 方法实现5.分配权限的对话框5.1 界面样式5.2 数据添加5.3 方法实现6 展示0. 准备工作component下新建文件夹power下新建文件Roles.vue,并在路由中引入文件1.界面布局1.1 导航界面样式 <!-- 面包屑导航区域原创 2022-03-25 14:11:26 · 765 阅读 · 0 评论 -
前端学习之vue+element-ui电商项目(三)权限管理
文章目录0. 准备工作1.页面布局1.1 界面样式2.导航布局3.卡片视图3.1 界面样式3.2 数据添加3.3 方法实现0. 准备工作component下新建文件Rights.vue,并在路由中引入文件1.页面布局1.1 界面样式2.导航布局<el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ path: '/home'}">首页</e原创 2022-03-25 13:44:58 · 1422 阅读 · 0 评论 -
报错:error Component name “XX“ should always be multi-word &&[vue-router] uncaught error during route
文章目录1.error Component name "XX" should always be multi-word2.[vue-router] uncaught error during route 、RangeError: Maximum call stack size exceeded1.error Component name “XX” should always be multi-word当Vue项目中的组件不是多单词组成时,会被eslint语法严格的检测到,并报错。如下:要解决这个原创 2022-03-21 17:25:56 · 1439 阅读 · 0 评论 -
JS数组打平的三种方法
ECMAScript在Array.prototype上增加了:两个方法flat(),flatMap()。在没有这两个方法之前,打平数组就要用迭代或者递归的方法如下示例:function flatten(sourceArray, flattenedArray = []){}原创 2022-03-21 00:48:42 · 2716 阅读 · 0 评论 -
前端学习之Javascript基础(四)
文章目录**1.arguments对象及其应用****2.事件捕获、事件冒泡、事件委托(代理)****3.什么是栈什么是堆,它们之间的区别和联系**1.arguments对象及其应用概念:函数内置的一个类数组对象,存储了所有实参。1.形参只提供便利,但不是必须的2.arguments的length由实参个数决定3.每个实参与arguments[i]一一对应4.arguments与形参访问的内存空间是独立的2.事件捕获、事件冒泡、事件委托(代理)事件捕获:当一个事件触发后,从window对象原创 2022-03-17 00:37:55 · 794 阅读 · 0 评论 -
理解JS中【call、bind、aplly】
文章目录1.复习JS 中 this 的五种情况2.apply,call,bind三者存在意义3.apply,call,bind三者的使用4.apply,call,bind三者的区别1.复习JS 中 this 的五种情况1)作为普通函数执行时,this指向window。2)当函数作为对象的方法被调用时,this就会指向该对象。3)构造器调用,this指向返回的这个对象。4)箭头函数 箭头函数的this绑定看的是this所在函数定义在哪个对象下,就绑定哪个对象。如果有嵌套的情况,则this绑定到最近的原创 2022-03-15 15:58:07 · 822 阅读 · 0 评论 -
前端学习之浏览器缓存
文章目录1浏览器缓存1.1缓存的目的1.2浏览器缓存机制1.2浏览器缓存大小2.浏览器缓存机制2.1浏览器缓存机制2.2常说的浏览器缓存机制2.3 HTTP Cache3.相关API:1浏览器缓存浏览器缓存是为了提升页面访问的速度,浏览器对一些已经访问过的网络资源(JS、css、image等等)会先存储在本地磁盘,当浏览器需要再次引用这些资源的时候,从本地加载,不从网络请求。1.1缓存的目的提升页面访问的速度,提升用户访问网站的体验。1.2浏览器缓存机制浏览器第一次访问网站的时候,会原创 2022-03-14 15:21:00 · 2238 阅读 · 0 评论 -
前端学习之vue实战[github搜索]
Vue实战:搜索github用户1.vue脚手架的两种配置代理服务器2.github搜索代码2.1 index.html:2.2App.vue2.3ListUsers.vue2.4searchGit.vue2.5 Bootstrap v3.3.53.效果展示4.总结4.1vue项目的两个Ajax库:1.vue脚手架的两种配置代理服务器[github搜索]是vue脚手架配置代理服务器的应用,先来复习vue脚手架的两种配置代理服务器的方法:方法一:在vue.config.js中添加如下配置:devS原创 2022-03-13 19:30:39 · 274 阅读 · 0 评论 -
前端学习--vue框架基础知识(二)
文章目录1 .为什么data是个函数并且返回一个对象呢?2.组件之间的传值方式有哪些?3.vue等单页面应用优缺点4. vuex是什么5.slot插槽1 .为什么data是个函数并且返回一个对象呢?一个组件被复用多次的话,也就会创建多个实例。本质上,这些实例用的都是同一个构造函数。如果data是对象的话,对象属于引用类型,会影响到所有的实例。所以为了保证组件不同的实例之间data不冲突,data必须是一个函数。一个组件可能会多处调用,而每一次调用就会执行data函数并返回新的数据对象,可以避免多处原创 2022-03-12 18:56:46 · 1326 阅读 · 0 评论 -
前端学习--vue框架基础知识(一)
1.对于MVVM的理解MVVM是model-view-viewModel的缩写。model代表的是数据模型,可以定义数据的修改和操作业务逻辑。view代表的是ui组件,可以将数据模型转化ui展现出来。viewModel可以操作数据模型,处理用户交互等。它是将model和view连接起来的一个对象,view和model本身是没有任何联系的。但model和viewmodel之间交互式双向的,所以view的改变会反应到model上,而model的改变也会反应到view上。JS是操作D原创 2022-03-11 21:32:17 · 1529 阅读 · 0 评论 -
VUE小案例---todolist
文章目录1. 模块拆分![在这里插入图片描述](https://img-blog.csdnimg.cn/e6764c9f72444133ad19f131e2cfc866.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUmVhZHkgdG8gZ28=,size_20,color_FFFFFF,t_70,g_se,x_16)2.静态页面搭建1.案例目录2.主页 index.html3.main.js4.A原创 2022-03-11 16:29:57 · 3319 阅读 · 0 评论 -
前端学习之Javascript基础(三)
1.arguments对象及其应用概念:函数内置的一个类数组对象,存储了所有实参。1.形参只提供便利,但不是必须的2.arguments的length由实参个数决定3.每个实参与arguments[i]一一对应4.arguments与形参访问的内存空间是独立的2.事件捕获、事件冒泡、事件委托(代理)事件捕获:当一个事件触发后,从window对象触发,不断经过下级节点,直到目标节点。这过程就是捕获阶段,所有经过的节点,都会触发对应事件。事件冒泡:当事件达到目标节点后,会沿捕获阶段的路线原路返原创 2022-03-10 22:06:09 · 433 阅读 · 0 评论 -
前端学习之Javascript基础(二)
1.介绍JS的基本数据类型Undefined、Null、Number、String、Boolean, es6新增Symbol基本数据类型是按值访问的,可以直接操作保存在变量中的实际值2.JS有哪些内置对象object是js中所有对象的父对象数据封装类对象:Object Array Boolean Number String其他对象 Function Arguments Math Date Error RegExp3.JS有几种类型的值原始数据类型(Number(数字),原创 2022-03-09 22:21:26 · 193 阅读 · 0 评论