程序员应该对自己做过的项目进行迭代，相对于新写代码那种假想的用户需求，维护旧代码会更多的接触到用户真正的需求，每次修改之后得到的都是用户更好的体验，而且维护旧代码可以让我们从更多方面去思考问题，写不同的代码以及更努力地优化。
经过一段时间，界面到实现都修改了一些，原来使用了.net控件，本着向优秀程序员学习的态度，也实现了前后端分离，目前外观如下：
修改点：
- 前端
- 按钮图标与文字对齐
- input与button组成group
- 下方表格使用bootstrap样式，thead自定义了背景色
- jquery使用ajax方式调用后端api取数据
- 增加按月查询方式
- 输入格式判断、日期处理、回到顶部、进度条等都在js层做
- 后端
- 取电话数据程序与SQL自动作业合并
- SQL存储过程合并为一个
- api使用缓存
- 一些小bug修改
具体实现代码：
按钮图标与文字对齐
原来的按钮我使用的是`i`标签，改为`button`后自动对齐。jquery使用ajax方式调用后端api取数据
function getHotData(url, data) {
$.ajax({
url: apiurl,
dataType: "json",
data: data
}).done(function (json) {
if (json.Table.length === 0) {
content1 = '<span class=\"err\">没有找到数据</span>';
$('#tamiba').html(content1);
return;
}
content1 = '<thead><tr><th>工号</th><th>姓名</th><th>部门</th><th>电话</th><th>回访数</th><th>回访附件</th><th>客户方案</th><th>外出</th><th>线索</th><th>来访</th><th>呼入量</th><th>呼入时长</th><th>呼出量</th><th>呼出时长</th><th>新增乙级</th><th>新增甲级</th><th>幸福指数</th></tr></thead>';
content1 += '<tbody>'
$.each(json.Table, function (idx, item) {
content1 += '<tr>';
for (var i = 0; i < Object.keys(item).length; i++) {
var person = item[Object.keys(item)[i]];
content1 += '<td>' + person + '</td>';
}
content1 += '</tr>'
});
content1 += '</tbody><tfoot><tr></tr></tfoot>';
$('#tperson').html(content1);
content2 = '<thead><tr><th>阿米巴</th><th>回访数</th><th>回访附件</th><th>客户方案</th><th>外出</th><th>线索</th><th>来访</th><th>呼入量</th><th>呼入时长</th><th>呼出量</th><th>呼出时长</th><th>新增乙级</th><th>新增甲级</th><th>幸福指数</th></tr></thead><tbody><tr></tr></tbody>';
content2 += '<tbody>'
$.each(json.Table1, function (idx, item) {
content1 += '<tr>';
for (var i = 0; i < Object.keys(item).length; i++) {
var person = item[Object.keys(item)[i]];
content2 += '<td>' + person + '</td>';
}
content2 += '</tr>'
});
content2 += '</tbody><tfoot><tr></tr></tfoot>';
$('#tamiba').html(content2);
});
};js日期处理
var date = new Date;
var today = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
//格式化日期
function formatDate(date) {
return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
}
//两种查询得到起始日期，因为firefox和safari等浏览器不认-连接的日期，只能改成/
function getDate(date, type) {
date = date.replace('-', '/').replace('-', '/');
var rdate = new Date();
if (type == "day")
rdate.setTime(Date.parse(date + " 00:00:00"));
if (type == "month")
rdate.setTime(Date.parse(date + "/1 00:00:00"));
return formatDate(rdate);
}
//按日期查询得到结束日期
function addDate(date, n) {
date = date.replace('-', '/').replace('-', '/');
var rdate = new Date();
rdate.setTime(Date.parse(date))
rdate.setDate(rdate.getDate() + n);
return formatDate(rdate);
}
//按月查询得到结束日期
function addMonth(date, n) {
date = date.replace('-', '/').replace('-', '/');
var rdate = new Date();
rdate.setTime(Date.parse(date));
rdate.setMonth(rdate.getMonth() + n);
return formatDate(rdate);
}spin进度条
这个第三方进度条简约又可以自定义，非常喜欢，引用官方js既可使用
//定义进度条外观
var opts = {
lines: 11, // The number of lines to draw
length: 5, // The length of each line
width: 2, // The line thickness
radius: 11, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 0, // The rotation offset
direction: 1, // 1: clockwise, -1: counterclockwise
color: '#000', // #rgb or #rrggbb or array of colors
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: '50%', // Top position relative to parent
left: '50%' // Left position relative to parent
};
//使用时
var spinner = new Spinner(opts).spin($('#spinner')[0]);
setTimeout(function(){
spinner.stop();
}, 500);
PS：jquery的id选择器和js原声的方法
getElementById得到的结果是不一样的，前者是个集合，而后者则是一个对象。jquery回到顶部
先在html中创建一个div：<div id="gotop" title="回到顶部"><span>▲</span></div>#gotop{
display:none;
width:35px;
height:35px;
position:fixed;
right:30px;
bottom:50px;
/*border-radius:5px;*/
text-decoration:none;
background-color:#BBBBBB;
}
#gotop span{
display:block;
width:35px;
color:#FFFFFF;
font-size:30px;
text-align:center;
margin-top:6px;
}
#gotop:hover{
cursor:pointer;
background-color:#666666;
}//距离顶部超过200时，渐显，否则渐隐
$(window).scroll(function () {
if ($(window).scrollTop() > 200) {
$('#gotop').fadeIn(100);
}
else {
$('#gotop').fadeOut(100);
}
});
//点击时回到顶部，100是用时，单位ms
$('#gotop').click(function () {
$('body, html').animate({ scrollTop: 0 }, 100);
});api使用缓存
先定义一个helper，封装了`System.Runtime.Caching中的方法：public class CacheHelper
{
public bool Contains(string key)
{
MemoryCache mc = MemoryCache.Default;
return mc.Contains(key);
}
public object GetValue(string key)
{
MemoryCache mc = MemoryCache.Default;
return mc.Get(key);
}
public bool Add(string key, object value, DateTimeOffset absExpiration)
{
MemoryCache mc = MemoryCache.Default;
return mc.Add(key, value, absExpiration);
}
}CacheHelper cache = new CacheHelper();
if (cache.Contains(key))
{
json = cache.GetValue(key).ToString();
}
else
{
//...执行查询
DateTime dtBegin = DateTime.Parse(beginDate);
DateTime dtEnd = DateTime.Parse(endDate);
if (dtBegin.AddMonths(1) == dtEnd) //按月查询
{
cache.Add(key, json, new DateTimeOffset(DateTime.Today.AddMonths(2)));
}
else
{
if(dtBegin == DateTime.Today) //按日查询 - 查询当日
{
cache.Add(key, json, new DateTimeOffset(DateTime.Today.AddDays(1)));
}
else //按日查询且不是当日
{
cache.Add(key, json, new DateTimeOffset(DateTime.Today.AddDays(2)));
}
}
}
使用缓存效果非常明显，经过测试，在站点第一次启动时查询数据大约耗时280ms，之后不使用缓存大概20-30ms，使用缓存后0-1ms。
此外还有gzip可以提高性能，IIS里设置一下就可以了，很简单，不描述了。
好了，目前就这些，写出来做个总结，还有一项没有实现，就是表格的
thead在向下滚动时悬浮。
没有评论:
发表评论