springboot vue测试平台前端项目查询新增功能

下面是“springboot vue测试平台前端项目查询新增功能”的完整攻略：

1. 确定功能需求

在开始开发之前，我们需要先明确这个功能的具体需求，具体包括接口需要传递的参数、响应数据格式等。例如，我们需要查询某个商品的销售数据，请求需要传递该商品的ID，响应数据包括该商品的销售数量、销售金额等信息。

2. 新增前端页面及接口

首先，我们需要在前端新增一个页面用于展示查询结果，在该页面中需要有一个输入框用于输入查询条件，以及一个按钮用于触发查询请求。我们还需要在后端新增一个接口用于处理查询请求，在接口中需要对传递的参数进行处理，并将查询结果格式化后返回给前端。

示例代码：

前端页面：

<template>
  <div>
    <el-input v-model="id" placeholder="请输入商品ID"></el-input>
    <el-button @click="query">查询</el-button>
    <div v-if="result">
      <p>销售数量：{{result.count}}</p>
      <p>销售金额：{{result.amount}}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: '',
      result: null
    };
  },
  methods: {
    async query() {
      const {data} = await axios.post('/api/query', {id: this.id});
      this.result = data;
    }
  }
};
</script>

后端接口：

@PostMapping("/query")
public Result query(@RequestBody QueryRequest request) {
  // 根据商品ID查询销售数据
  ...
  return Result.success(result);
}

3. 编写单元测试用例

接下来，我们需要为该功能编写单元测试用例，用于确保新增的页面及接口能够正常工作。我们需要模拟用户输入查询条件、触发查询请求，并验证查询结果是否符合预期。

示例代码：

@Test
public void testQuery() throws Exception {
  // 模拟用户输入商品ID为123，触发查询请求
  MockMvc mockMvc = MockMvcBuilders.webAppContextSetup(webApplicationContext).build();
  mockMvc.perform(MockMvcRequestBuilders.post("/api/query")
          .content("{\"id\":\"123\"}")
          .contentType(MediaType.APPLICATION_JSON))
          .andExpect(MockMvcResultMatchers.status().isOk())
          .andExpect(MockMvcResultMatchers.jsonPath("$.count").value(100))
          .andExpect(MockMvcResultMatchers.jsonPath("$.amount").value(1000));
}