接触了一天vue.js,简单浏览了一本关于vue的电子书,就开始动手使用 MVC和Vue.js开发一个联系人管理的小程序。
先看一下这个联系人管理的小程序的界面,也就是我们大概要实现什么样的功能。
上面截图可以看出,这是一个很简单的表格管理功能。我们先分析一下,上述有哪些功能需要实现:
1、默认先加载出所有的联系人信息,有信息的行后面的操作那一栏,显示“修改”、“删除”,没有信息的行后面的操作那一栏,显示“添加”(默认只添加一行需要添加的信息)。
2、点击“添加”按钮对应的空白文本框中的内容,即可完成添加联系人的操作。添加操作完成后,自动添加一行空白行,以便再次添加。
3、编辑任意文本框中的内容,点击对应行后面的“修改”按钮,即可完成修改操作。
4、点击“删除”按钮,即可删除对应行的联系人记录
大家可以先思考一下,如果就单独使用 MVC,不使用任何JS或jQuery插件,怎么完成。
下面就开始要正式实现上面的功能,首先我们要准备好后端的内容,就是Model、Controller、Repository这些内容。
Model很简单,就一个联系人的类:
public class Conta