刚刚开始实习，划水两天后分到的第一个工作，算是一个小demo吧！
磕磕绊绊实现后记录一下。。。
查问条件为：顾客姓名、商品名称、订单创立时间段。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>测试</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <!-- 引入款式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <style type="text/css"> body { margin: 0; padding: 0; } #app { width: 1200px; margin: 0 auto; padding-top: 20px; text-align: center; } .table { font-size: 10px; margin: 0 auto; margin-top: 20px; } </style></head><body><div id="app"> <input type="custName" v-model="custName" placeholder="请输出顾客姓名"/> <input type="goodsName" v-model="goodsName" placeholder="请输出商品名称"/> <input type="startDate" v-model="startDate" placeholder="起始工夫"/> <input type="endDate" v-model="endDate" placeholder="最初工夫"/> <el-button type="primary" round size="mini" v-on:click="queryOrder">查问</el-button> <el-button type="primary" round size="mini" v-on:click="clearData">清空</el-button> <br> <table border="1" class="table"> <tr> <td>订单号</td> <td>下单工夫</td> <td>订单状态</td> <td>源零碎号</td> <td>商品名称</td> <td>商品订单号</td> <td>商品号</td> <td>品种</td> <td>地址</td> <td>顾客姓名</td> <td>电话</td> <tr/> <tr v-for="item in dataList"> <td v-text="item.orderId"></td> <td v-text="item.createDate"></td> <td v-text="item.orderStatus"></td> <td v-text="item.sourceSystemId"></td> <td v-text="item.goodsName"></td> <td v-text="item.goodsOrderId"></td> <td v-text="item.goodsId"></td> <td v-text="item.busiType"></td> <td v-text="item.address"></td> <td v-text="item.custName"></td> <td v-text="item.phone"></td> <tr/> </table></div><script> var app = new Vue({ el: '#app', data: { custName: '', goodsName: '', startDate: '', endDate: '', dataList: [], }, methods: { queryOrder: function () { var self = this; axios.post('http://localhost:8080/demo/queryDemoList', { custName: this.custName, goodsName: this.goodsName, startDate: this.startDate, endDate: this.endDate }).then(function (response) { console.info('响应数据:' + JSON.stringify(response)); var item; self.dataList = response.data.data; }); }, clearData: function () { var self = this; this.custName = '', this.goodsName = '', this.startDate = '', this.endDate = ''; axios.post('http://localhost:8080/demo/queryDemoList', { custName: this.custName, goodsName: this.goodsName, startDate: this.startDate, endDate: this.endDate }).then(function (response) { self.dataList = response.data.data; }); } }, created: function () { var self = this; axios.post('http://localhost:8080/demo/queryDemoList', { custName: this.custName, goodsName: this.goodsName, startDate: this.startDate, endDate: this.endDate }).then(function (response) { self.dataList = response.data.data; }); } });</script></body></html>