丁子鸣-第一次个人编程作业

博客班级 2018级计算机和综合实验班
作业要求
第一次个人作业
作业目标
数据处理与分析
作业源代码
GitHub
学号
211806210

前言

在看到这次作业时,我想都没想就决定做第二题了,很快啊。不是因为不会爬虫,也不是因为简单好做,而是因为这题切合时事,符合当下时代主题。作为一个当代优秀大学生,使命与责任趋势我做第二题。

首先,根据本次作业要求制定如下计划:

你在干神莫?花费的时间
注册用友2min
搭建maven15min
搭建git仓库?20min
构思冥想查资料4h
编写Controller30min
编写js5h

需求分析完后,进入实战


1.搭建maven项目

本地机子不知道受什么刺激嗷,每次搭骨架都要10分钟起步,这里快启了一个web骨架,初步想用SpringMVC实现请求处理

2.搭建git仓库

①创建了一个远程first-personal-work仓库

②将README.md pull到本地

③按要求在本地新建两个分支并push到远程
crawl分支进行数据采集和处理代码的编写
chart分支进行数据的展示

到此git仓库就搭建完成

3.测试Controller

@Controller
public class MapController {
    @ResponseBody
    @RequestMapping("/map")
    public String mapController() {
        return DockApi.getRequest();
    }
}

在测试时遇到了JSON乱码问题

解决方法:在dispathservlet中配置mvc:annotation-driven

<mvc:annotation-driven>
        <!-- 解决JSON乱码 -->
        <mvc:message-converters register-defaults="true">
            <bean class="org.springframework.http.converter.StringHttpMessageConverter">
                <constructor-arg value="UTF-8"/>
            </bean>
            <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
                <property name="objectMapper">
                    <bean class="org.springframework.http.converter.json.Jackson2ObjectMapperFactoryBean">
                        <property name="failOnEmptyBeans" value="false"/>
                    </bean>
                </property>
            </bean>
        </mvc:message-converters>
</mvc:annotation-driven>

配置之后,JSON就能正常显示,测试完毕

4.渲染

这一步也是最关键的一步,涉及到ajax处理json以及运用Echarts渲染数据
首先根据本机分辨率给echarts定制一个容器


通过ajax进行前后端交互

原理:通过发送GET请求,Controller来处理map请求,后台发送JSON数据到前台,AJAX对json数据进行处理,再通过echarts来渲染数据

遇到的问题:
①导入的echarts.js包配合world.js(世界地图)使用报错,后来换了echarts.min.js问题解决
②引入的js包顺序问题:不知道是个人操作原因还是什么,必须要echarts.min.js包在前,world.js在后才能正确渲染
③echarts上的国家需要中英对照,而且有些由于未知原因,导致渲染失败,或许是由于音译问题导致,因此根据未能渲染的国家再挑出来一一对照

初步渲染:

没想到最花时间的居然是对照找地图.....
尽力之后

一些国家实在难找,有的也有着映射失败的问题

项目结构:

最后,合并本地分支,push到git 完美结束

实际花费时间:

结结实实12小时

代码量:

300行+(不算上api),另外:对于用友API,修改了getRequest()的返回值,便于控制器调用

参考资料:

echarts下载地址
echarts参考模板
echarts参考教程1
echarts参考教程2
echarts国家中英文映射参照
国内镜像js

posted @ 2021-02-20 18:11  Lethex  阅读(214)  评论(2编辑  收藏  举报