后端工程师的前端之路系列（二）

我是一名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",        //返回数据形式为jsonsuccess: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",        //返回数据形式为jsonsuccess:function(result){pie(result['pie'])react(result['react'])},error:function(e){}});}});}});
});

有疑问可以随时留言

后端工程师的前端之路系列（二）相关推荐

后端工程师的前端之路系列--小程序学习
我是一名5+工作经验的后端程序员,但一直拥有一颗对前端向往的不死之心,在学校的时候,就开始学习css.js.juqery等技术栈,还不断的做一些小游戏,比如2048单机版.音乐盒子等, 后来就开始接触 ...
后端工程师的前端之路系列--thymeleaf实战
我是一名5+工作经验的后端程序员,但一直拥有一颗对前端向往的不死之心,在学校的时候,就开始学习css.js.juqery等技术栈,还不断的做一些小游戏,比如2048单机版.音乐盒子等, 后来就开始接触 ...
后端工程师的前端之路系列
我是一名5+工作经验的后端程序员,但一直拥有一颗对前端向往的不死之心,在学校的时候,就开始学习css.js.juqery等技术栈,还不断的做一些小游戏,比如2048单机版.音乐盒子等, 后来就开始接触 ...
后端工程师入门前端页面重构（二）：心法 I
本文由 KnewHow 发表在 ScalaCool 团队博客. 上一篇博客是我们<后端工程师入门前端页面重构>系列的第一篇,我们介绍了页面布局的口诀: 从左到右,从上到下,化整为零. 那么 ...
顾往前行，我的前端之路系列（二）
前言顾往前行,我的前端之路系列(一) 面试之路时间:2018/11/25 任务:迈出回归祖源,第一步领悟:贵在坚持,我还年轻,不打无准备之战大学期间最后一门实践课完毕后,没过两周,我们就为了各 ...
顾往前行，我的前端之路系列（三）
前言顾往前行,我的前端之路系列(二) 电商之路阶段:实习 => 初级领悟:学会总结 => 偷懒转折:疫情,形式严峻我深知这份实习工作,来之不易. 尽管路途遥远,车程近4个小时,转 ...
《给后端工程师的前端开发课程》笔记
ASP.Net服务器控件给后端工程师的前端开发课程 HTML和CSS工作模式前端工作模式:BS HTML5基础标签学习 p:定义一个段落(paragraph) a:超链接 img:图片 div:块 ...
框架设计之菜鸟漫漫江湖路系列二：自学求索
二:自学求索到处求索,勤习武功,略有所成,初会ObjectDataSource+CodeSmith+实体框架学府授传的.NET武学基础系列,秋天勤习之,日复日.月复月,已掌握九九八八一. 然而学无 ...
前端攻略系列(二) - 前端各种面试题
幸运且光荣的被老大安排了一个任务 - "去整理些前端面试题".年前确实不是招人的好时候,所以我们前端团队经过了超负荷的运转,终于坚持过了春节.春节以后就开始招人啦,这套题考察的目标 ...

后端工程师的前端之路系列（二）

前端之路

模糊笔记介绍

前端网页部分

后端工程师的前端之路系列（二）相关推荐

最新文章

热门文章