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

秒速五厘米 2022-11-03 05:28 120阅读 0赞

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

### 文章目录 ###

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

## 效果 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 2]

# 一、友链管理后端接口 #

## 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 { 
    
        @Autowired
        TLinksMapper tLinksMapper;
    
        @Override
        public 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;
        }
    
        @Override
        public 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;
        }
    
        @Override
        public RespBean updateLink(TLinks tLinks) { 
            RespBean respBean = RespBean.build();
            if (tLinksMapper.updateById(tLinks) == 1){ 
                respBean.setMsg("更新友链成功");
                respBean.setStatus(200);
                return respBean;
            }
            respBean.setMsg("更新友链失败");
            return respBean;
        }
    
        @Override
        public RespBean deleteLinkById(Long id) { 
            RespBean respBean = RespBean.build();
            if (tLinksMapper.deleteById(id) == 1){ 
                respBean.setStatus(200);
                respBean.setMsg("删除友链成功");
                return respBean;
            }
            respBean.setMsg("删除友链失败");
            return respBean;
        }
    
        @Override
        public 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 { 
        @Autowired
        TLinksService 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 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 3]

<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-column
                label="编号"
                width="200">
                <template slot-scope="scope"> 
                  <span style="margin-left: 10px">{ {  scope.row.id }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="友链图片"
                width="90">
                <template slot-scope="scope">
                  <img :src="scope.row.pictureAddress" width="50" height="50" />
                </template>
              </el-table-column>
              <el-table-column
                label="友链名称"
                width="200">
                <template slot-scope="scope">
                  <el-tag size="medium">{ {  scope.row.blogName }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column
                label="友链地址"
                >
                <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-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>
    
          
          <div style="margin-top: 20px;" v-if="showPage">
            <el-pagination
            background
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size="pagesize"
            layout="total, prev, pager, next"
            :total="total">
          </el-pagination>
          </div>
    
           
           <el-dialog
           title="新建友链"
           :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-dialog
          title="编辑友链"
          :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 = this
          this.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 = this
              this.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 = row
          this.dialog_edit = true
        },
        //更新友链
        editLink(formName2) { 
          this.$refs[formName2].validate((valid) => { 
            if (valid) { 
              const _this = this
              this.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 = this
          this.$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 = this
           this.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 = val
          this.initLink()
        }
      }
    }
    </script>
    
    <style scoped>
    
    </style>

--------------------

关注【小L星光】回复 “博客” 即可获整个项目源码 ~  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 4]

[SpringBoot_Vue_Mybatis-plus]: https://blog.csdn.net/m0_45234510/article/details/114599074
[SpringBoot_Vue_Mybatis-plus 1]: https://blog.csdn.net/m0_45234510/article/details/110405346
[SpringBoot_Vue_Mybatis-plus 2]: https://blog.csdn.net/m0_45234510/article/details/110494715
[SpringBoot_Vue_Mybatis-plus 3]: https://blog.csdn.net/m0_45234510/article/details/110932322
[SpringBoot_Vue_Mybatis-plus 4]: https://blog.csdn.net/m0_45234510/article/details/111075386
[SpringBoot_Vue_Mybatis-plus 5]: https://blog.csdn.net/m0_45234510/article/details/112315926
[SpringBoot_Vue_Mybatis-plus 6]: https://blog.csdn.net/m0_45234510/article/details/114150638
[SpringBoot_Vue_Mybatis-plus 7]: https://blog.csdn.net/m0_45234510/article/details/114155484
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70]: /images/20221024/8a8c965a129f4d4996e881ebd25ae829.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 1]: /images/20221024/cee018acd81a4f8088c18de882a3a16c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 2]: /images/20221024/52972fa7295e42bf8e5b74d9399cb299.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 3]: /images/20221024/d125cdfebfa547e4a202a38c801bd708.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70 4]: /images/20221024/31b277a11d104c57bba0e388b832d1fd.png