三阶段--day07--前端VUE.js+Axios+后端MP+SSM--实现前端页面表单操作数据库三阶段--day07--前端VUE.js+Axios+后

目录
一 VUE+Axios练习
1.需求分析
2.绘制前端页面
3 实现UserList查询--GET请求类型
3.1编辑UserController
3.2 编辑UserService接口
3.3实现类重写业务层接口的方法
4 实现用户新增数据入库的操作--Post请求类型
4.1 编辑UserController
4.2 编辑UserService
4.3 业务层实现类重写接口新增方法
5删除用户信息--Delete请求类型
5.1 编辑前端删除按钮的代码和事件绑定的方法
5.2 编辑后端MVC的Controller层
5.3 业务层及实现类
6 修改用户信息--Put请求类型
6.1 编辑前端修改按钮事件和事件绑定的方法
6.2 编辑页面JS
6.2 编辑后端控制层修改操作的方法
6.3 业务层接口及实现类
7对修改框进行属性绑定-期初隐藏,点击后显示出来
8 隐藏后弹出表单,并对表单进行修饰
一 VUE+Axios练习 1.需求分析说明:
1. 利用VUE.js构建页面
2. 利用Axios实现userList数据的获取, 利用VUE.js展现列表信息
3. 完成页面数据的删除操作
4. 完成页面数据的修改操作
2.绘制前端页面

VUE-Axios练习 - 锐客网用户新增名称: 年龄: 性别: 用户列表编号名称年龄性别操作

用户列表
编号	名称	年龄	性别	操作

3 实现UserList查询--GET请求类型 3.1编辑UserController

@RestController @CrossOrigin @RequestMapping("/vue") //包含全部类型 public class VueController {@Autowired private UserService userService; /** *需求: 查询用户表的所有数据 *url: /vue/getUserList *参数: 不要参数 *返回值: List集合 */ @GetMapping("/getUserList") private List getUserList(){return userService.getUserList(); }}

3.2 编辑UserService接口

@Service public class UserServiceImplimplements UserService{@Autowired private UserMapper userMapper; @Override public List getUserList() {//利用MP获取数据库记录 return userMapper.selectList(null); } }

3.3实现类重写业务层接口的方法

@Autowired private UserMapper userMapper; //1.重写查询操作 @Override public List getUserList() { return userMapper.selectList(null); }

4 实现用户新增数据入库的操作--Post请求类型前端页面见第2步绘制页面操作
4.1 编辑UserController

三阶段--day07--前端VUE.js+Axios+后端MP+SSM--实现前端页面表单操作数据库

文章图片

4.2 编辑UserService

文章图片

4.3 业务层实现类重写接口新增方法

@Service public class UserServiceImpl implements UserService{ @Autowired private UserMapper userMapper; //1.重写查询操作 @Override public List getUserList() { return userMapper.selectList(null); } //2.重写新增操作 @Override public void insertUser(User user) { userMapper.insert(user); } }

5删除用户信息--Delete请求类型 5.1 编辑前端删除按钮的代码和事件绑定的方法

methods方法上:

//4.删除用户 async deleteById(id){ let {data: result} = await axios.delete(`/vue/deleteUser/${id}`) if(confirm("确定删除吗?")==true){ //console.log(result); //刷新数据 this.getUserList() } }

5.2 编辑后端MVC的Controller层

//@DeleteMapping("/deleteUser/{id}") //public String deleteUserById(@PathVariable Integer id){ //userService.deleteUserById(id); //return"删除"+id+"成功!"; //} @DeleteMapping("/deleteUser") public void deleteUser(Integer id){ userService.deleteById(id); }

5.3 业务层及实现类

//void deleteUserById(Integer id); void deleteById(Integer id);

实现类:

@Override public void deleteById(Integer id) { userMapper.deleteById(id); }//@Override //public void deleteUserById(Integer id) { //userMapper.deleteUserById(id); //}

6 修改用户信息--Put请求类型 6.1 编辑前端修改按钮事件和事件绑定的方法
业务说明:

准备修改的DIV 其中包含4部分数据. name/age/sex where id!!!
当用户点击修改按钮时,应该实现数据的回显.
当用户已经修改完成之后,需要点击提交按钮时应该发起ajax请求实现数据修改操作.

注意事项:
在vue.js中看到了INPUT框, 则表示双向数据绑定. 必须在data中定义属性.
6.2 编辑页面JS

定义修改html标签
定义修改的对象 updateUser 并且双向数据绑定
为提交按钮添加点击事件. 实现ajax参数提交.
清空已提交的数据,重新获取列表信息.

VUE-Axios练习 - 锐客网用户新增名称: 年龄: 性别: 用户修改 id: 名称: 年龄: 性别: 用户列表编号名称年龄性别操作

用户列表
编号	名称	年龄	性别	操作

请求参数详情信息:

文章图片

6.2 编辑后端控制层修改操作的方法

/*修改 * url:http://localhost:8090/vue/updateUser * 参数:对象的JSON串 * 返回值:void*/ @PutMapping("/updateUser") public String updateUser(@RequestBody User user){ userService.updateUser(user); return "用户修改成功!"; }

6.3 业务层接口及实现类

void updateUser(User user);

实现类:

//4.user对象传递了4个参数,id是主键,修改另外的3个属性 @Override public void updateUser(User user) { //根据主键id充当where条件,另外的属性当做set条件 userMapper.updateById(user); }

7对修改框进行属性绑定-期初隐藏,点击后显示出来 1)

文章图片

2)

文章图片

3)

文章图片

4)

文章图片

5)

文章图片

8 隐藏后弹出表单,并对表单进行修饰

vue_axios前后端交互 - 锐客网.displayNon{ display: none; } .displayblo{ display:block ; position: fixed; border : 2px solid #6699cc; border-radius: 15px; width: 400px; height: 450px; top: 50%; left: 50%; transform: translate(-50%,-50%); background-color: azure; }/* 输入框样式 */ .updateWinIn{ margin: 10px; margin-left: 30px; padding-left: 10px; border-radius: 10px; height: 40px; font-size: 20px; } /* 按钮样式 */ .updateWinBut{ margin: 40px; width: 100px; height: 40px; background-color: dodgerblue; color: #FFFFFF; border-radius: 15px; border-width: 0; cursor: pointer; } 添加用户姓名: 年龄: 性别: 用户修改id号: 姓名: 年龄: 性别: 用户信息编号姓名年龄性别操作