前端框架解讀1st summary

首先記錄一下項目讓人看不懂的結構：

下面是前面的看不懂的結構，稍微詳細點：

Ⅰ明確結構

作爲一個小白，要完全搭建一個如上的結構還是需要有很多知識積累的，不過呢，在這一過程中，一點一滴的學習也是必要的。雖然還沒有到完全搞清楚結構的程度，但是在項目過程中，本小白參與編程的部分還是需要搞明白的。
當然，我編程的部分結構層次和後端有異曲同工之處。

①components

作爲前端當然要有界面了，而這個項目的頁面就全部放在了components這個文件夾中。因爲項目使用的是vue結構，所以頁面全部是vue後綴的文件。
文件內部的模板格式如下：

<template>
//前端界面代碼，也可稱爲靜態
</template>

<script>
export default{
  data(){
  },
  methods:{
  },
  mounted(){
  }
}
</script>

<style scope>
//建議這裏寫一些不是很多的格式語句，否則最後單獨拿出來
</style>

②conditions

顧名思義，這個文件夾是用來存放條件的JS文件，這個項目作爲前端，條件文件中存放的基本上是與分頁相關的。分頁和兩個因素相關，頁碼和頁的大小。
如下是其中一個條件的內容：

import KeywordCondition from "./keyword";

class HardwareCondition extends KeywordCondition {
    constructor(...values) {
        super();
        this.pageIndex = undefined;
        this.pageSize = undefined;
        Object.assign(this, ...values);
    }
}

export default HardwareCondition;

關於條件的引入和引出可以參考我其他的文章：

Vue實現引入和引出模塊(外出部分頁面)

③models

這個文件夾我非常喜歡，因爲這個是基本的實體類文件夾，也就是說其中的文件都與頁面需要的字段信息一一對應，而且如果是本身作爲表格的話，那麼只需要增刪改查四個基本操作，當然了，所有前端本質上都可以用增刪改查來總結。這是我滴老師說滴。
下面是文件內容，還是以一個爲例：

class TempHumidity {
    constructor(value) {
        this.id = undefined;
        this.locationName = undefined;
        this.temperature = undefined;
        this.humidity = undefined;
        this.status = undefined;
        this.checkTime = undefined;
        Object.assign(this, value);
    }

    clone() {
        return new TempHumidity(this);
    }
}

export default TempHumidity;

這裏的clone()方法，就相當於是直接將類實體化了。可以看到這裏的字段和後臺傳的字段是一一對應的。

④services

這個文件夾就是進行業務操作啦，和後端是非常類似的，獲取列表、獲取分頁列表、獲取單條數據等都可以在這裏進行定義，並且直接獲取後臺數據。
下面代碼如下：

import {
    HttpClientService,
    UrlConfig
} from '../apis';

class TempHumidityService {

    constructor() {
        this.client = new HttpClientService();
        this.config = new UrlConfig();
    }

    getTempHumidityList(value) {
        return this.client.get(this.config.tempHumidities.management.list, value);
    }

    createTempHumidity(value) {
        return this.client.post(this.config.tempHumidities.management.create, value);
    }

    getTempHumidityItem(id) {
        var url = this.config.tempHumidities.management.item.replace("{id}", id);
        return this.client.get(url);
    }

    updateTempHumidity(id, value) {
        var url = this.config.tempHumidities.management.item.replace("{id}", id);
        return this.client.put(url, value);
    }

    deleteTempHumidity(id) {
        var url = this.config.tempHumidities.management.item.replace("{id}", id);
        return this.client.delete(url);
    }

    getTempHumidityPageList(value) {
        return this.client.get(this.config.tempHumidities.management.paging, value);
    }
}

export default TempHumidityService;

至於router因爲前面有說過，我這裏就不多說了。
總而言之，可以看出來，前端和後端基本的三個層次：controller/components、services、dao/models可以說是一一對應的，這樣前後端思維也是可以歸一化，二者同時也有不同之處。