The directory structure is very simple and there are very few components. There are two components in one directory.

In order to add more page components in the future, we use router routing here. Methods to plan pages and jumps between pages

The page is very simple, mainly an input box. Now we hope that when typing content, a prompt content will pop up below, like this:

So we bind events to the input box. There are many methods, and this method can be conveniently used under Vue

Among them, inputFun is the event we bound. Whenever the input content changes, this function will be executed. We implement this method in methods.

Specific implementation of the function:

The searchSubmit function executes the api query. The following is the searchSubmit function. Note that a callback is required here, otherwise problems will occur. Failure to use a callback will cause a prompt box It appears too early, we hope to request the data before displaying it

Even if the above search.vue component is finished

When debugging Vue in the development environment, it essentially starts the node server , and then use this node server to start the vue resource, then our api request proxy forwarding can be written in this default node server, that is, configured in webpack.dev.conf.js

Here we Two modules need to be introduced at the starting position

Among them, the request module is an http request module. It can easily complete GET, POST and other requests. We use it to obtain data from NetEase Cloud Music.

The enc module is an encryption module written by ourselves. NetEase Cloud API requests ASE and RSA encryption of data. We write modules to reconstruct data encryption.

Create before(app){} in the devServer node, write http get and post requests here, and send them back to the front end in the form of api:

The enc module It is our abstract NetEase Cloud music encryption module. We will focus on the writing of this module in detail later

Of course, we also need to configure the API on the front end, in which we use the axios module to implement it and encapsulate the axios get request. into a search function and exposed through export.

After that, we can easily use this API in any component,

introduced in the search.vue component

First of all, we have NetEase Cloud search tips Analyze the api, press F12 before entering the content and switch to Network. Keep network packet capture turned on

Restore b method can be used directly, but you need to pay attention to referencing the Crypto-js library, which is a specialized AES Encryption and decryption library.

The restoration of the c method cannot be copied directly, because the c method here is not a normal RSA encryption. Students can debug the details in different places and rewrite the encryption of the c method by themselves. I won’t introduce too much here. In addition to rewriting the encryption method, there is actually a simple method, which is to find the corresponding method according to the call of the c function and call it in sequence. I also adopted this method here, directly from Lines 12412 to 12834 are all pasted into our module. After testing, this method is completely correct.

So the entire enc module looks like this:

At this point, the encryption analysis of NetEase Cloud API is completed, and the writing of the enc module is also completed.

During my testing, the server often crashes and dies. The main reason is that the requested data returns empty, and if we want to parse it into json format, then a Parsing incorrectly formatted error. Therefore, judgment needs to be added to determine whether the requested data is empty. If it is empty, empty data will be returned. If it is not empty, it will be parsed.

On the front end, we created an info_flag flag to specify whether to display the prompt box. However, the timing of the true or false switching of the info_flag flag becomes particularly important. For a better user experience, we hope to generate data before The prompt box will be implemented in the future, so the callback callback is used here. After the data is requested, the callback is performed, and the flag bit is switched at this time.

At this point, all front-end and server intermediate proxies are completed

Click github to give a star