資訊專欄INFORMATION COLUMN
摘要：當該參數設置為時，時會查詢第一頁，超過總數時，會查詢最后一頁。
源碼下載地址
后臺
前端
開發(fā)工具：WebStorm
開發(fā)框架：vue + axios
包管理工具: npm
打包工具：webpack
后端
開發(fā)工具：IDEA
開發(fā)框架：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:"", }, //校驗規(guī)則 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("是否刪除該圖書記錄, 是否繼續(xù)?", "提示", { 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;
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/123890.html
摘要：官網地址是用于幫助開發(fā)者更容易使用而開發(fā)的的插件官方地址本文代碼已開源在教程目標教會大家基于開發(fā)一個簡單的增刪查改應用。就這樣一個簡單的待辦事項就完成了呢 簡介 ICEREST是一個非常輕量級只有200k左右的RESTful路由框架，通過ICEREST你可以處理url的解析，數據的封裝,Json的輸出，和傳統(tǒng)的方法融合，請求的參數便是方法的參數，方法的返回值便是請求的返回值，同時我們希...
摘要：官網地址是用于幫助開發(fā)者更容易使用而開發(fā)的的插件官方地址本文代碼已開源在教程目標教會大家基于開發(fā)一個簡單的增刪查改應用。就這樣一個簡單的待辦事項就完成了呢 簡介 ICEREST是一個非常輕量級只有200k左右的RESTful路由框架，通過ICEREST你可以處理url的解析，數據的封裝,Json的輸出，和傳統(tǒng)的方法融合，請求的參數便是方法的參數，方法的返回值便是請求的返回值，同時我們希...
摘要：花了一天時間，做了一套加班報名系統(tǒng)，前端基于，后端基于。如果需求對視覺要求不高，還是非常推薦把引進到項目中的。提供了各種各樣的組件，基本上拿來就能用。需要注意的是，讀寫文件默認都是同步的，將的寫配置成異步寫入能極大的提升性能。 花了一天時間，做了一套加班報名系統(tǒng)，前端基于webpack+vue+vux，后端基于express+lowdb。以前在項目中也都接觸過webpack+vue，第...
閱讀 2901·2021-11-22 09:34
閱讀 1223·2021-11-19 09:40
閱讀 3349·2021-10-14 09:43
閱讀 3578·2021-09-23 11:22
閱讀 1611·2021-08-31 09:39
閱讀 894·2019-08-30 15:55
閱讀 1422·2019-08-30 15:54
閱讀 864·2019-08-30 15:53
