如何利用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/ <-- 存放静态资源文件
|

猜你喜欢

转载自blog.csdn.net/2301_76484015/article/details/130356693