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

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

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

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

附上部分图:

使用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上的地址:点击跳转

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 中国大陆许可协议进行许可。

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%;
}

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

        参考源码(反正我也是摘抄的):源码

 

CSS样式参考配色

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

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

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

原创文章,转载请注明出处!

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

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

        很多时候我们需要上传文件,都会用到直接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 中国大陆许可协议进行许可。