JavaScript学习
文章平均质量分 66
henuGM
心要静,才能成为高手
展开
-
给JSON-Server添加中间件
需要添加的中间件:middleware.js:module.exports=(req,res,next)=>{ if(req.method==='POST'&&req.path==='/login'){ if(req.body.username==='jack'&&req.body.password==='123123'){ return res.status(200).json({原创 2022-02-12 15:17:42 · 1277 阅读 · 0 评论 -
使用泛型控制Typesript项目中的类型保持与any替代的问题
Typescript与Javascript的区别在于:ts是强类型,而js是弱类型。在ts中每一个函数或者组件获得的参数都需要确定类型,这样我们就可以在静态页面中通过ts党的报错直接解决大部分bug,避免了js弱类型,只能在代码运行中报错的问题。而在ts中,我们也应该避免使用any,any就意味着这个参数可以是任意类型,在运行代码时容易发生错误。export const useDebounce = (value: any, d...原创 2022-02-12 14:00:08 · 802 阅读 · 0 评论 -
使用Debounce对频繁数据的请求操作进行处理
在有查询功能的项目中,只要输入框值的改变,请求出来的数据都会不同。而对于即时查询功能,也就是一旦在输入框中值,数据即时请求且即时展示的项目,我们往往在输入几个关键字的时候触发多次请求. 这种即时查询系统,在react项目中一般都是使用useEffect对输入框的值的改变进行处理。例子:在输入物料管理系统这六个字的时候,我们就发送了三次请求,这对整个系统的稳定是不利的。在这里我们使用debou...原创 2022-02-11 15:15:03 · 1229 阅读 · 0 评论 -
使用.env与qs.stringify()对接口进行处理
例子:已知现在是通过两个值来对本地server请求数据。http://localhost:3001/projects?name=%E9%AA%91%E6%89%8B&personId=1name是转译过的,在这里我们是要使用name和personId从服务端请求值,所以这里的处理比较重要。 1、如果我们是在本机设置的mock-server进行接口测试,我们应该把测试的接口与最后正式使用的接口区...原创 2022-02-11 14:11:49 · 566 阅读 · 0 评论 -
使用.env从项目中提取需更换的值
日常开发中,前端与后端开发进度不一,如果后端开发较慢,前端所需接口需要我们自己去mock,这里我们使用的接口就是自己本机上的接口,在后端开发完毕后,我们需要将这个接口换回来。如果这个接口在项目中多次出现,且项目极其复杂,那么我们就需要将这种数据提出来。在项目根目录下,新建文件“.env”与“.env.development”在.env.development中这样写:REACT_APP_API_URL=http://local...原创 2022-02-10 15:26:14 · 723 阅读 · 0 评论 -
使用JSON Server在项目中配置Mock数据以及json server的基本数据操作
1、项目根目录下键入:yarn add json-server -D等待安装成功。2、在项目根目录下新建文件夹“__json_server_mock__”.这个文件夹名字前后代两个杠,代表这个文件夹实际与本项目代码关系不大。3、在此新建文件夹中创建文件“db.json”,写入:{ "user":[]}4、再在package.json中找到以下代码,并添加代码:"scripts": { "start": "react-scripts start",原创 2022-02-10 14:00:22 · 8572 阅读 · 0 评论 -
react-native设置路由以及Attempt to invoke interface method boolean com.swmansion.reanimated.layoutReanim报错
在目前最新rn版本v0.67.2下,在设置react-navigation时,可以直接安装以下依赖:yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view @react-navigation/material-top-tabs react-nat...原创 2022-02-05 14:19:30 · 794 阅读 · 0 评论 -
react-native项目中设置监听
在需要根据监听内容发生改变的文件中的componentDidMount中写下如下代码: componentDidMount() { this.subscription = DeviceEventEmitter.addListener('Key', (data) => {//内容 });在需要设置监听的地方这样写可以传参: DeviceEventEmitter.emit('Key', '待传参数')...原创 2022-01-20 22:56:38 · 982 阅读 · 0 评论 -
React+express全栈商城项目
一、前端部分:技术栈:react,react-bootstrap思路:在使用npm init建立起来的node项目中创建文件夹建立前端,这是前后端不分离,前后端分离也差不多就这样 将react初始项目src文件夹中文件大部分删除,留下app.js,index.js,index.css,reportWebVitals 下载react-bootstrap,并引入文件bootstrap.min.css 下载react-router-dom,在入口文件App.js中引入路由,使得<Rou..原创 2021-10-29 09:31:16 · 1044 阅读 · 0 评论 -
react-native-charts-wrapper组件库Linechart折线图中默认自动滚动的解决方案-----react-native项目整理
初学者对项目需求应该怎样把控?如何解决react-native中的自动滚动问题原创 2021-09-30 18:34:07 · 2004 阅读 · 0 评论 -
RN多数据解耦解决方案---react-native折线图---react-native项目整理
出现问题: 在react-native-charts-wrapper的折线图在展现动态数据会出现一定的问题: 1、多数据源在中图表展现的时候,若数据源中点个数不同难以达到平衡 2、在多数据源的情况下,如果每一个数据源使用与其相对应x轴数据的话或者多个数据源使用其中一个数据源的x轴数据,都会造成rn图表中数据的不客观,数据不真实。 当前情况下,我们的图表数据源为多个,且各个数据的返回时间不同,可以理解为多个定时器,定时器中不断产生图表的数...原创 2022-02-22 19:20:45 · 912 阅读 · 0 评论 -
盒子模型的理解---IE怪异盒子模型----面试题学习(一)
盒子模型是什么? 当对一个页面进行layout的时候,浏览器的渲染引擎会根据CSS基础框盒模型,将所有元素表示为一个个矩形的盒子。 一个盒子模型由四个部分组成:1、content:实际内容,显示文本和图像2、padding:内边距,清除内容周围的区域,内边距是透明的,取值不能为负,受盒子的background属性影响。3、border:边框,围绕元素内容的内边距的一条线或者多条线,由粗细、样式、颜色三部分组成4、margin:外边距,在元素外为整体创造空白...原创 2022-02-28 21:51:55 · 447 阅读 · 0 评论 -
React的网络请求发送-----React学习(二)
学前知识:1、React本身只关注于页面,并不包含发送ajax请求的代码2、前端应用需要通过ajax请求来与后台进行交互3、react应用中需要集成第三方ajax库4、常用的ajax库有jQuery和axios在这里,我们使用axios:安装依赖:npm install axios --save引入axios依赖:import axios from 'axios'axios的get操作:axios.get('/user?ID=12345').the..原创 2022-03-01 22:28:02 · 3044 阅读 · 0 评论 -
node项目初始化以及各种配置----node.js学习(九)
一、项目初始化1、新建项目文件夹Hello2、初始化项目yarn init -y 或者 npm init -y3、安装expressyarn add express 或者 npm install express4、在Hello目录中创建一个名为app.js文件const express = require("express");const app = express();app.get("/",(req, res)=>{ res.send(原创 2021-09-09 09:20:21 · 3988 阅读 · 0 评论 -
web安全之CSRF跨站请求伪造---node.js(九)
CSRF跨站请求伪造 CSRF意为跨站请求伪造。 指攻击者盗用了你的身份,以你的名义发送恶意请求。 比如:盗用你的身份购买商品,虚拟货币转账。那么怎么解决这种漏洞呢?CSRF防护思路:1、在请求转账的时候,服务器响应转账页面,在cookie中设置一个csrf_token值(随机48位字符串)2、客户端在进行post请求的时候,在请求头中带上自定义的属性'X-CSRFToken',值为cookie中的csrf_tok...原创 2021-09-08 16:17:18 · 853 阅读 · 1 评论 -
在node中的数据库与ORM操作---node学习(八)
数据库概述:数据库的特点:1、持久化存储2、读写速度极高3、保证数据的有效性4、对程序支持性非常好,容易扩展数据库分为关系型数据库和非关系型数据库这里是数据库排行榜 一般来说,我们最常用的数据库是mysql和mongoDB。这里我们讲解mysql数据库连接数据库1、在cmd小黑窗中启动mysql服务:net start mysql2、登录数据库mysql -uroot -p 这里直接回车就行登录完了就可以在cmd里面直接使...原创 2021-09-08 11:29:34 · 1156 阅读 · 0 评论 -
模板过滤器与模板继承关系-cookie与session状态保持--node.js学习(七)
模板过滤器和模板继承的使用过滤器的使用: 如要使用过滤器,在app.js中:const template = require('art-template');template.defaults.imports.过滤器名字 = function(value){ //value接收html中“|”前面的值 return value * 1000}; 而在html模板页面中要用"|"隔开:<p>num1是:{{num...原创 2022-03-03 13:03:15 · 2640 阅读 · 0 评论 -
Express框架基础
Express框架简介: 在之前,我们要写一个web服务器程序的话,要使用node内置的http模块。而前面几篇文章也说过了,那样比较复杂,我们不要重复造轮子,Express就是这样一个web开发框架,它能够实现很多功能,包括:1、静态文件服务2、路由控制3、模板解析支持4、动态视图5、用户会话6、CSRF保护7、错误控制器8、访问日志9、缓存10、插件express就是一个基于内置核心http模块的一个第三方包使用Expre...原创 2022-03-04 13:31:39 · 954 阅读 · 0 评论 -
AJAX发送请求与响应-jQuery中ajax的使用-node初级(五)
AJAX简介: AJAX即异步JavaScript与XML技术,是一套综合了多项技术的浏览器端网络开发技术。 简单来说,AJAX就是使用JavaScript代码发送网络请求并处理响应,有浏览器即客户端实现。 ajax技术能够在页面不刷新的情况下,和服务器端进行交互,可以仅向服务器发送并取回必须的数据,并在客户端采用js处理响应。交换的数据大大减少,服务器的响应更加迅速,把数据处理工作放到了客户端进行,减少了web服务器的负荷。特点:异...原创 2022-02-27 08:39:01 · 2946 阅读 · 0 评论 -
HTTP协议、三次握手与四次挥手-node.js初级(四)
浏览器访问网站的基本流程:1、用户输入网址2、浏览器请求DNS服务器,获取域名对应的IP地址(DNS服务器就是有该网络中所有域名和对应主机号的可以转换的一种服务器)3、请求连接该IP地址的服务器4、发送资源请求(遵循HTTP协议)5、web服务器接收到请求,解析请求,判断用户意图6、获取用户想要的资源(从web服务器连接的数据库中获取)7、将资源返回给http服务器程序8、http服务器将资源数据通过网络发送给浏览器9、浏览器解析呈现请求的数据http协议简介:.原创 2021-09-07 10:21:04 · 1444 阅读 · 3 评论 -
Promise异步编程-异步终极解决方案async+await-node.js初级(三)
Promise简介:Promise是异步编程的一种解决方案,ES6将其写入语言标准,统一了语法,原生提供了Promise对象。 所谓Promise,简单来说就是一个容器,里面保存着某一个未来才会结束的事件(通常是一个异步操作)的结果。从语法上来说,Promise是一个对象,从它可以获取异步操作的消息。Promise提供统一的API,各种异步操作都可以用同样的方法进行处理。 Promise对象有两个特点: 1、Promise对象的状态不...原创 2022-03-01 08:48:56 · 2390 阅读 · 0 评论 -
JavaScript初级-JS异步,回调队列以及事件循环
在我的JavaScript学习系列第一篇文章里面说过,调用堆栈一次可以执行一个函数,如果一个函数堵塞,整个浏览器都会直接冻结。而异步就是解决问题的方案。首先上代码:setTimeout(callback, 1000);function callback(){ console.log('异步');} setTimeout是浏览器API的一部分,是一种浏览器提供的工具,10s后,浏览器接收我们传入的回调函数并将其移动到回调队列(Callb...原创 2021-07-29 16:32:48 · 629 阅读 · 4 评论 -
this绑定与call、apply以及bind详解
在JavaScript中this的概念较为抽象,一共可以分为五种场景:默认绑定 隐式绑定 显式绑定 new绑定 箭头函数绑定 先讲一下this的概念吧,this实际上是在函数被调用的时候才发生的绑定,也就是说this具体指向什么,取决于你怎么调用函数。 而apply和call是属于函数应用,指定this的同时也执行方法,bind则不同,它只是负责绑定this并返回一个新的方法,不会执行,所以我们经常看到bind后面会加一个()。 ...原创 2021-07-29 11:24:43 · 628 阅读 · 0 评论 -
调用堆栈与执行上下文
所谓JS引擎,就是一种为解释和执行JavaScript代码而专门设置的流程虚拟机。 其中最为重要的是一个组件是调用堆栈(Call Stack),它与全局内存和执行上下文一起运行代码。 在读取和执行代码时,是由JS引擎来读取代码的,一读取到引用,就会将引用放入全局内存(堆)中。 全局内存(堆)是JS引擎保存全局变量和全局函数声明的地方, 那么,当在代码中运行函数会发生什么呢? 例:var num =...原创 2021-07-27 20:08:15 · 582 阅读 · 1 评论