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.data
            let {data} = await this.$http.get("/order")
            this.orderList = data
        }
    },
    mounted() {     //页面加载成功
        //查询所有订单
        this.selectAllOrder()
    },
}
</script>

<style>

</style>

3.4 跨域处理

• 问题：
  
  解决方法 后端拷贝一个配置类