前端技术相关
关注
分享
扫一扫
文章平均质量分 57
汪喆_Jack
本人热爱开发， 喜欢学习各种IT技术，了解新技术，希望和志同道合的伙伴切磋，相互交流！
展开
-
XSS最佳实践
什么是XSS？Cross Site Scripting跨站脚本攻击【跨站不一定表示要引用远程的脚本】XSS攻击介绍XSS攻击样例<!-- 程序 -- ><div> #{content}</div><!-- 数据一 -->content:Hello Jack<!-- 结果一 --><div> Hello Jack</div><!-- 数据二 --><script&g.原创 2020-12-08 23:00:45 · 364 阅读 · 0 评论 -
Bootstrap4使用图标失效的解决方案
博主使用Bootstrap4开发Angular项目时，想使用星星图标但发现不好使，仔细一查是因为Bootstrap移除了收费图标的内容，故搜集了网上相关内容，提供以下解决方案。1.问题描述Bootstrap4移除了收费图标的相关内容，如果想使用图标样式需要使用https://octicons.github.com/ 和http://fontawesome.io/提供的内容。当然还可以自行引...原创 2018-09-17 19:16:13 · 15418 阅读 · 6 评论 -
Angular与服务器通讯
一.创建web服务器1.使用nodejs创建服务器创建一个server文件夹初始化server文件夹npm init -y，创建package.json引入node的类型定义文件npm i @types/node --save,类型定义文件的作用：让开发者在typescript中使用现在已有的javascript的库（安装类型定义文件是保证对应内容可以使用typescript进...原创 2018-10-17 23:42:01 · 382 阅读 · 0 评论 -
Angular6使用angular2-busy报错
博主在angular6中引入Angular2-busy插件报错，查阅资料得到以下解决方案跟大家分享以下报错信息:error TS2307: Cannot find module ‘rxjs-compat/Subscription’.解决方案:执行npm i rxjs-compat安装rxjs插件...原创 2018-10-20 00:01:54 · 229 阅读 · 0 评论 -
Angular6中FileUpload插件无法上传同一个文件
使用FileUpload插件进行文件上传时，发现无法上传与上个文件相同的文件，而且不会调用任何组建的生命周期钩子，经过2个小时的研究，找到了问题解决方案由于没有在input标签中添加multiple属性，此属性用于上传多个文件，而我们上传同一文件也属于这个情况示例代码<input id="photo" type="file" ng2FileSelect [uploader]="up...原创 2018-11-06 08:39:45 · 1276 阅读 · 1 评论 -
px,em,rem,vh,vw,vmin和vmax的区别
css调整大小是前端工程师常做的事，下面将对px,em,rem,vh,vw,vmin和vmax进行简要讲述1.px像素单位，是显示屏上显示的每一个小点，为显示的最小单位，是一个绝对尺寸2.em相对值1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素，那么对于该元素，1em 就等于 16 像素。在设置字体大小时，em 的值会相对于父元素的字体大小改变。...原创 2018-11-06 09:55:49 · 1053 阅读 · 0 评论 -
Angular6中使用required提示不存在
博主开发angular6项目使用required(’…’)提示没有required。required(’…’)是node的语法，那如果在angular6中想使用该怎么办呢?解决方案：在使用required代码的上方设置declare var require: any;即可解决问题~...原创 2018-11-13 21:55:03 · 1764 阅读 · 0 评论 -
HTML基础强化
一.HTML常见元素和理解1.<head>中的元素不会在页面中留下直接的内容元素内容meta/title/style/link/script/base2.<body>中的元素直接出现在页面上的元素块级元素div/section/article/aside/header/footerp段落行内元素span/sm/strong表格相关元素table/th...原创 2018-11-20 23:29:19 · 165 阅读 · 0 评论 -
解决html中显示人民币符号乱码问题
博主今天写邮件模板，HR给的内容带有¥符号，但是使用之后确是乱码，得到如下解决方案问题内容：HTML中显示¥符号乱码解决方案：使用&yen;字符实体替换¥符号...原创 2018-12-11 21:55:26 · 3409 阅读 · 0 评论 -
Bootstrap4中col-sm-*无效
Bootstrap4中发现col-sm-*无效对于超小设备的样式已经不是col-sm-*超小设备的样式更新为col-*即可设置偏移也不是offset-sm-，而是offset-原创 2018-12-24 23:31:20 · 4001 阅读 · 0 评论 -
Angular项目中引入awesome字体<i>元素
在公司直接使用<i>即可使用对应的awesome字体，笔者以为直接使用即可，没想到也同样需要引入，本文将介绍angular如何引入awesome字体元素安装awesome字体元素npm install font-awesome在angular.json文件中的styles数组中引入"node_modules/font-awesome/css/font-awesome.css"...原创 2019-02-03 19:35:30 · 620 阅读 · 0 评论 -
Angular6引入Bootstrap等第三方类库无效
博主学习Angular时引入第三方类库总是不成功，于是便访问了谷歌和百度，可算找到了解决方法，分享给大家~1.类库引用路径问题Angular6的命令行工具配置文件从angular-cli.json更名为angular.json，且路径变更需要对文件中的信息作如下调整// 调整前"styles":[ "styles.css", "../node_modul...原创 2018-09-17 16:48:03 · 1687 阅读 · 0 评论 -
TypeScript入门
TypeScript是微软开发的JavaScript的超集，遵循ES6。由于项目需要，博主自行学习了一下TypeScript基础知识，并分享给大家，有问题请随时评论区交流~一.TypeScript优势支持ES6规范强大的IDE支持Angular2的开发语言二.搭建TypeScript的开发环境1.什么是compiler？为什么需要compiler？浏览...原创 2018-09-16 15:51:57 · 4374 阅读 · 0 评论 -
Babel入门
javascript的编译工具，可以把一种形式的js转换成另一种形式的js，如能将es6的js编译成es5的样子。babel支持jsx、jspm、webpack等。安装babel:npm install babel-cli –save-dev查看babel帮助信息:babel -help使用babel处理文件:eg1.babel script.jsscript.js为被处...原创 2018-08-03 16:31:27 · 282 阅读 · 0 评论 -
jspm入门
支持所有方法写的js的模块，用于加载模块可以为浏览器进行包管理，可以使在不同的源上面安装不同的包（eg.npm、github）eg. jspm install jquery=github:components/jquery 注： 也可以使用jspm install jquery下载，因为jspm会用到registry仓库，其中registry.json列出常用...原创 2018-08-03 16:39:54 · 2754 阅读 · 0 评论 -
frameset应用
1.标签解析：<frameset></frameset>frameset元素定义一个框架集，它被用来组织多个窗口（框架）。组织好在页面显示。<frame></frame>frame标签定义frameset中的一个特定的窗口（框架）。嵌套在frameset标签中使用。<noframe></noframe>在frame...原创 2018-08-03 19:37:07 · 476 阅读 · 0 评论 -
React基础技术点与JSX语法
1.核心技术点create-react-app脚手架组件化思维JSX开发调试工具虚拟DOM生命周期React-transition-groupRedux等2.基本知识reactJS——网页react native——原生appreact vr——开发vr全景应用react 16版本之后的内容可以称之为React Fiber强调优先级3.开发环境...原创 2018-08-04 12:35:55 · 877 阅读 · 0 评论 -
React基础
1.使用React编写TodoList//TodoList.jsimport React ,{ Component, Fragment}from 'react';class TodoList extends Component{ render(){ return( &amp;amp;lt;Fragment&amp;amp;gt; &amp;amp;lt;in...原创 2018-08-04 12:43:21 · 482 阅读 · 0 评论 -
React项目部署在Tomcat中的方法
博主辛辛苦苦敲的react代码，结果想部署到Tomcat中一直都无法显示。之后便走访百度、谷歌，终于找到了项目部署失败的原因，下面将进行一下总结。部署方法：使用npm run build将项目打包把打包后的文件夹中内容放到tomcat中webapps下的Root中开启服务器访问localhost:8080端口即可以看到你的项目内容不放置在Root目录下的坑：由于默认...原创 2018-08-15 01:29:43 · 14195 阅读 · 1 评论 -
React进阶
1.安装React开发调试工具（React Developer Tools）：对React项目进行调试Google -> 更多工具 -> 扩展程序 -> 左下角打开Chrome网上应用店 -> 搜索React -> React Developer Tools -> 添加至ChromeReact Developer Tools调试工具颜色:灰色: 没有用...原创 2018-08-07 15:27:24 · 2237 阅读 · 0 评论 -
Redux进阶
1.UI组件与容器组件的拆分UI组件业界称为傻瓜组件[只负责页面显示]，容器组件业界称为聪明组件[不管UI长成什么样子，关注业务逻辑]UI组件负责页面的渲染，容器组件负责页面逻辑将TodoList组件拆分成TodoList的容器组件和TodoListUI的UI组件示例代码：//[TodoList.js]import React ,{Component} from 'react'...原创 2018-08-13 00:04:19 · 276 阅读 · 0 评论 -
Redux入门
1.Redux概念简述Redux设计理念如上图，Redux要求把数据放到公共存储区域Store里，组件中尽量少放数据。当蓝色组件修改公共数据时，Store中的值发生改变，其他使用到该数据的组件到Store中取修改后的值即可。Redux = Reducer+FluxFlux原本是官方提供的辅助React的数据层框架，但公共数据存储区域由于有很多Store而出现问题，故最终升级成Red...原创 2018-08-08 10:13:34 · 550 阅读 · 0 评论 -
React事件处理函数必须使用bind(this)的原因
学习React的过程中发现调用函数的时候必须使用bind(this)，之后直接在class中声明函数即可正常使用，但是为什么呢，博主进行了一番查阅，总结如下。1.JavaScript自身特性说明如果传递一个函数名给一个变量，之后通过函数名()的方式进行调用，在方法内部如果使用this则this的指向会丢失。示例代码：首先我们创建test对象并直接调用方法 ： c...原创 2018-08-15 16:08:55 · 19523 阅读 · 4 评论 -
JavaScript基础入门(ES5)
1.在网页中嵌入脚本代码的方法在html中嵌入<script>...</script>将外部script.js文件链接到html中<script src="xxx.js"></script>2.注释//单行注释/**/多行注释3.变量声明变量:var 变量名1,变量名2...;变量命名规范：字母、数字、下划...原创 2018-08-27 14:17:51 · 3017 阅读 · 0 评论 -
npm入门
npm入门 更新npm: sudo npm install npm –globalnpm可以在全局范围内安装包（通常是命令工具）: eg. npm install forever -g删除包: eg. npm uninstall forever [如果在全局范围则加-g]在项目内安装包: eg. npm install underscore在项目内安装指定版本: eg...原创 2018-08-03 16:26:59 · 261 阅读 · 0 评论