JavaEE-SSM-订单管理-前端实现-编程知识

JavaEE-SSM-订单管理-前端实现

前端：订单管理

3.1 回顾

axios.get("路径")
.then( response => {})
.catch( error => {})

//async 和 await
async function() {let response = await axios.get("路径")
}

3.2 环境搭建

3.2.1 创建项目

在这里插入图片描述
3.2.2 端口号 80

3.2.3 axios使用

下载

配置
分析

实现

在这里插入图片描述

使用

//在其他组件中
this.$http 获得axios实例，就可以发送Ajax了axios.get()
this.$http.get()

3.2.4 启动和访问

在这里插入图片描述

3.3 查询所有订单

3.3.1 配置路由

入口页面 App.vue，修改，简单显示访问路径和显示位置

在这里插入图片描述

<template><div><!-- 导航 --><router-link to="/orderList">订单列表</router-link><!-- 显示视图(位置) --><router-view></router-view></div>
</template><script>
export default {}
</script><style></style>

配置路由 router/index.js

在这里插入图片描述

const routes = [{path: '/orderList',name: '订单列表',component: () => import('../views/OrderList.vue')}
]

创建OrderList.vue组件

在这里插入图片描述

<!--模版代码-->
<template><div></div>
</template><script>
export default {}
</script><style></style>

3.3.2 功能

<template><div><table border="1"><tr><td>编号</td><td>价格</td><td>所属用户名</td><td>操作</td></tr><tr v-for="(order,index) in orderList" :key="index"><td>{{order.oid}}</td><td>{{order.price}}</td><td>{{order.user.username}}</td><td>修改删除</td></tr></table></div>
</template><script>
export default {data() {return {orderList: []}},methods: {async selectAllOrder() {// let response = await this.$http.get("/order")// this.orderList = response.datalet {data} = await this.$http.get("/order")this.orderList = data}},mounted() {     //页面加载成功//查询所有订单this.selectAllOrder()},
}
</script><style></style>