后端工程师的前端之路系列--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){
                        }
                    });
                }
            });
        }

    });
});

有疑问可以随时留言

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值