116.(前端)商品管理删除实现——前端使用messagebox弹窗确认发送请求

1.概述

本次，我们需要实现点击删除按钮，删除当列数据

2.流程

首先，我们将会使用element-ui官网中的¶MessageBox 弹框，当点击删除时，给出一个弹窗。我们只需要从官网中复制代码，对其中的确认删除发送一个请求删除数据即可

3.代码展示

3.1前端代码

<template>
    <div>
        
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页el-breadcrumb-item>
            <el-breadcrumb-item>商品管理el-breadcrumb-item>
            <el-breadcrumb-item>商品分类el-breadcrumb-item>
        el-breadcrumb>
        
        <el-card>
            
            <el-row>
                
                <el-col :span="8">
                    <el-input v-model="qname" placeholder="请求搜索名称" clearable @clear="getGoodsList">
                        
                        <el-button slot="append" icon="el-icon-search" @click="getGoodsList">el-button>
                    el-input>
                el-col>
                
                <el-col :span="4">
                        <el-button type="primary" icon="el-icon-plus">添加商品el-button>
                el-col>
            el-row>
            
            
            <el-table :data="goodsList" border>
                <el-table-column type="index">el-table-column>
                <el-table-column label="商品名称" prop="name">el-table-column>
                <el-table-column label="商品价格(元)" prop="price" width="120px">el-table-column>
                <el-table-column label="商品库存" prop="number" width="80px">el-table-column>
                <el-table-column label="操作" width="200px">
                    
                    <template slot-scope="scope">
                        <el-button size="mini" type="success" icon="el-icon-edit">编辑el-button>
                        <el-button size="mini" type="danger" icon="el-icon-delete" @click="removeGoods(scope.row.id)">删除el-button>
                    template>
                el-table-column>
            el-table>


        el-card>
    div>
template>

<script>
export default {
    data() {
        return {
            goodsList: [],
            qname: ''
        }
    },
    created() {
        this.getGoodsList()
    },
    methods: {
        async getGoodsList() {
            const { data: resp } = await this.$axios.get('/api/goods_list',{
                params: { name: this.qname }
            })
            if ( resp.status !== 200 ) return this.$msg.error(resp.msg)
            this.$msg.success(resp.msg)
            this.goodsList = resp.data
        },
        // 删除函数与确认删除弹窗
        async removeGoods(gid) {
            this.$confirm('此操作将永久删除该商品数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                // 确定：发送请求
            }).then(async() => {
                const { data: resp } = await this.$axios.delete('/api/goods',{
                    data: {id: gid}
                })
                // 对于message弹窗需要使用$msg去发送
                if (resp.status !== 200) return this.$msg.error(resp.msg)
                this.$msg.success(resp.msg)
                // 重新获取数据
                this.getGoodsList()
            }).catch(() => {
                this.$msg({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }
    }
}
script>

<style lang="less" scoped>
    .el-col{
        margin: 5px;
    }
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98

// src/plugin/elements
import Vue from 'vue'
import { Button, FormItem, Form, Input, Message, Header, Container, Aside, Main } from 'element-ui'
import { Menu, Submenu, MenuItemGroup, MenuItem,Breadcrumb, BreadcrumbItem, Card,
     Row, Col, Table, TableColumn, Pagination, Dialog, Tag, Select, Option,Alert,
     MessageBox, Tree, Cascader, Tabs, TabPane} from 'element-ui'
import TreeTable from 'vue-table-with-tree-grid'
// 引用时给的名字、导入的名称
Vue.component('tree-table', TreeTable)
Vue.use(Button)
//略有删除，自行补充用上一行的方法
Vue.prototype.$msg = Message
Vue.prototype.$confirm = MessageBox.confirm
1
2
3
4
5
6
7
8
9
10
11
12
13

3.2后端代码

# flask_shop/goods/view.py
from flask import request
from flask_shop.goods import goods,goods_api
from flask_shop import models,db
from flask_restful import Resource
from flask_shop.utils.message import to_dict_msg

# 查询数据：获取商品列表
@goods.route('/goods_list')
def get_goods_list():
    try:
        name = request.args.get('name')
        if name:
            # 模糊fliter过滤
            goods = models.Goods.query.filter(models.Goods.name.like(f'%{name}%'))
        else:
            goods = models.Goods.query.all()
        goods_list = [gds.to_dict() for gds in goods]
        return to_dict_msg(200, goods_list, '获取商品列表成功！！！')
    except Exception as e:
        print(e)
        return to_dict_msg(20000)


# restful发送请求
class Goods(Resource):
    # 通过查找id删除数据
    def delete(self):
        # 前端使用时，发现还是得用json，不可以用form
        id = request.json.get('id')
        goods = models.Goods.query.get(id)
        if goods:
            db.session.delete(goods)
            db.session.commit()
            return to_dict_msg(200, msg='删除商品成功！！！')
        else:
            return to_dict_msg(10022)

goods_api.add_resource(Goods, '/goods')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39