資訊專(zhuān)欄INFORMATION COLUMN
摘要：當(dāng)該參數(shù)設(shè)置為時(shí)，時(shí)會(huì)查詢第一頁(yè)，超過(guò)總數(shù)時(shí)，會(huì)查詢最后一頁(yè)。
源碼下載地址
后臺(tái)
前端
開(kāi)發(fā)工具：WebStorm
開(kāi)發(fā)框架：vue + axios
包管理工具: npm
打包工具：webpack
后端
開(kāi)發(fā)工具：IDEA
開(kāi)發(fā)框架：Springboot + mybatis
打包工具：maven
數(shù)據(jù)庫(kù)： 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="添加圖書(shū)" :visible.sync="centerDialogVisible" width="50%" center> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="編號(hào)" prop="isbn"> <el-input :disabled="dis" v-model="ruleForm.isbn"></el-input> </el-form-item> <el-form-item label="書(shū)名" 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="書(shū)名"> <el-option label="書(shū)名" 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="編號(hào)" 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="書(shū)名" 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) // //請(qǐng)求后端數(shù)據(jù) // 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:"", }, //校驗(yàn)規(guī)則 rules: { isbn: [ { required: true, message: "請(qǐng)輸入編號(hào)", trigger: "blur" }, ], bookName: [ { required: true, message: "請(qǐng)輸入書(shū)名", trigger: "blur" }, ], author: [ { required: true, message: "請(qǐng)輸入作者", 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; //數(shù)據(jù)校驗(yàn) this.$refs[ruleForm].validate((valid) => { if (valid) { this.centerDialogVisible = false; //直接傳遞對(duì)象 //function (resp){} 中的this 指的是 function這個(gè)方法 //resp => {} 中的this 指的是 vue的this axios.post("http://localhost:8081/book/add", this.ruleForm).then(function (resp) { if (resp.data == "success") { _this.$message({ message: "圖書(shū)添加成功!", type: "success" }) } else { _this.$message({ message: "圖書(shū)添加失敗!!!", type: "error" }) } }), _this.getData(1); } else { this.centerDialogVisible = true; return false; } } ); } else if(flag == 0){ //this 操作 const _this = this; this.dis = true //修改圖書(shū)信息時(shí)，禁用編號(hào)輸入 //數(shù)據(jù)校驗(yàn) this.$refs[ruleForm].validate((valid) =>{ if(valid){ this.centerDialogVisible = false; console.log(this.ruleForm.author + this.ruleForm.bookName) //直接傳遞對(duì)象 axios.post("http://localhost:8081/book/updateBook",this.ruleForm).then(function (resp) { if(resp.data == "success"){ _this.$message({ message: "圖書(shū)修改成功!", type: "success" }) }else{ _this.$message({ message: "圖書(shū)修改失敗!!!", type: "error" }) } }) }else { this.centerDialogVisible = true; return false; } } ); } }, currentPage(currentPage){ this.getData(currentPage) }, getData(currentPage){ const _this = this; console.log(currentPage) //請(qǐng)求后端數(shù)據(jù) 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("是否刪除該圖書(shū)記錄, 是否繼續(xù)?", "提示", { confirmButtonText: "確定", cancelButtonText: "取消", type: "warning" }).then(() => { axios.post("http://localhost:8081/book/deleteBook/" + row.isbn).then(resp => { if (resp.data == "success") { this.$message({ message: "圖書(shū)刪除成功!", type: "success" }), this.getData(1); } else { this.$message({ message: "圖書(shū)刪除成功!!!", type: "error" }) } }) }).catch(() => { }); //直接傳遞對(duì)象 }, 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 # 分頁(yè)合理化參數(shù)，默認(rèn)值為false。 # 當(dāng)該參數(shù)設(shè)置為 true 時(shí)，pageNum<=0 時(shí)會(huì)查詢第一頁(yè)， # pageNum>pages（超過(guò)總數(shù)時(shí)），會(huì)查詢最后一頁(yè) reasonable: true # 支持通過(guò) Mapper 接口參數(shù)來(lái)傳遞分頁(yè)參數(shù) 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;
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/123890.html
摘要：官網(wǎng)地址是用于幫助開(kāi)發(fā)者更容易使用而開(kāi)發(fā)的的插件官方地址本文代碼已開(kāi)源在教程目標(biāo)教會(huì)大家基于開(kāi)發(fā)一個(gè)簡(jiǎn)單的增刪查改應(yīng)用。就這樣一個(gè)簡(jiǎn)單的待辦事項(xiàng)就完成了呢 簡(jiǎn)介 ICEREST是一個(gè)非常輕量級(jí)只有200k左右的RESTful路由框架，通過(guò)ICEREST你可以處理url的解析，數(shù)據(jù)的封裝,Json的輸出，和傳統(tǒng)的方法融合，請(qǐng)求的參數(shù)便是方法的參數(shù)，方法的返回值便是請(qǐng)求的返回值，同時(shí)我們希...
摘要：官網(wǎng)地址是用于幫助開(kāi)發(fā)者更容易使用而開(kāi)發(fā)的的插件官方地址本文代碼已開(kāi)源在教程目標(biāo)教會(huì)大家基于開(kāi)發(fā)一個(gè)簡(jiǎn)單的增刪查改應(yīng)用。就這樣一個(gè)簡(jiǎn)單的待辦事項(xiàng)就完成了呢 簡(jiǎn)介 ICEREST是一個(gè)非常輕量級(jí)只有200k左右的RESTful路由框架，通過(guò)ICEREST你可以處理url的解析，數(shù)據(jù)的封裝,Json的輸出，和傳統(tǒng)的方法融合，請(qǐng)求的參數(shù)便是方法的參數(shù)，方法的返回值便是請(qǐng)求的返回值，同時(shí)我們希...
摘要：花了一天時(shí)間，做了一套加班報(bào)名系統(tǒng)，前端基于，后端基于。如果需求對(duì)視覺(jué)要求不高，還是非常推薦把引進(jìn)到項(xiàng)目中的。提供了各種各樣的組件，基本上拿來(lái)就能用。需要注意的是，讀寫(xiě)文件默認(rèn)都是同步的，將的寫(xiě)配置成異步寫(xiě)入能極大的提升性能。 花了一天時(shí)間，做了一套加班報(bào)名系統(tǒng)，前端基于webpack+vue+vux，后端基于express+lowdb。以前在項(xiàng)目中也都接觸過(guò)webpack+vue，第...
閱讀 2897·2021-11-22 09:34
閱讀 1220·2021-11-19 09:40
閱讀 3341·2021-10-14 09:43
閱讀 3576·2021-09-23 11:22
閱讀 1606·2021-08-31 09:39
閱讀 890·2019-08-30 15:55
閱讀 1419·2019-08-30 15:54
閱讀 863·2019-08-30 15:53
