vue-element-admin login process

Front-end architect Gangster QQ group: 634 196 762

1. Install the latest vue-element-admin;Here Insert Picture Description

2. If necessary, remove eslint; in the following document which search globally

Here Insert Picture Description

3. Delete all files eslint

Here Insert Picture Description
Here Insert Picture Description
Here Insert Picture Description

4. Start the installation dependencies, npm install

5. Start Services: npm run dev, but two windows are open, we need to open is set to false;

Here Insert Picture Description

6. Go to the login page:

Here Insert Picture Description

7. Log in to write back-end interface (here with java column):

Here Insert Picture Description

Codes to be set according to;

8. For the verification code, to transform the login page:

Here Insert Picture Description

Here Insert Picture Description

9. (focus) to log requests:

Appeared this. $ Store, to see this thing go store to find things directory
Here Insert Picture Description
to find the address to the preceding period, user, user to find
Here Insert Picture Description
according to find the corresponding function name back
Here Insert Picture Description

Here on the project structure should be relatively clear, if still think about it, you can only show the structure of the project understanding is incomplete;

10. The registration request is sent immediately proceeds to the following function which:

Here Insert Picture Description
So now you see a login function that come from?
Here Insert Picture Description
It can be seen from all interfaces api, according to flower pants big brother mode, direct api directory to find the user on the line
Here Insert Picture Description
so no? No.No.No ...
direct return request ({xxxxx}), request is doing it? Come from?
Here Insert Picture Description
According pants continue to spend big brother mode, go directly to the utils directory to find the Request
Here Insert Picture Description
Request is doing? (Of course, is to remove the transmission request)

request is packaged axios, mainly for a network request.

Good stuff inside the complex, do not understand how to do?

It does not matter, you just need to know how to get data on the line
Here Insert Picture Description
this request code which is mainly to see this section

Provision of value returned is the background there is the need for a code of code, flower pants Gangster specified herein 20,000 is normal, you only need to change the normal on the line here your own definition, for example, I is 0 ( after the actual end date)
Here Insert Picture Description
Having said that, here would be finished, this project there is no background, but it can send a request to the network, but also to get the data, how to do it?
Here Insert Picture Description
Here Insert Picture Description
Look at the code and found that the configuration of the agent to place mock continue to go based on the architecture of the project, went straight to mock on the line slightly.
Here Insert Picture Description
mock which really have user, as well as login address
(the focus to slightly) the key is now we have to use our own address, not analog data, so we have to replace our own address;

Began to modify the configuration parameters:

Here Insert Picture Description
Here Insert Picture Description
Here Insert Picture Description
Address directly into your background to address agent, my background is contentpath sys sys can be changed directly
when I found that the actual use of the session will be lost, which is not log in, find information not found because of a domain The reason, how to solve it?
Here Insert Picture Description
It should be changed to the same
Here Insert Picture Description
directly to the inside into the ok sys

Since the modified configuration, you need to restart the server: npm run dev

Here Insert Picture Description
I can see the code did not come out, the following is also an error, and this is what causes it?
Can see where I am out of the box, there is no definition of what a what
this is I do not want to use the original api, I think too much trouble, the request directly into the global
now we request registration to the global
Here Insert Picture Description
to request up to mount vue instance, so that you can register to the global;
Here Insert Picture Description
verification code did not come out, but also being given
this time need to own debug
Here Insert Picture Description
interrupt I find this point how come error straightforward, there is definitely a place and configure the project is not the same
Here Insert Picture Description
code is undefined
and my logic is not the same like me and let it
make other people's things become their own
Here Insert Picture Description
direct Sao wave (ha ha , leather!)
Here Insert Picture Description
the ok, this code out, proved backstage pass
Here Insert Picture Description
over, 404 (card me one day, one less hair), how to do?

Think about what 404? I did not find the interface ah
Here Insert Picture Description
look, my login interface is the sys / login (backend interface address)
Here Insert Picture Description
address of the interface front-end or user / login; we need to direct change;
Here Insert Picture Description
now is not 404, but still error
console also not being given, this Editor's Note?
Here Insert Picture Description
A problem I see is the background. . .
Go backstage and see what the problem is:
Here Insert Picture Description
make debug a look at the front did not find that argument take over;

Now that we think about, we determined parameters are passed over, how would not it?
Look closely, this is with reference to a question mark, can not be put inside the body to the parameters

ok, change

Here Insert Picture Description
So that you can directly into the!
Here Insert Picture Description
Successful login!

And so on, how found no jump ah, Editor's Note, and a look ignorant force! (One threshold is done well flustered) Here Insert Picture Description
Here Insert Picture Description
we push back step by step and see what happens after vuex login function calls inside a direct hit breakpoint debugging
Here Insert Picture Description
came in and found that the framework needs to have a data, I do not have wow, how to do it?
Went to the original framework take place login data, see the data inside a lost
Here Insert Picture Description
we do not how this data?
To direct manual
Here Insert Picture Description
Here Insert Picture Description
Here Insert Picture Description
and 404, and found a info interface, this interface come from?
Here Insert Picture Description
Continue to look, found to be user / info
old rules directly to
not know where to search on the global call
Here Insert Picture Description
here found two places this path, one api, is a mock, mock directly ignored, api inside getInfo function directly global call to find where
Here Insert Picture Description
found at the store or in the user directory referenced
Here Insert Picture Description
suddenly want to come, I do not how to do this interface? This is a business for me, with seemingly no egg
that is not to say, direct kill is not finished
but look at his call was successful also perform a bunch of operations, I can not read, deleted a problem how to do?
This time think of it, I also write data to log in is not dead, why not me? Not directly call interface to write data directly to death
Here Insert Picture Description

Screen calls, data write dead

The login is successful, you're done!

Here Insert Picture Description

Published 155 original articles · won praise 57 · views 60000 +

Guess you like

Origin blog.csdn.net/weixin_43764814/article/details/101315585
Recommended