vue利用axios实现数据增删改查 vue怎么实现增删改查

开发工具与关键技术： Java、Vue
作者：肖广斌
撰写时间：2021年6月18日

SSM我们应该都已经很熟悉了，那在使用Vue之前，我们需要对Vue有一定的了解，才能实现我们对数据处理的操作。
下面地址是我对vue整理的一些基础：

首先我们需要了解的是vue常用的语法指令：v-model、v-on、v-for等指令，以及插值表达式 {{变量名}}
v-model：双向绑定，视图（view）和模型（model）之间会相互影响。
v-on：用于给页面元素绑定事件。如：v-on：click=“addUser”。v-on简化语法@
v-for：遍历数据渲染页面。如：v-for=“item in items”。

下面我们进入正题，结合SSM对其实现增删查改的操作
首先我们创建一个maven项目，项目都是一些基本配置就不详细说明了。
1、定义一个实体类pojo映射数据库表数据

2、在dao层写我们的方法接口：

public interface UserDao {
    //查询用户列表
    @Select("select * from tb_user")
    List<User> findAll();
    //根据id查询用户
    @Select("select * from tb_user where id = #{id}")
    User findById(Integer id);
    //修改
    @Update("update tb_user set userName=#{userName},password=#{password}," +
            "name=#{name},age=#{age},sex=#{sex},idnum=#{idnum} where id=#{id}")
    void updateUser(User user);
    //删除
    @Delete("delete from tb_user where id = #{id}")
    int deleteUser(Integer id);
    //新增
    @Insert("insert into tb_user (userName,password,name,age,sex,idnum)" +
            "values(#{userName},#{password},#{name},#{age},#{sex},#{idnum})")
    int insertUser(User user);
}

3、写service层方法

public interface UserService {
    //查询用户列表
    List<User> findAll();
    //根据id查询用户
    User findById(Integer id);
    //修改
    void updateUser(User user);
    //删除
    int deleteUser(Integer id);
    //新增
    int insertUser(User user);
}

4、编写UserServiceImpl 实现

@Service
public class UserServiceImpl implements UserService {
    @Autowired
    private UserDao userDao;
    @Override
    public List<User> findAll() {
        return userDao.findAll();
    }
    @Override
    public User findById(Integer id) {
        return userDao.findById(id);
    }
    @Override
    public void updateUser(User user) {
         userDao.updateUser(user);
    }
    @Override
    public int deleteUser(Integer id) {
        return userDao.deleteUser(id);
    }
    @Override
    public int insertUser(User user) {
        return userDao.insertUser(user);
    }
}

5、controller层返回数据

@RestController
@RequestMapping("/user")
public class UserController {
    @Autowired
    private UserService userService;
    //查询全部
    @RequestMapping("/findAll")
    public List<User> findAll(){
        return userService.findAll();
    }
    //根据id查询
    @RequestMapping("/findById")
    public User findById(Integer id){
        return userService.findById(id);
    }
    //修改
    @RequestMapping("/updateUser")
    public void updateUser(@RequestBody User user){
        userService.updateUser(user);
    }
    //删除
    @RequestMapping("/deleteUser")
    public int deleteUser(Integer id){
        return userService.deleteUser(id);
    }
    //新增
    @RequestMapping("/insertUser")
    public int insertUser(@RequestBody User user){
        return userService.insertUser(user);
    }
}

最后就是新建一个html页面，把js引入html页面，在js编写调用控制器的方法返回数据渲染到页面

我们需要先把vue.js和axios.js提前下载好，axios异步请求技术，作用是用来在页面发送异步请求，并获取对应的数据在页面渲染，user.js是我们需要手动编写的js

在user.js里，首先new一个Vue，定义data，便于我们之后装载数据，然后在methods中定义function函数，在函数里使用axios调用post请求或者get请求 控制器的方法返回数据，在请求成功时，就响应数据给我们在data里定义的数据，请求失败就输出error，然后我们在html页面使用vue的指令把数据渲染出来就行了。

new Vue({
    el:"#app",//用来给vue实例定义一个作用范围
    data:{
        user:{
            id:"",
            userName:"",
            password:"",
            name:"",
            age:"",
            sex:"",
            idnum:"",
        },
        name:"",
        userList:[],
    },
    //在methods中定义方法
    methods:{
        //查询全部
        findAll:function () {
            //在当前方法中定义一个变量，表明是vue对象
            var _this = this;
            //post请求方式
            axios.post('/day01_eesy_vuejsdemo/user/findAll.do', {
                // firstName: 'Fred',
                // lastName: 'Flintstone'
            })
            .then(function (response) {
                _this.userList = response.data;//响应数据给userList赋值
            })
            .catch(function (error) {
                console.log(error);
            });
        },
        //根据id查询
        findById:function (id) {
            var _thisd = this;
            axios.get('/day01_eesy_vuejsdemo/user/findById.do',{
                params:{
                    id:id
                }})
                .then(function (response) {
                    _thisd.user = response.data;//响应数据给userList赋值
                    $("#myModal").modal("show");//弹出模态框
                })
                .catch(function (error) {
                    console.log(error);
                })
        },
        //修改
        update:function (user) {
            var _thisd = this;
            axios.post('/day01_eesy_vuejsdemo/user/updateUser.do', _thisd.user)
                .then(function (response) {
                    alert("修改成功")
                    _thisd.findAll();
                })
                .catch(function (error) {
                    console.log(error);
                });
        },
        //删除
        deleteUser:function (id) {
            var _thisd = this;
            if (window.confirm("确定要删除该条数据吗？？？")){
                axios.post('/day01_eesy_vuejsdemo/user/deleteUser.do?id='+id)
                    .then(function (response) {
                        alert("删除成功")
                        _thisd.findAll();
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }
        },
        //打开新增模态框
        openInsertM:function () {
            var _thisd = this;
            _thisd.user={};
            $("#myModalTwo").modal("show");
        },
        //新增
        insertUser:function (user) {
            var _thisd = this;
            axios.post('/day01_eesy_vuejsdemo/user/insertUser.do', _thisd.user)
                .then(function (response) {
                    alert("新增成功")
                    _thisd.findAll();
                })
                .catch(function (error) {
                    console.log(error);
                });
        },
        //根据名字模糊查询
        findByName(){
            var _this = this;
            var names = _this.name;
            axios.post('/day01_eesy_vuejsdemo/user/findByName.do?name='+names)
                .then(function (response) {
                    _this.userList = response.data;//响应数据给userList赋值
                })
                .catch(function (error) {
                    console.log(error);
                });
        }
    },
    created:function(){//当我们页面加载的时候触发请求，查询所有
        this.findAll();
    }
});

最终的效果如下：

点击新增即可弹出模态框，输入数据，然后保存新增，点击编辑即弹出模态框回填数据，然后保存修改，点击删除，即删除该条数据！！！