Vue——Ant Design Pro的初使用(5)

这次主要是对于数据上传的一个简述(由于之前的图片上传有一点问题所以就先把这个给发出来了)

对于后台的数据,我们做的最多的工作是啥子呢?增,删,改,查。只要能把这几个操作实现了,那么基本上前台与后端的交互就没有太大的问题了。不仅是图片的上传,还有数据的录入,这都是属于“增”。也就是咱们的第一步,也属于最基本的。如果你都没有数据,那你还哪里来的删,改,查呢。

数据的录入有会出现那些信息呢?

一般的话都属于手动的将一条条数据输入到咱们的表单里面然后发送到后端给存储起来。另一种就是打开我们自己存储数据的地方,将图片,文件等直接发送给后台存储起来。毕竟都属于对数据的存储。

手动的将数据录入应该怎么办?

首先我们要有我们的数据输入的位置“输入框”,我们读取到输入框中我们所输入的数据才能将数据发送的到后端。在我们的插件中就有着已经封装好的这种输入框的插件,直接拿过来用就行了(拿来吧你)。更改一下,加上一点点样式,先做一个最简易的跑通接口。由于我跑的接口要的数据有点多我就不放完了,放了其中一个

Vue——Ant Design Pro的初使用(5)

代码效果

 

Vue——Ant Design Pro的初使用(5)

 

 将所有的输入框写好后我们就要将这些数据通过请求发送到后台了,因为咱们框架里面有api的文档,例子中的请求都是已经写好的。于是我就又在里面添加了一个。

Vue——Ant Design Pro的初使用(5)

 

 我们只需要再我们当前的文档中引入一下,就可以用了。咱们由这个提交按钮来触发咱们的方法,于是一个最简单的数据输入就做好了。

Vue——Ant Design Pro的初使用(5)

 

 

 

 Vue——Ant Design Pro的初使用(5)

 

整体上做这个数据的输入还是比较流畅的,唯一的问题就是我对于这个框架自带的这个请求的发送不是很熟悉,刚开始我用的还是经典的vue的发送请求,后面又由于我的马虎,忘记了这个接口用的是post请求的方式,导致一直不能成功发送请求,后面又由于我需要发送的数据比较多,漏填了两个,不过还好发现的早,不然要找到问题可能真的要花费好大的功夫。

 

上一篇:WPF打包工具


下一篇:spring boot 与 Ant Design of Vue 实现菜单管理布局的实现(十)