实现阶段-页面实现

将数据存储到数据库后，通过选择图形来查看以何种图形来展示数据。

三，首页：index.html

      提供三种图形的选择页面，分别输入查看数据的要求，页面动态的使用ajax构建Http请求，Tomcat根据请求的url使用特定的Servlet来连接数据库将数据以json格式构建Http响应，当页面获取到数据后，使用echarts将数据以特定的图形进行显示。

二，诗词词云分布图：words.html

      1，用户在文本框中输入查看唐诗中出现词平频率最高的词。页面通过ajax发起Htpp请求。

      2，通过WordsServlet对用户得到请求进行处理，从数据库中获取到指定数量的出现频率最高的词。并将数据以json的格式返回。

package api;

import Dao.DBUtil;
import com.alibaba.fastjson.JSONArray;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.*;

/**
 * @ClassName WordsServlet
 * @Description TODO
 * @Auther danni
 * @Date 2020/3/6 18:43]
 * @Version 1.0
 **/

public class WordsServlet extends HttpServlet {
    class tangshi{
        String title;
        int count;

        public tangshi(String title, int count) {
            this.title = title;
            this.count = count;
        }
    }
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String count=req.getParameter("count");
        if(count==null){
            count="5";
        }
        Connection connection=null;
        PreparedStatement statement=null;
        ResultSet set=null;
        Map map=new HashMap<>();
        try {
            connection=DBUtil.getConnection();
            String sql01="select words from tangshi";
            statement=connection.prepareStatement(sql01);
            set=statement.executeQuery();
            while(set.next()){
                String word=set.getString("words");
                String[] words=word.split(" ");
                for(String ss:words){
                    map.put(ss,map.getOrDefault(ss,0)+1);
                }
            }
            List list=new ArrayList<>();
            for(String ss:map.keySet()){
                list.add(new tangshi(ss,map.get(ss)));
            }
            Collections.sort(list, new Comparator() {
                @Override
                public int compare(tangshi o1, tangshi o2) {
                    return o2.count-o1.count;
                }
            });
            JSONArray array=new JSONArray();
            Integer num=Integer.valueOf(count);
            for(tangshi t:list){
                JSONArray item=new JSONArray();
                item.add(t.title);
                item.add(map.get(t.title));
                array.add(item);
                num--;
                if(num==0){
                    break;
                }
            }
            resp.setContentType("application/json; charset=utf-8");
            resp.getWriter().write(array.toJSONString());
        }catch (SQLException e) {
            e.printStackTrace();
            resp.setContentType("text/html;charSet=utf-8");
            resp.getWriter().write("error");
        }finally {
            DBUtil.close(connection,statement,set);
        }
    }
}

3，当页面获取到json格式的数据，使用echarts将数据以图形化界面呈现出来。

三，创作数量排行榜-rank.html

  1，用户在文本框中输入查看创作唐诗数量的最多的前几位诗人，页面使用ajax构建Http请求。

3，RankSerlvlet根据请求的参数，从数据库中根据创作数量获取指定数量的诗人，并将数据以json格式输出。

package api;

/**
 * @ClassName RackonServlet
 * @Description TODO
 * @Auther danni
 * @Date 2020/3/6 9:46]
 * @Version 1.0
 **/
import Dao.DBUtil;
import com.alibaba.fastjson.JSONArray;


import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

public class RankServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        String condition=req.getParameter("condition");
        if(condition==null){
            condition="5";
        }
        Connection connection=null;
        PreparedStatement statement=null;
        ResultSet set=null;
        JSONArray array=new JSONArray();
        try {
            connection=DBUtil.getConnection();
            String sql="SELECT author, count(*) AS cnt FROM tangshi GROUP BY author HAVING cnt >= ? ORDER BY cnt DESC";
            statement=connection.prepareStatement(sql);
            statement.setString(1,condition);
            set=statement.executeQuery();
            while(set.next()){
                String auther=set.getString("author");
                int cnt=set.getInt("cnt");
                JSONArray item=new JSONArray();
                item.add(auther);
                item.add(cnt);
                array.add(item);
            }
            resp.setContentType("application/json; charset=utf-8");
            resp.getWriter().write(array.toJSONString());
        } catch (SQLException e) {
            e.printStackTrace();
            resp.setContentType("text/html;charset=utf-8");
            resp.getWriter().write("error");
        }finally {
            DBUtil.close(connection,statement,set);
        }
    }
}

4，页面获取到json格式的数据后，以柱状图的形式将数据显示出来。

四，创作数量分布图-circle.html

1，将创作数量以饼状图的形式显示出来。