前端框架解读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可以说是一一对应的，这样前后端思维也是可以归一化，二者同时也有不同之处。