做项目时在springssm中如何在idea前端中删除已在数据库中存在的数据和添加新的地址加上案例

好的，下面我将结合一个简单的案例来说明如何在Spring MVC中通过前端操作数据库。

假设我们正在发一个地址簿管理系统，该系统可以实现添加、删除、修改和查询地址信息的功能。我们使用Spring MVC框架，MyBatis作为ORM框架，前端使用Vue.js。

1. 添加新地址

首先在前端页面中，我们设置一个表单，用于输入新地址的信息。当用户点击“添加”按钮时，前端向后端发送一个POST请求，请求中包含新地址的信息。后端的控制器接收到该请求后，调用服务层的添加方法，将新地址插入到数据库中。

前端代码：

<template>
  <div>
    <h2>添加新地址</h2>
    <form>
      <div>
        <label>姓名：</label>
        <input type="text" v-model="name">
      </div>
      <div>
        <label>电话：</label>
        <input type="text" v-model="tel">
      </div>
      <div>
        <label>地址：</label>
        <input type="text" v-model="address">
      </div>
      <button type="button" @click="addAddress">添加</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      tel: '',
      address: ''
    }
  },
  methods: {
    addAddress() {
      axios.post('/address', {
        name: this.name,
        tel: this.tel,
        address: this.address
      }).then(res => {
        console.log(res.data)
        // 添加成功后跳转到地址列表页面
        this.$router.push('/list')
      }).catch(err => {
        console.error(err)
      })
    }
  }
}
</script>

后端代码：

@RestController
@RequestMapping("/address")
public class AddressController {

  @Autowired
  private AddressService addressService;

  @PostMapping
  public Result addAddress(@RequestBody Address address) {
    addressService.addAddress(address);
    return new Result("添加成功");
  }
}

@Service
public class AddressServiceImpl implements AddressService {

  @Autowired
  private AddressMapper addressMapper;

  @Override
  public void addAddress(Address address) {
    addressMapper.insert(address);
  }
}

@Mapper
public interface AddressMapper {

  void insert(Address address);
}

2. 删除已有地址

同样，在前端页面中，我们设置一个表格，用于展示已有的地址信息。每行数据后面添加一个“删除”按钮，当用户点击该按钮时，前端向后端发送一个DELETE请求，请求中包含需要删除的地址ID。后端的控制器接收到该请求后，调用服务层的删除方法，将该ID对应的数据从数据库中删除。

前端代码：

<template>
  <div>
    <h2>地址列表</h2>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>电话</th>
          <th>地址</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="address in addresses" :key="address.id">
          <td>{{ address.name }}</td>
          <td>{{ address.tel }}</td>
          <td>{{ address.address }}</td>
          <td>
            <button type="button" @click="deleteAddress(address.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      addresses: []
    }
  },
  methods: {
    getAddresses() {
      axios.get('/address').then(res => {
        console.log(res.data)
        this.addresses = res.data
      }).catch(err => {
        console.error(err)
      })
    },
    deleteAddress(id) {
      axios.delete(`/address/${id}`).then(res => {
        console.log(res.data)
        // 删除成功后刷新地址列表
        this.getAddresses()
      }).catch(err => {
        console.error(err)
      })
    }
  },
  mounted() {
    this.getAddresses()
  }
}
</script>

后端代码：

@RestController
@RequestMapping("/address")
public class AddressController {

  @Autowired
  private AddressService addressService;

  @GetMapping
  public List<Address> getAddressList() {
    return addressService.getAddressList();
  }

  @DeleteMapping("/{id}")
  public Result deleteAddress(@PathVariable("id") Integer id) {
    addressService.deleteAddress(id);
    return new Result("删除成功");
  }
}

@Service
public class AddressServiceImpl implements AddressService {

  @Autowired
  private AddressMapper addressMapper;

  @Override
  public List<Address> getAddressList() {
    return addressMapper.selectList(null);
  }

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

@Mapper
public interface AddressMapper extends BaseMapper<Address> {

}

以上就是在Spring MVC中通过前端操作数据库的一个简单案例。需要注意的是，这里的代码只是示例代码，并没有考虑一些实际开发中需要考虑的问题，如数据校验、异常处理、分页查询等。