前端学习总结
zhenwei zhao
这个作者很懒,什么都没留下…
展开
-
webstorm中使用nodemon
我们在使用node创建项目的时候都会生成package.json文件,但是调试这里会默认为空。之前我看过很多都是修改 Configurations,我感觉并不方便,这里我用了另外的方法。使用这种方法,无论是在webstorm中还是在vscode 都能识别到,一键执行即可。我们在webstorm中找到npm的快捷方式。我们只需要在这里填写上调试命令就行了。原创 2022-11-04 18:06:52 · 1262 阅读 · 1 评论 -
JavaScript中minio的使用
【代码】JavaScript中minio的使用。原创 2022-11-04 17:58:08 · 4846 阅读 · 2 评论 -
Multer的基本使用
【代码】Multer的基本使用。原创 2022-11-04 17:48:30 · 2526 阅读 · 1 评论 -
浅拷贝,深拷贝(实现方式)
浅拷贝和深拷贝都只针对于引用数据类型,浅拷贝只复制指向某个对象的指针,而不复制对象本身,新旧对象还是共享同一块内存;但深拷贝会另外创造一个一模一样的对象,新对象跟原对象不共享内存,修改新对象不会改到原对象;区别浅拷贝只复制对象的第一层属性、深拷贝可以对对象的属性进行递归复制;...原创 2022-07-20 11:26:02 · 528 阅读 · 0 评论 -
jsonp原理
上面这段代码相当于向 http://localhost:3000/say?wd=Iloveyou&callback=show 这个地址请求数据,然后后台返回 show(‘我不爱你’) ,最后会运行show()这个函数,打印出’我不爱你’原创 2022-07-11 22:45:30 · 332 阅读 · 0 评论 -
Set、Map、WeakSet 和 WeakMap 的区别
Set,Map,weakSet waekMap原创 2022-07-09 15:20:24 · 118 阅读 · 0 评论 -
前端面试-数组去重的12种方法
不考虑兼容性,这种去重的方法代码最少。但是无法去掉“{}”空对象双层循环,外层循环元素,内层循环时比较值。值相同时,则删去这个值。新建一个空的结果数组,for 循环原数组,判断结果数组是否存在当前元素,如果有相同的值则跳过,不相同则push进数组。利用sort()排序方法,然后根据排序后的结果进行遍历及相邻元素比对。6. 利用includes7. 利用hasOwnProperty利用hasOwnProperty 判断是否存在对象属性9. 利用递归去重10. 利用Map数据结构去重原创 2022-07-08 15:29:52 · 5344 阅读 · 0 评论 -
nodejs使用multe实现文件上传,并将文件存储在服务器
nodejs使用multe实现文件上传,并将文件存储在服务器原创 2022-06-29 09:44:01 · 665 阅读 · 0 评论 -
nodejs+express设置和获取cookie,session
2.使用3.写接口session cookie-sessionsession依赖于cookie2.使用3.写接口这两种方式不能同时使用原创 2022-06-28 21:24:51 · 698 阅读 · 0 评论 -
React路由 React-router-dom的使用
react的的插件库,专门做SPA应用安装5版本的 npm install react-router-dom@5NavLink 的使用Switch的使用1.通常情况下,path和component是一一对应的关系2.Switch可以提高路由匹配的效率(单一匹配)路由组件与一般组件解决多级路径样式丢失的问题路由的严格匹配和模糊匹配嵌套路由向路由组件中传递数据1.params参数(常用)2.传递search参数3.传递state参数push 和 replace原创 2022-06-18 12:41:35 · 750 阅读 · 1 评论 -
react基础学习笔记----react的简单使用,react三大核心属性-state-props-refs-收集表单数据。代码案例
React基础helloReact案例两种创建虚拟DOM的方法虚拟DOM与真实DOMJSX语法JSX小练习总结React中数据动态绑定和遍历React 面向组件编程函数式组件类式组件组件的三大核心属性state完整写法简写版本props完整写法简写方式函数式写法refs字符串形式写法回调形式的refcreateRef事件处理react中收集表单数据非受控组件受控组件高阶函数与柯里化不用柯里化实现helloReact案例<body> <!-- 准备好一个容器 -->原创 2022-04-18 10:32:23 · 294 阅读 · 0 评论 -
axios学习---官方文档翻译
AXIOSAxios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。它有能做什么?Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。从 node.js 创建 http 请求支持 Promise API拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客户端支持防御 XSRF安装使用npm npm install axios //-g全局安装 -D当前项目安装使原创 2022-04-15 09:22:17 · 234 阅读 · 0 评论 -
解决nodejs中mysql查询数据中bigint类型数据精度缺失问题
在查询bigint类型的数据时,出现精度缺失解决办法在mysql连接配置文件中,加入supportBigNumbers: true,bigNumberStrings: true这两个配置的作用:supportBigNumbers:数据库支持bigint或decimal类型列时,需要设此option为true (默认:false)bigNumberStrings:supportBigNumbers和bigNumberStrings启用 强制bigint或decimal列以JavaScr原创 2022-03-30 09:35:40 · 2555 阅读 · 0 评论 -
项目上线之gzip和pm2管理工具的基本使用
项目上线之gzip和pm2管理工具的基本使用gzip作用:压缩资源体积,使访问速度更快node部分//安装compression中间件npm i compression -D//配置中间件const compression = require('compression')app.use(compression())PM2//全局安装pm2npm i pm2 -g基本命令的使用//启动项目pm2 start 启动文件名 --name 自定义项目名称 启动项目pm2 l原创 2022-03-25 17:42:42 · 406 阅读 · 0 评论 -
git常用命令
git常用命令git status 查看当前仓库状态信息git add 文件名字 加入暂存区git add . 将文件全部加入暂存区git commit -m <message> 提交文件到git push 推送到远程创库 git pull 拉取远程更新git fetch 拉取远程仓库信息git reflog 查看所有操作记录git log origin/master 获取远程仓库的日志git reset commit id 回到对应版原创 2022-03-24 21:33:15 · 444 阅读 · 0 评论 -
vue打包之后放在后端,部署上线后刷新页面后显示token身份认证失效
vue打包之后放在后端,部署上线后刷新页面后显示token身份认证失效解决办法前端:在vue-router中mode设置路由history后端:使用中间件 connect-history-api-fallback//下载中间件npm install --save connect-history-api-fallbackvar history = require('connect-history-api-fallback');app.use(history());...原创 2022-03-24 17:08:27 · 1463 阅读 · 0 评论 -
如何安装git,gitee创建ssh本地免密登录,创建一个git仓库,如何向仓库中上传文件, 如何用vscode管理git ,如何用webStorm操作git ,git常用命令
目录gitee创建代码创库1.下载安装git2.安装gitgitee创建ssh本地免密登录1.注册登录‘码云,完善个人信息2.设置SSH公钥,实现免密登录创建一个git仓库如何向仓库中上传文件如何用vscode管理git如何用webStorm操作gitgit常用命令gitee创建代码创库1.下载安装git国内镜像下载地址https://registry.npmmirror.com/binary.html?path=git-for-windows/选择一个比较新的下载即可这里我们下载.ex原创 2022-03-17 18:32:37 · 1080 阅读 · 0 评论 -
javscript数据结构对于队列的封装,击鼓传花问题 ,优先级队列封装
javscript数据结构对于队列的封装,击鼓传花问题/* 队列是一种受限的线性表达式,先进先出FIFO 1.受限之处在于它只允许在表的前端进行删除操作 2.在表的后端进行插入操作*///队列封装 基于数组function Queue(){ // 属性 this.items = []; // 方法 // enqueue(element)在队列的尾部添加一个或者多个新的项 Queue.prototype.enqueue = function原创 2022-03-05 15:19:59 · 608 阅读 · 0 评论 -
js数组方法
js数组方法js的数组就是API的调用1.创建数组2.类型转换2.数组基本操作方法push()和pop()push()reverse()sort()concat()slice()splice()*查找数组元素*indexOf()lastIndexOf()find()findIndex()includes()数组的迭代方法every()some()filter()map()forEach()注入和折叠reduce() 和 reduceRight()Array.from()Array.of()copyWithi原创 2022-03-03 20:08:57 · 213 阅读 · 0 评论 -
node.js学习总结:node.js的内置模块,模块化,npm与包 express,前后端身份认证 JWT认证机制
node.js学习总结什么是node.jsnode.js的内置模块fs系统模块path路径模块http模块模块化npm与包expressexpress路由express+mysql前后端身份认证JWT认证机制什么是node.jsnode.js是基于Chrome V8引擎的javaScrit运行环境node.js中的javaScript运行环境 注意: 1.浏览器是javaScript的前端运行环境 2.Node.js是javaScript的后端运行环境原创 2022-03-03 16:44:18 · 437 阅读 · 0 评论 -
nodejs中express基础上JWT认证机制的使用, jsonwebtoken包和express-jwt中间件的使用,以及token拦截的中间件
1.JWT的组成部分JWT通常由三部分组成,分别是 Header(头部)、Payload(有效荷载)、Signature(签名)。 三者之间使用英文的“.”分隔,格式如下: Header.Payload.Signature2.JWT的三个部分各自代表的含义 JWT的三个组成部分,从前到后分别是 Header、Payload、Signature。 其中: Payload部分才是真正的用户信息,它是用户信息经过加密之后生成的字符串。原创 2022-03-03 16:22:42 · 1996 阅读 · 5 评论 -
nodejs中处理表单验证是否合法问题 @hapi/joi包和@escook/express-joi 中间件的使用
表单验证的原则:前端验证为辅,后端验证为主,后端永远不要相信前端提交过来的任何内容在实际开发中,前后端都需要对表单的数据进行合法性的验证,而且,后端做为数据合法性验证的最后一个关口,在拦截非法数据方面,起到了至关重要的作用。单纯的使用 if…else… 的形式对数据合法性进行验证,效率低下、出错率高、维护性差。因此,推荐使用第三方数据验证模块,来降低出错率、提高验证的效率与可维护性,让后端程序员把更多的精力放在核心业务逻辑的处理上。1.安装 @hapi/joi 包,为表单中携带的每个数据项,定义验证规原创 2022-03-03 15:51:01 · 3810 阅读 · 1 评论 -
node.js中对密码进行加密处理的方法bcryptjs的使用
在项目中,使用 bcryptjs 对用户密码进行加密,优点:1.加密之后的密码,无法被逆向破解2.同一明文密码多次加密,得到的加密结果各不相同,保证了安全性1.运行如下命令,安装指定版本的 bcryptjsnpm i [email protected].在js 中,导入 bcryptjs :const bcrypt = require('bcryptjs')3.调用 bcrypt.hashSync(明文密码, 随机盐的长度) 方法,对用户的密码进行加密处理:// 对用户的密码,进行 bcr原创 2022-03-03 15:36:41 · 6401 阅读 · 1 评论 -
解决[ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
[ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client这个问题是服务端重复响应照成的,例如:db.query(sqlStr,userinfo.username,(err, result) => { if (err) { res.send({ status:1, message:err.messag原创 2022-03-02 21:19:33 · 12724 阅读 · 2 评论 -
mysql数据库学习笔记
mysql数据库学习笔记数据库的基本概念SQL3.DDL(操作数据库,表)1.操作数据库 CRUD2.操作表4.DML:增删改表中的数据5.DQL:查询表中的数据6,DQL查询1.排序查询2.聚合函数: 将一列数据作为一个整体,进行纵向的计算。3.分组查询4.分页查询7.约束*非空约束*唯一约束 unique ,某一列不能有重复值*主键约束:primary key*外键约束 foreign key,让表与表之间产生关系,从而保证数据的正确性数据库的设计8.多表之间的关系1.实现关系9.范式10.数据库的原创 2022-02-28 21:01:15 · 429 阅读 · 0 评论 -
vue-组件之间传值-全局事件总线
全局事件总线1.一种组件间的通信方式,适用与任意组件间的通信2.安装全局事件总线new Vue({ ........ beforeCreate(){ Vue.protype.$bus = this //安装全局事件总线 }, ........})3.使用事件总线 1.接收数据:A组件想接收数据,则在A组件中给$bus绑定自定义事件,事件的回调留在A组件自身 methods(){ demo(data){原创 2022-02-21 16:39:52 · 531 阅读 · 0 评论 -
vue生态——vue-router
vue生态——vue-routervue-router介绍1.基本使用2.几个注意点3.多级路由4.路由传递query参数5.命名路由6.路由的params参数7.路由组件的props配置8.的replace属性9.编程式路由导航10.缓存路由组件11.两个声明周期钩子12.路由守卫13.路由工作的两种工作模式vue-router介绍1.1vue-router的理解 vue的一个插件库,专门来实现SPA应用1.2对SPA的理解 1.单页web应用 2.整个应用只有一个页面原创 2022-02-21 16:32:57 · 421 阅读 · 0 评论 -
vue生态——vuex的使用
vue生态——vuex的使用解决安装vuex后出现"export 'inject' was not found in 'vue'问题vuexvuex是什么?什么时候使用Vuex1.搭建Vuex环境2.基本使用:3.getters的使用4.四个map方法的使用 使用前需要引入 import {mapState} from 'vuex'5.模块化+命名空间解决安装vuex后出现"export ‘inject’ was not found in 'vue’问题更改vuex的版本 npm install v原创 2022-02-21 16:24:12 · 343 阅读 · 0 评论 -
VUE-VUE基础
VUE核心技术1.1. Vue 简介1.1.1. 官网1.1.2. 介绍与描述1.1.3. Vue 的特点1.1.4. 与其它 JS 框架的关联1.1.5. Vue 周边库1.2模板语法1.2.1. 模板的理解1.2.2. 插值语法1.2.3. 指令语法1.3. 数据绑定1.3.1. 单向数据绑定1.3.2. 双向数据绑定1.5. MVVM 模型1.5.事件处理1.5.1. 绑定监听1.5.2. 事件修饰符1.5.3. 按键修饰符1.6. 计算属性与监视1.6.1. 计算属性-computed1.6.2.原创 2022-02-17 14:06:09 · 474 阅读 · 0 评论 -
VUE使用富文本编译器wangeditor,解决* core-js/modules/es.object.to-string.js in ./node_modules/@babel/runtime/he
VUE使用富文本编译器wangeditor解决* core-js/modules/es.object.to-string.js in ./node_modules/@babel/runtime/he报错1.终端安装wangeditornpm install wangeditor2.这个时候可能会报* core-js/modules/es.object.to-string.js in ./node_modules/@babel/runtime/he。不用担心,依赖的问题。下载一下就好了。1.停止运原创 2021-11-15 19:31:53 · 2922 阅读 · 0 评论 -
nodejs解决跨域问题
nodejs解决跨域问题这个简单,只需要在nodejs中下载一个cors包 并把它导入,引用出来就行了下载包yarn add cors或 npm install cors在nodejs中引用let cors = require('cors')app.use(cors())这样就解决了跨域问题,是不是很简单。...原创 2021-10-27 22:38:21 · 300 阅读 · 0 评论 -
前端上传图片到nodejs后端并将文件存储在后端,将图片连接存储在数据库
前端上传图片到nodejs后端并将文件存储在后端,将图片连接存储在数据库1.前端文件这里需要更改的url:'http://192.168.68.125:3000/upload',请求地址图片地址$('img').attr('src',`http://192.168.68.125:3000/${data.img}`);<!doctype html><html lang="en"><head> <meta charset="UTF-8">原创 2021-10-27 22:29:32 · 6568 阅读 · 3 评论 -
wangEditor富文本编辑器的使用
wangEditor富文本编辑器的使用一. wangEditor官方网址二,wangEditor优势一个产品的价值,就在于解决用户的问题,提高效率、降低成本、增加稳定性和扩展性。wangEditor 不是为了做而做,也不是单纯的模仿谁,而是经过上述问题分析之后,给出一个系统的解决方案。旨在真正去解决用户的问题,产出自己的价值。三,使用首先创建一个容器,再引入官方js文件创建一个实例通过editor.txt.html()以html格式获取富文本框里面的内容这个主要解决了,前端文本文件在服务原创 2021-10-27 22:02:17 · 231 阅读 · 0 评论 -
pc端web一滑一屏网页效果的实现
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录pc端web一滑一屏网页效果的实现html部分css部分js部分pc端web一滑一屏网页效果的实现html部分<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><原创 2021-08-13 09:59:33 · 1213 阅读 · 0 评论 -
本周问题总结
文章目录一、Bootstrap使用中出现的问题1. 问题一2.问题二3.问题三问题四补充:检测页面是否滑到底部一、Bootstrap使用中出现的问题BootStrap是一个比较好的框架,也是现在比较流行的框架。它对一些样式进行了提前处理,比如按钮,轮播图,导航栏等等。Bootsrap最大的有点在于屏幕的适配问题。它对不同屏幕进行了不同样式的封装,达到了一套代码多屏适配的效果。另外对源码研究我们可以知道,它的栅栏布局的原理是利用了浮动。我在使用Bootstrap框架的时候也出现了一些问题。1. 问..原创 2021-07-29 20:15:30 · 304 阅读 · 0 评论