资讯专栏INFORMATION COLUMN

springboot+vue实现增删查改小demo

Yangder / 1181人阅读

摘要:当该参数设置为时,时会查询第一页,超过总数时,会查询最后一页。

源码下载地址
后台

前端

技术栈

前端

开发工具:WebStorm
开发框架:vue + axios
包管理工具: npm
打包工具:webpack

后端
开发工具:IDEA
开发框架:Springboot + mybatis
打包工具:maven
数据库: MySQL

前后端目录

后端目录

前端目录

部分代码

page1.vue

<template> <div>     <el-button type="primary" class="b1" icon="el-icon-plus" @click="add()">添加</el-button>     <el-dialog             id="dialog"             :append-to-body="true"             title="添加图书"             :visible.sync="centerDialogVisible"             width="50%"             center>         <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">             <el-form-item label="编号" prop="isbn">                 <el-input :disabled="dis" v-model="ruleForm.isbn"></el-input>             </el-form-item>             <el-form-item label="书名" prop="bookName">                 <el-input v-model="ruleForm.bookName"></el-input>             </el-form-item>             <el-form-item label="作者" prop="author">                 <el-input v-model="ruleForm.author"></el-input>             </el-form-item>         </el-form>         <span slot="footer" class="dialog-footer">    <el-button @click="centerDialogVisible = false">取 消</el-button>    <el-button type="primary" @click="save(flag,"ruleForm")">确 定</el-button>     </span>     </el-dialog>     <el-form :inline="true" :model="formInline" class="demo-form-inline">         <el-form-item label="搜索">             <el-input v-model="formInline.user" placeholder="搜索"></el-input>         </el-form-item>         <el-form-item label="搜索方式">             <el-select v-model="formInline.region" placeholder="书名">                 <el-option label="书名" value="name"></el-option>                 <el-option label="作者" value="author"></el-option>             </el-select>         </el-form-item>         <el-form-item>             <el-button type="primary" @click="onSubmit">搜索</el-button>         </el-form-item>     </el-form>    <el-table            :data="tableData"            style="width: 100%">        <el-table-column                label="编号"                width="180">            <!--  使用slot-scope   获取 tableData值      -->            <template slot-scope="scope">                <span style="margin-left: 10px">{{ scope.row.isbn }}</span>            </template>        </el-table-column>        <el-table-column                label="书名"                width="180">            <template slot-scope="scope">                <span style="margin-left: 10px">{{ scope.row.bookName }}</span>            </template>        </el-table-column>        <el-table-column                label="作者"                width="180">           <!--            -->            <template slot-scope="scope">                <span style="margin-left: 10px">{{ scope.row.author }}</span>            </template>        </el-table-column>        <el-table-column label="操作">            <template slot-scope="scope">                <el-button                        size="mini"                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>                <el-button                        size="mini"                        type="danger"                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>            </template>        </el-table-column>    </el-table>    <div id="page1">        <el-pagination                background                layout="prev, pager, next"                page-size="4"                @current-change="currentPage"                :total="total">        </el-pagination>    </div> </div></template><style>    .el-input{        width: 35%;    }    .b1{        float: left;    }    #page1{        float: left;        margin-top: 20px;    }</style><script>    export default {        created(){            const _this = this;            axios.defaults.withCredentials = true;            this.getData(1)            // //请求后端数据            // axios.get("http://localhost:8081/books/1/4").then(resp => {            //     _this.tableData = resp.data.list;            //     console.log(resp.data.list)            // })        },        data() {            return {   //双向绑定                flag:null,                dis:null,                pageSize:null,                total:null,                tableData: {                    isbn:"",                    bookName:"",                    author:"",                },                formInline: {                    user: "",                    region: ""                },                centerDialogVisible: false,                ruleForm: {                    isbn:"",                    bookName:"",                    author:"",                },                //校验规则                rules: {                    isbn: [                        { required: true, message: "请输入编号", trigger: "blur" },                    ],                    bookName: [                        { required: true, message: "请输入书名", trigger: "blur" },                    ],                    author: [                        { required: true, message: "请输入作者", trigger: "change" }                    ]                }            }        },        methods: {            add(){                this.centerDialogVisible = true;                this.flag = 1;                this.dis = false                this.ruleForm.isbn = null;                this.ruleForm.author = null                this.ruleForm.bookName = null            },            save(flag,ruleForm){                if(flag == 1) {                    //this 操作                    const _this = this;                    //数据校验                    this.$refs[ruleForm].validate((valid) => {                            if (valid) {                                this.centerDialogVisible = false;                                //直接传递对象                                //function (resp){} 中的this 指的是 function这个方法                                //resp => {} 中的this 指的是 vue的this                                axios.post("http://localhost:8081/book/add", this.ruleForm).then(function (resp) {                                    if (resp.data == "success") {                                        _this.$message({                                            message: "图书添加成功!",                                            type: "success"                                        })                                    } else {                                        _this.$message({                                            message: "图书添加失败!!!",                                            type: "error"                                        })                                    }                                }),                                _this.getData(1);                            } else {                                this.centerDialogVisible = true;                                return false;                            }                        }                    );                }                else if(flag == 0){                    //this 操作                    const _this = this;                    this.dis = true    //修改图书信息时,禁用编号输入                    //数据校验                    this.$refs[ruleForm].validate((valid) =>{                            if(valid){                                this.centerDialogVisible = false;                                console.log(this.ruleForm.author + this.ruleForm.bookName)                                //直接传递对象                                axios.post("http://localhost:8081/book/updateBook",this.ruleForm).then(function (resp) {                                    if(resp.data == "success"){                                        _this.$message({                                            message: "图书修改成功!",                                            type: "success"                                        })                                    }else{                                        _this.$message({                                            message: "图书修改失败!!!",                                            type: "error"                                        })                                    }                                })                            }else {                                this.centerDialogVisible = true;                                return false;                            }                        }                    );                }            },            currentPage(currentPage){               this.getData(currentPage)            },            getData(currentPage){                const _this = this;                console.log(currentPage)                //请求后端数据                axios.get("http://localhost:8081/books/"+currentPage+"/4").then(function (resp) {                    _this.tableData = resp.data.list                    _this.total = resp.data.total                })            },            handleEdit(index, row){                this.centerDialogVisible = true                this.flag = 0;                this.ruleForm.isbn = row.isbn;                this.ruleForm.author = row.author                this.ruleForm.bookName = row.bookName                this.dis = true            },            handleDelete(index, row) {                this.$confirm("是否删除该图书记录, 是否继续?", "提示", {                    confirmButtonText: "确定",                    cancelButtonText: "取消",                    type: "warning"                }).then(() => {                    axios.post("http://localhost:8081/book/deleteBook/" + row.isbn).then(resp => {                            if (resp.data == "success") {                                this.$message({                                    message: "图书删除成功!",                                    type: "success"                                }),                                this.getData(1);                            } else {                                this.$message({                                    message: "图书删除成功!!!",                                    type: "error"                                })                            }                        })                }).catch(() => {                });                //直接传递对象            }, onSubmit() {                const _this = this                const sel = this.formInline.region                const user = this.formInline.user                if(sel == "name"){                    axios.get("http://localhost:8081/book/name/"+user).then(function (resp) {                        _this.tableData = resp.data.list                        _this.total = resp.data.total                    })                }else if(sel == "author"){                    axios.get("http://localhost:8081/book/author/"+user).then(function (resp) {                        _this.tableData = resp.data.list                        _this.total = resp.data.total                    })                }            }        }    }</script>

application.yml

spring:  datasource:    url:  jdbc:mysql://localhost:3306/act5?useUnicode=true&characterEncoding=utf-8    username: root    password: rootpagehelper:    helperDialect: mysql  # 分页合理化参数,默认值为false。  # 当该参数设置为 true 时,pageNum<=0 时会查询第一页,  # pageNum>pages(超过总数时),会查询最后一页    reasonable: true  # 支持通过 Mapper 接口参数来传递分页参数    support-methods-arguments: truemybatis:  config-location: classpath:mybatis-config.xmlserver:  port: 8081

mybatis-config.xml

DOCTYPE configuration        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"        "http://mybatis.org/dtd/mybatis-3-config.dtd"><configuration>        <settings>        <setting name="mapUnderscoreToCamelCase" value="true"/>    settings>            <plugins>        <plugin interceptor="com.github.pagehelper.PageInterceptor">                                plugin>    plugins>configuration>

controller

package com.controller;
                 
               
              

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/123890.html

相关文章

  • 基于ICEREST+MongoDB-Plugin开发一个简单的增删查改

    摘要:官网地址是用于帮助开发者更容易使用而开发的的插件官方地址本文代码已开源在教程目标教会大家基于开发一个简单的增删查改应用。就这样一个简单的待办事项就完成了呢 简介 ICEREST是一个非常轻量级只有200k左右的RESTful路由框架,通过ICEREST你可以处理url的解析,数据的封装,Json的输出,和传统的方法融合,请求的参数便是方法的参数,方法的返回值便是请求的返回值,同时我们希...

    xeblog 评论0 收藏0
  • 基于ICEREST+MongoDB-Plugin开发一个简单的增删查改

    摘要:官网地址是用于帮助开发者更容易使用而开发的的插件官方地址本文代码已开源在教程目标教会大家基于开发一个简单的增删查改应用。就这样一个简单的待办事项就完成了呢 简介 ICEREST是一个非常轻量级只有200k左右的RESTful路由框架,通过ICEREST你可以处理url的解析,数据的封装,Json的输出,和传统的方法融合,请求的参数便是方法的参数,方法的返回值便是请求的返回值,同时我们希...

    terro 评论0 收藏0
  • webpack+vue+vux+express+lowdb实践

    摘要:花了一天时间,做了一套加班报名系统,前端基于,后端基于。如果需求对视觉要求不高,还是非常推荐把引进到项目中的。提供了各种各样的组件,基本上拿来就能用。需要注意的是,读写文件默认都是同步的,将的写配置成异步写入能极大的提升性能。 花了一天时间,做了一套加班报名系统,前端基于webpack+vue+vux,后端基于express+lowdb。以前在项目中也都接触过webpack+vue,第...

    awesome23 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<