10，springboot整合elementui和mybatis_plus实现接口联调（完成页面）

最新推荐文章于 2024-01-20 12:49:59 发布

李乃龙1

最新推荐文章于 2024-01-20 12:49:59 发布

阅读量166

点赞数

分类专栏： SpringBoot+Vue+Elememt 文章标签： spring boot elementui mybatis

本文链接：https://blog.csdn.net/w7635122886/article/details/128718351

版权

SpringBoot+Vue+Elememt 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1，完成商品列表展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div id="app">
    <el-table
            v-loading="loading"
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
                fixed
                prop="id"
                label="id"
                width="150">
        </el-table-column>
        <el-table-column
                prop="brandName"
                label="商品名称"
                width="220">
        </el-table-column>
        <el-table-column
                prop="companyName"
                label="公司名称"
                width="220">
        </el-table-column>
        <el-table-column
                prop="ordered"
                label="排序"
                width="220">
        </el-table-column>
        <el-table-column
                prop="description"
                label="描述"
                width="200">
        </el-table-column>
<!--        0 启用 1禁用-->
        <el-table-column
                prop="status"
                label="状态"
                width="220">
            <template slot-scope="scope">
                <el-tag disable-transitions>{{scope.row.status === 0 ? '禁用' : '启用'}}</el-tag>
            </template>
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="100">
            <template slot-scope="scope">
                <el-button @click="getInfoById(scope.row)" type="text" size="small">查看</el-button>
                <el-button @click="deleteBrank(scope.row.id)" type="text" size="small">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

</div>
</body>
<script type="text/javascript" src="./js/vue-2.5.17.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script src="./js/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function() {
            return {
                tableData: [],
                loading: true
            }
        },
        methods: {
            getInfoById(row) {
                console.log("getInfoById--",row);
            },
            //查询所有商品函数
            getAllBrank(){
                axios.get("http://localhost:8888/spring-boot-day09/brand/getAllTrand")
                    .then(resp=>{
                        this.tableData = resp.data.data
                        this.loading = false
                        console.log(this.tableData)
                    })

            },
            deleteBrank(row){
                console.log("deleteBrank--",row)
            }
        },
        mounted(){
            this.getAllBrank();
        }
    })
</script>
</html>

在这里插入图片描述

2，添加商品

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div id="app">
    <el-button @click="addBrank()" type="text" size="small">添加商品</el-button>

<!--    列表-->
    <el-table
            v-loading="loading"
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
                fixed
                prop="id"
                label="id"
                width="150">
        </el-table-column>
        <el-table-column
                prop="brandName"
                label="商品名称"
                width="220">
        </el-table-column>
        <el-table-column
                prop="companyName"
                label="公司名称"
                width="220">
        </el-table-column>
        <el-table-column
                prop="ordered"
                label="排序"
                width="220">
        </el-table-column>
        <el-table-column
                prop="description"
                label="描述"
                width="200">
        </el-table-column>
<!--        0 启用 1禁用-->
        <el-table-column
                prop="status"
                label="状态"
                width="220">
            <template slot-scope="scope">
                <el-tag disable-transitions>{{scope.row.status === 0 ? '禁用' : '启用'}}</el-tag>
            </template>
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="100">
            <template slot-scope="scope">
                <el-button @click="getInfoById(scope.row)" type="text" size="small">查看</el-button>
                <el-button @click="deleteBrank(scope.row.id)" type="text" size="small">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

<!--    新增商品弹框-->
    <el-dialog
            title="新增商品"
            :visible.sync="addBrankDialogVisible"
            width="30%"
            :before-close="handleClose">
        <el-form :model="brank" label-width="80px">
            <el-form-item label="商品名称">
                <el-input v-model="brank.brandName"></el-input>
            </el-form-item>
            <el-form-item label="公司名称">
                <el-input v-model="brank.companyName"></el-input>
            </el-form-item>
            <el-form-item label="排序">
                <el-input v-model="brank.ordered" type="number"></el-input>
            </el-form-item>
            <el-form-item label="描述">
                <el-input type="textarea" v-model="brank.description"></el-input>
            </el-form-item>
            <el-form-item label="是否启用">
                <el-select v-model="brank.status" placeholder="请选择活">
                    <el-option label="禁用" value="0"></el-option>
                    <el-option label="启用" value="1"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmit">立即创建</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
        </span>
    </el-dialog>
</div>
</body>
<script type="text/javascript" src="./js/vue-2.5.17.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script src="./js/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function() {
            return {
                tableData: [],
                loading: true,
                addBrankDialogVisible: false,
                brank:{
                    brandName:"",
                    companyName:"",
                    ordered:0,
                    description:"",
                    status:0
                }
            }
        },
        methods: {
            //查看详情
            getInfoById(row) {
                console.log("getInfoById--",row);
            },

            //查询所有商品函数
            getAllBrank(){
                axios.get("http://localhost:8888/spring-boot-day09/brand/getAllTrand")
                    .then(resp=>{
                        this.tableData = resp.data.data
                        this.loading = false
                        console.log(this.tableData)
                    })

            },

            //删除商品
            deleteBrank(row){
                console.log("deleteBrank--",row)
            },

            //点击添加商品按钮出发事件
            addBrank(){
                this.brank.brandName = ""
                this.brank.companyName = ""
                this.brank.ordered = 0
                this.brank.description = ""
                this.brank.status = 0

                this.addBrankDialogVisible = true
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            //立即创建
            onSubmit(){
                axios({
                    url:'http://localhost:8888/spring-boot-day09/brand/addTrand',
                    method:'post',
                    data:JSON.stringify(this.brank),
                    headers:{
                        'Accept': 'application/json',
                        'Content-Type': 'application/json'
                    }
                }).then(res=>{
                    console.log(res)
                    this.addBrankDialogVisible = false
                    this.getAllBrank();
                    // this.brank = null
                })
            }
        },
        mounted(){
            this.getAllBrank();
        }
    })
</script>
</html>

在这里插入图片描述

3，删除商品

 //删除商品
            deleteBrank(row){
                axios.get("http://localhost:8888/spring-boot-day09/brand/deleteBarnkInfoById/"+row)
                    .then(resp=>{
                        this.getAllBrank();
                    })
            },

4，编辑商品

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div id="app">
    <el-button @click="addBrank()" type="text" size="small">添加商品</el-button>

<!--    列表-->
    <el-table
            v-loading="loading"
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
                fixed
                prop="id"
                label="id"
                width="150">
        </el-table-column>
        <el-table-column
                prop="brandName"
                label="商品名称"
                width="220">
        </el-table-column>
        <el-table-column
                prop="companyName"
                label="公司名称"
                width="220">
        </el-table-column>
        <el-table-column
                prop="ordered"
                label="排序"
                width="220">
        </el-table-column>
        <el-table-column
                prop="description"
                label="描述"
                width="200">
        </el-table-column>
<!--        0 启用 1禁用-->
        <el-table-column
                prop="status"
                label="状态"
                width="220">
            <template slot-scope="scope">
                <el-tag disable-transitions>{{scope.row.status === 0 ? '禁用' : '启用'}}</el-tag>
            </template>
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="100">
            <template slot-scope="scope">
                <el-button @click="getInfoById(scope.row)" type="text" size="small">查看</el-button>
                <el-button @click="deleteBrank(scope.row.id)" type="text" size="small">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

<!--    新增商品弹框-->
    <el-dialog
            title="新增商品"
            :visible.sync="addBrankDialogVisible"
            width="30%"
            :before-close="handleClose">
        <el-form :model="brank" label-width="80px">
            <el-form-item label="商品名称">
                <el-input v-model="brank.brandName"></el-input>
            </el-form-item>
            <el-form-item label="公司名称">
                <el-input v-model="brank.companyName"></el-input>
            </el-form-item>
            <el-form-item label="排序">
                <el-input v-model="brank.ordered" type="number"></el-input>
            </el-form-item>
            <el-form-item label="描述">
                <el-input type="textarea" v-model="brank.description"></el-input>
            </el-form-item>
            <el-form-item label="是否启用">
                <el-select v-model="brank.status" placeholder="请选择活">
                    <el-option label="禁用" value="0"></el-option>
                    <el-option label="启用" value="1"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmit">立即创建</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
        </span>
    </el-dialog>

<!--    编辑商品弹框-->
    <el-dialog
            title="编辑商品"
            :visible.sync="updateBrankDialogVisible"
            width="30%"
            :before-close="handleClose">
        <el-form :model="brank" label-width="80px">
            <el-form-item label="商品名称">
                <el-input v-model="brank.brandName"></el-input>
            </el-form-item>
            <el-form-item label="公司名称">
                <el-input v-model="brank.companyName"></el-input>
            </el-form-item>
            <el-form-item label="排序">
                <el-input v-model="brank.ordered" type="number"></el-input>
            </el-form-item>
            <el-form-item label="描述">
                <el-input type="textarea" v-model="brank.description"></el-input>
            </el-form-item>
            <el-form-item label="是否启用">
                <el-select v-model="brank.status" placeholder="请选择活">
                    <el-option label="禁用" value="0"></el-option>
                    <el-option label="启用" value="1"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="updateBrank">立即修改</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
        </span>
    </el-dialog>
</div>
</body>
<script type="text/javascript" src="./js/vue-2.5.17.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script src="./js/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function() {
            return {
                tableData: [],
                loading: true,
                addBrankDialogVisible: false,
                updateBrankDialogVisible:false,
                brank:{
                    id:"",
                    brandName:"",
                    companyName:"",
                    ordered:0,
                    description:"",
                    status:0
                }
            }
        },
        methods: {
            //查看详情
            getInfoById(row) {
                this.brank = row
                this.updateBrankDialogVisible = true
                console.log("getInfoById--",this.brank);
            },
            updateBrank(){
                console.log(this.brank)
                axios({
                    url:'http://localhost:8888/spring-boot-day09/brand/updateTrand',
                    method:'post',
                    data:JSON.stringify(this.brank),
                    headers:{
                        'Accept': 'application/json',
                        'Content-Type': 'application/json'
                    }
                }).then(res=>{
                    console.log(res)
                    this.updateBrankDialogVisible = false
                    this.getAllBrank();
                    // this.brank = null
                })
            },

            //查询所有商品函数
            getAllBrank(){
                axios.get("http://localhost:8888/spring-boot-day09/brand/getAllTrand")
                    .then(resp=>{
                        this.tableData = resp.data.data
                        this.loading = false
                        console.log(this.tableData)
                    })

            },

            //删除商品
            deleteBrank(row){
                axios.get("http://localhost:8888/spring-boot-day09/brand/deleteBarnkInfoById/"+row)
                    .then(resp=>{
                        this.getAllBrank();
                    })
            },

            //点击添加商品按钮出发事件
            addBrank(){
                this.brank.id = ""
                this.brank.brandName = ""
                this.brank.companyName = ""
                this.brank.ordered = 0
                this.brank.description = ""
                this.brank.status = 0

                this.addBrankDialogVisible = true
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            //立即创建
            onSubmit(){
                axios({
                    url:'http://localhost:8888/spring-boot-day09/brand/addTrand',
                    method:'post',
                    data:JSON.stringify(this.brank),
                    headers:{
                        'Accept': 'application/json',
                        'Content-Type': 'application/json'
                    }
                }).then(res=>{
                    console.log(res)
                    this.addBrankDialogVisible = false
                    this.getAllBrank();
                    // this.brank = null
                })
            }
        },
        mounted(){
            this.getAllBrank();
        }
    })
</script>
</html>