SpringBoot+Vue+Mybatis-plus 博客(七):完成友链管理前后端对接

小L星光博客 专栏收录该内容
8 篇文章 6 订阅

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 实体类

@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

在这里插入图片描述

<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星光】回复 “博客” 即可获整个项目源码 ~
在这里插入图片描述

  • 2
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值