第二の対

この作品は、コースに属し	春2020 \| Sクラス
ジョブが必要とする場合	第二の対ジョブ
ペア学生ID	221701437分の221701415
対象のジョブ	可視化の特定の疾患統計実現
ジョブのテキスト	第二の対
その他の参考文献	クロスドメインの問題に対処

GitHubのリポジトリアドレスとコードのリンク

InfectStatisticWeb
codestyle

ショーケース

フロントとリアの端が分離され、ジョブがビルドとechartsビューに要素-UIを使用して、バックグラウンドのクラウドサーバー技術の用途SSMリアフレーム、すぐにビルドにVUEが採用し、フロントエンド技術で完成されています。

バックエンドサーバの起動

サーバデーモンにバックグラウンドプログラムの後、長期にアクセス

データが示すのデータベース部

フロントページの表示

メインページ1は、1日に全国のデータを使用すると、マップながら、データの流行について流行の分布の直感的な理解を何かを学ぶことができ、表示されます。

サブページ1、州（図湖北）を実証するデータを、直感的に各データ線グラフの増加傾向によって理解することができます。

1サブページ、マウスによる状況の日を示すことができ、あなたはまた、一日のデータの状況を理解し、日付を選択することができます。

メインページ2、国のマップ上で確認を示す累積データ

談話結び目の議論の中に

議論

マウンテン今日：ファラオファラオは、私たちはペアZezhengで働くということ？
ファラオ：書き込みにもzezheng、バックエンドのラッシュ。
ヒル今：だから何なデザインのアイデアあなたは？
王：あなたは少し自分自身を参照しています。
ヒル今：あり、データベースの設計/苦い
ファラオは：これはあなたの責任の一部であり、それは考えられません。
ロング、おそらく少ない20分より長い時間（
ヒルは、この：私が手SSMという
ファラオを：することができます
山これは：？時間制限の聖歌を与える
ファラオは：3日以内に、今日数えるようになりました。

機能ブロック図

コード説明

バックエンドのコード説明

public class Data {
    private Integer infect;
    private Integer doubt;
    private Integer cure;
    private Integer dead;
    private String provinceName;
    private String date;
    ...//
    get/set函数
}
//Bean的编写，设计用于存储数据

public interface DataMapper {
    //查询某日所有信息
    @Select("SELECT * FROM data WHERE date=#{date}")
    List<Data> findByDate(String date);

    //查询某省所有信息
    @Select("SELECT * FROM data WHERE provincename=#{provinceName}")
    List<Data> findByProvince(String provinceName);

    //查询某省某日所有信息
    @Select("SELECT * FROM data WHERE provincename=#{provinceName} AND date=#{date} ")
    List<Data> findByDateAndProvince(@Param("provinceName") String provinceName, @Param("date") String date);
    
    ...
}
//DataMapper的实现，用于DAO层

public interface DataService {
    List<Data> findByDate(String date);
    List<Data> findByProvince(String provinceName);
    List<Data> findByProvinceAndDate(String provinceName, String date);
    String getInfectDate(String provinceName, String date);
    String getDoubtDate(String provinceName, String date);
    String getCureDate(String provinceName, String date);
    String getDeadDate(String provinceName, String date);
}
//服务层接口

public class DataImplService implements DataService {
    @Autowired
    DataMapper dataMapper;

    @Override
    public List<Data> findByDate(String date) {
        return dataMapper.findByDate(date);
    }

    @Override
    public List<Data> findByProvince(String provinceName) {
        return dataMapper.findByProvince(provinceName);
    }

    @Override
    public List<Data> findByProvinceAndDate(String provinceName, String date) {
        return dataMapper.findByDateAndProvince(provinceName,date);
    }

    ...
}
//服务层接口的实现

遠位コード説明

フロントページはすばやくビルドに要素-UIを使用して、VUEでセットアップするとechartsは閲覧、コピーここでは基本的なページモデルを構築します

chinaConfigure() {
    let myChart = echarts.init(this.$refs.myEchart); //这里是为了获得容器所在位置
    window.onresize = myChart.resize;
    myChart.setOption({
        // 进行相关配置
        backgroundColor: '#f8f8f8',
        title: {
            text: '地图趋势',
            left: 'center'
        },
        tooltip: {
            formatter(params) {
                if (params.data != null) {
                    return `
                        地区:${params.data.name}<br>确诊:${params.data.value}
                    `
                }
            }
        }, // 鼠标移到图里面的浮动提示框
        dataRange: {
            show: true,
            min: _.minBy(this.province, (o)=>{return o.value}).value,
            max: _.maxBy(this.province, (o)=>{return o.value}).value,
            // text: ["High", "Low"],
            realtime: true,
            calculable: true,
            color: ["#000066", "white"]
        },
        geo: {
        // 这个是重点配置区
            map: "china", // 表示中国地图
            roam: true,
            label: {
                normal: {
                    show: false, // 是否显示对应地名
                    textStyle: {
                        color: "rgba(0,0,0,0.4)"
                    }
                }
            },
            itemStyle: {
                normal: {
                    borderColor: "rgba(0, 0, 0, 0.2)"
                },
                emphasis: {
                    areaColor: null,
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowBlur: 20,
                    borderWidth: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)"
                }
            }
        },
        series: [
            {
                type: "scatter",
                coordinateSystem: "geo" // 对应上方配置
            },
            {
                type: "map",
                geoIndex: 0,
                data: this.province
            }
        ]
    });
    myChart.on('click', (params)=>{
        this.$store.state.title=params.name
        this.$router.push('/detail')
    })
}

これは、ホーム・ページ・マップの初期化コードである、のライフサイクルにecharts VUEを使用してmountマップを初期化し、この相。

<div class="table">
    <div style="text-align:left; color:#888888">数据更新至{{current}}
        <el-tooltip class="item" effect="dark" content="趋势图与国家卫健委官网发布一致，每日更新" placement="bottom">
            <span style="float:right; color:"><span class="el-icon-warning-outline"></span>数据说明</span>
        </el-tooltip>
    </div>
    
    <el-row :gutter="24" :type="type" :justify="justify">
        <el-col :span="8" >
            <el-card shadow="always">
            <span class="content-title">现有确诊</span> <br>
            <div style="margin-top:5px;"></div>
            <span class="content-number" style="color: #FF6633;">{{tableData.infect}}</span> <br>
            <span class="content-yesterday">昨日
                <span style="color: #FF6633"><span v-if="tableData.infect-yesterday.infect>=0">+</span><span v-else>-</span>{{tableData.infect-yesterday.infect}}</span>
                </span>
            </el-card>
        </el-col>
        <el-col :span="8" >
            <el-card shadow="always" >
            <span class="content-title">现有疑似</span> <br>
            <div style="margin-top:5px;"></div>
            <span class="content-number" style="color: #FFCC00">{{tableData.doubt}}</span> <br>
            <span class="content-yesterday">昨日
                <span style="color: #FFCC00"><span v-if="tableData.infect-yesterday.infect>=0">+</span><span v-else>-</span>{{tableData.infect-yesterday.infect}}</span>
                </span>
            </el-card>
        </el-col>
    </el-row>
    <el-row :gutter="24" style="margin-top: 5px;">
        <el-col :span="8" >
            <el-card shadow="always" >
            <span class="content-title">累计确诊</span> <br>
            <div style="margin-top:5px;"></div>
            <span class="content-number" style="color: #FF0000">{{tableData.sumCount}}</span> <br>
            <span class="content-yesterday">昨日
                <span style="color: #FF0000"><span v-if="tableData.sumCount-yesterday.sumCount>=0">+</span><span v-else>-</span>{{tableData.sumCount-yesterday.sumCount}}</span>
                </span>
            </el-card>
        </el-col>
        <el-col :span="8" >
            <el-card shadow="always" >
            <span class="content-title">累计治愈</span> <br>
            <div style="margin-top:5px;"></div>
            <span class="content-number" style="color: #67C23A">{{tableData.cure}}</span> <br>
            <span class="content-yesterday">昨日
                <span style="color: #67C23A"><span v-if="tableData.cure-yesterday.cure>=0">+</span><span v-else>-</span>{{tableData.cure-yesterday.cure}}</span>
                </span>
            </el-card>
        </el-col>
        <el-col :span="8" >
            <el-card shadow="always" >
            <span class="content-title">累计死亡</span> <br>
            <div style="margin-top:5px;"></div>
            <span class="content-number" style="color: #000000">{{tableData.dead}}</span> <br>
            <span class="content-yesterday">昨日
                <span style="color: #000000"><span v-if="tableData.dead-yesterday.dead>=0">+</span><span v-else>-</span>{{tableData.dead-yesterday.dead}}</span>
                </span>
            </el-card>
        </el-col>
    </el-row>
</div>

カードの形で使用する要素は、マップの一部を示しており、データaxiosを取得します

getTableData() {
    this.$ajax.get('/get/all', {
        params: {'date':'2020-02-02'} //数据不全，只能先这样，否则可以调用date函数
    }).then(
        (res)=>{
            var resJson = res.data
            this.tableData = resJson
            var count = 0
            count += this.tableData.infect
            count += this.tableData.cure
            count += this.tableData.dead
            this.tableData.sumCount = count
        }
    )
},
getYesterday() {
    this.$ajax.get(('/get/all'), {
        params: {'date': '2020-02-01'}
    }).then(
        (res)=> {
            this.yesterday = res.data
            var count = 0
            count += this.yesterday.infect
            count += this.yesterday.cure
            count += this.yesterday.dead
            this.yesterday.sumCount = count
        }
    )
}

＆彼のチームメイトの考え方を評価

そのため、フロントとリアエンドの分離、私の2人の兄弟とファラオは、バックエンドとフロントエンドを完了しました実際には、あまり技術交流、より多くの通信前とドッキングした後、1時のクールのいわゆる分離、火葬場をドッキング。前と後の分離ので、何の利益？最も直感的な印象は、フロントページとバックエンドのインターフェイスの書き込みには、最終的に能力をドッキングしながら、プロトタイプによると、実践を促進しながらということは、コードは、ある文書の明細書が本当にひどくはないが長すぎるかもしれ時間をコーディング特定、あなたがクラスを終えるかもしれませんので、20回に耳を傾けて 2がより多くの知識と理解のチーム開発モデル、へ、または他の次のヘアケア製品際にサンドバッグ？。
ので、より多くのNBの書き込み聖歌のことを、Webプロジェクト、我々が行うことになってフロントページを行うには、バックエンドを行うには二つ。---張
革命が成功しなかった、同志は（あなたの手の練習を参照してください）努力する必要があります-王

GitHubのリポジトリアドレスとコードのリンク

ショーケース

バックエンドサーバの起動

フロントページの表示

談話結び目の議論の中に

議論

機能ブロック図

コード説明

バックエンドのコード説明

遠位コード説明

＆彼のチームメイトの考え方を評価

おすすめ