首页 > 其他分享 >基于sprigboot、vue.js、elementui、axios.js、xlsx.js的小型购物管理系统

基于sprigboot、vue.js、elementui、axios.js、xlsx.js的小型购物管理系统

时间：2024-09-07 16:52:15浏览次数：7  
标签：xlsx axios top js padding item position absolute left

该管理系统实现了增加、编辑、删除、导出、批量删除。

以下是代码实现：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="./css/element.css" />
        <link rel="stylesheet" href="./css/index.css" />
    </head>
    <body>

        <!-- 大div包含 -->
        <div class="margindiv">
            <!-- 大div包含 -->


            <h1>购物管理系统</h1>

            <div id="app">

                <div class="totaldiv">共：<b v-text="total"></b>&nbsp;条数据</div>

                <!-- 新增按钮 -->
                <button class="addbuttonpro" @click="showaddForm()">新增</button>
                <!-- 新增按钮 -->

                <!-- 导出按钮 -->
                <button class="exprobutton" @click="exportData">导出</button>
                <!-- 导出按钮 -->

                <!-- 批量删除按钮 -->
                <button class="batchDeleteButton" @click="batchDelete">批量删除</button>
                <!-- 批量删除按钮 -->

                <!-- 表格 -->
                <table>
                    <tr>
                        <th>
                            <input class="inputgouxuan" type="checkbox" @click="toggleSelectAll" v-model="selectAllCheckbox">
                        </th>
                        <th>商品名称</th>
                        <th>商品描述</th>
                        <th>商品价格</th>
                        <th>商品数量</th>
                        <th>购买平台</th>
                        <th>购入时间</th>
                        <th>购买人</th>
                        <th>支付方式</th>
                        <th>操作</th>
                    </tr>
                    <tr v-for="(item,index) in Gargo_list" :key="item.id">
                        <td>
                            <input class="inputgouxuan" type="checkbox" v-model="selectedItems[item.id]" @change="updateSelectAll">
                        </td>
                        <td>{{item.pdname}}</td>
                        <td>
                            <p>{{item.describe}}</p><button @click="showmiaosu(item, index)">完整描述</button>
                        </td>
                        <td>{{item.price}}</td>
                        <td>{{item.count}}</td>
                        <td>{{item.terrace}}</td>
                        <td>{{item.time}}</td>
                        <td>{{item.purchaser}}</td>
                        <td>{{item.way}}</td>
                        <td>
                            <!-- <button @click="showmiaosu(item, index)">描述</button> -->
                            <button @click="showModifyForm(item, index)">编辑</button>
                            <button @click="delect(item,index)">删除</button>
                        </td>
                    </tr>
                </table>
                <!-- 表格 -->

                <!-- 编辑框 -->
                <el-drawer title="编辑" :visible.sync="drawermiaosu" :with-header="false">
                    <div class="miaosusdiv">
                        <h2
                            style="left: 50%;transform: translate(-50%); position: absolute; top: 10px; color: #545454;">
                            商品描述</h2>
                        <textarea v-model="editdescribe" readonly class="input1"></textarea>
                    </div>
                </el-drawer>
                <!-- 编辑框 -->

                <!-- 编辑框 -->
                <el-drawer title="编辑" :visible.sync="drawer" :with-header="false">
                    <div class="borderdiv">

                        <h2
                            style="left: 50%;transform: translate(-50%); position: absolute; top: 10px; color: #545454;">
                            编辑</h2>

                        <label class="label1">商品名称:</label>
                        <input type="text" class="input1" v-model="editpdname">

                        <label class="label2">商品描述:</label>
                        <textarea class="input2" v-model="editdescribe"></textarea>

                        <label class="label3">商品价格:</label>
                        <input type="text" class="input3" v-model="editprice">

                        <label class="label4">商品数量:</label>
                        <input type="text" class="input4" v-model="editcount">

                        <label class="label5">购买平台:</label>
                        <input type="text" class="input5" v-model="editterrace">

                        <label class="label6">购入时间:</label>
                        <input type="text" class="input6" v-model="edittime">

                        <label class="label7">购买人:</label>
                        <input type="text" class="input7" v-model="editpurchaser">

                        <label class="label8">支付方式:</label>
                        <input type="text" class="input8" v-model="editway">

                        <button @click="modifyData" class="windowbuttonn">确定编辑</button>
                    </div>
                </el-drawer>
                <!-- 编辑框 -->

                <!-- 增加框 -->
                <el-drawer title="编辑" :visible.sync="draweradd" :with-header="false">

                    <h2 style="left: 50%;transform: translate(-50%); position: absolute; top: 10px; color: #545454;">增加
                    </h2>

                    <label class="label1">商品名称:</label>
                    <input type="text" class="input1" v-model="addpdname">

                    <label class="label2">商品描述:</label>
                    <textarea class="input2" v-model="adddescribe"></textarea>

                    <label class="label3">商品价格:</label>
                    <input type="text" class="input3" v-model="addprice">

                    <label class="label4">商品数量:</label>
                    <input type="text" class="input4" v-model="addcount">

                    <label class="label5">购买平台:</label>
                    <input type="text" class="input5" v-model="addterrace">

                    <label class="label6">购入时间:</label>
                    <input type="text" class="input6" v-model="addtime">

                    <label class="label7">购买人:</label>
                    <input type="text" class="input7" v-model="addpurchaser">

                    <label class="label8">支付方式:</label>
                    <input type="text" class="input8" v-model="addway">

                    <button @click="addButton()" class="windowbuttonn">确定增加</button>
                </el-drawer>
                <!-- 增加框 -->
            </div>


            <!-- 大div包含 -->
        </div>
        <!-- 大div包含 -->

        <script src="./js/vue.js"></script>
        <script src="./js/element.js"></script>
        <script src="./js/axios.min.js"></script>
        <script src="js/xlsx.full.js"></script>
        <script>
            const vm = new Vue({
                el: "#app",
                data() {
                    return {
                        Gargo_list: [], //渲染数据
                        drawer: false, //编辑框默认隐藏
                        draweradd: false, //新增框默认隐藏
                        drawermiaosu: false, //描述框默认隐藏
                        total: 0, // 总条数数据显示
                        //新增
                        addpdname: '',
                        adddescribe: '',
                        addprice: '',
                        addcount: '',
                        addterrace: '',
                        addtime: '',
                        addpurchaser: '',
                        addway: '',
                        // 编辑
                        editpdname: '',
                        editdescribe: '',
                        editprice: '',
                        editcount: '',
                        editterrace: '',
                        edittime: '',
                        editpurchaser: '',
                        editway: '',
                        currentItem: null, // 新增用于保存当前要编辑的对象
                        // 批量删除相关
                        selectAllCheckbox: false,
                        selectedItems: {},
                    };
                },
                created() {
                    axios.get("http://127.0.0.1:8080/api/Gargo_list/get").then(response => {
                        // 对获取到的数据进行排序
                        this.Gargo_list = response.data.sort((a, b) => b.id - a.id);
                        // 设置总条数
                        this.total = response.data.length;
                    }).catch(err => {
                        this.$message({
                            type: 'error',
                            message: err
                        });
                    })
                },
                methods: {
                    //新增
                    showaddForm() {
                        this.draweradd = true; //弹出新增框
                    },
                    //增加按钮
                    addButton() {
                        let data = [{
                            "pdname": this.addpdname,
                            "describe": this.adddescribe,
                            "price": this.addprice,
                            "count": this.addcount,
                            "terrace": this.addterrace,
                            "time": this.addtime,
                            "purchaser": this.addpurchaser,
                            "way": this.addway,
                        }];
                        axios.post("http://127.0.0.1:8080/api/Gargo_list/add", data)
                            .then(response => {
                                this.$message({
                                    type: 'success',
                                    message: '新增成功！'
                                });
                                axios.get("http://127.0.0.1:8080/api/Gargo_list/get").then(response => {
                                    this.Gargo_list = response.data.sort((a, b) => b.id - a.id);

                                    //清空表单
                                    this.addpdname = '',
                                        this.adddescribe = '',
                                        this.addprice = '',
                                        this.addcount = '',
                                        this.addterrace = '',
                                        this.addtime = '',
                                        this.addpurchaser = '',
                                        this.addway = '',

                                        this.draweradd = false; //隐藏新增框
                                    this.total++; //条数增加更新
                                }).catch(err => {
                                    this.$message({
                                        type: 'error',
                                        message: err
                                    });
                                });
                            })
                            .catch(err => {
                                this.$message({
                                    type: 'error',
                                    message: err
                                });
                            });
                    },
                    //删除
                    delect(item, index) {
                        this.$confirm('确定删除吗？', '删除后无法撤回！', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            axios.delete(`http://127.0.0.1:8080/api/Gargo_list/${item.id}`).then(response => {
                                if (response.data === 1) {
                                    this.$message.success('删除成功！');
                                    vm.Gargo_list.splice(index, 1);
                                }
                                this.total--; //条数减少更新
                            }).catch(err => {
                                this.$message.error(err);
                            });
                        }).catch(() => {
                            // 用户取消操作
                        });
                    },
                    //点击描述显示弹窗
                    showmiaosu(item, index) {
                        this.drawermiaosu = true; //弹出描述框
                        this.editdescribe = item.describe; //把字段的内容负责到变量
                    },
                    // 点击编辑按钮弹窗并且赋值
                    showModifyForm(item, index) {
                        this.drawer = true; //弹出编辑框
                        this.editpdname = item.pdname;
                        this.editdescribe = item.describe;
                        this.editprice = item.price;
                        this.editcount = item.count;
                        this.editterrace = item.terrace;
                        this.edittime = item.time;
                        this.editpurchaser = item.purchaser;
                        this.editway = item.way;
                        this.currentItem = item;
                    },
                    // 点击确认编辑按钮
                    modifyData() {
                        let data = {
                            "id": this.currentItem.id, // 使用保存的对象获取 id
                            "pdname": this.editpdname,
                            "describe": this.editdescribe,
                            "price": this.editprice,
                            "count": this.editcount,
                            "terrace": this.editterrace,
                            "time": this.edittime,
                            "purchaser": this.editpurchaser,
                            "way": this.editway
                        };
                        axios.put("http://127.0.0.1:8080/api/Gargo_list/update", data)
                            .then(response => {
                                this.$message({
                                    type: 'uccess',
                                    message: '编辑成功！'
                                });
                                this.drawer = false; //隐藏编辑窗口
                                // 更新数据
                                let index = this.Gargo_list.findIndex(item => item.id === data.id);
                                this.Gargo_list[index] = data;
                            })
                            .catch(err => {
                                this.$message({
                                    type: 'error',
                                    message: err
                                });
                            });
                    },
                    //导出
                    exportData() {
                        //选择导出表格中的数据
                        const table = document.getElementsByTagName('table')[0];
                        const wb = XLSX.utils.table_to_book(table);
                        XLSX.writeFile(wb, '导出数据.xlsx');
                    },
                    // 全选/全不选
                    toggleSelectAll() {
                        this.selectAllCheckbox = !this.selectAllCheckbox;
                        this.Gargo_list.forEach(item => {
                            this.selectedItems[item.id] = this.selectAllCheckbox;
                        });
                    },
                    updateSelectAll() {
                        const allChecked = this.Gargo_list.every(item => this.selectedItems[item.id]);
                        this.selectAllCheckbox = allChecked;
                    },
                    // 批量删除
                    batchDelete() {
                        const idsToDelete = Object.keys(this.selectedItems).filter(id => this.selectedItems[id]);
                        if (idsToDelete.length === 0) {
                            this.$message.warning('请选择要删除的行。');
                            return;
                        }
                        this.$confirm('确定批量删除这些行吗？', '删除后无法撤回！', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            idsToDelete.forEach(id => {
                                axios.delete(`http://127.0.0.1:8080/api/Gargo_list/${id}`).then(
                                    response => {
                                        if (response.data === 1) {
                                            const index = this.Gargo_list.findIndex(item => item
                                                .id === parseInt(id));
                                            if (index !== -1) {
                                                this.Gargo_list.splice(index, 1);
                                            }
                                            this.$message({
                                                type: 'uccess',
                                                message: '删除成功！'
                                            });
                                        }
                                    }).catch(err => {
                                    this.$message.error(err);
                                });
                            });
                            this.total -= idsToDelete.length;
                            this.selectAllCheckbox = false;
                            this.selectedItems = {};
                        }).catch(() => {
                            // 用户取消操作
                        });
                    }
                }
            })
        </script>
    </body>
</html>

样式：
 

* {
    padding: 0;
    margin: 0;
}
body{
    background-color: #F5FFFA;
}

.margindiv {
    width: 126rem;
    height: 100vh;
    /* background-color: #f5f5f5; */
    margin: 0 auto;
    position: relative;
}

h1 {
    text-align: center;
    padding: 40px;
}


/* 表格 */
table {
    border-collapse: collapse;
    width: 1950px;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    font-size: 14px;
    color: #333;
}

th,
td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
    text-align: center;
    font-size: 15px;
    width: 195px;
}
td p{
    width: 109.5px;
    margin: 0 auto;
    height: 20px;
    overflow: auto;
    /* 隐藏滚动条 */
    scrollbar-width: none;  /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    /* background-color: #4CAF50; */
}

th {
    background-color: #4CAF50;
    color: white;
}

button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 15px;
    margin: 4px 2px;
    cursor: pointer;
}
button:hover{
    background-color: green;
    transition: 0.3s ease;
}
/* 表格 */

/* 条数 */
.totaldiv{
    position: absolute;
    top: 90px;
    left: 50px;
    color: #545454;
}


/* 新增按钮 */
.addbuttonpro{
    position: absolute;
    right: 40px;
    width: 130px;
    top: 70px;
}

/* 导出按钮 */
.exprobutton{
    position: absolute;
    right: 180px;
    width: 130px;
    top: 70px;
}

/* 导入 */
.importbutton{
    position: absolute;
    right: 320px;
    width: 130px;
    top: 70px;
}

/* 批量删除 */
.batchDeleteButton{
    position: absolute;
    right: 320px;
    width: 130px;
    top: 70px;
}


/* 勾选框 */
.inputgouxuan{
    width: 15px;
    height: 15px;
}


/* 侧边弹出框 */
/* elementui弹出框样式 */
.el-drawer__open .el-drawer.rtl {
    width: 600px!important;
}
.borderdiv{
    width: 100%;
    height: 100vh;
    position: relative;
}

.label1{
    position: absolute;
    left: 60px;
    top: 50px;
}
.label2{
    position: absolute;
    left: 60px;
    top: 130px;
}
.label3{
    position: absolute;
    left: 60px;
    top: 390px;
}
.label4{
    position: absolute;
    left: 60px;
    top: 470px;
}
.label5{
    position: absolute;
    left: 60px;
    top: 550px;
}
.label6{
    position: absolute;
    left: 60px;
    top: 630px;
}
.label7{
    position: absolute;
    left: 60px;
    top: 710px;
}
.label8{
    position: absolute;
    left: 60px;
    top: 790px;
}

.input1{
    position: absolute;
    left: 60px;
    top: 75px;
    padding: 5px;
    padding-left: 18px;
    padding-right: 8px;
    width: 350px;
    outline: none;
    border: 1px solid #ddd;
}
.input2{
    position: absolute;
    left: 60px;
    top: 155px;
    padding: 5px;
    padding-left: 18px;
    padding-right: 8px;
    width: 350px;
    height: 200px;
    outline: none;
    line-height: 15px;
    font-size: 15px;
    font-weight: bold;
    outline: none;
    border: 1px solid #ddd;
}
.input3{
    position: absolute;
    left: 60px;
    top: 415px;
    padding: 5px;
    padding-left: 18px;
    padding-right: 8px;
    width: 350px;
    outline: none;
    border: 1px solid #ddd;
}
.input4{
    position: absolute;
    left: 60px;
    top: 495px;
    padding: 5px;
    padding-left: 18px;
    padding-right: 8px;
    width: 350px;
    outline: none;
    border: 1px solid #ddd;
}
.input5{
    position: absolute;
    left: 60px;
    top: 575px;
    padding: 5px;
    padding-left: 18px;
    padding-right: 8px;
    width: 350px;
    outline: none;
    border: 1px solid #ddd;
}
.input6{
    position: absolute;
    left: 60px;
    top: 655px;
    padding: 5px;
    padding-left: 18px;
    padding-right: 8px;
    width: 350px;
    outline: none;
    border: 1px solid #ddd;
}
.input7{
    position: absolute;
    left: 60px;
    top: 735px;
    padding: 5px;
    padding-left: 18px;
    padding-right: 8px;
    width: 350px;
    outline: none;
    border: 1px solid #ddd;
}
.input8{
    position: absolute;
    left: 60px;
    top: 815px;
    padding: 5px;
    padding-left: 18px;
    padding-right: 8px;
    width: 350px;
    outline: none;
    border: 1px solid #ddd;
}


.windowbuttonn{
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 15px;
    margin: 4px 2px;
    cursor: pointer;
    position: absolute;
    top: 870px;
    left: 60px;
    width: 300px;
}

/* 商品描述 */
.miaosusdiv{
    position: relative;
    width: 100%;
    height: 100vh;
}
.miaosusdiv .input1{
    padding: 20px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 80%;
    height: 70%;
    font-size: 20px;
    outline: none;
    border: 1px solid #ddd;
}
 

标签：xlsx,axios,top,js,padding,item,position,absolute,left
From： https://blog.csdn.net/c_kk_kkk/article/details/141998527

相关文章

  • 京东h5st参数js逆向
    扣代码的环节挺简单的就不讲了直接到重点发现许多包都会有一个h5st的加密参数那么我们就要看这个参数是怎么生成的我们可以根据请求堆栈找到h5st的入口当然还有一种更简单的方法就是直接全局搜索h5st这里采用后者这里sign函数就是h5st生成的地方但是这是个promi......
  • 安装nvm管理nodejs包，保姆级教程!
    安装nvm管理nodejs包，保姆级教程!一.本期所需网址nvm：github下载nvm：手册文档下载nvm命令查看：查看命令二.下载nvm1.github下载点击链接下载：https://github.com/coreybutler/nvm-windows/releases选择.exe文件下载安装开始安装双击打开安装程序同意协议下一步......
  • labelme标注的大图用sahi切成小图和小json
    1.去除labelme标注中只有1或2个点的轮廓指有些标注错误的只有1个点或2个点的轮廓不能转化为polygon点击查看代码importcv2importnumpyasnpimportjsonimportosdefremove_specific_labels(json_file):#读取JSON文件withopen(json_file,'rb+')asf:......
  • JS流程控制
    流程控制在任何一门程序设计语言中，都需要支持满足程序结构化所需要的三种流程控制:顺序控制分支控制（条件控制）循环控制顺序控制：在程序流程控制中，最基本的就是顺序控制。程序会按照自上而下的顺序执行。if语句【重要】分类：单分支，双分支，多分支，分支嵌套（）只能是变量或值......
  • json字符串转义格式化后再转换处理demo StringEscapeUtils.unescapeJava
    json字符串转义格式化后再转换处理demoStringEscapeUtils.unescapeJava报错关键字：illegalidentifierExpectedBEGIN_OBJECTbutExpectednameatpackagecom.example.core.mydemo;importcom.alibaba.fastjson.JSON;importcom.fasterxml.jackson.core.JsonProcessingE......
  • 微服务实战——品牌管理（JSR303，SKU&SPU）
    品牌管理1.JSR3031、给Bean添加校验注解:javax.validation.constraints，并定义自己的message提示2、开启校验功能@Valid  效果：校验错误以后会有默认的响应；3、给校验的参数bean后紧跟一个BindingResult，就可以获取到校验的结果4、分组校验（多场景的复杂校验）    1......
  • Node.js版本管理工具之NVM
    目录一、NVM介绍二、NVM的下载安装1、NVM下载2、卸载旧版Node.js3、安装三、NVM配置及使用1、设置nvm镜像源2、安装Node.js3、卸载Node.js4、使用或切换Node.js版本5、设置全局安装路径和缓存路径四、常用命令 一、NVM介绍在工作中，不同的项目可能需要不同NodeJS版本，所以维护多......
  • 280java jsp SSM Springboot旅游推荐系统旅游景点路线管理（源码+文档+开题+PPT+运行视
    项目技术：Springboot+Maven+Vue等等组成，B/S模式+Maven管理等等。环境需要1.运行环境：最好是javajdk1.8，我们在这个平台上运行的。其他版本理论上也可以。2.IDE环境：IDEA，Eclipse,Myeclipse都可以。推荐IDEA;3.tomcat环境：Tomcat7.x,8.x,9.x版本均可4.硬件环境：windows......
  • thinkjs + puppeteer=解决中文乱码+https错误
    asyncindexAction(){constself=this;constbrowser=awaitpuppeteer.launch({headless:true,ignoreHTTPSErrors:true,args:['--no-sandbox','--disable-setuid-sandbox']});constpage=awaitbrowser.newPage();/......
  • 基于nodejs+vue电信CRM系统的设计与实现[程序+论文+开题] 计算机毕业设计
    本系统（程序+源码+数据库+调试部署+开发环境）带文档lw万字以上，文末可获取源码系统程序文件列表开题报告内容研究背景随着信息技术的飞速发展和电信市场的日益竞争激烈，电信企业面临着前所未有的挑战与机遇。客户关系管理（CRM）作为提升企业核心竞争力的关键手段，其重要性愈发凸显......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99