三阶段--day07--前端VUE.js+Axios+后端MP+SSM--实现前端页面表单操作数据库
目录
一 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 UserServiceImpl implements 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
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前后端交互
添加用户
姓名:
年龄:
性别:
用户修改
id号:
姓名:
年龄:
性别:
用户信息
编号
姓名
年龄
性别
操作
页面效果:
