1.安装
npm install --save mockjs
npm install --save axios
2.在src目录下新建mock文件夹，并在其mock目录下新建index.js
目录结构如下：
// 引入mock
import Mock from 'mockjs'
// 引入mock数据
import orders from './orders'
Mock.mock('/order/orders','get',orders);
export default Mock;
3.在mock目录下建相应的数据文件。如orders.js
以下数据内容自己定。
export default {
"data":[
{
"numberPlate":"浙A123131", //车牌
"paymentStatus":"已付款", //付款状态
"orderTitle":"惠动全城，只为口碑与宣传", //订单文本
"worth":"8.80", //金额
"quantity":"1", //数量
"orderTime":"2019/7/9 15:10:31", //成交时间
},
{
"numberPlate":"浙B86784",
"paymentStatus":"已付款，拼团失败",
"orderTitle":"美孚10004升套餐【两次保养】",
"worth":"0.32",
"quantity":"90",
"orderTime":"2019/7/9 15:10:31"
},
{
"numberPlate":"沪A86784",
"paymentStatus":"已退款",
"orderTitle":"美孚10004升套餐【两次保养】",
"worth":"5.80",
"quantity":"11",
"orderTime":"2019/7/9 15:10:31"
}
]
};
4.在组件页面内利用axios请求，如下：
<script>
import axios from "axios";
import SerchForm from "../components/SearchForm";
export default {
data() {
return {
orderList: [],
serchPlaceholder: "请输入车牌号或手机号查询"
};
},
components: {
SerchForm
},
methods: {
// 默认获取所有订单信息
getAllOrders() {
axios.get("/order/orders").then(res => {
this.orderList = res.data.data;
});
},
// 表单有值，点击获取符合条件的信息
getOrders(serchText) {
if (serchText) {
axios.get("/order/orders").then(res => {
// this.orderList = res.data.data;
this.orderList = [];
}).catch(err => {
console.log(err);
});
} else {
console.log("请输入车牌号或手机号！");
}
}
},
mounted() {
this.getAllOrders();
}
};
</script>
