Use vue to read remote news API interface to get data
Ready to work
1. You need to go to Alibaba Cloud to register the
Alibaba Cloud address
. 2. After registering, go to this news interface and purchase 1,000 pieces for 1 yuan. You can also enjoy 100 pieces for free after real-name. If you want to keep debugging, 100 pieces are obviously not enough.
Press the interface address
to view the purchase order from here
Remember to save the required information after purchase
Request code
News list request address and configuration information
News channel request address and configuration information
Start to get interfaces and data
Create a special folder for configuration and interface docking
, just take the request code directly in config
Here is to download an external package axios after
downloading, import the package in newsServices import the
request code of config
Configure the news channel
get request the request address of the channel Each time the request code for incoming verification is requested, the final desired channel array is returned. The
configuration news list is
basically the same as above. , In addition, some configurations required in the configuration table are required. For details, please refer to the above table
Interface functions imported and executed by Vue components
Get the news channel,
wait for the success of the acquisition, and then perform the operation to get the change array,
and then you can read the data you want to
get the news list.
Here I get it through the parent component. The
parent component import request function executes to get
this.news = resp. contentlist; The final array is the news array in the array corresponding to the id. It is not clear that you can print the obtained array and check the structure. It is actually a nested array.
In this way, the data of the interface can be obtained on the page
Switching the title
Of course, the operation has to deal with the data reasonably to achieve this effect.
I hope everyone has to help!
Like it, Mina.