Vue Cli3 + SpringBoot stepping on the pit (3)

Today, the main pits are:
1. The life hook of the front-end Vue, which dynamically loads the values ​​in the database when the page opens.
2. Use routing parameters to click on an article to get the corresponding data from the background
3. You can modify the article while reading the article
4. Add comments

Life hook

Insert picture description here
In particular, the main thing to remember is that the value of axios passed back-end is an array. If you remember data [0] for a single object, multiple data will be taken out by v-for.
Insert picture description here
This is to send the input to the background and write it to the database.

Routing parameter

There are three parameter transmission methods. For details, please refer to three routing parameters .
I use the vuetifyUI component library, which has a high degree of integration, and you can use to or **: to directly .
Insert picture description here
Because I am using an object, I need to add
: **. The parameters of the object used in the corresponding route:Insert picture description here

modify articles

Using the way of routing parameters.
Insert picture description here
Pass the ID of this article to the add article page.
Insert picture description here
Add an article page to load the life hook to determine whether to pass the parameter, and pass the parameter to get the content of the article by ID from the database, otherwise normal article addition operation

add comment

Operation:
Insert picture description here
Insert picture description here
Insert picture description here
load when entering the page, when the article content and comments are loaded at the same time, reload the comment area after adding comments

Delete comments and delete articles

The parameters used to delete the comments, the more I learned later I ca n’t remember anything, the importance of the parameters. Insert picture description here
The code to delete the article is also posted: Insert picture description here
In order to make the deletion more advanced, a dialog box is used.
Insert picture description here
Insert picture description here
Insert picture description here
Basically, the addition, deletion, inspection and modification are completed.

Published 20 original articles · praised 4 · visits 612

Guess you like

Origin blog.csdn.net/qq_45031575/article/details/104120054