删除用户：后端和前端代码：前后端分离

最新推荐文章于 2024-09-30 06:30:00 发布

最新推荐文章于 2024-09-30 06:30:00 发布 · 814 阅读

文章标签：

#java #springboot #vue

JAVA 同时被 3 个专栏收录

10 篇文章

订阅专栏

vue

9 篇文章

订阅专栏

前后端分离

5 篇文章

订阅专栏

这篇博客探讨了在前后端分离的架构下，如何实现用户删除功能。前端通过在用户列表添加删除按钮，后端则分别在controller、service、servicelmpl以及mapper和mapperXml中编写相应的删除方法来完成逻辑。

删除前端
删除按钮，一般用于用户，商品等列表后面

<el-button
                  size="mini"
                  type="danger"
                  @click="deleteList(scope.$index,scope.row)">删除</el-button>

script中：

  // 删除
    deleteList(index,row) { //信息提示
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.get("http://localhost:8080/user/deleteUser",{
          params:{
            id: row.id}}).then(res => {
          // console.log(       this.list.splice(index,1))
          this.load()
          this.$message({
            type: 'success',
            message: '删除成功!'})})}).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'});});},
		handleCurrentChange: function(currentPage){
				this.currentPage = currentPage;
				console.log(this.currentPage);
				this.load();
		},

后端删除的方法
controller中

    @GetMapping("/deleteUser")
    public  Result<?> deleteUser(@RequestParam int id){
        userService.deleteUser(id);
        return  Result.sucess();
    }

service中

   void deleteUser(int id);

servicelmpl中：

    @Override
    public void deleteUser(int  id) {
        userMapper.deleteUser(id);
    }

mapper中

 void deleteUser(int id);

mapperXml中

    <delete id="deleteUser" parameterType="com.example.springboot.Common.User">
        delete  from user  where  id = #{id}
    </delete>