JavaEE-SSM-订单管理-前端增删改功能实现-Toy模板网

这篇具有很好参考价值的文章主要介绍了JavaEE-SSM-订单管理-前端增删改功能实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

3.5 功能2：添加

从列表页面切换到添加页面

编写对应添加页面的路由

JavaEE-SSM-订单管理-前端增删改功能实现,java-ee,java,前端
*

  {
    path: '/orderAdd',
    name: '添加订单',
    component: () => import('../views/OrderAdd.vue')
  }

编写添加功能

<template>
  <div>
    <table border="1">
      <tr>
        <td>编号</td>
        <td>
          <!-- 使用 v-model 进行表单元素的双向绑定 -->
          <input type="text" v-model="order.oid">
        </td>
      </tr>
      <tr>
        <td>价格</td>
        <td>
          <input type="text" v-model="order.price">
        </td>
      </tr>
      <tr>
        <td>所属用户</td>
        <td>
          <input type="text" v-model="order.userId">
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <!-- @click 点击事件 -->
          <input type="submit" value="添加" @click="addOrder">
        </td>
      </tr>
    </table>
    {{order}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      order: {      //用于表单元素数据绑定对象

      }
    }
  },
  methods: {
    async addOrder() {
      // 发送ajax
      let {data} = await this.$http.post('/order', this.order )
      // 根据结果提示
      //console.info(data)
      alert(data)
      //跳转到列表页面
      this.$router.push('/orderList')
    }
  },
}
</script>

<style>

</style>

3.6 功能3：修改

列表页面跳转到更新页面，以参数的方式传递id

<router-link :to="'/orderUpdate?oid='+order.oid">修改</router-link>

编写路由
JavaEE-SSM-订单管理-前端增删改功能实现,java-ee,java,前端

xxxxxxxxxx   {    path: '/orderUpdate',    name: '修改订单',    component: () => import('../views/OrderUpdate.vue')  }

创建路由对应的vue页面

JavaEE-SSM-订单管理-前端增删改功能实现,java-ee,java,前端

编写修改功能：先通过id查询详情，并回显到表单，修改内容后，提交表单

<template>
  <div>
    <!-- 2.2 表单数据绑定 -->
    <table border="1">
      <tr>
        <td>编号</td>
        <td>
          <!-- 使用 v-model 进行表单元素的双向绑定 -->
          <!-- <input type="text" v-model="order.oid"> -->
          {{order.oid}}
        </td>
      </tr>
      <tr>
        <td>价格</td>
        <td>
          <input type="text" v-model="order.price">
        </td>
      </tr>
      <tr>
        <td>所属用户</td>
        <td>
          <input type="text" v-model="order.userId">
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <!-- 3 点击，并进行更新 -->
          <input type="submit" value="修改" @click="updateOrder">
        </td>
      </tr>
    </table>
    {{order}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      oid: '',      //1.1 订单id
      order: {      //2.1 用于表单元素数据绑定对象

      }
    }
  },
  methods: {
    async selectOrderById() {
      // 发送ajax
      let { data } = await this.$http.get(`/order/${this.oid}`)
      // 将查询结果存放
      this.order = data
    },
    async updateOrder() {
      //发送ajax
      let { data } = await this.$http.put('/order', this.order)
      //提示
      alert(data)
      //跳转
      this.$router.push('/orderList')
    }
  },
  mounted() {       //页面加载成功
    // 1.2 获得查询的id
    // console.info(this.$route)
    this.oid = this.$route.query.oid
    // 1.3 通过id查询
    this.selectOrderById()
  },
}
</script>

<style>

</style>

3.7 功能4：删除

点击进行删除

<a href="" @click.prevent="deleteOrderById(order.oid)">删除</a>

删除操作

        async deleteOrderById(oid) {
            // 需确认是否删除
            if(confirm("您确认要删除么？")) {
                // ajax删除
                let { data } = await this.$http.delete(`/order/${oid}`)
                // 提示
                alert(data)
                // 刷新结果：重新查询
                this.selectAllOrder()
            }
        }

列表页面的完整代码文章来源地址https://www.toymoban.com/news/detail-821766.html

<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 !=null ? order.user.username : '无所属用户'}}</td>
              <td>
                  <router-link :to="'/orderUpdate?oid='+order.oid">修改</router-link> | 
                  <a href="" @click.prevent="deleteOrderById(order.oid)">删除</a>
                  
              </td>
          </tr>
      </table>
      <!-- 添加 -->
      <router-link to="/orderAdd">添加订单</router-link>
  </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
        },
        async deleteOrderById(oid) {
            // 需确认是否删除
            if(confirm("您确认要删除么？")) {
                // ajax删除
                let { data } = await this.$http.delete(`/order/${oid}`)
                // 提示
                alert(data)
                // 刷新结果：重新查询
                this.selectAllOrder()
            }
        }
    },
    mounted() {     //页面加载成功
        //查询所有订单
        this.selectAllOrder()
    },
}
</script>

<style>

</style>

到了这里，关于JavaEE-SSM-订单管理-前端增删改功能实现的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！