实例介绍
【实例简介】V部落是一个多用户博客管理平台，采用Vue SpringBoot开发。
【实例截图】
【核心代码】
<style type="text/css"> .blog_table_footer { display: flex; box-sizing: content-box; padding-top: 10px; padding-bottom: 0px; margin-bottom: 0px; justify-content: space-between; } </style> <template> <div> <div style="display: flex;justify-content: flex-start"> <el-input placeholder="通过标题搜索该分类下的博客..." prefix-icon="el-icon-search" v-model="keywords" style="width: 400px" size="mini"> </el-input> <el-button type="primary" icon="el-icon-search" size="mini" style="margin-left: 3px" @click="searchClick">搜索 </el-button> </div> <!--<div style="width: 100%;height: 1px;background-color: #20a0ff;margin-top: 8px;margin-bottom: 0px"></div>--> <el-table ref="multipleTable" :data="articles" tooltip-effect="dark" style="width: 100%;overflow-x: hidden; overflow-y: hidden;" max-height="390" @selection-change="handleSelectionChange" v-loading="loading"> <el-table-column type="selection" width="35" align="left" v-if="showEdit || showDelete"> </el-table-column> <el-table-column label="标题" width="400" align="left"> <template slot-scope="scope"><span style="color: #409eff;cursor: pointer" @click="itemClick(scope.row)">{{ scope.row.title}}</span> </template> </el-table-column> <el-table-column label="最近编辑时间" width="140" align="left"> <template slot-scope="scope">{{ scope.row.editTime | formatDateTime}}</template> </el-table-column> <el-table-column prop="nickname" label="作者" width="120" align="left"> </el-table-column> <el-table-column prop="cateName" label="所属分类" width="120" align="left"> </el-table-column> <el-table-column label="操作" align="left" v-if="showEdit || showDelete"> <template slot-scope="scope"> <el-button size="mini" @click="handleEdit(scope.$index, scope.row)" v-if="showEdit">编辑 </el-button> <el-button size="mini" @click="handleRestore(scope.$index, scope.row)" v-if="showRestore">还原 </el-button> <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)" v-if="showDelete">删除 </el-button> </template> </el-table-column> </el-table> <div class="blog_table_footer"> <el-button type="danger" size="mini" style="margin: 0px;" v-show="this.articles.length>0 && showDelete" :disabled="this.selItems.length==0" @click="deleteMany">批量删除 </el-button> <span></span> <el-pagination background :page-size="pageSize" layout="prev, pager, next" :total="totalCount" @current-change="currentChange" v-show="this.articles.length>0"> </el-pagination> </div> </div> </template> <script> import {putRequest} from '../utils/api' import {getRequest} from '../utils/api' // import Vue from 'vue' // var bus = new Vue() export default{ data() { return { articles: [], selItems: [], loading: false, currentPage: 1, totalCount: -1, pageSize: 6, keywords: '', dustbinData: [] } }, mounted: function () { var _this = this; this.loading = true; this.loadBlogs(1, this.pageSize); var _this = this; window.bus.$on('blogTableReload', function () { _this.loading = true; _this.loadBlogs(_this.currentPage, _this.pageSize); }) }, methods: { searchClick(){ this.loadBlogs(1, this.pageSize); }, itemClick(row){ this.$router.push({path: '/blogDetail', query: {aid: row.id}}) }, deleteMany(){ var selItems = this.selItems; for (var i = 0; i < selItems.length; i ) { this.dustbinData.push(selItems[i].id) } this.deleteToDustBin(selItems[0].state) }, //翻页 currentChange(currentPage){ this.currentPage = currentPage; this.loading = true; this.loadBlogs(currentPage, this.pageSize); }, loadBlogs(page, count){ var _this = this; var url = ''; if (this.state == -2) { url = "/admin/article/all" "?page=" page "&count=" count "&keywords=" this.keywords; } else { url = "/article/all?state=" this.state "&page=" page "&count=" count "&keywords=" this.keywords; } getRequest(url).then(resp=> { _this.loading = false; if (resp.status == 200) { _this.articles = resp.data.articles; _this.totalCount = resp.data.totalCount; } else { _this.$message({type: 'error', message: '数据加载失败!'}); } }, resp=> { _this.loading = false; if (resp.response.status == 403) { _this.$message({type: 'error', message: resp.response.data}); } else { _this.$message({type: 'error', message: '数据加载失败!'}); } }).catch(resp=> { //压根没见到服务器 _this.loading = false; _this.$message({type: 'error', message: '数据加载失败!'}); }) }, handleSelectionChange(val) { this.selItems = val; }, handleEdit(index, row) { this.$router.push({path: '/editBlog', query: {from: this.activeName,id:row.id}}); }, handleDelete(index, row) { this.dustbinData.push(row.id); this.deleteToDustBin(row.state); }, handleRestore(index, row) { let _this = this; this.$confirm('将该文件还原到原处，是否继续？','提示',{ confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' } ).then(() => { _this.loading = true; putRequest('/article/restore', {articleId: row.id}).then(resp=> { if (resp.status == 200) { var data = resp.data; _this.$message({type: data.status, message: data.msg}); if (data.status == 'success') { window.bus.$emit('blogTableReload')//通过选项卡都重新加载数据 } } else { _this.$message({type: 'error', message: '还原失败!'}); } _this.loading = false; }); }).catch(() => { _this.$message({ type: 'info', message: '已取消还原' }); }); }, deleteToDustBin(state){ var _this = this; this.$confirm(state != 2 ? '将该文件放入回收站，是否继续?' : '永久删除该文件, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { _this.loading = true; var url = ''; if (_this.state == -2) { url = "/admin/article/dustbin"; } else { url = "/article/dustbin"; } putRequest(url, {aids: _this.dustbinData, state: state}).then(resp=> { if (resp.status == 200) { var data = resp.data; _this.$message({type: data.status, message: data.msg}); if (data.status == 'success') { window.bus.$emit('blogTableReload')//通过选项卡都重新加载数据 } } else { _this.$message({type: 'error', message: '删除失败!'}); } _this.loading = false; _this.dustbinData = [] }, resp=> { _this.loading = false; _this.$message({type: 'error', message: '删除失败!'}); _this.dustbinData = [] }); }).catch(() => { _this.$message({ type: 'info', message: '已取消删除' }); _this.dustbinData = [] }); } }, props: ['state', 'showEdit', 'showDelete', 'activeName', 'showRestore'] } </script>
标签： springboot Spring boot 管理系统 vue
好例子网口号：伸出你的我的手 — 分享！
相关软件
网友评论
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
支持(0) 盖楼(回复)