- 博客(59)
- 收藏
- 关注
RSS订阅原创 前端通过Axios获取后台的二进制数据流，进行64进行转换，并在网页上进行显示。
前端通过Axios获取后台的二进制数据流，进行64进行转换，并在网页上进行显示。
2022-08-11 16:44:51
2385
1
原创 Node.js web常用技术-JWT
1、和浏览器本身是没有关系，是凭空生成的（更安全），和session/cookie不一样（浏览器自带的，可以进行管理）。2、JWT在手机，浏览器、平板、桌面应用都可以使用。3、jwt只是一个令牌格式而已，你可以把它存储到cookie，也可以存储到localstorage，没有任何限制！4、session和cookie都保存在cookie。概念：jwt全称Json Web Token，强行翻译过来就是json格式的互联网令牌。它要解决的问题，就是为多种终端设备，提供统一的、安全的令牌格
2022-04-12 13:54:30
983
原创 Node.js web常用技术
状态管理（了解、后端）由于是无状态协议，为了保障安全，就需要cookie和session。它按照下面的流程来认证客户端的身份 客户端登录成功后，服务器会给客户端一个出入证（令牌 token） 后续客户端的每次请求，都必须要附带这个出入证（令牌 token） cookie存基础用户名，当需要访问重要的东西，还需要再次验证登录等操作。每访问一次网站，都会给客户端一个cookie，存在客户端的卡包中（可以存放多个，可以自动出示，可以准确出示，可以自动管理，过期自动移除），是全部以键
2022-04-12 09:21:07
247
原创 Node.js 单页应用 js生成页面
前端路由的由来及作用地址栏输入URL地址，请求的要么是html页面，要么是后台的一个路由地址(或者是一个远程的路由端口数据地址)。但是，我们所有的页面全是js生成的，问题在于，比如我们就是要切换页面，但是在url地址栏现在就无法操作了。为什么不直接在前端还是使用纯html+css+js直接引用的方法，而要用纯js的控制的模式？原因：1、页面跳转无法进行传值，它是静态的，只能通过js实现。2、js是一种程序语言，控制更强，可以直接控制某个页面上的某一部分进行替换。3、如果是html页面
2022-04-12 09:03:06
952
原创 Node.js 单页应用
概念：为了提高效率和一般都会直接通过前端的静态页面进行单页应用，利用js对页面进行操作和替换跳转。步骤：1、单页应用主要在public静态文件里面。2、所有的页面显示都在index.html里面。3、引入的样式、框架都需要在index.html引入，还有一个总的main.js文件。4、把每一个页面都写成模块化放在modules里面，都是以类的方式来写，就包括页面的渲染的内容，操作的事件等。5、然后再总的main.js文件里面根据实际逻辑把每一个模块化进行实例化就.
2022-04-12 08:55:00
560
原创 Node.js 前后端分离（解决同源的第三种方法）
后端负责数据传输和业务逻辑处理，前端负责页面交互，页面效果实现。代理服务器解决跨域的第三种方式，给前端一个服务器，通过服务器去访问服务器，就不去出现同源问题，同源问题是浏览器才会触发。通过脚手架创建两个服务器，前端（frontend）和后端(server)。具体流程:1、通过电脑windowspowershell命令行运行（以管理员身份）Set-ExecutionPolicy RemoteSigned，选择全是，然后安装全局npm install express-generator -g
2022-04-12 08:17:03
1857
原创 Node.js 三层架构 和 同源策略及跨域
三层架构表示层:路由层，主要对用户的请求接受，以及数据的返回，直接和浏览器连接业务逻辑层：service层，主要负责对数据层（dao）的操作。也就是说把一些数据层的操作进行组合。数据访问层：dao层，看数据层里面有没有包含逻辑处理，直接对数据进行某个操作。流程：dao层的方法暴露给service进行处理，然后暴露给路由层进行分发处理，然后暴露给入口文件使用。同源策略及跨域数据通过异步请求的三种方式直接通过http://127.0.0.1:3000/xxxx.html就可以
2022-04-11 20:35:43
736
原创 Node.js 路由
/* 管理routers的总文件，外部直结引用此文件直结可以使用routers的所有分发管理 *//* 引入文件 */const express = require("express");const path = require("path");const createError = require('http-errors');const app = express();/* 引入用户和班级的路由 */let userRouter = require("./user");let cl.
2022-04-11 20:29:45
291
原创 Express脚手架
基于Node.js的框架（Web应用）。Express步骤：1、创建一个包（文件夹）。2、进入文件夹。3、在终端打开执行 npx express-generator（项目初始化，搭建项目框架）。4、启动应用 node ./bin/www 或者直接npm start。5、打开浏览器，在地址栏访问应用 http://127.0.0.1+端口 或者http://localhost+端口。6、修改端口号。项目结构：app.js：项目的入口文件。bin：是项目启动...
2022-04-11 20:23:42
1397
原创 Node.js mongodb（数据库）
数据库相关操作具体步骤：1、mongo打开。2、show dbs 查看所有的数据库。3、use stus使用或者新建数据库。4、db.stus.insertOne({name:"l4",age:20})新增一个。5、 db.stus.insertMany([{name:"张三",age:22},{name:"张三",age:25}])新增多个。6、 db.stus.find({name:"张三"})查找。7、> db.stus.fi...
2022-04-11 20:16:16
601
原创 Node.js 核心api
获取指定文件所在的目录console.log(__dirname);//C:\Users\11267\Desktop\学习\JS二阶段\day16\f80\2.NodeJS核心\lession获取指定文件所在的绝对路径console.log(__filename);//C:\Users\11267\Desktop\学习\JS二阶段\day16\f80\2.NodeJS核\lession\index.js获取当前文件所在的目录，绝对路径console.log(process.cwd());.
2022-04-11 20:06:44
245
原创 JavaScript mongodb（数据库）复杂值
复杂值工程化 具体见day18/note文件夹有如下数据： 用户： { loginId:"账号", //必填,唯一(索引),长度3-18,去除前后空格 loginPwd:"密码",//必填,去除前后空格,查询时不显示 name:"姓名",//必填,去除前后空格,长度2-10 age:18,//数字,默认值18 loves: ["爱好"],//数组,默认空数组 address: { //必填 province: "省份", city: "城市" }...
2022-03-31 17:41:23
1876
原创 JavaScript mongodb（数据库）简单值
数据库相关操作具体步骤：1、mongo打开。2、show dbs 查看所有的数据库。3、use stus使用或者新建数据库。4、db.stus.insertOne({name:"l4",age:20})新增一个。5、 db.stus.insertMany([{name:"张三",age:22},{name:"张三",age:25}])新增多个。6、 db.stus.find({name:"张三"})查找。7、> db.stus....
2022-03-31 17:33:36
2014
原创 JavaScript 案例 购物车
思路： 1、获取页面元素，本练习用的表格table实现 2、声明一个数组，包含自己需要渲染的内容，每个内容需要声明一个默认值，便于之后用来判断是否被勾选 3、封装渲染函数：通过遍历每一个元素，判断勾选状态，如果被勾选，就直接添加选中属性，没有则正常添加。 4、接着遍历元素的每一个键，并分别赋值给每一个td。 5、判断合计金额，每次遍历完成后，需要把被勾选的元素单价*数量并赋值给总价的元素。 6、最后直接渲染到页面。 7、页面的事件，...
2022-03-29 17:09:33
1909
原创 JavaScript Node.js核心API &&npm
核心api获取指定文件所在的目录console.log(__dirname);//C:\Users\11267\Desktop\学习\JS二阶段\day16\f80\2.NodeJS核心\lession获取指定文件所在的绝对路径console.log(__filename);//C:\Users\11267\Desktop\学习\JS二阶段\day16\f80\2.NodeJS核心\lession\index.js获取当前文件所在的目录，绝对路径console.log(process
2022-03-29 16:32:06
843
原创 JavaScript 服务器编程 模块化
js运行环境（运行时）浏览器node缺点：1、全局变量污染（多个js文件有相同变量时，后面会覆盖前面的，导致结果不是自己想拿到）。2、依赖管理问题（多个文件之间有联系使用时，就需要都分别引入这些文件）。服务端模块化CommonJS规范 解决以上两个缺点规范1、每个JS文件都是一个独立的模块。2、模块之前通信（使用），数据间的相互使用在js文件中暴露需要给外部使用的变量、函数等，然后再需要使用的文件中接收就可以了，具体见day11代码暴露可以给引用文件使
2022-03-23 17:22:50
881
原创 JavaScript 服务器编程 node-http
HTTP协议URI：协议：//域名+端口+资源路径或者动态数据URL:资源路径端口：3000-4000 8000-9000 提供不同的服务浏览器端（HTML CSS JS 在浏览器执行解析渲染）>服务端（node java）>数据库（DB）。node和浏览器时Js 的运行环境（运行时）。HTTP请求（get）包含：请求行请求头空行请求体：由于get方式的请求数据包含在请求行地址栏，请求体为空，在mock中获取的也是urlHTT.
2022-03-22 17:35:38
1987
原创 JavaScript 异步 AJAX
关联使用：mock：模拟数据库和服务器ajax：发送请求异步类似生活中的同步，可以同时执行多个代码。执行顺序异步代码在同步代码之后执行常见异步任务有： setTimeout() setInterval() 文件的读写（IO操作 input output） 网络请求 事件 AJAX异步 任务执行流程： 执行同步任务 如果遇到异步任务，则交给异步处理模块 异步处理模块将已处理完成的异步任
2022-03-22 11:50:58
1150
原创 JavaScript 案例 留言板
思路1、设置点击事件。点击留言按钮获取本地储存并转为数组。2、判断本地储存是否有值，如果有获取最后一个元素的id，如没有就把他赋值为一个新数组，把id值赋为1.3、在判断文本框是否有值，有值才能操作。4、调用时间函数，得到当前时间，当前用户名，以及当前内容以对象的方式存入数组。5、调用渲染函数，每次调用都把留言框的值为空，让他重新获取重新渲染。6、获取本地储存的数据数组，遍历每一个元素，就创建一个节点，赋值并添加进如节点。7、为了删除操作，需要给每个删除按钮一个自定义属性。8
2022-03-18 11:55:33
1145
1
原创 JavaScript 高级 高阶函数
满足以下任一条件的函数都被称为高阶函数： 函数可以作为参数被传递（callback）或者说接收一个或多个函数作为输入 函数可以作为返回值输出（closer） 函数是一等公民在函数提升和变量提升的部分我们已知“函数是一等公民”这个说法了，当变量提升和函数提升同时存在，函数提升会在变量提升之前。函数作为参数传递把函数当作参数传递，代表可以抽离出一部分容易变化的业务逻辑，把这部分业务逻辑放在函数参数中，这样一来可以分离业务代码中 变化 与 固定 的部分。其中一个常见的应用场景就是回
2022-03-18 11:10:43
314
原创 JavaScript 高级 柯理化
柯里化（currying）又称部分求值。一个柯里化的函数首先会接收一些参数，接收了这些参数后，该函数并不会立即求值，而是继续返回另外一个函数，刚才传入的参数在函数形成的闭包中被保存起来。待到函数被真正需要求值的时候，之前传入的所有参数都会被一次性用于求值。function print(company, department, name, age) { console.log(`我是 ${company} ${department} 部门的 ${name}，${age} 岁`);}print..
2022-03-18 11:09:02
278
原创 JavaScript 高级 深浅拷贝 && 递归
浅拷贝：类似于 let arr = [1,2],arr1 = arr，实际上拷贝是引用，新旧数组共享一个内存，一个数组中的值被修改，另一个也会改变。深拷贝：拷贝数据，新开辟内存，拷贝出的数据互不影响。深拷贝都只针对于引用数据类型。深拷贝的方法：for, for of, for in, forEach, map, filter, slice, concat, ..., string-array, JSON, new set([xxxx]), every, flat深拷贝需要考虑的问题1、考
2022-03-18 11:06:04
524
原创 JavaScript 高级 继承 && 函数高级（作用域链，执行上下文）
类与类之间发生了is关系就是继承解决代码复用关键字extendssuper/* 父类 */ class Animal{ constructor(eyes,legs,mouth){ this.eyes=eyes; this.legs=legs; this.mouth=mouth; } eat(){ ...
2022-03-18 11:04:02
131
原创 JavaScript 高级 this 案例
obj调用了say的方法，相当于就是count这个箭头函数，箭头函数本身没有指向，直接指向了全局window,变量number通过var声明，存在变量提升，就相当于window.number。obj调用了count方法，本身是一个箭头函数，没有指向，所以指向全局，但是全局并没有声明number代码由上而下，先调用zhangsan.talk，talk本身是普通函数，指向为调用的那个对象，但是里面声明了一个lisi对象，在调用talk方法，这时候的talk是个箭头函数，本身没有指向，又是...
2022-03-18 10:59:43
55
原创 JavaScript 高级 this
1、全局环境下指向全局windowconsole.log(this); // window2、普通函数中指向全局window即使是嵌套的函数， this 也是指向全局对象function fn(){ console.log(this); // window}fn();3、对象调用指向该对象看调用，谁调用指向谁let obj = { name: "zhangsan", talk(){ console.log(this); //...
2022-03-18 10:55:22
75
原创 JavaScript 高级 原型对象
函数和原型 (function & prototype)每一个函数都有一个属性 prototype，表示 "原型对象"在 JS 中对象的产生是通过原型对象而来，每一个对象，都有一个原型对象。而原型对象上面也有一个自己的原型对象，一层一层向上找，最终会到达 null对象和隐式原型 (object & __ proto __)每一个实例对象都有一个 __ proto __ 属性称为 隐式原型，指向创建该对象的构造函数的 prototype。这个属性本身也是对象。 函数的
2022-03-18 10:53:25
372
原创 JavaScript 高级 面向对象
概述一种变成范式，将问题构建关系，抽象成类，为该类定义属性和方法后，再将实例化成实例，通过访问实例的属性和调用方式来使用let arr（实列） = new（实例化） Array（类）arr.length、 arr.filter、 arr.map就是访问实例的属性，操作实例的方法类是对象的一种抽象概述，对象是类的具体实现类就是模板，用于生产多个类面向对象三大特征封装将实现功能的方法、步骤包装成一个整体-函数（随机数、登录注册）将属性和方法封闭成一个整体-对象去餐厅吃饭
2022-03-18 10:51:36
46
原创 JavaScript 中阶 JSON && 存储
JSONJavaScript Object Notation 称为JS对象标记或者JS对象表示法 道格拉斯.克罗克福特作用:json用于存储和传输数据，作为一种数据交换格式易于阅读、编写、解析和生成规范1、键和字符串必须使用双引号2、不允许使用：function、 undefined、 symbol3、允许的值：number、 boolean、 null、 array、 对象、双引号引起来的字符串后台获取到信息，传递到前台的的数据就是以JSON传递的，只是一个文本，可被任何编程语
2022-03-18 10:46:27
150
原创 JavaScript中阶 canvas
canvas · 语雀创建画布使用属性节点设置宽高，不要通过 CSS 去设置画布的大小。一个 html 中可以有多个画布。<canvas width = "500" height = "500" id = "canvas"></canvas>设置画笔canvas 不像 svg 通过 html 属性画图，而是通过 js ，步骤： 添加 canvas 元素 在 js 中获取到 canvas 元素节点 获取到上下文创建 context 对象
2022-03-17 15:52:51
1442
原创 JavaScript中阶 SVG Scalable Vector Graphics可伸缩的矢量图形
SVG · 语雀概述使用 HTML 来描述二维图形和绘图程序的语言图形被分为：位图 和 矢量图位图位图都是像素点成的优点： 色彩丰富； 图片效果逼真； 缺点： 放大缩小会导致图片失真； 矢量图由数学上一系列算法计算出的图形，通常使用于绘画几何图形。优点： 图片放大缩小不会失真。因为会动态计算图形，很适合制作地图； 可以被很多工具读取和修改，比如记事本； 与 gif、j
2022-03-17 15:47:57
136
原创 JavaScript中阶 正则表达式（RegExp）
常用 不常写https://www.jb51.net/article/76901.htm作用描述了一种字符串匹配模式，用在表单验证、搜索替换声明1、构造函数 new RegExp(规则，模式修正符)2、自面量 let reg=/规则/模式修正符模式修正符（可选）1、g 全局2、i 不用区分大小写3、m 多行匹配正则组成部分1、定界符 //2、简单字符，规定的字符，在字符串中就必须包含let reg = /a/; //看目标对象中有没有alet str
2022-03-17 15:44:29
354
原创 JavaScript中阶 表单
表单的特殊属性/标志性属性（不需要属性值，只要有属性名即可生效）在js中，属性值被布尔转为true时生效，false失效1、autofocus 自动获得焦点2、disabled 禁用3、selected 下拉列表默认选中4、readonly 只读5、multiple 下拉列表允许多选6、checked 单选框/复选框默认选中表单事件 HTML DOM 事件对象 | 菜鸟教程 事件 描述 焦点事件 onfocus 获得焦点 onblu
2022-03-17 15:42:13
337
原创 JavaScript中阶 事件
事件驱动三要素1、事件源：绑定事件的元素2、事件类型：被JS监测到的行为3、事件处理函数：记录事件发生时要进行的操作（事件句柄或者事件监听器），根据DOM级别不同，写法和功能也有所区别事件添加监听器1、DOM0级HTML事件监听器2、标准DOM0级事件监听器兼容性好，但是一个事件源只能绑定一个事件，若有两个，后面会覆盖前面<input type="button" id='btn'/><script> btn.onclick=fu...
2022-03-17 15:38:57
47
原创 JavaScript 中阶 打地鼠游戏（基础版）
思路1、先搭建整体布局样式2、由于打地鼠游戏需要用到格子类型，所以会设计到表格table的使用3、为了便于后面操作，需要把游戏中会用到的图片进行类名的命名，后面js部分就可以挂类来更改不同的表达效果4、先获取游戏中会需要到的元素5、渲染最高分数，通过本地储存的方法localStorage.getItem()，先获取本地数据，进行判断，如右数据，那最高分的元素就直接渲染这个数据，如果没有，分数则为06、设置鼠标在游戏中的变化效果，onmouseover移入，onmousedown按下和onmou
2022-03-16 17:54:41
4043
原创 JavaScript高级 函数防抖debounce
验证用户的输入，在多少时间后才做某个事情限制某一个方法的频繁触发。防止函数在极短的时间内反复调用，造成资源的浪费。调用该函数后，不立即做事，而是一段时间后去做事如果在等待时间内调用了该函数，则重新开始计时这样的功能，就叫做函数防抖，其实就是防止函数短时间内被调用多次。要完成该函数，需要给予两个条件（参数）： 告诉我一段时间后要做什么事（这里应该是一个 callback，即函数作为参数） 告诉我要等待多长时间 代码1、验证输入框的输入内容，防止函数多次调用。2
2022-03-09 08:55:16
283
原创 块级格式化上下文 BFC
全称（Block Formatting Context）一块独立的渲染区域，规定了在该区域中，常规流盒子的布局。不同的BFC区域，他们之间渲染时互不相干创建BFC时，就隔绝该区域和外部的联系，所以内部的渲染不会影响外部具体规则：1、创建BFC的元素，它的自动高度需要计算浮动的元素。父元素内部的子元素有宽高，且设置了浮动，此时父元素会高度坍塌，没有高度，此时需要给父元素设置BFC（overflow ：hidden），会自动计算子元素浮动的高度，此高度就是父元素的高度。2、创.
2022-03-08 16:35:12
47
原创 JavaScript中阶 DOM 案例 轮播图
思路1、首先设置好html和css样式2、让图片滚动 封函数便于后面调用 利用数组下标获取元素赋值给图片的src属性实现 建立数组 声明一个下标变量 让下标每一次自增，每自增一次就把该下标的元素值重新定义给图片的src路径属性，让他变化 当自增到数组的最后（最后一张图片），让其继续循环。让下标为第一个下标 需要获取下面的小圆点，遍历，让所有的样式为空，让当前的下标的点改变样式，因为原点的下边和图片的下标是一一对应的3、让图片反向滚动 自减 和滚动同理 封函数便于后...
2022-03-08 14:35:06
194
原创 JavaScript中阶 DOM 案例 双色球
思路1、先准备一个随机数函数2、封装一个可以或者获取6位红球和1位蓝球的函数，需要返出一个值，由于红球是数组，蓝球的数字，所以以数组形式返出3、在分别声明两个数组，装入红球的数组和蓝球的数字，由于都是随机数，所以可以直接声明两个数组分别为奖池数据和用户随机抽的数据4、在通过filter方法返回一个数组加.length或者相同值的新数组的长度，就表示红球中奖的个数（indexOf(item) != -1：由于两个数组有相同的元素就会返回对应的索引，如果当为-1就表示没有相同的号，就不会进入）5、声
2022-03-03 16:13:43
351
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人