spring+vue按照数据库中的创建时间统计缴费总数

您可以通过Spring Boot和Vue.js来按照数据库中的创建时间统计缴费总数，具体步骤如下：

1. 创建一个Spring Boot项目，并添加必要的依赖，如MySQL和Spring Data JPA依赖。

2. 定义一个实体类 `Payment` ，其中包含创建时间字段 `createdAt` 。

3. 创建一个Spring Data JPA的Repository，用于访问数据库。

   public interface PaymentRepository extends JpaRepository<Payment, Long> {
       @Query("SELECT DATE(p.createdAt) as date, COUNT(p.id) as total FROM Payment p GROUP BY DATE(p.createdAt)")
       List<Map<String, Object>> countPaymentsByCreatedAt();
   }

这个Repository定义了一个名为 `countPaymentsByCreatedAt()` 的方法，使用了JPQL语句来按照创建时间统计缴费总数，并返回一个包含日期和缴费总数的Map列表。

4. 创建一个Spring MVC的Controller，用于处理请求并返回数据给前端页面。

   @RestController
   public class PaymentController {
       @Autowired
       private PaymentRepository paymentRepository;

       @GetMapping("/payments")
       public List<Map<String, Object>> countPaymentsByCreatedAt() {
           return paymentRepository.countPaymentsByCreatedAt();
       }
   }

这个Controller定义了一个名为 `countPaymentsByCreatedAt()` 的GET请求处理方法，该方法调用了前面定义的Repository的方法，并将结果返回给前端页面。

5. 创建一个Vue.js的组件，用于显示缴费总数统计结果。

   <template>
     <div>
       <h2>按日期统计缴费总数</h2>
       <table>
         <thead>
           <tr>
             <th>日期</th>
             <th>缴费总数</th>
           </tr>
         </thead>
         <tbody>
           <tr v-for="payment in payments" :key="payment.date">
             <td>{{ payment.date }}</td>
             <td>{{ payment.total }}</td>
           </tr>
         </tbody>
       </table>
     </div>
   </template>

   <script>
   export default {
     data() {
       return {
         payments: []
       };
     },
     mounted() {
       this.loadPayments();
     },
     methods: {
       loadPayments() {
         axios.get("/payments").then(response => {
           this.payments = response.data;
         });
       }
     }
   };
   </script>

这个Vue.js组件包含一个表格，用于显示按日期统计的缴费总数。该组件在 `mounted()` 钩子函数中调用了后端的API接口 `/payments` ，并将结果保存在 `payments` 数据属性中，然后在模板中使用 `v-for` 指令来循环遍历 `payments` 数组，将日期和缴费总数显示在表格中。

6. 在前端页面中使用这个Vue.js组件，用于显示缴费总数统计结果。

   <div id="app">
     <payment-statistics></payment-statistics>
   </div>
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
   <script>
   Vue.component("payment-statistics", require("./components/PaymentStatistics.vue").default);

   new Vue({
     el: "#app"
   });
   </script>

这个前端页面使用了Vue.js和Axios库，将 `PaymentStatistics` 组件注册为全局组件，并将其渲染到 `#app` 元素中。