General article address:

Vue. Js base will not? — This article is enough

Vue whole family barrel Webpack Git Axios Element- UI

6, user add, modify, delete functions

6.1 Rendering The Dialog box for Adding a user

Dialog box using elementUI dialog, import on demand, global register. Put the UI structure into the page:



Add user dialog box:

You need to define a Boolean value. AddDialogVisible defines this data in date

The default false is hidden



Add single machine event for add button click, bind addDialogVisible to True and then the dialog box will show true,

6.2 Render the form for adding users

Conclusion:

Write the UI structure, and then write the data in the data, validation rules: rules: validation rules: model: data binding object, define the data, define the validation rules

Effect:

1, the user

Use the form form.

Define addForm data to add the user’s form data

There are two validation rules:

2. Password, email, cell phone

6.3 User-defined Verification rules for Email addresses and Mobile Phone Numbers

Form authentication does not have mobile phone number and email authentication.

Let’s define two rules,

Each rule has three arguments, rule valu, cb (callback)

Using regular expressions,



Once the definition is complete, use the Validator at usage time to complete the invocation rule

Trigger to implement when to click on the call

6.4 Implement the reset operation of adding a form

Reset the dialog box after it closes

Add the close event to the add user dialog



Add event definition:



Call resetFields () to get the ref reference to the form

6.5 Implement form pre-verification before adding users



Prevalidate the form when OK is clicked, bind the event on the OK button:



This.$refs.addFormReef. The reference object of the form.

6.6 Invoking the API Interface The user is added

API interface:



Get is used to initiate the request, and const is used to accept the callback function that is sent back to determine whether the server returns data (determined by 201), then hides the dialog box and retrieves the user list to refresh the data.

6.7 Displaying the Dialog box for Modifying a User

Effect:

Click the modify button to pop up the dialog box



Find the Modify button binding event:



Define events:

Write the structure of the dialog:

Define the default Boolean values for the attributes:



Define the click event in the edit button and assign the Boolean value to true so that the click will be effective

6.8 Querying User Information Based on the ID

Get the user’S ID, get the data through the scope slot, as a parameter, in the modify button click event,



In the modify button there is shoeEditDialog (scope.row.id) where the parameter is the id you got





Make a GET request,



Struct assignment simplifies promises, makes judgments, and displays prompt messages:

Define an object:

6.9 Rendering Modify user forms

Use Element form authentication, username, email, mobile phone number. Modify as needed.

Two-way binding of data through V-Model: rules is verification rule, prop is verification rule,

Start by defining a form validation rule object.



Validation rules for forms:

6.10 Reset the user form

After modifying the form, the close should be reset, binding functions to modify user events:

Define functions: listen for the close event of the modify user dialog box, get the reference name of the form, and close the window.

6.11 Complete the form pre-verification before submitting the modification

Pre-validate the form before clicking OK.

Identify the button and bind a handler function



Define a function:

6.12 Submitting the Form You have modified the user information

API:



Initiate an HTTP request to obtain data, close the dialog box, and refresh the data list

6.13 A dialog box is displayed asking you whether to delete data

When you click delete, you need to pop up a dialog box whether to delete data

Inside elementUi is a component, the Message Box component

Import message box from element.js and mount it globally.



Bind the event for the delete button.



Define a handler function:

Delete the corresponding information based on the ID (pop-up prompt first)

We then accept the object using const. Optimize the promise



. Catch Catches an error and returns



Determine if you hit Cancel or OK. A confirmation dialog box is displayed

6.14 Calling the API To delete the user

API:

Make a request, delete, and determine whether the deletion is successful, after successful refresh user list:

6.15 Create a sub-branch of user and push the code to the code cloud

Git branch -b user branch Git branch -b user branch Git branch Git commit -m “complete the user list function” Git push -u origin user Git push -u origin user Git checkout master switch to the master branch git merge user merge user’s code into the master branch. Git push pushes native code to the cloud

6.16 Create a sub-branch of Rights and push it to the code cloud

Create the permission list code for the next section

Git branch check Git checkout -b rights create right branch Git branch check Git push -u origin rights first push the rights branch to the cloud.