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

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

前言

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

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

你在干神莫？	花费的时间
注册用友	2min
搭建maven	15min
搭建git仓库？	20min
构思冥想查资料	4h
编写Controller	30min
编写js	5h

需求分析完后，进入实战

---

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