SSM简单的增删改查后端与前端怎么交互

一、SSM框架简介

SSM框架是一种流行的Java EE企业级应用技术栈，由Spring、Spring MVC和MyBatis三个开源框架组成。整合后，SSM框架提供了一套轻量级的、高效的构建Web应用的解决方案。其中，Spring负责整个应用的依赖注入和事务管理，Spring MVC用于处理web层的请求和响应，而MyBatis则作为数据持久层框架负责数据的持久化操作。

在进行增删改查的后端开发时，SSM框架允许我们快速搭建业务逻辑层和数据访问层，同时利用Spring MVC的控制器（Controller）完成前后端的数据交互和视图渲染。

以SSM框架为基础进行增删改查的后端和前端交互，通常遵循以下流程：

前端通过HTTP请求与后端交互。
后端的Controller接收前端请求并处理。
Service层封装业务逻辑。
Mapper层负责数据库操作。
Service层返回操作结果至Controller。
Controller将反馈的数据结果通过Model传递给前端或者直接返回数据。

二、前后端数据交互的方式

在SSM框架中，前端与后端进行数据交互主要有两种方式：返回视图和返回数据（通常是JSON格式）。

返回视图通常用于传统的网页应用，Controller返回一个视图名称，通过Spring MVC的ViewResolver解析后与数据绑定，生成HTML页面响应给客户端。
返回数据则是现代Web应用更常见的做法，尤其是在前后端分离的架构中。Controller处理完业务逻辑后，通常会将数据模型转换为JSON格式返回给前端。前端通过Ajax、Fetch或Axios等技术发起请求并处理响应。

数据交互的代码示例：

// 返回视图
@RequestMapping(value = "/getUserPage", method = RequestMethod.GET)
public String getUserPage(Model model) {
    List<User> users = userService.findAllUsers();
    model.addAttribute("users", users);
    return "userPage"; // 返回视图名，结合数据渲染成HTML
}
// 返回JSON数据
@RequestMapping(value = "/getUsers", method = RequestMethod.GET)
@ResponseBody //标记为返回内容是JSON
public List<User> getUsers() {
    return userService.findAllUsers(); //返回用户数据
}

三、后端中的增删改查操作

后端处理增删改查操作通常涉及控制器（Controller）、服务层（Service）和数据访问层（Mapper），展示如何在SSM框架中实现。

增加操作

在Controller中定义一个处理创建用户请求的方法，并通过调用Service层的方法实现业务逻辑：

@RequestMapping(value = "/createUser", method = RequestMethod.POST)
@ResponseBody
public String createUser(@RequestBody User user) {
    int result = userService.createUser(user);
    return result > 0 ? "Success" : "FAIl";
}

Service层封装创建用户的业务逻辑：

@Service
public class UserServiceImpl implements UserService {
    @Autowired
    private UserMapper userMapper;
    public int createUser(User user) {
        return userMapper.insertUser(user);
    }
}

Mapper层提供数据操作接口，使用MyBatis的映射文件来实现具体的SQL操作：

public interface UserMapper {
    int insertUser(User user);
}

删除操作

类似地，删除操作也是在Controller中接收前端的请求，通过Service调用Mapper进行数据库操作。

@RequestMapping(value = "/deleteUser", method = RequestMethod.DELETE)
@ResponseBody
public String deleteUser(@RequestParam("id") int id) {
    int result = userService.deleteUser(id);
    return result > 0 ? "Success" : "Fail";
}

修改操作

修改操作遵循类似的模式，接收前端传递的修改数据，调用Service层，并在Mapper层完成数据的更新。

查询操作

查询操作通常会有两种：查询单个对象和查询对象列表。Controller层的方法会接收查询参数，通过Service层的业务逻辑返回查询结果。

四、前端调用后端接口的实现

前端调用后端接口涉及到异步JavaScript以及AJAX技术，前端代码通常会使用jQuery、Fetch API或者Axios来发起HTTP请求。下面给出基于Axios的示例：

// 增加用户
axios.post('后端接口地址/createUser', userObject)
    .then(function (response) {
        console.log(response.data);
    })
    .catch(function (error) {
        console.error(error);
    });
// 删除用户
axios.delete('后端接口地址/deleteUser', { params: { id: userId } })
    .then(function (response) {
        console.log(response.data);
    })
    .catch(function (error) {
        console.error(error);
    });

五、处理前后端数据交互中的安全性及异常

在进行前后端数据交互时，需要特别注意安全性和异常处理。后端应该实现跨站点请求伪造（CSRF）防护，针对每个请求进行身份验证和授权。异常处理方面，应该在后端统一处理异常，并将清晰的错误信息返回给前端。

后端安全性的保障包括认证授权机制的实现，比如使用Spring Security来加强安全性。异常处理通常在Controller中使用@ExceptionHandler注解来实现。

认证与授权

对于涉及用户信息的增删改查操作，后端必须进行严格的认证与授权以确保操作安全：

@RequestMapping(value = "/secure/createUser", method = RequestMethod.POST)
@ResponseBody
@PreAuthorize("hasRole('ADMIN')") //需验证用户是否有ADMIN权限
public String secureCreateUser(@RequestBody User user) {
    //业务逻辑...
}

统一异常处理

统一异常处理可以优化用户体验，对于预料之外的错误给出合理的反馈：

@ControllerAdvice
public class GlobalExceptionHandler {
    @ResponseBody
    @ExceptionHandler(Exception.class)
    public Map<String, Object> handleException(Exception e) {
        Map<String, Object> errorInfo = new HashMap<>();
        errorInfo.put("status", "error");
        errorInfo.put("message", e.getMessage());
        return errorInfo;
    }
}

总结

在SSM框架下，通过定义清晰的Controller接口、编写Service层业务逻辑以及Design模式式的Mapper层数据交互，后端可以实现增删改查的功能，并以视图或者JSON数据格式与前端进行高效、安全的数据交互。遵守MVC模式和RESTful API设计规范，保障系统的整洁性和可维护性，是现代Web开发中不可或缺的实践。