后端工程师的前端之路系列--thymeleaf实战

我是一名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){
                        }
                    });
                }
            });
        }

    });
});

有疑问可以随时留言