FE小白的进化之路

FE小白的进化之路
私信 关注
小乔FEer
码龄12年
  • 98,250
    被访问量
  • 28
    原创文章
  • 96,220
    作者排名
  • 34
    粉丝数量
  • 于 2009-03-12 加入CSDN
获得成就
  • 获得10次点赞
  • 内容获得9次评论
  • 获得15次收藏
荣誉勋章
TA的专栏
  • JS
    7篇
  • CSS
    4篇
  • FE构建工具
    2篇
  • Vue
    6篇
  • angular
    2篇
  • 正则表达式
    1篇
  • 微信小程序
    2篇
  • node
  • react-native
    2篇
  • HTML
    1篇
  • jQuery
  • gitLab
    1篇
  • 最近
  • 文章
  • 资源
  • 问答
  • 课程
  • 帖子
  • 收藏
  • 关注/订阅

gitlab的仓库迁移到新的gitlab

下载原有gitlab源码git clone http://gitlab.**.com/projectNamegitlab地址替换成为新gitlab地址git remote set-url http://gitlab.**.com/newProjectName本地推送到远程git push origin --all 推送主干和分支git push --tags 推送标签...
原创
7229阅读
0评论
1点赞
发布博客于 2 年前

input file上传图片本地预览

1. 定义上传控件<input id="inputImg" type="file" accept="image/png,image/jpeg,image/jpg" onchange="changeFile(event)">2. 本地图片预览function changeFile(event) { var i
原创
707阅读
0评论
0点赞
发布博客于 2 年前

React Native获取组件位置和大小

RN页面中定位或滚动操作时，需要获取元素的大小和位置信息，有几种常用的方法获取设备屏幕的宽高import {Dimensions} from 'react-native';var {height, width} = Dimensions.get('window');获取元素的大小和位置信息onLayout事件属性 _onLayout = (e) => { let {x,...
原创
4566阅读
1评论
0点赞
发布博客于 3 年前

JS工具函数

1. 格式化字符串，字符串左边补0/** * * @param {String} str 传入字符串 * @param {Number} len 字符总长度 */function leftZero(str, len){ str = ''+str; return str.length >= len ? str : new Array(len - str.leng...
原创
406阅读
0评论
0点赞
发布博客于 3 年前

iframe高度自适应

<iframe id="myIframe" width="100%" height="700px" frameborder="0" scrolling="no" onload="changeFrameHeight()" src="$url"></iframe><script typ
原创
568阅读
0评论
0点赞
发布博客于 3 年前

JAVA大字符串存储采用静态HTML，通过jsoup 对 HTML 文档进行解析和操作

在页面上操作大字符串时，有可能超出数据库字段，可以考虑使用静态HTML存储字符串，然后通过HTML解析器进行解析 jsoup 是一款 Java 的 HTML 解析器，可直接解析某个 URL 地址、HTML 文本内容。它提供了一套非常省力的 API，可通过 DOM，CSS 以及类似于 jQuery 的操作方法来取出和操作数据。jsoup 的主要功能如下： 1、从一个 ...
原创
393阅读
0评论
0点赞
发布博客于 3 年前

移动端H5调试

1. Android端调试方法页面支持外网访问 手机和电脑在同一个局域网（可以采用猎豹WiFi） 用手机连接线连接电脑，打开手机chrome浏览器和电脑chrome浏览器ADB plugin插件（或在浏览器输入chrome://inspect） 电脑浏览器就能检测到手机浏览器里访问的页面了 页面本地调试 手机和电脑在同一个局域网（可以采用猎豹WiF
原创
2216阅读
0评论
0点赞
发布博客于 3 年前

vue rem移动端自适配-引入flexible

1. 安装lib-flexiblenpm i lib-flexible --save2. 在项目入口文件main.js里引入lib-flexibleimport 'lib-flexible/flexible.js'3. 通过vscode插件cssrem 配置vscode，文件 -> 首选项 -> 设置，在用户设置里添加如下配置// 基础的font-
原创
2499阅读
0评论
0点赞
发布博客于 3 年前

react-native run-ios报错

1. Print: Entry, “:CFBundleIdentifier”, Does Not Exist Installing build/Build/Products/Debug-iphonesimulator/awesome.app An error was encountered processing the command (domain=NSPOSIXErrorDomain,
原创
2720阅读
0评论
0点赞
发布博客于 4 年前

移动端CSS常用小结

1. Meta标签 移动端页面添加meta标签，可以让文档的宽度与设备的宽度保持1:1，文档的最大宽度比例是1.0，不允许用户点击屏幕放大浏览。<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;
原创
177阅读
0评论
0点赞
发布博客于 4 年前

Mac node版本管理nvm command not found

## 系统根目录cd ~## 执行命令curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.25.4/install.sh | bash## 创建.bash_profile文件touch .bash_profile## 打开编辑文件.bash_profileopen -e .bash_profile## 拷贝下面内容到.ba
原创
939阅读
1评论
0点赞
发布博客于 4 年前

微信小程序-传参

1、普通页面间传参1.1 url参数传参index.js 点击按钮跳转list页面，传值usernamewx.navigateTo({ url: '../list/list?username='+this.data.username})list.js onload方法里接收username参数Page({ onLoad: function(options){
原创
6515阅读
0评论
0点赞
发布博客于 4 年前

微信小程序-gulp构建

项目采用gulp进行构建目录结构如下：src 源码文件 image 图片源文件image/dateuri base64图片（图片地址添加后缀#datauri）less less变量文件、公共文件utils 登陆相关文件dist 打包文件doc 接口文档mock 模拟接口数据安装说明如下：1、安装脚手架$ mkdir wx_demo $ cd jm_wx $ npm init
原创
1873阅读
0评论
0点赞
发布博客于 4 年前

常用正则表达式汇总

^\d+$　 　//非负整数 ^[0-9]*[1-9][0-9]*$　　//正整数 ^((-\\d+)|(0+))$　　//非正整数 ^-[0-9]*[1-9][0-9]*$　　//负整数 ^-?\\d+$　　　 　//整数 ^\\d+(\\.\\d+)?$　　//非负浮点数/^[1-9
原创
453阅读
0评论
0点赞
发布博客于 4 年前

AngularJS服务之 Factory vs Service vs Provider

AngularJS的service层用于处理业务逻辑和数据持久化，以下3钟方法可以创建并注册我们自己的service，在控制器中注入已创建的service服务，就可以调用service里面的属性和方法了。1、Factory2、Service3、Provider1、最简单的方式：Factory工厂方法Angular里创建service最简单的方式就是使用factory()方法，使
原创
451阅读
0评论
1点赞
发布博客于 4 年前

Angular动态绑定HTML文本

AngularJS中输出变量使用{{}}花括号或者ng-bind命令，在进行数据绑定时默认是以文本的形式输出，如果变量中有HTML标签的话，默认是不转义的，直接以标签的形式显示，这样防止了XSS脚本注入攻击。XSS攻击指的是通过对网页注入可执行客户端代码且成功地被浏览器执行，来达到攻击的目的，形成了一次有效XSS攻击，一旦攻击成功，它可能会获取到用户的一些敏感信息、改变用户的体验、诱导用户等非法行
原创
9453阅读
0评论
0点赞
发布博客于 4 年前

CSS布局集合

布局是CSS的一个重要部分，本文主要对CSS布局中常见的经典案例进行实现，涉及到Web端两栏式、三栏式布局及APP端布局1、左列定宽，右列自适应方法一：position + margin布局，外层容器设置相对定位，左侧容器设置相对定位及宽度，右侧容器设置左边距.parent{position: relative;}.left{position:absolute;width:100px;}.r...
原创
335阅读
0评论
1点赞
发布博客于 4 年前

JS常用小结

开发过程中我们遇到的一些JS的问题，总结一下，未完待续……1、滚动条滚动到页面容器底部，设置滚动条距离顶部的高度为容器内容高度和容器可视区域高度的差，并添加动画。var obj = document.getElementById('msgList'); if(obj.scrollHeight > obj.clientHeight){ $(obj)
原创
280阅读
0评论
0点赞
发布博客于 4 年前

Swiper内容超出添加横向/纵向滚动

在使用Swiper做移动端内容切换时，有些swiper-slide节点中的内容超出节点的宽度或高度，想要在swiper-slide节点中添加滚动条，当滚动条滚动到节点的顶部/左侧时切换上一个swiper-slide节点，当滚动条滚动到节点的底部/右侧时切换下一个swiper-slide节点，要肿么实现嘞？首先要设置swiper-slide的overflow属性.swiper-slide
原创
14153阅读
2评论
0点赞
发布博客于 4 年前

Clipboard.js实现复制文本到剪贴板功能

Clipboard.js是一个轻量级的实现复制文本到剪贴板功能的JavaScript插件，该插件可以将输入框，文本域，DOM节点元素中的文本内容复制到剪贴板中。官网地址：https://clipboardjs.com/ 浏览器兼容性：兼容Chrome、Firefox、Opera、Safari、IE9+对于不兼容的浏览器版本也有优雅的降级处理，可以采用下面的方式clipboard.o
原创
2974阅读
0评论
2点赞
发布博客于 4 年前

Vue父子组件通信实践

1、父组件通知子组件2、子组件通知父组件
原创
448阅读
0评论
0点赞
发布博客于 4 年前

v-html中使用filters

Vue2.0的过滤器只能应用在{{ }}和v-bind中，不再支持v-html中使用，如果要在v-html中使用过滤器，怎么办呢？解决方法有三种：1、使用全局方法定义方法methods: { formatTrend(val) { let trend = 'up'; if(val.indexOf('-') > -1){ trend =
原创
5648阅读
0评论
0点赞
发布博客于 4 年前

Vue大括号字符换行踩的坑

最近遇到这样一个问题，在页面上要显示一段自定义的文本，文本如果较长的话需要换行显示。在HTML中可以通过标签换行，也可以通过
转义字符换行在Vue中用大括号显示的变量，加会直接被当成字符串显示出来，加
显示一个空格，加\r
显示两个空格，因为{{}}}是文本插值，内部都会按照普通字符串进行处理，可以用v-html进行显示如下显示name变量data() { retu
原创
16721阅读
3评论
3点赞
发布博客于 4 年前

vue-router动态设置页面title

由于用Vue框架开发的应用是SPA（单页面应用），采用的是路由的形式，没有所谓的页面，所以想让网页的标题随着路由的改变而改变，可以使用document.title = ×××来改变网页标题。但是在IOS APP里这种方式不起作用，原因是在IOS webview中网页标题只加载一次，动态改变是无效的。解决方案是在路由切换完成之后，静默加载一个空的iframe动态设置titleutil
原创
10708阅读
2评论
1点赞
发布博客于 4 年前

vue-cli脚手架构建Vue项目及相关配置

Vue是移动端H5开发比较流行的一个MVVM框架，它是以数据驱动的，不需要像jQuery那样操作DOM，而是通过将DOM和数据绑定，利用Object.defineProperty中的setter/getter代理数据，监控对数据的变化，当数据改变时更新DOM。Vue项目构建有两种方式，构建大型应用时推荐使用命令行工具构建：1、直接<script>标签引入2、vue-cli命令行工具vu...
原创
3291阅读
0评论
1点赞
发布博客于 4 年前

Yeoman配置攻略

Yeoman是Google团队开发的项目，通过内部三个工具yo,grunt,bower协同工作，可以让网络前端开发者快速打造一个漂亮的网络应用。yo: 脚手架工具，用于构建一个新的项目框架，项目工程依赖目录和文件生成工具，项目生产环境和编译环境生产工具bower: web开发的包管理，类似npm, npm专注于nodejs模块，bower专注于css、js、图像等前端内容管理，bower的
原创
1133阅读
0评论
0点赞
发布博客于 4 年前

移动端CSS常用小结

1、Meta标签移动端页面添加meta标签，可以让文档的宽度与设备的宽度保持1:1，文档的最大宽度比例是1.0，不允许用户点击屏幕放大浏览。2、禁止IOS自动识别电话和Android自动识别邮箱3、禁止文本选择-webkit-user-select:none4、屏蔽输入框阴影，去掉按钮默认样式-webkit-appearance:none5、border-box
原创
233阅读
0评论
0点赞
发布博客于 4 年前

JSONP跨域原理浅析

JSONP的出现是因为浏览器的同源策略，同源是指所请求的域名、协议、端口号和当前请求相同，同源策略限制了原生XMLHttpRequest()对象无法获取到JSON数据，但是标签是可以跨域的。JSONP的原理是通过标签向服务器发送请求，将前端方法作为参数传递到服务器，服务器接收到请求后将SON数据作为该方法的参数，返回JavaScript文本，前端方法就可以拿到数据。
原创
269阅读
0评论
0点赞
发布博客于 4 年前

jsp页面美化经典-css翻页代码

24款css翻页代码 BODY { FONT-SIZE: 12px;FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;WIDTH: 60%; PADDING-LEFT: 25px; } /*CSS Digg style pagination*/ DIV.digg { PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; MARGIN: 3px; PADDING-TOP: 3px; TEXT-ALIGN: center } DIV.digg A { BORDER-RIGHT: #aaaadd 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #aaaadd 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #aaaadd 1px solid; COLOR: #000099; PADDING-TOP: 2px; BORDER-BOTTOM: #aaaadd 1px solid; TEXT-DECORATION: none } DIV.digg A:hover { BORDER-RIGHT: #000099 1px solid; BORDER-TOP: #000099 1px solid; BORDER-LEFT: #000099 1px solid; COLOR: #000; BORDER-BOTTOM: #000099 1px solid } DIV.digg A:active { BORDER-RIGHT: #000099 1px solid; BORDER-TOP: #000099 1px solid; BORDER-LEFT: #000099 1px solid; COLOR: #000; BORDER-BOTTOM: #000099 1px solid } DIV.digg SPAN.current { BORDER-RIGHT: #000099 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #000099 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #000099 1px solid; COLOR: #fff; PADDING-TOP: 2px; BORDER-BOTTOM: #000099 1px solid; BACKGROUND-COLOR: #000099 } DIV.digg SPAN.disabled { BORDER-RIGHT: #eee 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #eee 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #eee 1px solid; COLOR: #ddd; PADDING-TOP: 2px; BORDER-BOTTOM: #eee 1px solid } ……
application/x-rar
发布资源于 10 年前

C数据结构——语言实现迷宫问题

以二维数组mazetype[MAXLENGTH][MAXLENGTH]表示迷宫，在其周围加一圈围墙；数组中0表示障碍，1表示通路。 2 程序引导用户初始化迷宫，输入其中的障碍； 3 迷宫的入口和出口可以由用户自己设定。 4 若迷宫有通路，则在其走过的路径上以1表示可以通过；
application/x-rar
发布资源于 12 年前