springboot vue2流水统计

您可以使用Spring Boot作为后端框架，Vue.js 2作为前端框架，使用RESTful API进行数据交互进行流水统计。

1. 数据库设计

首先，您需要设计数据库模型。假设您要统计订单流水，您可以设计一个名为`order`的表，包含以下字段：

- `id`: 订单ID
- `amount`: 订单金额
- `created_time`: 订单创建时间

2. 后端实现

接下来，您可以使用Spring Boot实现后端逻辑。首先，您需要定义一个`Order`类来表示订单信息：

public class Order {
    private Long id;
    private Double amount;
    private Date createdTime;
    // 省略getter和setter方法
}

然后，您需要编写一个`OrderService`类来实现订单的增删改查操作：

@Service
public class OrderService {
    @Autowired
    private OrderMapper orderMapper;

    public List<Order> listOrders() {
        return orderMapper.listOrders();
    }

    public void addOrder(Order order) {
        orderMapper.addOrder(order);
    }

    public void deleteOrder(Long id) {
        orderMapper.deleteOrder(id);
    }
}

其中，`OrderMapper`是一个MyBatis的Mapper接口，用来定义数据库操作的方法：

@Mapper
public interface OrderMapper {
    List<Order> listOrders();

    void addOrder(Order order);

    void deleteOrder(Long id);
}

最后，您需要编写一个RESTful API接口，用来向前端返回订单列表：

@RestController
@RequestMapping("/api/orders")
public class OrderController {
    @Autowired
    private OrderService orderService;

    @GetMapping
    public List<Order> listOrders() {
        return orderService.listOrders();
    }

    @PostMapping
    public void addOrder(@RequestBody Order order) {
        orderService.addOrder(order);
    }

    @DeleteMapping("/{id}")
    public void deleteOrder(@PathVariable Long id) {
        orderService.deleteOrder(id);
    }
}

3. 前端实现

最后，您可以使用Vue.js 2实现前端界面。首先，您需要安装Vue.js并创建一个Vue实例：

<div id="app">
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>金额</th>
        <th>创建时间</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="order in orders" :key="order.id">
        <td>{{ order.id }}</td>
        <td>{{ order.amount }}</td>
        <td>{{ order.createdTime }}</td>
        <td><button @click="deleteOrder(order.id)">删除</button></td>
      </tr>
    </tbody>
  </table>
  <form @submit.prevent="addOrder">
    <input type="number" v-model="newOrder.amount" required>
    <button type="submit">添加订单</button>
  </form>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
new Vue({
  el: '#app',
  data: {
    orders: [],
    newOrder: {
      amount: null
    }
  },
  mounted() {
    this.listOrders();
  },
  methods: {
    listOrders() {
      fetch('/api/orders')
        .then(res => res.json())
        .then(data => this.orders = data);
    },
    addOrder() {
      fetch('/api/orders', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(this.newOrder)
      })
        .then(() => {
          this.listOrders();
          this.newOrder.amount = null;
        });
    },
    deleteOrder(id) {
      fetch(`/api/orders/${id}`, {
        method: 'DELETE'
      })
        .then(() => this.listOrders());
    }
  }
});
</script>

这样，您就可以使用Spring Boot和Vue.js 2来实现流水统计了。用户可以在前端界面中添加、删除订单，后端会将订单信息存储到数据库中，并且向前端提供RESTful API接口来查询订单列表。