我是一名5+工作经验的后端程序员,但一直拥有一颗对前端向往的不死之心,在学校的时候,就开始学习css、js、juqery等技术栈,还不断的做一些小游戏,比如2048单机版、音乐盒子等,
后来就开始接触angular、react等前端框架,记得有段时间对react native也很痴迷,一直在图书馆看相关书籍,虽然没有什么成果,但当时也乐在其中。
前端之路
- 2016-2017 模仿2048小游戏
- 2017-2018 模仿网易云音乐h5页面
- 2018-2019 由于特殊原因停滞一年
- 2019-2020(上) APP说 一款关于APP推荐的网站(www.appshuo.club)
- 2019-2020(下)APP说 APP版(flutter开发)
- 2020-2021(上) 模糊笔记 一款记录每个城市雾霾的网站(模糊笔记网站链接)
- 2020-2021(下) 模糊笔记 APP版(flutter开发)
- 2021-2022(上) 亿空间低代码平台
- 2022-至今 英语Fly小程序
模糊笔记介绍
模糊笔记是一款记录每个城市雾霾情况的网站,也有app开发(flutter),点击 网站地址 查看网页内容,数据量比较大,后端服务应用了clickHouse,速度极快,数据默认显示美标,可以设置成中标
前端网页部分
- 网站首页
- 地图看雾霾
- 城市对比
- 排行榜
- 部分源码分析
网站首页
首页会保留每个城市近三十天的雾霾指数,每一个小时一更新
地图看雾霾
城市雾霾对比
可以选择城市进行对比,最多只能选择五个城市
排行榜
设置了全国最优前十和最差倒数前十的城市
部分源码
前端使用了thymeleaf框架、highcharts、juqery来实现的
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
$(function(){
Date.prototype.format = function(fmt) {
var o = {
"M+" : this.getMonth()+1, //月份
"d+" : this.getDate(), //日
"h+" : this.getHours(), //小时
"m+" : this.getMinutes(), //分
"s+" : this.getSeconds(), //秒
"q+" : Math.floor((this.getMonth()+3)/3), //季度
"S" : this.getMilliseconds() //毫秒
};
if(/(y+)/.test(fmt)) {
fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
}
for(var k in o) {
if(new RegExp("("+ k +")").test(fmt)){
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
}
}
return fmt;
}
let now = new Date().format("yyyy-MM-dd");
$(".selectpicker").selectpicker('val','2');//默认选中 value=“selectrateid” 的option
$(".selectpicker").selectpicker('refresh');
showByCity(1451, $('.selectpicker option:selected').val());
$('#city a').on('click', function (e) {
e.preventDefault()
$('#keyword').val('');
$(this).siblings('a').removeClass('active'); // 删除其兄弟元素的样式
$(this).addClass('active');
$("#dayTime .form-control").val(now);
if($(this).attr("id") != '0'){
showByCity($(this).attr("id"), $('.selectpicker option:selected').val());
}else{
console.log("待处理");
}
})
$('.selectpicker').on('change', function(){
var selected = $('.selectpicker option:selected').val();
$(".selectpicker").selectpicker('val',selected);//默认选中 value=“selectrateid” 的option
$(".selectpicker").selectpicker('refresh');
$('#city').children().map(function (index, e) {
if($(this).hasClass('active')){
showByCity($(this).attr('id'), selected);
}
});
});
$('#datetimepicker1').datetimepicker({
format: 'YYYY-MM-DD',
locale: moment.locale('zh-cn'),
defaultDate: now,
}).on('dp.change',function(ev){
let time = ev.date.valueOf();
let datestr = new Date(time).format('yyyy-MM-dd');
var selected = $('.selectpicker option:selected').val();
let city = $('#keyword').val();
console.log(city);
if(city != ''){
$.ajax({
url:'/getPidDataBySearch/'+selected+'?tmp='+datestr+'&city='+city,//请求数据的地址
type : "get",
async : true, //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行)
data : {},
dataType : "json", //返回数据形式为json
success:function(result){
pie(result['pie'])
react(result['react'])
},
error:function(e){
}
});
}else{
$('#city').children().map(function (index, e) {
if($(this).hasClass('active')){
let id = $(this).attr('id');
console.log(id);
$.ajax({
url:'/getPidData/'+id+'/'+selected+'?tmp='+datestr,//请求数据的地址
type : "get",
async : true, //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行)
data : {},
dataType : "json", //返回数据形式为json
success:function(result){
pie(result['pie'])
react(result['react'])
},
error:function(e){
}
});
}
});
}
});
});
有疑问可以随时留言