SpringBoot+Vue+Mybatis-plus 博客：个人博客介绍及效果展示
SpringBoot+Vue+Mybatis-plus 博客（一）：完成博客后台前端登录页面、后端登录接口
SpringBoot+Vue+Mybatis-plus 博客（二）：完成登录的前后端对接、完善左侧菜单栏
SpringBoot+Vue+Mybatis-plus 博客（三）：完成搜索及博客列表展示功能前后端
SpringBoot+Vue+Mybatis-plus 博客（四）：完成发布文章、编辑文章、删除文章及查询文章功能
SpringBoot+Vue+Mybatis-plus 博客（五）：完成分类管理和标签管理前后端对接
SpringBoot+Vue+Mybatis-plus 博客（六）：完成评论管理前后端交互
SpringBoot+Vue+Mybatis-plus 博客（七）：完成友链管理前后端对接

文章目录

- 效果
一、友链管理后端接口
- 1、TLinks 实体类
- 2、TLinksMapper
- 3、TLinksMapper.xml
- 4、TLinksService
- 5、TLinksServiceImpl
- 6、TLinksController
二、友链管理前端页面
- LinksBlog.vue

效果

一、友链管理后端接口

1、TLinks 实体类

@Data
@EqualsAndHashCode(callSuper = false)
@Accessors(chain = true)
@ApiModel(value="TLinks对象", description="")
public class TLinks implements Serializable {private static final long serialVersionUID = 1L;@JsonSerialize(using = ToStringSerializer.class) //系统序列化时，保留相关精度@ApiModelProperty(value = "主键id")private Long id;@ApiModelProperty(value = "博客地址")private String blogAddress;@ApiModelProperty(value = "博客名称")private String blogName;@ApiModelProperty(value = "首图")private String pictureAddress;@JsonFormat(pattern="yyyy-MM-dd HH:mm:ss", timezone = "Asia/ShangHai")@ApiModelProperty(value = "创建时间")private LocalDateTime createTime;}

2、TLinksMapper

public interface TLinksMapper extends BaseMapper<TLinks> {}

3、TLinksMapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.xlblog.blog.mapper.TLinksMapper"></mapper>

4、TLinksService

public interface TLinksService extends IService<TLinks> {RespBean pageLinks(Long current, Long size);RespBean getLinksByName(String name);RespBean updateLink(TLinks tLinks);RespBean deleteLinkById(Long id);RespBean getLinksById(Long id);
}

5、TLinksServiceImpl

@Service
public class TLinksServiceImpl extends ServiceImpl<TLinksMapper, TLinks> implements TLinksService {@AutowiredTLinksMapper tLinksMapper;@Overridepublic RespBean pageLinks(Long current, Long size) {RespBean respBean = RespBean.build();//创建Page对象Page<TLinks> tLinksPage = new Page<>(current,size);//构建条件QueryWrapper<TLinks> wrapper = new QueryWrapper<>();//以创建时间排序（降序）wrapper.orderByDesc("create_time");//调用mybatis plus分页方法进行查询tLinksMapper.selectPage(tLinksPage,wrapper);//通过Page对象获取分页信息List<TLinks> typeList = tLinksPage.getRecords(); //每页的数据 list集合long pagesize = tLinksPage.getSize(); //每页显示的条数long total = tLinksPage.getTotal(); //总记录数long pages = tLinksPage.getPages(); //总页数respBean.setStatus(200);respBean.setObj(tLinksPage);return respBean;}@Overridepublic RespBean getLinksByName(String name) {RespBean respBean = RespBean.build();QueryWrapper<TLinks> queryWrapper = new QueryWrapper<TLinks>();queryWrapper.like("blog_name",name);List<TLinks> tLinksList = tLinksMapper.selectList(queryWrapper);respBean.setStatus(200);respBean.setObj(tLinksList);return respBean;}@Overridepublic RespBean updateLink(TLinks tLinks) {RespBean respBean = RespBean.build();if (tLinksMapper.updateById(tLinks) == 1){respBean.setMsg("更新友链成功");respBean.setStatus(200);return respBean;}respBean.setMsg("更新友链失败");return respBean;}@Overridepublic RespBean deleteLinkById(Long id) {RespBean respBean = RespBean.build();if (tLinksMapper.deleteById(id) == 1){respBean.setStatus(200);respBean.setMsg("删除友链成功");return respBean;}respBean.setMsg("删除友链失败");return respBean;}@Overridepublic RespBean getLinksById(Long id) {RespBean respBean = RespBean.build();TLinks tLinks = tLinksMapper.selectById(id);respBean.setStatus(200);respBean.setObj(tLinks);return respBean;}
}

6、TLinksController

@RestController
@RequestMapping("/links")
public class TLinksController {@AutowiredTLinksService tLinksService;RespBean respBean = RespBean.build();/*** 新增友链* @param tLinks* @return*/@PostMapping("/saveLink")public RespBean saveLink(@RequestBody TLinks tLinks){tLinks.setCreateTime(LocalDateTime.now());Boolean result = tLinksService.save(tLinks);if (result){respBean.setStatus(200);respBean.setMsg("添加友链成功！");return respBean;}else {respBean.setStatus(500);respBean.setMsg("添加友链失败！");return respBean;}}/*** 查询所有* @return*/@GetMapping("/getAllLink")public RespBean getAllLink(){List<TLinks> linksList = tLinksService.list();return RespBean.ok("查询成功！",linksList);}/*** 友链的分页查询* @param current* @param size* @return*/@GetMapping("/getLinksByPage")@ApiOperation("友链的分页查询")@ApiImplicitParams({@ApiImplicitParam(name = "current",value = "当前页") ,@ApiImplicitParam(name = "size",value = "每页的数量"),})public RespBean getLinksByPage(Long current, Long size){return tLinksService.pageLinks(current, size);}/*** 通过名称查找友链* @param name* @return*/@GetMapping("/getLinksByName")public RespBean getLinksByName(String name){return tLinksService.getLinksByName(name);}/*** 更新友链* @param tLinks* @return*/@PutMapping("/updateLink")public RespBean updateLink(@RequestBody TLinks tLinks){return tLinksService.updateLink(tLinks);}/*** 删除友链* @param id* @return*/@DeleteMapping("deleteLinkById")public RespBean deleteLinkById(Long id){return tLinksService.deleteLinkById(id);}/*** 根据id查询友链* @param id* @return*/@GetMapping("/getLinksById")public RespBean getLinksById(Long id){return tLinksService.getLinksById(id);}
}

二、友链管理前端页面

LinksBlog.vue

<template><div><div style="margin-top: 20px;"><!-- 搜索 --><el-input size="small" v-model="input_name" placeholder="请输入友链名称，可回车搜索..." prefix-icon="el-icon-search"style="width: 400px;margin-right: 10px;" @keydown.enter.native="search_name"></el-input><el-button size="small" type="primary"  @click="search_name" icon="el-icon-search">搜索</el-button><el-button size="small" type="success"  @click="dialog_add = true" icon="el-icon-plus">新增</el-button></div><div><el-table:data="linkData"><el-table-columnlabel="编号"width="200"><template slot-scope="scope"> <span style="margin-left: 10px">{{ scope.row.id }}</span></template></el-table-column><el-table-columnlabel="友链图片"width="90"><template slot-scope="scope"><img :src="scope.row.pictureAddress" width="50" height="50" /></template></el-table-column><el-table-columnlabel="友链名称"width="200"><template slot-scope="scope"><el-tag size="medium">{{ scope.row.blogName }}</el-tag></template></el-table-column><el-table-columnlabel="友链地址"><template slot-scope="scope"><el-tag size="medium">{{ scope.row.blogAddress }}</el-tag></template></el-table-column><el-table-column label="操作" fixed="right"><template slot-scope="scope"><el-buttonsize="mini"@click="handleEdit(scope.$index, scope.row)">编辑</el-button><el-buttonsize="mini"type="danger"@click="handleDelete(scope.$index, scope.row)">删除</el-button></template></el-table-column></el-table></div><!-- 分页 --><div style="margin-top: 20px;" v-if="showPage"><el-paginationbackground@current-change="handleCurrentChange":current-page.sync="currentPage":page-size="pagesize"layout="total, prev, pager, next":total="total"></el-pagination></div><!-- 对话框 新建友链 --><el-dialogtitle="新建友链":visible.sync="dialog_add"width="30%"><el-form status-icon  label-width="100px" :model="link_add" ref="link_add"><el-form-item label="友链图片" prop="pictureAddress":rules="{ required: true, message: '不能为空', trigger: 'blur' }"><el-input v-model="link_add.pictureAddress" placeholder="请输入友链图片"></el-input></el-form-item><el-form-item label="友链名称" prop="blogName":rules="{ required: true, message: '不能为空', trigger: 'blur' }"><el-input v-model="link_add.blogName" placeholder="请输入友链名称"></el-input></el-form-item><el-form-item label="友链地址" prop="blogAddress":rules="{ required: true, message: '不能为空', trigger: 'blur' }"><el-input v-model="link_add.blogAddress" placeholder="请输入友链名称"></el-input></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="dialog_add = false">取 消</el-button><el-button type="primary" @click="addLink('link_add')">确 定</el-button></span></el-dialog><!-- 对话框 编辑友链 --><el-dialogtitle="编辑友链":visible.sync="dialog_edit"width="30%"><el-form status-icon  label-width="100px" :model="link_edit" ref="link_edit"><el-form-item label="友链图片" prop="pictureAddress":rules="{ required: true, message: '不能为空', trigger: 'blur' }"><el-input v-model="link_edit.pictureAddress" placeholder="请输入友链图片"></el-input></el-form-item><el-form-item label="友链名称" prop="blogName":rules="{ required: true, message: '不能为空', trigger: 'blur' }"><el-input v-model="link_edit.blogName" placeholder="请输入友链名称"></el-input></el-form-item><el-form-item label="友链地址" prop="blogAddress":rules="{ required: true, message: '不能为空', trigger: 'blur' }"><el-input v-model="link_edit.blogAddress" placeholder="请输入友链名称"></el-input></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="dialog_edit = false">取 消</el-button><el-button type="primary" @click="editLink('link_edit')">确 定</el-button></span></el-dialog></div>
</template><script>
export default {name: 'LinksBlog',data () {return {linkData:[],  //友链数据currentPage: 1,  //当前页total:0, //总记录数pagesize:5, //页面大小input_name:'', //搜索框值dialog_add: false, //添加友链的对话框dialog_edit: false, //编辑友链的对话框link_add:{blogName:'',  //友链名称pictureAddress:'',blogAddress:'',},link_edit:{blogName:'',  //友链名称pictureAddress:'',blogAddress:'',},showPage: true, //是否显示分页}},mounted() {this.initLink();},methods:{//初始化友链数据initLink(){const _this = thisthis.getRequest('/links/getLinksByPage?current=' + this.currentPage + '&size=' + this.pagesize).then(resp=>{console.log(resp)_this.linkData = resp.obj.records_this.total = resp.obj.total})},//添加友链addLink(formName) {this.$refs[formName].validate((valid) => {if (valid) {const _this = thisthis.postRequest('/links/saveLink',this.link_add).then(resp=>{console.log(resp)_this.initLink()_this.link_add = ''_this.dialog_add = false})} else {console.log('error submit!!');return false;}});},//编辑友链handleEdit(index, row) {console.log(index, row);this.link_edit = rowthis.dialog_edit = true},//更新友链editLink(formName2) {this.$refs[formName2].validate((valid) => {if (valid) {const _this = thisthis.putRequest('/links/updateLink',this.link_edit).then(resp=>{console.log(resp)_this.initLink()_this.dialog_edit = false})} else {console.log('error submit!!');return false;}});},//删除友链handleDelete(index, row) {console.log(index, row);const _this = thisthis.$confirm('此操作将永久删除《' + row.blogName  + '》, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {this.deleteRequest('/links/deleteLinkById?id=' + row.id).then(resp=>{if(resp){this.initLink()}})}).catch(() => {this.$message({type: 'info',message: '已取消删除'});          });},//搜索友链search_name(){const _this = thisthis.getRequest('/links/getLinksByName?name=' + this.input_name).then(resp=>{console.log(resp)if(_this.input_name == ''){_this.initLink();_this.showPage = true}else{_this.linkData = resp.obj_this.showPage = false_this.input_name = ''}})},//分页handleCurrentChange(val) {console.log(`当前页: ${val}`);this.currentPage = valthis.initLink()}}
}
</script><style scoped></style>

关注【小L星光】回复 “博客” 即可获整个项目源码 ~

SpringBoot+Vue+Mybatis-plus 博客（七）：完成友链管理前后端对接相关推荐

基于springboot + vue 的个人博客搭建过程（续）
承接上文:基于springboot + vue 的个人博客搭建过程目录 1. 评论列表 1.1 接口说明 1.2 controller 1.3 service 1.4 mapper 1.5 实体类 ...
基于springboot + vue 的个人博客搭建过程（上线）
承接上文: 基于springboot + vue 的个人博客搭建过程(续) 目录 1. 搭建环境 1. 安装docker 2. 拉取并运行 2.1 拉取服务 2.2 部署运行mysql 2.3 部署运 ...
Hexo+gitee：30分钟搭建一个自己的个人博客网站欢迎友链呀＜(▰˘◡˘▰)
Hexo + Gitee 部署自己的个人博客目前市场上比较火的一些博客框架: Hexo.jekyll.Solo.Halo .gohugo.VuePress.wordpress 等等 ,这些都是开 ...
基于SpringBoot + Vue的个人博客系统12——使用vue-admin-template展示文章列表（后台管理）
简介前面我们实现了博客系统的前台展示页面,还有留言功能没有实现,实现留言功能无非就是在后端增加留言表,对留言进行增删改查.和文章表类似,这里就不在赘述. 既然作为一款动态博客,那么后台管理是必不可少 ...
基于SpringBoot + Vue的个人博客
博客介绍基于Springboot + Vue 开发的前后端分离博客在线地址项目链接: www.ttkwsd.top 后台链接: admin.ttkwsd.top Github地址: https: ...
推荐一个基于Springboot+Vue的开源博客系统
简介这是一个基于Springboot2.x,vue2.x的前后端分离的开源博客系统,提供前端界面+管理界面+后台服务的整套系统源码.响应式设计,手机.平板.PC,都有良好的视觉效果! 你可以拿它 ...
springBoot整合spring security+JWT实现单点登录与权限管理前后端分离
在前一篇文章当中,我们介绍了springBoot整合spring security单体应用版,在这篇文章当中,我将介绍springBoot整合spring secury+JWT实现单点登录与权限管理. ...
springBoot整合spring security+JWT实现单点登录与权限管理前后端分离--筑基中期
写在前面在前一篇文章当中,我们介绍了springBoot整合spring security单体应用版,在这篇文章当中,我将介绍springBoot整合spring secury+JWT实现单点登录与 ...
基于SpringBoot + Vue的个人博客系统16——文章的修改和删除
简介删除文章删除功能比较简单,只需进行如下操作: 调用删除接口删除文章然后再刷新文章列表修改文章在文章列表页面点击修改文章按钮跳转到写文章页面,同时带上文章 id 作为参数在写文章界面创 ...

SpringBoot+Vue+Mybatis-plus 博客（七）：完成友链管理前后端对接

文章目录

效果

一、友链管理后端接口

1、TLinks 实体类

2、TLinksMapper

3、TLinksMapper.xml

4、TLinksService

5、TLinksServiceImpl

6、TLinksController

二、友链管理前端页面

LinksBlog.vue

SpringBoot+Vue+Mybatis-plus 博客（七）：完成友链管理前后端对接相关推荐

最新文章

热门文章