如何利用Vue快速创建一个在线电子表格

集成API

在上一节中，我们用Vue实现了一个简单的TODO应用。通过对Model的更新，DOM结构可以同步更新。

现在，如果要把这个简单的TODO应用变成一个用户能使用的Web应用，我们需要解决几个问题：

用户的TODO数据应该从后台读取；
对TODO的增删改必须同步到服务器后端；
用户在View上必须能够修改TODO。
第1个和第2个问题都是和API相关的。只要我们实现了合适的API接口，就可以在MVVM内部更新Model的同时，通过API把数据更新反映到服务器端，这样，用户数据就保存到了服务器端，下次打开页面时就可以读取TODO列表。

我们在vue-todo的基础上创建vue-todo-2项目，结构如下：

vue-todo-2/
|
± .vscode/
| |
| ± launch.json <-- VSCode 配置文件
|
± app.js <-- koa app
|
± static-files.js <-- 支持静态文件的koa middleware
|
± controller.js <-- 支持路由的koa middleware
|
± rest.js <-- 支持REST的koa middleware
|
± package.json <-- 项目描述文件
|
± node_modules/ <-- npm安装的所有依赖包
|
± controllers/ <-- 存放Controller
| |
| ± api.js <-- REST API
|
± static/ <-- 存放静态资源文件
|