我们将html页面放到如下位置：

js目录下存放vue和axios资源文件。

2、springboot框架搭建

2.1、项目创建

1、新建maven项目，取名为vue_day3_admin

2、引入sprinboot-web依赖

org.springframework.boot修改

2、userEditDetail(id)

userEditDetail(id){//用来在表单中将当前点击用户信息进行回显axios.get("http://localhost:8990/user/"+id).then(res=>{this.user=res.data;//完成数据回显});},

3、给提交按钮绑定修改或者添加用户信息事件

提交

4、saveOrUpdate()

saveOrUpdate(){//保存或者修改方法if(!this.user.name){alert("姓名不能为空!");return;}console.log(this.user);axios.post("http://localhost:8990/saveOrUpdate",this.user).then(res=>{this.user={};//添加成功，清空数据alert("用户信息更新成功!");//更新原始列表的数据this.findAll();//调用查询所有}).catch(err=>{alert("用户信息更新失败!")});},},findAll(){//发送axios请求axios.get("http://localhost:8990/users").then(res=>{console.log(res.data);this.users=res.data;});//es6箭头函数注意：箭头函数内部没有自己this简化function(){}//存在自己this},

5、测试一下

测试成功！！！

7、删除用户信息

7.1、后端代码

1、UserDAO接口

//基于id删除用户信息voiddelete(Integerid);

2、UserDAOMapper.xml

deletefromt_userwhereid=#{id}

3、service层

UserService类

//根据id删除用户信息voiddelete(Integerid);

UserServiceImpl类

@Overridepublicvoiddelete(Integerid){userDAO.delete(id);}

4、controller类

//根据id删除用户信息的接口@DeleteMapping("delete/{id}")publicvoiddelete(@PathVariableIntegerid){userService.delete(id);}

7.2、前端代码

1、给删除按钮绑定删除事件

删除

2、delUser(id)删除用户方法

delUser(id){//删除用户方法//友情提醒删除if(window.confirm("您确定要删除这条记录吗？")){axios.delete("http://localhost:8990/delete/"+id).then(res=>{alert("用户信息删除成功!");this.findAll();调用查询所有}).catch(err=>{alert("用户信息删除失败!");});}}

3、测试一下

到此，相信大家对“Vue结合Springboot如何实现用户列表单页面”有了更深的了解，不妨来实际操作一番吧！这里是恰卡编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！