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

3.5 功能2：添加

• 从列表页面切换到添加页面
  
  编写对应添加页面的路由

*

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

• 编写添加功能
  

编号
价格
所属用户
{{order}}export default {data() {return {order: {//用于表单元素数据绑定对象}}},methods: {async addOrder() {// 发送ajaxlet {data} = await this.$http.post('/order', this.order )// 根据结果提示//console.info(data)alert(data)//跳转到列表页面this.$router.push('/orderList')}},}

3.6 功能3：修改

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

修改

编写路由

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

创建路由对应的vue页面

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

  编号
  <!--  -->{{order.oid}}
  价格
  所属用户
  {{order}}export default {data() {return {oid: '',//1.1 订单idorder: {//2.1 用于表单元素数据绑定对象}}},methods: {async selectOrderById() {// 发送ajaxlet { data } = await this.$http.get(`/order/${this.oid}`)// 将查询结果存放this.order = data},async updateOrder() {//发送ajaxlet { 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()},}

3.7 功能4：删除

• 点击进行删除
  

删除

• 删除操作

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

• 列表页面的完整代码

  编号
  价格
  所属用户名
  操作
  {{order.oid}}
  {{order.price}}
  {{order.user !=null " />修改 | 删除
  添加订单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},async deleteOrderById(oid) {// 需确认是否删除if(confirm("您确认要删除么？")) {// ajax删除let { data } = await this.$http.delete(`/order/${oid}`)// 提示alert(data)// 刷新结果：重新查询this.selectAllOrder()}}},mounted() { //页面加载成功//查询所有订单this.selectAllOrder()},}