Web Front – ershing's blog

2019年2月8日

写了一个个人资产管理的后台系统

关于个人记账的，本来想写一个app来着，后来觉得记账这种事应该是自己定时回归的，不应该是app那种经常可以打开的方式，过于便捷反而过于随便，所以需要一种有仪式感的事情，就好像以前会打开记账本，一条一条记账那种感觉。

为了记账，最后统一为一个个人资产管理的后台，也挺直观，可以看到各项资产组成和趋势，最后就快速地写了一个项目，没有考虑代码的太多东西，只考虑功能的快速实现，而且只能记当前年的账，还特意参考了spendee这个app的可以计划记账的功能，特别喜欢。

项目地址：https://github.com/ershing/asset-admin

附上部分图：

2017年9月17日2017年9月17日

使用ECharts绘制图表

如果我们想绘制一些图表类的，用框架肯定非常简单就能绘制出我们需要的图表了，其实绘制图表的框架有很多，这里就用ECharts做一个简单的例子，也是非常容易上手的，官网：http://echarts.baidu.com/。

引入echarts之后，步骤简单分为三步：

1、为ECharts准备dom；

2、设置配置项和数据；

3、使用配置项和数据渲染图表。

看起来是不是和模板引擎使用差不多呢？可以认为我们设置一个图表模板，然后在某个dom节点上渲染出来，就是那么简单。

直接分解出三步来写一下代码：

1、为ECharts准备dom：


<div id="main" 
style="width: 600px; height: 400px; margin: 200px auto;">
</div>

2、设置配置项和数据option：

//设置图表标题
title: {
   text: 'web前端技术掌握程度表'
}
//设置数据名称
legend: {
   data:['掌握程度']
}
//设置 x 轴各项
xAxis: {
   data: ["HTML","CSS","JavaScript","Vue","React","Angular"]
}
//设置对应数据名称的实际值
series: [{
   name: '掌握程度',
   type: 'bar',
   data: [85, 80, 90, 85, 70, 50]
}]

3、使用配置项和数据渲染图表

myChart.setOption(option);

就是这么简单了，完整代码为：代码，完整效果为：图表。

文章在我的github上的地址：点击跳转

2017年8月31日2017年8月31日

HTML5中的简单过渡效果

网页的动画越来越多样化，而且HTML5越来越得到更多的支持，我们可以结合CSS3（主要用到transition和animation两种方式）和js脚本来实现很多复杂的动画和特效。这里举一个超级简单例子展示一下：

我们实现一个按钮及其过渡效果，最后效果这样：效果

先设置一个div，里面放一个链接a标签，文字为“点击按钮”：

 <div>
   <a href="http://www.ershing.cn">点击按钮</a>
 </div>

然后设置外面的样式，使得div大概居于屏幕中间，背景颜色为浅蓝色：

 body{
   width:100%;
   height:100%;
   background:lightblue;
 }
 div{
   background:lightblue;
   height:60%;
   width:30%;
   margin:20% auto;
   text-align:center;
 }

然后设置a标签的样式为白色边框，白色底，还有一些文字间隔大小等内容：

 a {
   display: block;
   margin:50px;
   color: white;
   text-decoration: none;
   font-family: sans-serif;
   font-size: 25px;
   line-height: 60px;
   border: 1px solid white;
   border-radius: 10px;
   text-align: center;
   text-indent :20px;
   letter-spacing: 20px;
 }

再设置它的鼠标放置上面之后（hover）的样式：

 a:hover {
   color: purple;
   background: white;
   border:1px solid plum
 }

好了，基本样式就搞定了，我们发觉这样每次放置鼠标上去和离开鼠标都有一种很突然的感觉，这里就要用到过度效果了，给a加一个匀速的0.5s转换效果：

 -webkit-transition: all .5s linear;
 transition: all .5s linear;

好了，基本就搞定了，源码参考：源码

效果可以参考：效果

其实压根就是非常简单的用了一个transition过渡，不过结合css样式一起，我们可以得到很多我们想要的效果。

文章在我的github上的地址：点击跳转

原创文章，转载请注明出处！

本文章采用知识共享署名-非商业性使用-相同方式共享 3.0 中国大陆许可协议进行许可。

2017年8月30日2017年8月30日

CSS3中的图形

CSS3出来之前，我们只能有矩形的图形，CSS3之后，clip-path和shape-outside可以做出很强大的图形功能，这里暂且不说。我们也可以通过border-radius、 border、 transform、伪元素配合、gradient 渐变，我们能够作出非常多的几何图形，这里举例一下几个经典的样式：

三角形：

 .traingle {
   width: 0;
   height: 0;
   border-left: 50px solid transparent;
   border-right: 50px solid transparent;
   border-bottom: 100px solid lightblue;
 }

梯形：

.trapezoid {
    position: relative;
    width: 60px;
    padding: 60px;
}

.trapezoid::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: perspective(20px) scaleY(1.3) rotateX(5deg);
    transform-origin: bottom;
    background: lightblue;
}

六边形：

.hexagon {
    position: relative;
    width: 60px;
    border-bottom: 60px solid lightblue;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
}

.hexagon::before {
    content: "";
    position: absolute;
    width: 60px;
    height: 0px;
    top: 60px;
    left: -40px;
    border-top: 60px solid lightblue;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
}

五角星：

.star {
    margin: 50px 0;
    position: relative;
    width: 0;
    border-right: 100px solid transparent;
    border-bottom: 70px solid lightblue;
    border-left: 100px solid transparent;
    transform: rotate(35deg) scale(.6);
}

.star:before {
    content: '';
    position: absolute;
    border-bottom: 80px solid lightblue;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    top: -45px;
    left: -65px;
    transform: rotate(-35deg);
}

.star:after {
    content: '';
    position: absolute;
    top: 3px;
    left: -105px;
    border-right: 100px solid transparent;
    border-bottom: 70px solid lightblue;
    border-left: 100px solid transparent;
    transform: rotate(-70deg);
}

椭圆：

.ellipse {
    width: 120px;
    height: 160px;
    background-color: lightblue;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

还有其他的一些可以直接看图：效果

参考源码（反正我也是摘抄的）：源码

2017年8月28日2017年8月28日

CSS样式参考配色

关于在css样式选择配色问题的时候，个人认为不能随便选择一个颜色，网上有很多配色方案，都可以参考一下，不同颜色的搭配方案是很符合个人审美观的，这里贴一下别人发我的图，应该都是网上截图过来的，这里借用一下：

可以用QQ截图时候直接当吸管工具，查看颜色值。

文章在我的github上的地址：点击跳转

原创文章，转载请注明出处！

本文章采用知识共享署名-非商业性使用-相同方式共享 3.0 中国大陆许可协议进行许可。

2017年8月24日2017年8月28日

大文件分块上传、断点续传

很多时候我们需要上传文件，都会用到直接form-data的方式上传，但是如果文件太大呢，例如一个500MB的文件，服务器端对请求数据有大小要求限制怎么办，不可能整个大文件传输，又或者你想读取文件内容怎么办，这么大的文件全部读入内存？浏览器不答应吧。所以我们就想到分块的方法。

主要用到的是HTML 5 的file相关的api，这里不讨论相关读取文件内容（其实也不过是用了FileReader 对象的readAsArrayBuffer方法而已），这里单纯实现文件分块，然后上传，当然还有断点续传。下面只展示关键代码。

废话少说，先来个HTML的框架大致内容用于测试，一个选择文件按钮，一个上传按钮：

<input type="file" id="files" name="file" />
<input id="uploadBtn" type="button" value="上传">

然后开始script标签内容了，先DOM获取文件和按钮、并设置上传的地址：

var input = document.getElementById('files');
var upload = document.getElementById('uploadBtn');
//自己建立一个测试的服务器，后面会提到后端的代码
var host = 'http://localhost:10000/attachment/upload'

好了，获取到文件之后，就要开始切割了，切割考虑到不同浏览器的兼容性问题，所以要做个判断：

var blob;
if (file.webkitSlice) {
      blob = file.webkitSlice(fileLoaded, fileLoaded + block);
} else if (file.mozSlice) {
       blob = file.mozSlice(fileLoaded, fileLoaded + block);
} else if (file.slice) {
      blob = file.slice(fileLoaded, fileLoaded + block);
} else {
      alert('不支持分段读取！');
}

切割完之后，就要放进去新创建的FormData对象里面了：

var formData = new FormData();
formData.append("fileBlob", blob);

最后，用jquery的ajax异步上传，在回调的地方判断文件是否完成整个切割上传，如果还没上传完成，继续切割继续上传：

$.ajax({
    url: host+'/base_data_service/pic/upload',
    type: 'POST',
    data: formData,
    cache: false,
    contentType: false,
    processData: false,
    success: function (data) {
        if (data.guid) {
            //用guid来标识某个文件
        }
        if (percent < 1) {
            // 继续切割下一块
        } else {
            // 结束
            console.log('已完成文件存储');
        }
        return;
    },
    error: function (data) {
        console.log('上传出现错误', data);
    }
});

至于怎样断点续传呢？就是在每次回调的地方存储文件已经切割上传的位置，那么即使断网了，再连上去下一次也知道从哪里开始继续切割了。

参考代码并不完全严谨，只是提供一个总体思路。

完整的前端代码可以参考：前端源码参考

当然了，这个前端代码还是要配合后端的操作的，这里后端用node写的，也可以参考一下：后端源码参考

文章在我的github上的地址：点击跳转

原创文章，转载请注明出处！

本文章采用知识共享署名-非商业性使用-相同方式共享 3.0 中国大陆许可协议进行许可。

2019年十月
一	二	三	四	五	六	日
« 8月
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31