详解Vue结合后台的列表增删改案例
首先列表内容还是与之前的列表内容类似,不过此处我们会采用Vue中数据请求的方式来实现数据的增删。那么我们使用的Vue第三方组件就是vue-resource,vue发起请求的方式与jQuery的ajax相似,组要是请求地址与参数。和方法 首先我们先看到的是列表请求 获取列表 Name |
CTime |
Operation |
</tr>
</tbody>
</table>
在methods中获取到的加入获取数据的list方法,使用get请求 {
var result =result.body;
if(result.code ===200){
this.list = result.data
需要注意的是,使用vue-resource的请求获取的数据,都封装在回调数据的body域中,同时我们需要在Vue组件的created生命周期函数中加入使用该方法来渲染页面 增加和删除元素的方法与此类似,这里给出详细代码,不做讲解 上述代码中有两个地方略显啰嗦,第一个是url,第二个是传递Json数据之后对json的处理,vue-resource 提供了两个简化的操作, url简化 我们可以在定义Vue对象之前使用 来定义请求的基础url,然后直接使用请求本身的url就可以了,但是需要注意的是两段url连接起来之后,不允许出现‘//',否则会出问题,一般我会采用基础url最后多‘/',而自定义的url则无 还有一个是对传递数据的参数的简化, 我们可以在定义Vue对象之前使用 这样我们在请求时即可默认有此参数,请求的时候就不用加上这个参数了。 经过简化,上述代码被简化为 此案例后台为我使用mybatis和springboot所做的简单后台,大家也可以自行操作。 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |