Spring MVC JSON响应与Vue事件绑定实践
Vue开发环境配置问题
在使用IDEA开发Vue项目时，可能会遇到标签智能提示不完整的情况。部分开发者环境中仅能识别基础指令如v-bind，而缺少完整的标签库支持。建议检查IDE的Vue插件安装状态及版本兼容性。
Vue项目进程管理
通过命令行启动的Vue开发服务器，终止服务的标准操作为组合键Ctrl+C。执行后终端会显示终止确认信息，释放占用的端口资源。
IDEA自定义HTML标签处理
当IDE提示"Add element to custom HTML tags"时，表示编辑器无法识别当前标签。若误操作添加了错误标签，可通过以下路径移除：
Settings → Editor → Inspections → HTML → Unknown HTML tag，在Custom HTML tags列表中删除对应条目。
Spring MVC返回复杂数据类型
Controller方法返回实体类、对象或集合时，需借助Jackson库实现Java对象到JSON的自动转换。
依赖配置
在pom.xml中添加Jackson数据绑定依赖：
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.12.4</version>
</dependency>启用消息转换
Spring MVC提供了简化的配置方式，无需手动声明RequestMappingHandlerAdapter，仅需开启注解驱动：
<mvc:annotation-driven/>该配置会自动检测classpath中的Jackson依赖并注册对应的HTTP消息转换器。
Controller实现示例
@RestController
@RequestMapping("/api")
public class UserController {
@GetMapping("/users")
public List<User> fetchUsers() {
List<User> result = new ArrayList<>();
for (int idx = 1; idx <= 3; idx++) {
User item = new User();
item.setId(idx);
item.setName("张三");
item.setAge(18);
result.add(item);
}
return result;
}
}@ResponseBody注解深度解析
该注解作用于Controller方法，指示Spring将返回值直接写入HTTP响应体，跳过视图解析流程。其核心功能包括：
- 自动序列化Java对象为JSON/XML格式
- 替代传统
HttpServletResponse手动输出流操作 - 支持Ajax异步请求的数据交互场景
对比示例：传统方式 vs 注解方式
// 传统方式：手动处理响应流
@RequestMapping("/legacy")
public void legacyResponse(HttpServletResponse resp) throws IOException {
Account acc = new Account();
acc.setEmail("123@qq.com");
acc.setId(1001);
acc.setPassword("******");
acc.setUsername("tom");
resp.getWriter().write(JSON.toJSONString(acc));
}
// 现代方式：自动转换
@ResponseBody
@RequestMapping("/modern")
public Account modernResponse() {
Account acc = new Account();
acc.setEmail("123@qq.com");
acc.setId(1001);
acc.setPassword("******");
acc.setUsername("tom");
return acc;
}实际应用场景
@PostMapping("/authenticate")
@ResponseBody
public Map<String, Object> authenticate(Credentials cred, String captcha) {
Map<String, Object> feedback = new HashMap<>();
if (cred == null) {
feedback.put("status", "error");
feedback.put("info", "请填写用户信息");
return feedback;
}
if (captcha == null || captcha.isEmpty()) {
feedback.put("status", "error");
feedback.put("info", "请填写验证码");
return feedback;
}
feedback.put("status", "success");
feedback.put("info", "登录成功");
return feedback;
}Vue事件绑定的简洁写法
当事件处理逻辑仅为单行表达式时，可直接内联书写，无需额外定义方法：
<button @click="counter++">增加计数</button>
<input @input="query = $event.target.value">集合数据的JSON序列化形态
使用@ResponseBody返回List集合时，Jackson会生成JSON数组结构，每个元素对应集合中的对象实例。
服务端实现
@Controller
public class FurnitureController {
@Autowired
private FurnService furnService;
@GetMapping("/furnitures")
@ResponseBody
public ResponseWrapper listAll() {
List<Furniture> items = furnService.queryAll();
return ResponseWrapper.ok().attach("items", items);
}
}
@Service
public class FurnServiceImpl implements FurnService {
@Override
public List<Furniture> queryAll() {
// 传入null查询全部记录
return furnMapper.selectByExample(null);
}
}输出JSON结构
{
"code": 200,
"message": "success",
"data": {
"items": [
{
"id": 1,
"name": "北欧风书桌",
"brand": "宜家",
"price": 899.00,
"sold": 256,
"inventory": 45,
"image": "assets/products/desk-01.jpg"
},
{
"id": 2,
"name": "人体工学椅",
"brand": "赫曼米勒",
"price": 3680.00,
"sold": 89,
"inventory": 12,
"image": "assets/products/chair-02.jpg"
}
]
}
}