The test platform development based on Springboot + Vue continues to be updated.

Finish the front end of the list today.

First, front and rear end adjustment

To develop the front-end page, there are two changes in the framework:

  • src/views: This is where the pages, called vue files, are developed, sorted by new subdirectories of function modules.
  • src/api: Vue page requests back-end interface JS files are uniformly written here.

Next, in view of the project list interface localhost: 8080 / bloomtest/project/list / 1/5, to change their code.

1. Request the back-end interface

Under SRC/API, I added a js file, projectmanagement.js, to hold back-end requests that need to be interacted with in the projectManagement page.

import request from '@/utils/request'

export function getList(current, size, data) {
  return request({
    url: `/bloomtest/project/list/${current}/${size}`,
    method: 'post',
    data: data
  })
}
Copy the code

Note that my interface requests both the path parameter and the body parameter:

  • Receive path parameter: use **The ** symbol marks the URL and is then used within it${} ‘references variables.
  • Receive the request body: Just use data to receive it.

2. Project list page

Create a projectManagement directory in SRC/Views, copy the index.vue file from the original table directory of the framework, and rename it table.vue.

Then in the SRC/views/projectManagement/table. Modify the code in the vue, callback interface.

Import {getList} from ‘@/ API /projectManagement’.

Then modify the fetchData() method in methods, where the imported getList method is called.

Here are two more changes:

  • Method to pass parameters.

In the method defined above, there are three pass arguments getList(current, size, data). The parameters used here are defined in return:

Default values are given here: projectName is null, current=1, size=10.

  • Get the list in the returned result.

In the original code, response.data.items is the list returned by the mock data. Our actual interface returns a list field called Records.

So the final code changed to:

  methods: {
    fetchData() {
      this.listLoading = true;
      getList(this.currentPage, this.size, this.projectQuery).then(response => {
        this.list = response.data.records;
        this.listLoading = false
      })
    }
  }
Copy the code

Open F12 and refresh the project list page to see whether the front and back ends are tuned.

The front and back are connected.

3. Adjust the time format returned by the interface

After requesting the list interface, I saw that the time format returned was not right.

Add time to the time field of the entity class:

@JsonFormat(timezone = "GMT+8",pattern="yyyy-MM-dd HH:mm:ss")
Copy the code

Request again:

The format is normal.

Second, realize list data display

1. Use the Element UI library

The original page code doesn’t fit my list of items, so I’m going to change it.

Open the Element UI component library and look under the table for the component you want to use.

Click at the bottom of the display code 】 【, copy tag < template > < / template >, replace the SRC/views/projectManagement/table. The vue of template code.

The new effects are already visible on the page.

2. Modify the copied code

(1) List attributes

First change :data=”list”, this is data binding, the list is the data in the list, because the data from the backend interface is stored in the list.

You can also add properties such as loading loading effects, highlighting the currently selected line, and so on.

These properties can be seen at the bottom of the corresponding component page, and you can add corresponding properties according to your own needs.

(2) Modify table fields

Attributes in the

tag apply to columns, such as:

  • Prop: Specifies the name of the backend return field
  • Label: indicates the name to display
  • Width: the width of the
  • Align: center display

I don’t have to list all the attributes here, but I can search for them.

In addition, this table can be fixed column, directly copy the code for the column fixed, by the fixed attribute, here we do not need to use, first remove.

After this modification, the list should be displayed.

Three, to achieve paging

1. Use components

Again, go to the Element UI to find the component and copy the code to modify it, so use this.

Copy this in, modify the code, and end up like this:

    <el-pagination
      layout="total, prev, pager, next"
      :page-size="size"
      :current-page.sync="currentPage"
      :total="total"
      @current-change="fetchData"
    />
Copy the code

Introduction to the paging component:

  • layout: indicates the contents to be displayed, separated by commas. Layout elements are displayed in sequence. Prev represents the previous page, next represents the next page, and pager represents a list of page numbers. In addition, jumper pages and total totals are provided.
  • page-size: Displays the number of entries per page. Supported.syncThe modifier.
  • current-page: Number of current pages supported.syncThe modifier.
  • total: Total number of entries.
  • current-change: events,currentPageTriggered when it changes. This is what happens when you click on the current pagefetchDataMethod to query the list.

2. Assign values to page-related fields

Used in the component: bind to fields that need to be assigned by the back end interface upon return.

Because the interface request path parameter must have a value, so write two defaults.

Then modify the code returned by the interface, assigning:

3. About the.sync modifier

The.sync modifier mentioned above is simply a way to pass values between parent and child components.

I use this current-page for both parent and child components:

  • Child component: imported component. Here is theimport { getList } from '@/api/projectManagement'In thegetList.
  • Parent component: The file that introduces the encapsulated component is called the parent component, which is heresrc/views/projectManagement/table.vueFile.

In the child component, the value is assigned to current-page when the interface returns; And when I click on page 2 (value) even when launching new request/bloomtest/project/list / 2/10, so you need to use. The sync modifier.

You can print the current-page binding value in the fetchData method and print it to console to see the difference:

(1) Use the.sync modifier

Open F12, refresh the list, and click on page 2 to see console:

The values change.

(2) Do not use the.sync modifier

Open F12, refresh the list, and click on page 2 to see console:

Values between parent and child components are not passed back.

The final effect is achieved.