First, record the structure of the project that people can't understand:

Here's the structure that we didn't understand, which is a little more detailed:

I. clear structure

As a small white, it still needs a lot of knowledge to build a structure like this. However, in this process, it is also necessary to learn little by little. Although the structure has not been fully understood, but in the process of the project, this part of Xiaobai involved in programming still needs to be understood.
Of course, part of the structure of my programming is the same as the backend.

①components

As the front-end, there must be an interface, and all the pages of this project are placed in the components folder. Because the project uses the vue structure, the pages are all files with the vue suffix.
The template format inside the file is as follows:

<template>
//Front end interface code, also known as static
</template>

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

<style scope>
//It's recommended to write some sentences with less than a lot of formats here, or you can take them out separately at last
</style>

②conditions

As the name implies, this folder is used to store JS files of conditions. As the front end of this project, the conditions stored in the files are basically related to paging. Pagination is related to two factors, page number and page size.
The following is the content of one of the conditions:

import KeywordCondition from "./keyword";

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

export default HardwareCondition;

For the introduction and introduction of conditions, please refer to my other articles:

③models

I like this folder very much, because this is a basic entity folder, that is, all the files in it correspond to the field information required by the page one by one, and if it is used as a table itself, only four basic operations are needed: adding, deleting, modifying and querying. Of course, all the front ends can be summarized by adding, deleting, modifying and querying in essence. This is what my teacher said.
Here is the file content, or take an example:

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;

The clone() method here is equivalent to directly materializing the class. You can see that the fields here correspond to the fields transferred in the background one by one.

④services

This folder is for business operation. It is very similar to the back end. You can define the access to list, access to paging list, access to single piece of data, and directly access to background data.
The following code is as follows:

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;

As for router, I won't talk about it here.
In a word, it can be seen that the basic three levels of front-end and back-end: controller/components, services and dao/models can be said to be one-to-one correspondence, so that the front-end and back-end thinking can also be normalized, and they also have differences.