springboot & amp; & amp; ElementUI 的 CRUD

Posted May 27, 20202 min read

springboot && ElementUI CRUD

Let me talk in advance, my own personal blog and my public account! ! !

Public account:Nice essay
6

I have heard that the front-end and back-end separation has been relatively hot recently, and I have always wanted to try it. Today, when he came, he made one of the simplest, springboot && ElementUI CRUD.

Regarding the structure of the project, I will put two pictures, what is the specific, after reading my article, it is no stranger.

Backend part:
1
Front end part:
2

Effect:

  1. The home page is a carousel. . .
  2. User management is realized, adding, deleting, checking and modifying, as well as paging, fuzzy query. . .
  3. The functions implemented by the message center are the same as the user management. . .

Homepage:
3
User Management:
4

Technology Stack:

rear end:

Springboot, nothing else, I will not introduce the CRUD process.

front end:

The Vue-based ElementUI used in the front-end part. Since I have just been in touch with this, I will not introduce it in this article. If you want to know, you can see my previous three articles.

Talk about the interactive part of the front and back ends:

Take a delete method:

handleDelete(index, row) {
            console.log(index, row);
            //Send a ajax delete request
            this. $http.get("http://localhost:8089/user/delete? id =" + row.id) .then(res => {
              if(res.data.status) {
                this. $message({
                  message:res.data.msg,
                  type:'success'
                });
                //Clear form information
                this.form = {sex:'Male'};
                //Hide the form
                this.show = false;
                //Call the method to refresh the data
                this.findAllTableData();
              } else {
                this. $message.error(res.data.msg);
              }
            });
          },

Here is to send an ajax delete request through axios, and then the delete operation is performed by the back end, and then the result is returned to the front end interface, which is roughly the case! ! !
Thank you! ! !