vue从不会实现最简易table增删改查

一、环境准备
编译器：Webstorm
安装：Node.js -> npm -> cnpm -> vue
1.安装Node.js
菜鸟教程：https://www.runoob.com/nodejs/nodejs-install-setup.html
2.安装npm
Windows系统cmd：

npm install npm -g

使用淘宝镜像：

npm install -g cnpm --registry=https://registry.npm.taobao.org

3.安装cnpm
Windows系统cmd：

npm install -g cnpm --registry=https://registry.npm.taobao.org

4.安装vue

cnpm install npm -g

5.如果在cmd中能正常查询版本，说明安装就成功了

image.png

二、搭建vue-cli脚手架
图形化方式创建vue项目了。
cmd：

vue ui

image.png

选择合适的文件夹后，点击在此创建新项目

image.png

给项目起名

image.png

这里是选择项目的预设，如果之前创建过项目，且保存了预设，可以选择之前的预设，没有的话就进行手动配置项目。这里我选择了Babel、Router、Linter/Formatter、使用配置文件。

image.png

到这里基本就OK了。vue项目就创建在对应的文件夹中了。

三、逻辑功能
table的基本功能：增删改查。
增：点击添加按钮，生成一个表单弹窗，在弹窗中填写信息后提交，新提交的信息显示在视图中。
删：点击删除按钮，删除对应的信息。
改：点击编辑按钮，生成一个表单弹窗，更改信息提交后在视图中更新数据。
查：搜索关键字，在视图中返回包含关键字的数据。
待完善的功能：
增：没有对输入的数据进行限制（数据种类、格式、是否为空...）
删：...
改：修改功能大体上借用的增加的代码逻辑，每一次都要重新输入选择的数据的所有的值。
查：查询只是在逻辑和视图上完成了功能，但并不是理想中查询的逻辑。
基本界面：

image.png

image.png

image.png

image.png

四、代码实现
1.Element-UI安装
使用Element-UI可以绕开很多麻烦，把更多精力放在逻辑实现上。
Terminal：

npm i element-ui -S

main.js中引入element-ui：

import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(Element)

2.主界面App.vue

以上为App.vue的内容~
3.子组件
(1)增加功能组件additem：
additem子组件要实现的逻辑是，当点击"添加"按钮时，在当前页面生成弹窗，在弹窗内填写表单数据，将新的数据传到父组件中(emit)。那么就有几个主要需要实现功能：
①点击，显示弹窗：当点击添加时，触发事件，改变控制additem子组件的显示的值(变成true)。
②子组件数据传到父组件
使用$emit，父组件监听事件，子组件提交数据触发对应事件。

(2)修改功能组件modifyitem：
我其实觉得如果就是简易的添加和修改，这两个功能的逻辑是差不多的。但修改是将点击修改的位置的数据更改，不是新push一段数据。所以在父组件额外需要注意的是，点击修改时要将对应的index传入对应的事件中。

五、总结
这个只能实现最基本的增删改查功能，并且也只是在前端完成的数据操作。而在实际应用中要和后端的接口连接起来搭建，以此完成对数据库中的数据的增删改查操作。下一步就是学习axios和用flask写api了。

还有最重要一点之一，变量名！我是按增-删-改-查的顺序做的，所以刚开始没有兼顾到后面变量名，有的变量是不同组件中，控制对应相同的功能（比如添加和修改子组件中的弹窗的显示控制:visible.sync=" "，当想最后再想统一给变量起名时，就怕改一个bug一堆，还是怠情阻止了我8-）。

github：https://github.com/anRank/table_adms