Spark Streaming 專案實戰（12）—— Web層開發

阿新 • • 發佈：2018-12-30

1 Web 層開發

1.1 POM 新增依賴

<dependency>
            <groupId>net.sf.json-lib</groupId>
            <artifactId>json-lib</artifactId>
            <version>2.4</version>
            <classifier>jdk15</classifier>
        </dependency>

1.2 `StatApp.java`

package com.streaming.project.spark;

import com.streaming.project.dao.CourseClickCountDAO;
import com.streaming.project.domain.CourseClickCount;
import net.sf.json.JSONArray;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping; 

import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;

import java.io.IOException;
import java.util.HashMap;
import 
 java.util.List;
import java.util.Map;

/**
 * @ClassName StatApp
 * @Description Web層開發
 * @Author tzb
 * @Date 2018/12/19 18:25
 * @Version 1.0
 **/
@RestController
public class StatApp {

    private static Map<String, String> courses = new HashMap<>();

    static {
        courses.put("112", "Hadoop實戰");
        courses.put("128", "Spark快速入門");
        courses.put("145", "Scala 入門");
        courses.put("146", "Python 爬蟲");
        courses.put("130", "資料結構與演算法分析");
        courses.put("131", "Spark SQL專案實戰");

    }

    @Autowired
    CourseClickCountDAO courseClickCountDAO;

//    @RequestMapping(value = "/course_click_dynamic", method = RequestMethod.GET)
//    public ModelAndView courseClickCount() throws IOException {
//        ModelAndView view = new ModelAndView("index");
//
//        List<CourseClickCount> list = courseClickCountDAO.query("20181219");
//
//        for (CourseClickCount model : list) {
//            model.setName(courses.get(model.getName().substring(9)));
//        }
//
//        JSONArray json = JSONArray.fromObject(list);
//
//        view.addObject("data_json",json);
//
//        return view;
//    }


    @RequestMapping(value = "/course_click_dynamic", method = RequestMethod.POST)
    @ResponseBody
    public List<CourseClickCount> courseClickCount() throws IOException {

        List<CourseClickCount> list = courseClickCountDAO.query("20181219");

        for (CourseClickCount model : list) {
            model.setName(courses.get(model.getName().substring(9)));
        }

        return list;
    }


    @RequestMapping(value = "/echarts", method = RequestMethod.GET)
    public ModelAndView echarts() {
        return new ModelAndView("echarts");
    }

}

1.3 `echarts.html`

新增 jquery.js檔案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>stat</title>
    <!-- 引入 ECharts 檔案 -->
    <script src="js/echarts.min.js"></script>

    <!--引入 jQuery 檔案-->
    <script src="js/jQuery.js"></script>
</head>
<body>

通過 /echarts 請求跳轉過來的頁面

<!-- 為 ECharts 準備一個具備大小（寬高）的 DOM -->
<div id="main"
     style="width: 600px;height:400px;position: absolute;top:50%;left: 50%;margin-top:-200px;margin-left:-300px"></div>

<script type="text/javascript">
    // 基於準備好的dom，初始化echarts例項
    var myChart = echarts.init(document.getElementById('main'));

    // 指定圖表的配置項和資料
    var option = {
        title: {
            text: '實時流處理統計結果之訪問量統計',
            subtext: '實戰課程訪問次數',
            x: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: '訪問次數',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: (function () { //<![CDATA[
                    var datas = [];
                    $.ajax({
                        type: "POST",
                        url: "/spark-streaming/course_clickcount_dynamic",
                        dataType: 'json',
                        async: false,
                        success: function (result) {
                            for (var i = 0; i < result.lenght; i++) {
                                datas.put({"value":result[i].value,"name":result[i].name})
                            }
                        }
                    })
                    return datas;
                    //]]>
                }),
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    // 使用剛指定的配置項和資料顯示圖表。
    myChart.setOption(option);
</script>

</body>
</html>

訪問 http://localhost:8081/spark-streaming/echarts

2 功能擴充套件

Spring Boot 整合 Echarts 動態獲取HBase資料

動態傳遞當天的時間：在頁面放一個時間外掛（jQuery外掛），預設只取當天資料；
自動重新整理展示圖：每隔一定時間請求重新整理當前的資料

Spark Streaming 專案實戰（12）—— Web層開發

1 Web 層開發 1.1 POM 新增依賴 <dependency> <groupId>net.sf.json-lib</groupId> <artifactId>json-lib&

Python之Django商城專案實戰（一）：搭建開發環境

一、搭建環境：1、安裝pythonsudo apt-get install python3-pip2、安裝mysql3、建立虛擬環境安裝虛擬環境：pip install virtualenv方法一：建立虛擬環境(python3.6)：python -m venv myenv

Spark Streaming筆記整理（三）：DS的transformation與output操作

job watermark number 這樣的格式 current fix work eat DStream的各種transformation Transformation Meaning map(func) 對DStream中的各個元素進行func函數操作，然後

從零開始Vue專案實戰（三）-專案結構

現在在瀏覽器中輸入http://localhost:8083，可以看到初始的“Welcome to Your Vue.js App”頁面了目錄結構 ├── README.md 專案介紹 ├── index.html 入口頁面 ├── build

從零開始Vue專案實戰（二）-搭建環境

1、下載node.js並安裝下載地址：https://nodejs.org/en/download/。下載.msi 格式的直接連續下一步就可以了。安裝完成後可以用 node -v 和 npm -v 檢視版本號。 2、安裝vue-cli 腳手架構建工具在命令列中輸入npm ins

從零開始Vue專案實戰（一）-準備篇

從前參與過一個react專案的程式碼編寫，大神搭建的框架，我主要負責業務邏輯程式碼編寫，現在回想起來似乎又什麼都不會，現在為了鞏固前端知識，決定用Vue來做這個專案的移動端網站，我本人Vue是從零開始的，一邊學習一邊寫程式碼，在這裡記錄一下過程。專案說明：主要功能實現一個投資平臺，會員身份為融資人或投

Python學習（12）——Web開發

virtualenv用來為一個應用建立一套“隔離”的Python執行環境，跳過圖形介面，跳過網路程式設計，指TCP、UDP程式設計，跳過電子郵件，跳過訪問資料庫，SQLite、MySQL、SQLAlchemy，跳過 1、使用Web框架（1）用Flask編寫Web

HTML5專案實戰（一）——PC端固定佈局全頁面——day eight

程式碼及圖片一、分離CSS 把css重複的部分移植到新的頁面而減少程式碼冗餘，單獨建立一個 CSS，以便後續的頁面重複呼叫。多觀察頁面，總結出相同的樣式，注意取名，方便呼叫。二、html頁面切換不同的html頁面通過連結實現跳轉，常用class="active"，設定當前

Django 專案總結（12）- 訂單部分

訂單部分基本功能：提交訂單、儲存訂單建立訂單資料表，分為兩個表，一個訂單基本資訊表，一個訂單商品表訂單結算 get 請求使用者點選去結算，跳轉到提交訂單頁面同時向後端傳送請求後端從 redis 資料

吳裕雄資料探勘與分析案例實戰（12）——SVM模型的應用

import pandas as pd # 匯入第三方模組from sklearn import svmfrom sklearn import model_selectionfrom sklearn import metrics # 讀取外部資料letters = pd.read_csv(r'F:\\py

簡單爬蟲專案實戰（一）

概述　　最近自己想搞一個小的專案，這個專案我們就先從爬蟲開始，爬取直播吧的NBA滾動新聞，再存入資料庫。先寫個簡單點的，後期再不斷的優化下。準備　　直播吧對於喜歡看球的朋友肯定不陌生，https://www.zhibo8.cc/，開啟我們看到如下介面，我們選擇NBA新聞tab,然後選擇滾動

Python Selenium專案實戰（一）—— 怎麼去驗證一個按鈕是啟用的（可點選）？

Q: 使用 Python Selenium WebDriver 怎麼去驗證一個按鈕是啟用的（可點選）？ A：Selenium WebDriver API 裡面給出瞭解決方法is_enabled() 使用WebDriver API —— driver.find_element_by_css_selector()

vue專案實戰（二）之首頁layout佈局

一、替換顯示頁面 1.在 src/components目錄下新建Layout.vue檔案： <template> <div> <h2>header</h2> <h2>con

Deeplearning4j 實戰（12）：Mnist替代資料集Fashion Mnist在CNN上的實驗及結果

Mnist資料集的分類問題一直被認為是深度學習的Hello World。利用2層卷積網路，經過若干輪的訓練後，在相應測試集上的準確率可以達到95%以上。經過調參後，甚至可以達到99%以上。其實，即使不用用卷積層提取特徵，而是用傳統的全連線網路也同樣可以達到非常高的準確率。在Mnist資料集的官網上(

Spark修煉之道（進階篇）——Spark入門到精通：第十節 Spark SQL案例實戰（一）

作者：周志湖放假了，終於能抽出時間更新部落格了……. 1. 獲取資料本文通過將github上的Spark專案git日誌作為資料，對SparkSQL的內容進行詳細介紹資料獲取命令如下： [[email protected] spa

vue2.0專案實戰（4）生命週期和鉤子函式詳解

最近的專案都使用vue2.0來開發，不得不說，vue真的非常好用，大大減少了專案的開發週期。在踩坑的過程中，因為對vue的生命週期不是特別瞭解，所以有時候會在幾個鉤子函式裡做一些事情，什麼時候做，在哪個函式裡做，我們不清楚。下面來總結一下vue的生命週期。 vue生命週期簡介咱們從上圖可以很明顯的看出

斯坦福CS231n專案實戰（一）：k最近鄰（kNN）分類演算法

k最近鄰分類（kNN，K Nearest neighbor)分類演算法是一種最簡單的分類器之一。在kNN演算法訓練過程中，它將所有訓練樣本的輸入和輸出label都儲存起來。測試過程中，計算測試樣本與每個訓練樣本的L1或L2距離，選取與測試樣本距離最近的前k個

Spark Streaming整合Kafka（一）

基於Receiver 方式整合一、Kafka版本選擇 Spark Streaming支援Kafka0.8.2.1及以上的版本。 Kafka專案介紹了兩個新的Comsumer（消費者）API，在0.8版本和0.10版本之間，根據自身需求選擇版本號，另外要注意，0.8版本是相

React-Native 之專案實戰（一）

前言本文有配套視訊，可以酌情觀看。文中內容因各人理解不同，可能會有所偏差，歡迎朋友們聯絡我。文中所有內容僅供學習交流之用，不可用於商業用途，如因此引起的相關法律法規責任，與我無關。如文中內容對您造成不便，煩請聯絡 [email prot

SSM專案實戰（一）--- 高併發秒殺系統之DAO層

專案為慕課網上搞定Java SSM框架開發的綜合案例–實現一個秒殺系統案例。 1.首先搭建專案使用Maven構建來管理依賴項，pom.xml檔案：此pom.xml可作為大多數ssm專案依賴的參考 <project xmlns="http:

Spark Streaming 專案實戰（12）—— Web層開發

1 Web 層開發

1.1 POM 新增依賴

1.2 StatApp.java

1.3 echarts.html

2 功能擴充套件

相關推薦

1.2 `StatApp.java`

1.3 `echarts.html`