前端工程师
记录css,html,js,vue,react前端开发学习总结笔记
jackaroo2020
不积跬步无以至千里,不积小流无以成江海
展开
-
React-组件上传功能使用实例
技术点:【前端-upload组件】https://ant.design/components/upload-cn/【后端-springboot】前端核心代码:handleUploadChange = (info) => { if (info.file.status !== 'uploading') { console.log("file info--->&g...原创 2019-06-04 14:42:39 · 4829 阅读 · 3 评论 -
复选框取消权限提示,并不让其修改问题?
问题:复选框取消时,判断权限,没有权限,不允许取消复选框的修改操作?解决思路:进入修改页面前获取相应的权限,并判断设置权限是否有,返回到前端,然后js判断提示即可。代码如下:java核心代码示例:Map<String, Object> map = new HashMap<String, Object>();map.put("role",true );jsp核心...原创 2019-02-14 13:35:04 · 358 阅读 · 0 评论 -
自定义jsp标签和注解?
JSP如何开发使用自定义标签? 提示信息的一个tag示例如下:<% @ taglib prefix=”someprefix” uri=”/sometaglib” %>1.从一个指定的标签库中识别出代表这种自定义行为的标签2.找到实现这些自定义行为的具体类自定义JSP标签的处理过程:1.在JSP中引入标签库:2.在JSP中使用标签库标签:3.We...原创 2018-03-12 17:01:28 · 869 阅读 · 0 评论 -
数码照片处理基本技法
更改照片像素尺寸数码照片的大小和质量与其像素的大小和分辨率有密切关注。CS6在编辑图像之前,先设置图像的大小分辨率。图像|图像大小(Alt+Ctrl+I)更改照片画布大小图像|画布大小(Alt+Ctrl+C)透视裁剪图片透视裁剪工具与裁剪工具的不同之处在于,后者只允许以正四边形裁剪画面,而前者允许用户使用人一四边形,在使用透视裁剪工具时,只需要分别点击画面中的四个点,即可定...原创 2019-12-01 21:31:33 · 1049 阅读 · 0 评论 -
React-高级内容之动画效果
1、动画效果style.css.show { opacity: 1; transition: all 1s ease-in;}.hide { opacity: 0; transition: all 1s ease-in;}App.jsimport React,{Component,Fragment} from "react";import './style.css';...原创 2019-06-22 15:25:33 · 1048 阅读 · 0 评论 -
React-高级内容
1、使用 PropTypes 类型检查官网:使用 PropTypes 类型检查PropTypes 提供一系列验证器,可用于确保组件接收到的数据类型是有效的。当传入的 prop 值类型不正确时,JavaScript 控制台将会显示警告。出于性能方面的考虑,propTypes 仅在开发模式下进行检查。通过配置特定的 defaultProps 属性来定义 props 的默认值。imp...原创 2019-06-22 10:44:46 · 2989 阅读 · 0 评论 -
React-初探(开发环境、目录、组件介绍)
1、开发环境官方文档说明前提: You’ll need to have Node >= 6 and npm >= 5.2 on your machine核心命令:npx create-react-app my-appcd my-appnpm start原创 2019-06-16 23:21:41 · 177 阅读 · 0 评论 -
JS_算法题_02
题目描述给定字符串 str,检查其是否包含数字,包含返回 true,否则返回 false示例1输入‘abc123’输出true解决方法: 正则表达式function containsNumber(str) { var b = /\d/; return b.test(str);}题目描述给定字符串 str,检查其是否包含连续重复的字母(a-zA-Z...原创 2020-05-03 12:32:02 · 731 阅读 · 0 评论 -
JS_算法题_01
题目描述找出元素 item 在给定数组 arr 中的位置输出描述:如果数组中存在 item,则返回元素在数组中的位置,否则返回 -1示例1输入复制[ 1, 2, 3, 4 ], 3输出复制2解决方法一:function indexOf(arr, item) { for (var i = 0; i < arr.length; i++) { i...原创 2020-04-28 08:47:26 · 416 阅读 · 0 评论 -
web_js操作cookie
一、cookie概念w3school: cookie 是访问过的网站创建的文件,用于存储浏览信息,例如个人资料信息。js的角度: cookie 就是一些字符串信息。用于客户端计算机与服务器之间传递信息。在JavaScript中可以通过 document.cookie 来读取或设置这些信息。二、知识点cookie 有大小限制。每个 cookie 所存放的数据不能超过4kb,若长度>...原创 2020-04-22 10:34:51 · 221 阅读 · 0 评论 -
React-Redux进阶
1、UI组件和容器组件UI组件负责页面UI渲染,只关注页面渲染容器组件负责页面逻辑处理,只关注业务逻辑通过把一个组件的页面渲染代码和逻辑处理拆分成父子组件,各司其职,更清晰,更明了需要注意的是:子组件调用父组件方法函数时,还会遇到this指向问题。因为需要获取index的值,UI组件里用箭头函数来代替父组件bind(this)。code demo 详细可参考本人上一...原创 2019-06-28 08:59:28 · 344 阅读 · 0 评论 -
前端数组json遍历3种方式总结
需求:如何遍历得到mydata对象,过滤掉数组数据集格式如下:包含mydata对象和myArray数组集合[{mydata:{id:1,createBy:“admin”},myArray:[“myarray1”,“myarray2”]},{},…]假设数据存放于tempData中。1、循环遍历let data= [];tempData.forEach( (item, i) =...原创 2019-06-17 09:30:03 · 7979 阅读 · 1 评论 -
React-基础核心知识点
1、Fragment可以作为React组件的占位符,使它在Dom中不显示最外层的divimport React,{Component,Fragment} from 'react';class TodoList extends Component{ render(){ return ( <Fragment> <div> <input /&g...原创 2019-06-19 21:44:51 · 293 阅读 · 0 评论 -
React-组件的生命周期
组件的生命周期概念:在组件创建、到加载到页面上运行、以及组件被销毁的过程中,总是伴随着各种各样的事件,这些在组件特定时期,触发的事件,统称为 组件的生命周期组件生命周期分为三部分:组件创建阶段:组件创建阶段的生命周期函数,有一个显著的特点:创建阶段的生命周期函数,在组件的一辈子中,只执行一次;componentWillMount: 组件将要被挂载,此时还没有开始渲染虚拟DOM...原创 2019-06-03 21:24:23 · 197 阅读 · 0 评论 -
React基础入门详解
React项目的创建1、 运行 cnpm i react react-dom -S 安装包2、 在项目中导入两个相关的包:// 1. 在 React 学习中,需要安装 两个包 react react-dom// 1.1 react 这个包,是专门用来创建React组件、组件生命周期等这些东西的;// 1.2 react-dom 里面主要封装了和 DOM 操作相关的包,比如,要把 组件渲...原创 2019-05-27 22:09:39 · 950 阅读 · 0 评论 -
js_object
1.null,true,false,undefined,数字,字符串都不是对象,其它的值都是对象,且对象是可变的;2.对象最常见的用法是create,set,query,test(检测),enumerate(枚举)3.(1)对象直接量 var empty{}; //没有任何属性的对象; var point = {x:0,y:0}; //两个属性; ...原创 2017-11-19 14:29:52 · 228 阅读 · 0 评论 -
JS阅读笔记
1.arguments * callee 指代当前正在执行的函数; * length:传递给函数的参数个数; example1: var factorial = funciton(x){ if(x&lt;2) return 1; else return x*arguments.callee(x-1); } var y = factorial(5); //=&...原创 2018-04-07 11:46:31 · 162 阅读 · 0 评论 -
CH4_表达式和运算符
表达式和运算符: *原始表达式 *对象和数组的初始化表达式 *函数定义表达式 *属性访问表达式 *调用表达式 *对象创建表达式 *运算符概述 *算术表达式 *关系表达式 *逻辑表达式 *赋值表达式 *表达式计算 *其它运算符1.”+”运算符 1+”2” //=&gt;122.所有的对象都是Object的...原创 2018-03-07 08:21:11 · 176 阅读 · 0 评论 -
CH3_变量 类型 值
概要: * 1.数字 * 2.文本 * 3.布尔值 * 4.null和undefined * 5.全局对象 * 6.包装对象 * 7.不可变的原始值和可变引用 * 8. 类型转换 * 9. 变量声明 * 10. 变量作用域知识点: 1. JS所有数字均采用64位浮点数格式表示数字。JS 数字上溢,结果为无穷大,下溢为0。0/0 //=&gt;NaN 0=== ...原创 2018-03-01 19:57:29 · 122 阅读 · 0 评论 -
CH2_JS词法结构笔记
** 字符集 ** 注释 ** 直接量 ** 标识符和保留字 ** 可选的分号 1.JS 程序是用Unicode字符集编写的。2.JS 是区分大小写的程序。3.标识符 就是一个名字。4.保留字:如 default,delete,instanceof,debugger,do ,while5.ES3将Java所有的关键字都作为自己的保留字。 ab...原创 2018-02-27 09:13:12 · 128 阅读 · 0 评论 -
JS_子集及扩展笔记
一.子集1.ECMAScript 3标准是1999年颁布的,2009年才更新到了ECMAScript5.js作者:Brendan Eich.2.Firefox基于一个名叫Spidermondky的JavaScript引擎。Mozilla开发的另一个基于Java的引擎Rhino也支持大部分扩展特性。3.安全性 (1)为了让js代码静态地通过安全检查,必须移除一些JS特性: *eva...原创 2017-12-01 08:38:33 · 375 阅读 · 0 评论 -
JS_正则表达式模式匹配
一.正则表达式的定义1.直接量字符 *需要转义的加"\",不需要的直接使用自身字符 \t ,\n,\r,\f-换页符,字母和数字字符-自身2.字符类 [...] 方括号内的任意字符 [^...] 不在方括号内的任意字符 . 除换行符和其他Unicode行终止符之外的任意字符 \w 任何ASCII字符组成的单词,等价于[a-zA-Z0-9] \s ...原创 2017-11-29 20:08:45 · 389 阅读 · 0 评论 -
ivue_全局配置
1、全局配置全局配置使用 iView 3 时,可以进行全局配置组件的一些属性。组件会优先使用 prop 设置的属性,如果未设置,再使用全局配置。transfer:所有带浮层的组件,是否将浮层放置在 body 内,默认为不设置,详见各组件默认的 transfer 值。可选值为 true 或 false。size:所有带有 size 属性的组件的尺寸,默认为不设置,详见各组件默认的 siz...原创 2019-05-03 10:04:32 · 2379 阅读 · 0 评论 -
ivue_动态路由导航、路由鉴权及不同平台显示不同页面
导航菜单1、导航及路由vue-ui 创建项目,添加ivue和vue-router插件router.js 核心代码import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)export default new Router({ routes: [ { path: '/', ...原创 2019-05-03 14:09:25 · 1311 阅读 · 0 评论 -
vue_环境搭建入门
1、安装安装node.js 下载链接https://nodejs.org/en/如何查看是否安装成功:黑窗口(命令行)中输入:node -v安装vue.jsnpm install vue安装vue-cli工具 npm install --global vue-cli安装webpacknpm install webpack -g创建vue的demo项目...原创 2019-05-03 14:10:31 · 176 阅读 · 0 评论 -
vue-cli_安装及使用
官网安装说明介绍1、安装包名称从更改vue-cli为@vue/cli。如果您在vue-cli全局安装了以前的(1.x或2.x)软件包,则需要先卸载它npm uninstall vue-cli -g# ORyarn global remove vue-cli。Vue CLI需要Node.js版本8.9或更高版本(建议使用8.11.0+)要安装新软件包,请使用以下命令之一。除非通过No...原创 2019-05-03 14:11:42 · 194 阅读 · 0 评论 -
vue_vue-devtools的安装使用
1、 到github下载源码git clone https://github.com/vuejs/vue-devtools2、在vue-devtools目录下安装依赖包cd vue-devtoolscnpm install3、修改mainifest.json文件,把"persistent"4、编译代码npm run build5、扩展Chrome插件Chrome浏览器&g...原创 2019-05-03 14:13:25 · 161 阅读 · 0 评论 -
webpack的发布配置及优化详解
webpack的发布策略1、 在实际开发中,一般会有两套项目方案:一套是开发期间的项目,包含了测试文件、测试数据、开发工具、测试工具等相关配置,有利于项目的开发和测试,但是这些文件仅用于开发,发布项目时候需要剔除;另一套是部署期间的项目,剔除了那些客户用不到的测试数据测试工具和文件,比较纯净,减少了项目发布后的体积,有利于安装和部署!2、为了满足我们的发布策略,需要新建一个配置文件,命...原创 2019-05-26 12:15:23 · 486 阅读 · 0 评论 -
三大前端框架技术选型对比
1、ReactJS简介React 起源于 Facebook 的内部项目就在2013年5月开源了。由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具。2、 前端三大主流框架Angular.js:出来最早的前端框架,学习曲线比较陡,NG1学起来比较麻烦,NG2开始,进行了一系列的改...原创 2019-05-26 15:40:12 · 6715 阅读 · 0 评论 -
js_日期格式解析
Current month of the year format mm CURRENT_MONTH_YEARDate now = new Date();int month = now.getMonth() + 1;String monthStr = month.toString();if (month &lt; 10) monthStr = '0' + monthStr;re...原创 2018-07-02 10:59:38 · 2973 阅读 · 0 评论