Integration API
In the previous section, we implemented a simple TODO application with Vue. By updating the Model, the DOM structure can be updated synchronously.
Now, if we want to turn this simple TODO application into a web application that users can use, we need to solve several problems:
The user's TODO data should be read from the background;
additions, deletions, and changes to TODOs must be synchronized to the backend of the server;
users must be able to modify TODOs on the View.
Questions 1 and 2 are both API-related. As long as we implement a suitable API interface, we can update the Model inside the MVVM and at the same time reflect the data update to the server through the API. In this way, the user data is saved to the server, and the TODO list can be read when the page is opened next time. .
We create the vue-todo-2 project based on vue-todo, the structure is as follows:
vue-todo-2/
|
± .vscode/
| |
| ± launch.json <-- VSCode configuration file
|
± app.js <-- koa app
|
± static-files.js <-- koa middleware that supports static files
|
± controller.js <-- koa middleware that supports routing
|
± rest.js <-- koa middleware that supports REST
|
± package.json <-- project description file
|
± node_modules/ <-- all dependencies installed by npm
|
± controllers/ <-- store Controller
| |
| ± api.js <-- REST API
|
± static/ <-- store static resource files
|