项目需求:
某门户项目需要在右上角添置一个日期(yyyy-MM-dd)的显示,同时点击此时间可以弹出一个窗体,窗体内容为万年历。
万年历需求:
1、日志显示24节气,且24节气内容可配置
2、对法定节假日可进行配置管理
项目开发周期:
一周
项目技术选择:
1、基于网上现存的万年历组件进行扩展
2、.Net MVC 开发一个Web项目进行内容配置
准备
首先我需要在网上找到一个相对完善的万年历模板,经过多番寻找,总算是找到了一个见如下链接,组件默认实现了很多的功能。
![img_cf6c0a007d8aa2e46bc9e0b9d156741a.png](https://i-blog.csdnimg.cn/blog_migrate/f5917a326ddb1f70da64791a82451c89.png)
下载下来之后我需要对其内容进行修改,当我们打开文件结构时,我们发现所有的页面元素都已经被压缩过了,这就使得代码很难阅读,不方便我们后期的更改。这个时候一个神奇就出现了,LZ在之前的文章中也提到过,Jsbeautifier JS代码美化库,通过使用此工具我们可以将前台的代码进行格式化输出,同理对目录下的其他文件也可使用此方法,最后结果如图2所示
![img_49d4f6e7b6f90e0cec6c21012717bbcc.png](https://i-blog.csdnimg.cn/blog_migrate/075c7897becf289a2968b34f341407ef.png)
![img_0db6e99d56f091b3e963d38d049f2e55.png](https://i-blog.csdnimg.cn/blog_migrate/b7db057ee8bb3810b5c3629d95f413b1.png)
此时,代码阅读就很方便了。然后我们开始根据需求进行更改代码
1、首先我们不需要如下模块,将此模块内容更改为节日内容,如果点击日期是某个节气,显示具体内容,否则显示“无”。
![img_527f500624513993f73c94789a49cfe6.png](https://i-blog.csdnimg.cn/blog_migrate/05129cfa4a5ceace68639e120e482291.png)
2、下如所示“2015年假日安排”以及下拉框内容要将静态数据改为动态获取的方式,我们找到代码段见下图,将此处内容之后更改为AJAX动态获取。
![img_fcaa89530f3652024f37e45feb97c0bb.png](https://i-blog.csdnimg.cn/blog_migrate/7363b718d1c88cd6d4614f7bab7d268b.png)
![img_73841d8f6aa6e0071d57db53fd86d442.png](https://i-blog.csdnimg.cn/blog_migrate/8a24667b3708b07780a8df3a2ca2b64e.png)
思路
如图我们可以看到window.OB.RILi开头的内容对应的就是下拉框的显示数据以及各种前台绑定之。
dataRest:休息日
dataWork:工作日
dateFestival:假日
dateFestivalContent:节假日说明
dateAllFestival:所有的假期
jieqi24:新增加的节气
源程序内容,静态赋值
window.OB = window.OB || {},
window.OB.RiLi = window.OB.RiLi || {},
window.OB.RiLi.dateRest = ["0101", "0102", "0103", "0218", "0219", "0220", "0221", "0222", "0223", "0224", "0404", "0405", "0406", "0501", "0502", "0503", "0620", "0621", "0622", "0903", "0904", "0905", "0926", "0927", "1001", "1002", "1003", "1004", "1005", "1006", "1007"],
window.OB.RiLi.dateWork = ["0104", "0215", "0228", "0906", "1010"],
window.OB.RiLi.dateFestival = ["20150101||元旦", "20150219||春节", "20150405||清明节", "20150501||劳动节", "20150620||端午节", "20150903||抗战纪念日", "20150927||中秋节", "20151001||国庆节"],
window.OB.RiLi.dateAllFestival = ["正月初一|v,春节", "正月十五|v,元宵节", "二月初二|v,龙头节", "五月初五|v,端午节", "七月初七|v,七夕节", "七月十五|v,中元节", "八月十五|v,中秋节", "九月初九|v,重阳节", "十月初一|i,寒衣节", "十月十五|i,下元节", "腊月初八|i,腊八节", "腊月廿三|i,祭灶节", "0202|i,世界湿地日,1996", "0214|v,西洋情人节", "0308|i,国际妇女节,1975", "0315|i,国际消费者权益日,1983", "0422|i,世界地球日,1990", "0501|v,国际劳动节,1889", "0512|i,国际护士节,1912", "0518|i,国际博物馆日,1977", "0605|i,世界环境日,1972", "0623|i,国际奥林匹克日,1948", "0624|i,世界骨质疏松日,1997", "1117|i,世界学生日,1942", "1201|i,世界艾滋病日,1988", "0101|v,元旦", "0312|i,植树节,1979", "0504|i,五四青年节,1939", "0601|v,儿童节,1950", "0701|v,建党节,1941", "0801|v,建军节,1933", "0903|v,抗战胜利纪念日", "0910|v,教师节,1985", "1001|v,国庆节,1949", "1224|v,平安夜", "1225|v,圣诞节", "w:0520|v,母亲节,1913", "w:0630|v,父亲节", "w:1144|v,感恩节(美国)", "w:1021|v,感恩节(加拿大)"];
我们通过更改原来的方式,通过ajax获取数据,数据放在一个json文件中,文件内容见下图
![img_0a62514abd1961e225fddc775c643a85.png](https://i-blog.csdnimg.cn/blog_migrate/609fdf3fcaf500d39dda82295d23fbea.png)
json文件内容
{
"24jieqi": [
{
"name": "立春",
"value": "斗指东北。太阳黄经为315度。是二十四个节气的头一个节气。其含义是开始进入春天,“阳和起蛰,品物皆春”,过了立春,万物复苏生机勃勃,一年四季从此开始了"
},
{
"name": "雨水",
"value": "斗指壬。太阳黄经为330°。这时春风遍吹,冰雪融化,空气湿润,雨水增多,所以叫雨水。人们常说:“立春天渐暖,雨水送肥忙”。"
}
],
"dateRest": [
"0101",
"0102",
"0103",
"0218",
"0219",
"0220",
"0221",
"0222",
"0223",
"0224",
"0404",
"0405",
"0406",
"0501",
"0502",
"0503",
"0620",
"0621",
"0622",
"0903",
"0904",
"0905",
"0926",
"0927",
"1001",
"1002",
"1003",
"1004",
"1005",
"1006",
"1007"
],
"dateWork": [
"0104",
"0215",
"0228",
"0906",
"1010"
],
"dateFestival": [
"20150101||元旦",
"20150219||春节",
"20150405||清明节",
"20150501||劳动节",
"20150620||端午节",
"20150927||中秋节",
"20151001||国庆节"
],
"dateFestivalContent": [
{
"name": "国庆节",
"value": "10月1日至7日放假调休,共7天。10月10日(星期六)上班。"
},
{
"name": "中秋节",
"value": "9月27日放假。"
},
{
"name": "端午节",
"value": "6月20日放假,6月22日(星期一)补休。"
},
{
"name": "劳动节",
"value": "5月1日放假,与周末连休。"
},
{
"name": "清明节",
"value": "4月5日放假,4月6日(星期一)补休。"
},
{
"name": "春节",
"value": "2月18日至24日放假调休,共7天。2月15日(星期日)、2月28日(星期六)上班。"
},
{
"name": "元旦",
"value": "1月1日至3日放假调休,共3天。1月4日(星期日)上班。"
}
],
"dateAllFestival": [
"正月初一|v,春节",
"正月十五|v,元宵节",
"二月初二|v,龙头节",
"五月初五|v,端午节",
"七月初七|v,七夕节",
"七月十五|v,中元节",
"八月十五|v,中秋节",
"九月初九|v,重阳节",
"十月初一|i,寒衣节",
"十月十五|i,下元节",
"腊月初八|i,腊八节",
"腊月廿三|i,祭灶节",
"0202|i,世界湿地日,1996",
"0214|v,西洋情人节",
"0308|i,国际妇女节,1975",
"0315|i,国际消费者权益日,1983",
"0422|i,世界地球日,1990",
"0501|v,国际劳动节,1889",
"0512|i,国际护士节,1912",
"0518|i,国际博物馆日,1977",
"0605|i,世界环境日,1972",
"0623|i,国际奥林匹克日,1948",
"0624|i,世界骨质疏松日,1997",
"1117|i,世界学生日,1942",
"1201|i,世界艾滋病日,1988",
"0101|v,元旦",
"0312|i,植树节,1979",
"0504|i,五四青年节,1939",
"0601|v,儿童节,1950",
"0701|v,建党节,1941",
"0801|v,建军节,1933",
"0903|v,抗战胜利纪念日",
"0910|v,教师节,1985",
"1001|v,国庆节,1949",
"1224|v,平安夜",
"1225|v,圣诞节",
"w:0520|v,母亲节,1913",
"w:0630|v,父亲节",
"w:1144|v,感恩节(美国)",
"w:1021|v,感恩节(加拿大)"
]
}
通过这样的方式将原来写死在页面上的数据,变为数据可通过json文件配置。
新增了一个点击事件——鼠标点击,如果为节气,显示节气内容,我们添加如下的一段内容即可
![img_564cbddec6f89166a8bf404e667b8583.png](https://i-blog.csdnimg.cn/blog_migrate/cc5de5bf1a02aff777ef7deb5c55e850.png)
到现在位置,功能已全部实现,只不过内容代码都是html+css+js基本结构,没有将数据可配置化在数据库中。
![img_aaaee79d1453b5919f6935fc68d1bbe5.png](https://i-blog.csdnimg.cn/blog_migrate/17cf308ed8c9aab8e5bcb20317836dd4.png)
代码下载地址:后续放开