- 博客(21)
- 收藏
- 关注
RSS订阅原创 overflow:hidden单行和多行文本溢出隐藏需要注意
1.单行文本溢出单行文本隐藏样式使溢出部分使用省略号显示，需要下面3个属性同时设置：overflow: hidden;white-space: nowrap;text-overflow: ellipsis;完整代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"...
2019-05-31 19:18:48
2034
原创 小程序：模板与引用
准备工作：新建一个quickstart项目，然后再pages目录下自己新建一个页面，例如t文件夹名为test，再在其下分别新建test.wxml、test.js、test.wxss文件。最后在app.json全局配置文件中配置test页面路径，项目结构如下：然后再新建模板目录，在其下面新建header.wxml组件，相当于vue的组件，单独写一个文件，在其他页面方便直接拿来使用。如下：1...
2019-05-31 17:53:28
2649
原创 小程序：组件使用、数据绑定、条件渲染、列表渲染
准备工作：新建一个quickstart项目，然后再pages目录下自己新建一个页面，例如t文件夹名为test，再在其下分别新建test.wxml、test.js、test.wxss文件。最后在app.json全局配置文件中配置test页面路径，项目结构如下：1.组件的基本使用小程序开发文档中组件部分有很多组件介绍，包含视图容器类组件，基础内容类组件、表单组件、导航组件、媒体组件、地图组件和...
2019-05-31 11:21:07
2145
原创 小程序制作宋词欣赏海报
海报就是单纯的一张页面，可以用来练习WXML和WXSS。进一步入门微信小程序。海报效果如下：在经过小程序的预热一和预热二后，新建一个小程序项目已经不成问题了。海报的制作过程：1.页面结构实现页面结构主要是通过WXML模板组成。使用小程序官方封装好的view标签和image标签。view标签类似于div，可以显示文字，也单独占据一行。封装的标签也可以使用css的class选择器。代码如下：...
2019-05-29 21:01:44
588
原创 微信小程序预热(二)：小程序五脏组成介绍
九层之台起于垒土，想要完成一个小程序项目，当然要明白小程序是有哪几部分构成的，及每一部分各自所起的作用、这几部分之间的关联。弄清楚的了这些问题才能明白小程序的实现原理。上节预热一种使用微信开发者工具新建了一个helloworld的小程序，如果你的环境还没搭建，也不知道如何建立第一个小程序项目，请参考：微信小程序预热一1.小程序代码构成这里创建了建了一个 QuickStart 项目，界面如下：...
2019-05-29 14:56:58
500
原创 微信小程序预热(一)：如何开启第一个小程序
正所谓万事开头难，走出第一步，后面也就顺其自然走上来了，当我要开始学习小程序的时候，看了两天的小程序官方开发文档，但是仍然不知道怎么创建我自己的一个小程序。所以我决定在这个晚上结束这种畏惧的状态，打开笔记本，开始第一步预热操作。1.小程序说明小程序有一套健全的官方开发文档，中文模式，基本都能看的懂。文档中对小程序的介绍如下：小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取...
2019-05-28 22:35:30
681
原创 git提交代码到GitHub常见问题解决
git提交代码到GitHub时，由于多人同时对工程项目进行修改，可能会引起冲突，命令行会报一些错误。这里将我遇到的问题及解决方法记录下来。问题1：error：failed to push some refs to问题描述：命令行报 “error：failed to push some refs to …” 错误？报错截图如下：解决方法1出现错误的主要原因是github中的README...
2019-05-27 19:11:46
1773
原创 js实现图片懒加载原理
有时候一个网页会包含很多的图片，例如淘宝京东这些购物网站，商品图片多只之又多，页面图片多，加载的图片就多。服务器压力就会很大。不仅影响渲染速度还会浪费带宽。比如一个1M大小的图片，并发情况下，达到1000并发，即同时有1000个人访问，就会产生1个G的带宽。为了解决以上问题，提高用户体验，就出现了懒加载方式来减轻服务器的压力，优先加载可视区域的内容，其他部分等进入了可视区域再加载，从而提高性能。...
2019-05-24 17:21:47
124974
42
原创 vue商城购物车功能开发(含动图)
购物车不管实在众多的电商网站还是手机APP中都很常见，它的实现逻辑也是相对复杂的。购物车作为组件开发，在其他应用或者页面也可以拿来直接使用。包含如下功能：购物车模板商品数量加减商品总价结算商品删除商品全选反选实现效果如下：1.购物车页面模板实现引入bootstrap购物车的页面不再使用html一点点的写，这里使用bootstrap，比较节省时间。所以要引入bootstr...
2019-05-22 20:56:55
5162
8
原创 你会制作点赞吗？(含动图)
像常见的QQ空间点赞、微信点赞、各种论坛和微博都会有点赞的功能，其实现也是比较容易。用到的css处理知识如下：jquary的$(‘tag’).append()setInterval()定时器css样式透明度opacity定位position字体大小、位置实现代码实现代码如下：<!DOCTYPE html><html lang="en"><he...
2019-05-21 11:24:56
1139
原创 商城项目商品列表页的渲染实现(含动图)
有了v-for循环，渲染商品列表简直不要太方便了，以前写一个商品列表页要一天，现在只需要几分钟，除了模拟数据会耗一点时间。这里可以了解下Mock模拟数据，它可使前端工程师独立于后端进行开发，在前端可以先行自己测试，之后再与后端对接联调，可以节省不少的时间。所谓孰能生巧，vue构建项目联系的多了以后也可随意的封装组件，抽离组件。用起来得心应手。实现效果动图如下：商品列表页的实现步骤如下：1...
2019-05-20 20:13:52
3314
原创 git常用命令
公司用的还是SVN版本库，但是自己往GitHub中提交项目还是会用到git命令的，这些命令使用一次两次也记不住，必须要经常使用才能记得住，所以这里记录下来，用到的时候有地方查。如下：git init &n...
2019-05-16 19:58:31
285
原创 商城项目登录功能实现(动图)
导语去年上传了重构小米官网商城的首页，但是没有登录注册功能。不论是js原生方法实现，还是jq和vue等框架实现，个人认为是大同小异，思路是一样的。在使用vue构建数字商城的项目中使用vue也实现了登录功能，点击登录跳转到登录页面是使用vue-router实现的，登录页面事使用html、css实现，登录验证功能使用表单、v-model和正则表达式实现。先看实现的功能如下：演示的有些快，可能...
2019-05-16 19:14:27
3324
原创 我们一起写算法04
1.算法使用范围：二分法查找使用数据量较大的时候，但是条件是数据需要先排好顺序。2.算法描述：确定该区间的中间位置，每次查找中间的值，数组被分为左边和右边两部分。将查找的值与中间值比较。（1）如果相等，就返回对应的下标。（2）如果查找的值大于中间的值，则将右边部分数组继续分成左右两部分，确定中间位置的值，继续步骤2。（3）如果小于，则在数组左半边继续二分查找。重复上述步...
2019-05-14 09:28:52
465
原创 我们一起写算法03
前端面试中关于数组问题层出不穷，就我见到三个问题做出以下分析。问题如下：问题1：如何实现数组的去重问题2：从下面数组中找出不重复的元素算法问题3：从下面数组中找出重复的元素算法1.实现数组去重的方法实现数组去重有多重方法：方法1：计数排序，遍历每个元素为其设置布尔值。只针对正整数。var a = [5,8,3,4,3,2, 8];var onlyElement...
2019-05-13 18:24:49
651
2
原创 我们一起写算法02
json数据转换成树形结构，无非就是便于渲染，将一个平铺的 ‘树’ 结构转换成一个真正的 ‘树’ 结构，就是如下效果：1.树形结构效果json格式数据：[ {id: 7, name: '快鱼', pid: 2}, {id: 8, name: '海澜之家', pid: 2}, {id: 9, name: '森马', pid: 2}, {id: 13,...
2019-05-10 16:33:03
1133
1
原创 redis源码中ps auxww | grep '[r]edis-server' | awk '{print $2}'
Linux长命令的分开解。分为ps auxww、grep命令和awk '{print $2}'三部分，即每个管道符号|前面是一个命令。另外记录下常用的ps -ef|grep命令。1. ps auxwwps：ps命令用于显示当前进程 (process) 的状态。语法：ps [options] [--help]ps的参数：-A ：列出所有的行程-w ：显示加宽可以显示较多的资讯-a...
2019-05-06 15:01:15
1368
原创 vue制作幻灯片时涉及的transition动画(动图)
幻灯片使用频率很高，就是各个网站的轮播大图。为了使图片更加平滑的过渡，就考虑给幻灯片加上transition动画。先看实现的效果，然后再分析动画原理。上图可以看出，幻灯片是慢慢的滑出来，而不是一下一下的跳出来。1.transition动画原理Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡。条件渲染 (使用 v-if)条件展示 (...
2019-05-02 17:14:03
2004
原创 shell编程——if语句(if -z -n -f -x -eq -ne -lt -a -o)
shell流程控制与其他语言有一点不同就是它的流程控制不可为空，即else分支没有语句执行，就不要写这个else。本文介绍if语法使用方法、特殊文本表达式-z -n -f -eq -ne -lt等及shell的逻辑表达式用法。1.if语法条件表达式一定要有fi结尾！！！if语法格式命令执行成功，返回0 （比如grep ,找到匹配）执行失败，返回非0 （grep,没找到匹配）if语...
2019-05-01 15:30:15
32372
2
原创 shell变量
1.变量定义定义变量时，变量名不加美元符号$，PHP语言中变量需要添加。例如：username="xiaohua"变量名和等号之间一定不能有空格！！！！命名规则：命名只能使用英文字母，数字和下划线，首个字符不能以数字开头。中间不能有空格，可以使用下划线（_）。不能使用标点符号。不能使用bash里的关键字（可用help命令查看保留关键字）。下列变量都有效：2.使用变量s...
2019-05-01 11:26:25
335
原创 shell编程case语句与预定义字符$n $# $@ $! $? $0等
趁着五一假期研究一下shell编程，只因为经理交给我们一些计划外的工作，把GitHub中redis项目源码中的脚本功能和脚本的实现流程画出来。说的虽然简单，做起来还是要用很多时间来科普知识的。因为这些有使用shell写的脚本，也有Ruby脚本还有tcl脚本。要想把流程图画出来还是有看懂这几种脚本语言的语法的。。。。。1.case语法Shell case语句为多选择语句。可以用case语句匹配一...
2019-05-01 10:47:13
1422
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人