- 博客(37)
- 收藏
- 关注
RSS订阅原创 React学习笔记（4）React组件进阶
组件通讯介绍组件是封闭独立的单元，默认情况下，只能使用组件自己的数据。在组件化过程中，我们将一个完整的功能拆分成多个组件，以更好的完成整个应用的功能。在这个过程中，多个组件之间不可避免的要共享某些数据。为了实现这些功能，就需要打破组件的独立封闭性，让其与外界沟通，这个过程就是组件通讯。组件的props组件是封闭的，接收外部数据通过props来实现props的作用：接收传递给组件的数据传递数据：给组件标签添加属性接收数据：函数组件通过参数props接收数据，类组件通过this.props接收数据
2021-08-16 17:01:49
165
1
原创 React 学习笔记（3）this指向问题与表单处理
事件绑定中的this指向1、箭头函数利用箭头函数自身不绑定this的特点render()方法中的this为组件实例，可以获取到setState()render(){//箭头函数的this并不属于箭头函数自身，指向外部环境render()方法，render()的this指向当前实例return (<div><h1>计数器：{this.state.count}</h1><button onClick = {()=>{this.onInc
2021-08-16 16:45:08
165
原创 2021-08-12—React学习笔记JSX与react组件
JSX的基本使用：React的核心内容createElement()繁琐不简洁；不直观，无法一眼看出描述的结构；不优雅 JSX是JavascriptXML的简写，表示在Javascript代码中写XML格式的代码优势：声明式语法更加直观，与HTML结构相同，降低了学习成本，提高了开发效率。使用JSX语法创建react元素const title = <h1>Hello World!</h1>ReactDOM.render(title,document.getEl
2021-08-12 18:17:50
192
原创 JavaScript之Promise详解
感觉之前对Promise的了解很浅，实际开发中也没有应用很多，最近在面试的过程中几乎是必问的问题，算是前端开发中的重点与难点，在b站学习了向军老师的关于Promise的讲解，也自己学习了一下资料，现在来做个总结。Promise解决的痛点ES6新增了promise作为异步编程的解决方案，在promise之前，我们使用回调函数来发送异步请求，回调函数的问题是当我们有很多请求，并且下一个请求要依赖上一个请求的结果，这样会导致我们的请求层层嵌套，使得代码非常臃肿，可读性差，容易产生bug导致所谓的回调地狱。P
2020-08-26 14:59:58
601
1
原创 跨域的几种方式
这两天在看前端常见的一个问题—跨域跨域的问题的出现是因为浏览器的同源策略，限制了同一个源的脚本如何与另一个源进行交互。同源：协议，域名，端口号都相同。同源策略限制的行为：1、cookie和localstorge无法获取2、DOM和JS对象无法获取3、Ajax请求发不出去跨域请求的方式jsonp原理：<script标签的src属性不受跨域的限制，可以动态生成script标签，src属性携带请求网址与回调函数发送到服务器，服务器返回数据。客户端所在端口设置静态文件的目录，并且静态文件端
2020-07-19 16:55:21
121
原创 函数的节流与防抖（比较+示例）JavaScript
函数的节流与防抖是在前端面试时经常会被问到的一个点，关于这两个概念说起来可能比较难以区别，所以写了一个小例子帮助理解。概念节流：给连续触发执行的函数设置事件间隔，超过这个时间间隔函数才会执行一次。防抖：函数连续触发时合并执行，超过时间间隔函数才有效。示例：给button一个点击事件： <button onclick="myFunc()">点击</button>节流函数 function throttle(fn,delay){ var lastTime
2020-07-11 15:23:10
213
原创 不能访问外网最简单的方法安装vue-devtools
https://blog.csdn.net/yizufengdou/article/details/103985709
2020-07-04 16:16:22
600
原创 前端学习网址资源整理
Vue.js devtoolshttps://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd/relatedReactAnt Design of Reacthttps://ant.design/docs/react/introduce-cnFetch APIhttps://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Usin
2020-06-30 15:30:00
542
3
转载 base64编码原理解析
开发者对Base64编码肯定很熟悉，是否对它有很清晰的认识就不一定了。实际上Base64已经简单到不能再简单了，如果对它的理解还是模棱两可实在不应该。大概介绍一下Base64的相关内容，花几分钟时间就可以彻底理解它。文章下边贴了一个Base64的编解码器，方便阅读文章的同时来实验。一. Base64编码由来为什么会有Base64编码呢？因为有些网络传送渠道并不支持所有的字节，例如传统的邮件只支持可见字符的传送，像ASCII码的控制字符就不能通过邮件传送。这样用途就受到了很大的限制，比如图片二进制流的每个
2020-06-23 10:40:11
382
原创 React基础入门（技术胖的基础教程示例）
这周学习了react框架的基础知识，大概就是一些官方文档上的内容大概可以分为以下几个方面：1、JSX语法简单理解JSX语法就是JavaScript+XML语法，遇到{ }按照JavaScript语法来解析，遇到标签按照html来解析，这样结合起来方便操作虚拟DOM。组件后缀.jsx或.js，组件名要是大写，否则会报错。2、组件状态组件的变量通过状态来管理，访问要通过this.state.变量名，修改要使用this.setState({})，setState可以提供回调函数。有一个状态提升的概念
2020-06-12 19:59:22
935
原创 webpack解析ES6、jsx、css、图片字体、代码压缩、热更新使用示例
原理webpack是一个打包模块化JavaScript的工具，在webpack里一切文件皆模块，通过Loader转换文件，通过 Plugin 注入钩子，最后输出多个模块组合成的文件。webpack专注于构建模块化的项目。上图为webpack在官网上的图片，一切文件：JavaScript、CSS、SCSS、图片、模板，在 Webpack 眼中都是一个个模块，这样的好处是能清晰的描述出各个模块之间的依赖关系，以方便 Webpack 对模块进行组合和打包。 经过 Webpack 的处理，最终会输出浏览器能使用
2020-06-10 16:20:08
828
原创 关于webpack安装babel后编译react报错ERROR in ./app/main.js Module build failed (from ./node_modules/babel-load
在学习webpack编译文件时首先报错的提示为：ERROR in ./app/main.jsModule build failed (from ./node_modules/babel-loader/lib/index.js):Error: Cannot find module ‘@babel/core’之前已经安装过babel-core如下Babel安装// npm一次性安装多个依赖模块，模块之间用空格隔开npm install --save-dev babel-core babel-l
2020-06-09 15:17:48
991
原创 vue页面手机端开发总结
当图片的某元素是一张图片，可不设置宽高，将样式设置为如下，这样图片就会撑起来页面，避免一些宽高在不同机型不协调的问题。display: block;width: 100%;需要条件判断显示不同的图片时，可以给标签的src绑定一个方法，该方法根据条件return它的URL使用v-if 来决定dom元素是否渲染多使用伪元素来减少div标签，常用的有before，和after常用的设置有水平垂直居中，外边距，内边距，圆角，宽高，字体，字高，对齐方式，是否加粗//字体fon.
2020-05-29 10:20:27
4376
原创 vue商城项目地址模块，地址列表渲染，地址列表切换与展开，设置默认地址与删除地址
地址列表渲染地址列表渲染首先是前端通过axios发送get请求，接受一个回调拿到数据response.data的数据为地址列表在result中{"status":"0","msg":"","result":[{"addressId":"100001","userName":"JackBean","streetName":"北京市朝阳区朝阳公园","postCode":100001,"tel...
2020-03-24 14:39:09
1125
原创 Vue的computed属性，实时计算全选与选中的金额
Vue中computed是属性调用，以属性访问的形式调用的，{{computedTest}}带有缓存功能computed依赖于data中的数据，只有在它的相关依赖数据发生改变时才会重新求值computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；computed比较适合对多个变量或者对...
2020-03-21 14:12:40
1810
原创 vue+node项目实现修改购物车内商品功能
修改购物车内商品数目，通过加减实现前端Cart.vue给加减符号添加editCart(‘sub’,item)的click事件，传递两个参数，第一个参数用来标识符号，第二个参数拿到商品条目<div class="cart-tab-3"> <div class="item-quantity"> <div c...
2020-03-20 18:08:43
529
原创 解决moongose属性添加问题doc.productNum = 1; doc.checked = 1;
在做慕课商城项目将商品加入购物车时，自定义属性添加不上去代码如下doc.productNum = 1;doc.checked = 1;//选中userDoc.cartList.push(doc);//将商品加入到用户名下moongose模型中也已经定义了这两个属性var userSchema = new moongoose.Schema({ "userId":String, ...
2020-03-16 17:37:04
369
原创 vue商城项目父组件与子组件数据传递
父组件可以传递信息到子组件，但子组件不能随意改变这个状态子组件的状态只能是父组件传递过来，不能是子组件自己改变子组件修改状态值时不能够影响到子组件父组件传到子组件子组件是一个通用的模态框Modal.vue<div><div class="md-modal modal-msg md-modal-transition"v-bind:class="{'md-show':md...
2020-03-14 23:08:31
187
原创 vue+nodejs慕课商城项目登录功能、cookie介绍
前端实现前端利用axios插件向服务器发送请求，用post方法，post方法一般用于提交，post向后端提交两个参数userName和userPwdlogin(){ if(!this.userName||!this.userPwd){ this.errorTip = true; return; ...
2020-03-12 17:48:08
390
原创 Vue+nodejs慕课商城项目前后端数据传递，排序与分页功能实现
前后端数据传递后端数据库采用mongodb，mongodb是非关系型数据库，存储集合。1、首先下载moongose插件可以很方便的从mongodb中获取数据在node搭建的服务端Server新建文件\model\goodsvar mongoose = require('mongoose');//moongose可以简捷的从mongoDB中获取数据//moongose有一个模式Schem...
2020-03-09 21:10:36
888
4
原创 最新的vue webpack没有dev-server文件，如何实现mock后台数据模拟
dev-server文件在最新的vue版本中是webpack.dev.conf.js代码没有太大变动，只是语法上有一些改变！！修改后一定重新启动npm run dev,才能访问到接口数据webpack.dev.conf.js文件const express = require('express')const app = express()//请求servervar goodsData =...
2020-02-12 20:28:08
634
原创 vue前端路由
前端路由：vue-router用来构建SPA相当于a标签，用来配置路由地址或者用this.$router.push({path:})编程式路由路由渲染的位置动态路由vue模板只能有一个根元素，添加其他标签时需要包裹在同一个下面/user/:username/user/:username/post/:post_id path: '/goods/:goodsId', http:/...
2020-01-01 16:13:41
88
原创 vue+nodejs框架学习1-项目搭建
vue框架MV*Model和View绑定，数据驱动，状态管理，组件化数据驱动：传统的jQuery需要获取DOM节点，通过click事件或者addclass改变DOM节点的内容,DOM和JS是耦合的。vue不关注怎么获取DOM节点，改变DOM节点，只关注怎么将数据放在data里面。组件化：公共部分抽离出来，可以放到任何一个界面使用。通过MVVM的数据绑定实现自动同步。Object.def...
2019-12-20 21:42:52
1078
原创 表单用户密码简单验证
用户名必须是3-10位英文字母或数字；口令必须是6-20位；两次输入口令必须一致。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body>&...
2019-12-10 17:29:44
780
原创 浏览器的DOM元素
DOM （ Document Object Model）：文档对象模型DOM是Javascript操作网页的接口，有文档，元素，节点。整个文档是一个文档节点每个标签是一个元素节点包含在元素中的文本是文本节点每一个属性是一个属性节点注释属于注释节点DOM树是有层级关系的结构。包括父级，子级。浏览器对象windowwindow对象有innerWidth和innerHeight属...
2019-12-09 21:30:28
1196
原创 JavaScript(4)标准对象Date,RegExp,JSON正则表达式
Date对象获取系统当前时间var now = new Date();创建指定时间的Date对象var d = new Date(2019, 12, 2, 20, 15, 30, 123);Javascript的月份为0~11，0表示一月份，11表示12月。时间戳时间戳是一个自增的整数，它表示从1970年1月1日零时整的GMT时区开始的那一刻，到现在的毫秒数。时间戳可以精确地表示一个...
2019-12-02 21:33:07
160
原创 javascript(3)函数
argumentsfunction函数自带一个关键字arguments，只在函数内部起作用，永远指向当前函数的调用者传入的所有参数，用法类似于数组。函数不定义任何参数，还是可以拿到参数的个数和值function foo(x) { console.log('x = ' + x); // 10 for (var i=0; i<arguments.length; i++) {...
2019-11-29 16:23:29
155
原创 Bootstrap写一个简单的响应式网页
响应式网页响应式网页设计采用css的媒体查询技术，将包括弹性布局，弹性图片、媒体和媒体查询整合在一起，为响应式网页设计。页面会随着窗口的尺寸变化做出相应的改变。视口是浏览器显示的内容区域，不包括工具栏标签栏。响应式设计需要寻找一个临界点，当视觉效果不符合人的审美或影响了内容获取时对应的值，这个临界值是响应式设计的断点。...
2019-11-28 23:08:11
6145
1
原创 JavaScript(2)
MapMap是一组键值对的结构(key:value),一个key只能对应一个value,多次对一个key放入value，后面的值会把前面的值冲掉。var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);m.get('Michael'); // 95var m = new Map(); // 空Mapm.set('Ada...
2019-11-25 22:11:08
128
原创 javaScript笔记（1）
因为网景开发了JavaScript，一年后微软又模仿JavaScript开发了JScript，为了让JavaScript成为全球标准，几个公司联合ECMA（European Computer Manufacturers Association）组织定制了JavaScript语言的标准，被称为ECMAScript标准。ECMAScript是一种语言标准，而JavaScript是网景公司对ECMAS...
2019-11-23 15:57:27
144
原创 小而美的博客（李仁密）笔记
十月份开始在B站看李仁密的开发小而美博客的视频，想跟着做走一遍前后端的流程，我可能不是一个小白吧，但也是刚刚入门，知道点皮毛前端框架用的semantic UI后端Springboot先开发前端界面，博主真的很厉害，对框架十分熟悉，考虑了很多细节，界面做的很漂亮，增加了很多功能，目前我完成了前端界面的编程。前端用到的插件及地址如下markdownhttps://pandao.github...
2019-10-30 23:11:07
6138
12
原创 java一维数组查找，求最大最小中位数，增加，删除元素
数组扩容数组扩容三种方式打印数组数组常用方法以下为具体代码import java.util.Arrays;import java.util.Scanner;/** * 数组 * @author swjtu * @project EssentialAlgorithms * @date 2019年5月27日 * @remarks TODO */public class a...
2019-05-28 21:35:26
419
原创 java实现快速求A的p次幂算法
算法主要用到了两个公式A的2M次方等于A的M次方的平方*A的（M+N）次方等于A的M次方A的N次方*代码如下//计算A的p次幂，Math.pow(A,p) public static float RaiseToPower(float A,int p) { //将迭代的数存在数组里 float sum = 1; float[] a = new float[p]; a[1] ...
2019-05-21 19:25:08
1397
原创 comparable接口的compareTo方法
Comparable接口是一个泛型接口，定义如下，实现接口的compareTo方法可以用Array.sort进行排序。大于，等于，小于分别为正，0，负。public interface Comparable<E>{ public int compareTo(E o);}在数值类型的包装类实现compareTo方法，（一晚上没实现！！！生气）创建一个类ComparableRe...
2019-05-08 22:27:25
1337
原创 软件工程导论
读书笔记11、软件工程：软件工程将系统化的，规范化的，可度量的方法应用于软件开发，运行和维护，将工程化应用于软件方法。软件工程的基本原理：分阶段的生存周期计划严格管理；分若干阶段切实可行的计划完成阶段评审；及早发现错误，减少成本严格的产品控制；不得随意更改需求结果能清楚审查采用现代程序设计技术软件开发方法使开发过程制度化，采用明确的步骤，具体的描述方式，确定的评价标准。结构...
2019-05-08 16:37:54
250
原创 三角形继承类，构造方法，访问器，面积周长字符串输出等
学习三角形类的编程，继承自通用类SimpleGeometricObject.java package ClassExtend; import java.util.Date; //通用类，几何对象的父类 public class SimpleGeometricObject { private String color;//对象的颜色 privat...
2019-04-29 21:00:52
319
原创 打印某个年月的日历
编程小白学习之路，供参考import java.util.Scanner;/** * 输入年，月，打印该月的日历 * 采用自顶向下设计，自下向上实现的方法 *TODO * @author swjtu * @project JavaTest3 * @date 2019年3月28日 * @remarks TODO */public class PrintCalender {...
2019-04-29 16:31:39
479
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人