[test platform development] XVII. The interface editing page realizes the drop-down cascade selection, and binds the module to which the interface belongs

be based on springboot+vue The development of the test platform continues to be updated .

It will take half a year to stop , Recently, there is no reason for unemployed families not to continue updating . Originally intended to do other functions , But when I was debugging the environment, I found bug, It turned out that I didn't realize the binding between interface and module , As a result, there is no data on the list page after clicking the module tree on the left . Piss me off , Let's fill this hole first .

Let's take a look at the final function effect moving picture .

Because improving this function involves some changes to the previous functions , So next, record the content with the actual development and modification process ( The source code is obtained at the end of the article )：

1. Looking for cascading components
2. The back-end returns the data content required by the component
3. Modify the front-end content , Use cascaded components
4. Modify and add 、 Editing function , Save the selected module
5. Modify and edit echo function , Display corresponding nodes

One 、 Cascade selector components

elementUI Official website , Find the cascade selector component .

View the functional properties of the component , Find something that meets my needs ：

• Hover triggers cascading menus
• Support to select each level separately
• Support searching nodes

Two 、 The back end returns the data required by the component

Check the component properties to know the required data content ,value Used to store the selected node , Note that what is stored here is an array . and options It's the data source , It's also an array , The attributes are ：

• value, Assignment when selecting nodes
• label, The displayed node text content
• children, Nested contents of child nodes

In fact, the data to be used in the module node here , This is the data of the module tree on the left .

For this module tree, my backend has a special interface to return , So I'm going to reuse this interface . The idea is when this interface is requested , I will assign a value to the data returned by this interface options that will do .

However, it is found that the original back-end interface is missing a return field value, Will lead to choices when there are bug, So I modified the back-end interface , Add a field to return .

For the value in the new field, I use the module id, No repetition .

F12 Take a look at the modified interface and return , That's all right. .

3、 ... and 、 The front end uses cascaded components

The back-end data has , Now change the front end , Find the corresponding position in the edit page , The original content is a drop-down selection box I temporarily placed ( The annotated part in the figure ), Now use the contents of cascading components ( The red box part ) Replace with .

Let's talk about the component properties used ：

• :show-all-levels="false": Whether to display the full path of the selected value in the input box ,false Just show the last level .
• filterable: Search options , Turn on
• placeholder: Place holder , Show background content
• clearable： Support emptying options
• v-model: Bind the node you selected value To a field
• options: Data returned by back-end interface , Stored in this field
• :props： Some other configuration options used
• @change： Trigger when the selected node changes

{ expandTrigger: 'hover', checkStrictly: true }, About the used 2 individual props, The functions are ：

• expandTrigger： How to expand the secondary menu ,hover It's mouse over expansion , I think it's more convenient .
• checkStrictly: Whether to strictly abide by the parent-child node is not related to each other ,true You can support the selection of any node .

Four 、 newly added 、 Save the selected module in the edit

I reviewed the code of clicking the Save button on the front end , It will judge whether to add or edit at this time , So you can choose to call the corresponding add or modify method .

Take a closer look at this 2 A way , It is found that the processing of request data is encapsulated in another method handleSaveRequest in .

The method finds the corresponding module id Field of , When I didn't realize this function before , It's dead 0.

Here I did some processing on the front end , Because the parameter received by the back-end interface is int, But here value It's an array , By means of handleChange Method Riga log Print , Check the return in the console to know .

Here I operate 2 Time , Find that the last node in the array is the node you selected , So I want to take out this last node to request the back-end interface , An index is an array length-1.

I thought it would be ok , Later, it was found during debugging bug, Finally, I found that when I added and edited , It can't be handled so uniformly .

Because when adding, the array is passed in , But when editing, it's just a value , Therefore, there is a more current page status, whether to edit or add a new judgment , Separate the .

Debug, edit and save , The check-in parameters and database dropping are normal .

Debug, add and save , The check-in parameters and database dropping are normal .

5、 ... and 、 Edit echo module node

At this point, I click the Edit button to open the edit page , It is found that the saved module nodes are not displayed .

F12 View and open the interface called by editing , It is found that there is... In the interface return moduleId .

But what I returned in the original interface is int type , Here, the components in the console are strings , So I tried to modify the interface of the lower back end , And the field type of the database , The normal .

Look at the effect .

The pit is filled with , I also want to make a little buddy, reply by official account. 【 Test platform 】 Get a series of tutorial articles and source address .