摘要：当该参数设置为时，时会查询第一页，超过总数时，会查询最后一页。
源码下载地址
后台
前端
开发工具：WebStorm
开发框架：vue + axios
包管理工具: npm
打包工具：webpack
后端
开发工具：IDEA
开发框架：Springboot + mybatis
打包工具：maven
数据库： MySQL
后端目录
前端目录
<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>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: 8081DOCTYPE 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>package com.controller;
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/123890.html
摘要：官网地址是用于帮助开发者更容易使用而开发的的插件官方地址本文代码已开源在教程目标教会大家基于开发一个简单的增删查改应用。就这样一个简单的待办事项就完成了呢 简介 ICEREST是一个非常轻量级只有200k左右的RESTful路由框架，通过ICEREST你可以处理url的解析，数据的封装,Json的输出，和传统的方法融合，请求的参数便是方法的参数，方法的返回值便是请求的返回值，同时我们希...
摘要：官网地址是用于帮助开发者更容易使用而开发的的插件官方地址本文代码已开源在教程目标教会大家基于开发一个简单的增删查改应用。就这样一个简单的待办事项就完成了呢 简介 ICEREST是一个非常轻量级只有200k左右的RESTful路由框架，通过ICEREST你可以处理url的解析，数据的封装,Json的输出，和传统的方法融合，请求的参数便是方法的参数，方法的返回值便是请求的返回值，同时我们希...
摘要：花了一天时间，做了一套加班报名系统，前端基于，后端基于。如果需求对视觉要求不高，还是非常推荐把引进到项目中的。提供了各种各样的组件，基本上拿来就能用。需要注意的是，读写文件默认都是同步的，将的写配置成异步写入能极大的提升性能。 花了一天时间，做了一套加班报名系统，前端基于webpack+vue+vux，后端基于express+lowdb。以前在项目中也都接触过webpack+vue，第...
阅读 2880·2021-11-22 09:34
阅读 1211·2021-11-19 09:40
阅读 3334·2021-10-14 09:43
阅读 3565·2021-09-23 11:22
阅读 1599·2021-08-31 09:39
阅读 879·2019-08-30 15:55
阅读 1412·2019-08-30 15:54
阅读 854·2019-08-30 15:53
