Vue+Axios+Java实现简单的CRUD

业务需求:

        当展现页面时，用户发起请求 http://localhost:8090/vue/findAll,获取所有的user数据.
        通过Vue.js 要求在页面中展现数据, 以表格的形式展现.
        为每行数据添加 修改/删除的按钮
        在一个新的DIV中 编辑3个文本框 name/age/sex 通过提交按钮实现新增.
        如果用户点击修改按钮,则在全新的DIV中 回显数据.
        用户修改完成数据之后,通过提交按钮 实现数据的修改.
        当用户点击删除按钮时,要求实现数据的删除操作.

业务分析:

        我们可以从需求中看出，需要用到那些标签的使用

1.v-for:  对应循环打印标签，并把当前字符串赋值

2.v-model: 双向数据绑定

3.点击事件的触发@click

业务实现：

1.findAll查询所有数据

        1.1创建Web页面

        1.2GET方式，获取数据

//定义axios请求的前缀
            axios.defaults.baseURL = "http://localhost:8090/vue"
             const app = new Vue({
                 el: "#app",
                 data: {
                     userList:[],
                 },
                 methods: {
                     //定义get方法
                    getUserList(){
                        axios.get("/findAll")
                            .then(Promise=>{
                                //把后端的数据赋值给userList数组
                                this.userList=Promise.data
                                // console.log(Promise.data)
                            })
                    }
                 },
                 //利用生命周期函数触发ajax
                 created(){
                     //alert("生命周期函数")
                     this.getUserList()
                 }

        1.3编辑后端VueController层

@RestController
@CrossOrigin
@RequestMapping("/vue")
public class VueController {
    @Autowired
    private UserService userService;
    @GetMapping("/findAll")
    public List<User> findAll(){
       return userService.findAll();
    }

       1.4编辑UserServiceImpl层

        根据IDEA特性自动生成service层，我们只需手写实现层方法即可

@Service
public class UserServiceImpl implements UserService{
    @Autowired
    private UserMapper userMapper;
    @Override
    public List<User> findAll() {
        /*因为我使用的是mybatis-plus
        *所以我直接调用框架中的方法，因为没有参数传递，所以条件构造器赋值为null，查询所有
        * */
        return userMapper.selectList(null);
    }

        1.5测试如下:

 

 2.saveUser新增用户

         2.1.编辑html页面

vue中创建对象

         2.2.POST方式新增数据

 

          2.3编辑VueController层

 @PostMapping("/saveUser")
    public String saveUser(@RequestBody User user){
        userService.saveUser(user);
        return "入库成功";
    }

        2.4.编辑UserServiceImpl

    @Override
    public void saveUser(User user) {
        userMapper.insert(user);
    }

        2.5.效果如下：

        

3.DELETE方式

        3.1.新建delete方法

 

        3.2.编辑VueController层 

​
@DeleteMapping("/deleteUserById")
public String deleteUserById(Integer id){
    userService.deleteById(id);
    return "删除成功";
}

​

        3.3编辑UserServiceImpl

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

        3.4测试如下：

        

已删除

 

 4.PUT修改方式

        4.1.分析思路和思考

我们需要在指定位置进行修改，即指定位置添加事件和双向数据绑定，且可以根据ID的唯一性来进行确定，html代码如下

         4.2编辑VueController层

 @PutMapping("/updateUser")
    public String updateUser(@RequestBody User user){
        userService.updateUser(user);
        return "修改成功";
    }

        4.3编辑UserServiceImpl

        

   @Override
    public void updateUser(User user) {
       userMapper.updateById(user);
    }

        4.4测试如下

 GIT仓库源码地址

 如果有什么不足之处，请各位大佬多多指教