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、编写校验表单工具类

新建BlogForm
在这里插入图片描述

**
 * 表单校验
 */
package com.xlblog.blog.form;

import com.baomidou.mybatisplus.core.toolkit.StringUtils;
import com.xlblog.blog.utils.RespBean;

import java.util.HashMap;
import java.util.List;

/**
 * 表单校验
 */
public class BlogForm {
    public static RespBean check(HashMap<String,Object> params) {
        String title = (String) params.get("title");
        String description = (String) params.get("description");
        String first_picture = (String) params.get("first_picture");
        String content = (String) params.get("content");
        List<String> tags = (List) params.get("tags");
        Long type_id = Long.parseLong(params.get("type_id").toString());
        String flag = (String) params.get("flag");
//        Boolean published = (Boolean) params.get("published");
        RespBean info = new RespBean();
        if (StringUtils.isEmpty(title)) {
            info.setStatus(500);
            info.setMsg("title 不能为空");
        }else if (StringUtils.isEmpty(description)) {
            info.setStatus(500);
            info.setMsg("description 不能为空");
        }else if (StringUtils.isEmpty(first_picture)) {
            info.setStatus(500);
            info.setMsg("first_picture 不能为空");
        }else if (StringUtils.isEmpty(content)) {
            info.setStatus(500);
            info.setMsg("content 不能为空");
        }else if (tags.size() == 0) {
            info.setStatus(500);
            info.setMsg("tags 不能为空");
        }else if (type_id == null) {
            info.setStatus(500);
            info.setMsg("type_id 不能为空");
        }else if (StringUtils.isEmpty(flag)) {
            info.setStatus(500);
            info.setMsg("flag 不能为空");
        }else {
            info.setMsg("校验成功");
            info.setStatus(200);
        }
        return info;
    }

    public static RespBean checkTemporaryBlog(HashMap<String,Object> params) {
        String title = (String) params.get("title");
        String description = (String) params.get("description");
        String first_picture = (String) params.get("first_picture");
        String content = (String) params.get("content");
        RespBean info = new RespBean();
        if (StringUtils.isEmpty(title)) {
            info.setStatus(500);
            info.setMsg("title 不能为空");
        }else if (StringUtils.isEmpty(description)) {
            info.setStatus(500);
            info.setMsg("description 不能为空");
        }else if (StringUtils.isEmpty(first_picture)) {
            info.setStatus(500);
            info.setMsg("first_picture 不能为空");
        }else if (StringUtils.isEmpty(content)) {
            info.setStatus(500);
            info.setMsg("content 不能为空");
        }
        return info;
    }
}

2、修改TBlogService

在这里插入图片描述

    //添加博客和标签
    RespBean saveBT(HashMap<String, Object> params);
    //暂时保存博客
    RespBean temporarySave(HashMap<String, Object> params);

3、修改TBlogServiceImpl

添加 saveBT方法和temporarySave方法:

   /**
     * 保存博客和标签
     * @param params
     * @return
     */
    @Override
    public RespBean saveBT(HashMap<String, Object> params) {
   		RespBean respBean = RespBean.build();
        TBlog tBlog = new TBlog();
        tBlog.setTitle((String) params.get("title"));
        tBlog.setDescription((String) params.get("description"));
        tBlog.setFirstPicture((String) params.get("first_picture"));
        tBlog.setContent((String) params.get("content"));
        tBlog.setTypeId(Long.parseLong(params.get("type_id").toString()));
        tBlog.setFlag((String) params.get("flag"));
        tBlog.setPublished(Boolean.valueOf(params.get("published").toString()));
        tBlog.setShareStatement(true); //设置状态为已发布
        //保存文章
        int result_blog = tBlogMapper.insert(tBlog);
        int result_tag = 0;
        int resule_bt = 0;
        List<String> tags = (List) params.get("tags");
        for (String tag: tags) {
            TTag tTag = new TTag();
            tTag.setName(tag);
            //保存关键词
            result_tag = tTagMapper.insert(tTag);
            TBlogTags tBlogTags = new TBlogTags();
            tBlogTags.setBlogsId(tBlog.getId());
            tBlogTags.setTagsId(tTag.getId());
            resule_bt = tBlogTagsMapper.insert(tBlogTags);
        }
        if (result_blog != 0 && result_tag != 0 && resule_bt !=0){
            respBean.setStatus(200);
            respBean.setMsg("添加成功!");
            return respBean;
        }
        respBean.setMsg("添加失败");
        return respBean;
    }

    /**
     * 暂时保存博客
     * @param params
     * @return
     */
    @Override
    public RespBean temporarySave(HashMap<String, Object> params) {
        RespBean respBean = RespBean.build();
        TBlog tBlog = new TBlog();
        tBlog.setTitle((String) params.get("title"));
        tBlog.setDescription((String) params.get("description"));
        tBlog.setFirstPicture((String) params.get("first_picture"));
        tBlog.setContent((String) params.get("content"));
        //保存文章
        int result_blog = tBlogMapper.insert(tBlog);
        if (result_blog != 0){
            respBean.setStatus(200);
            respBean.setMsg("添加成功!");
            return respBean;
        }
        respBean.setMsg("添加失败");
        return respBean;
    }

4、修改TBlogController

添加saveBlogTag方法和temporarySave方法:

   /**
     * 保存文章和标签
     * @param params
     * @return
     */
    @PostMapping("/savaBT")
    public RespBean saveBlogTag(@RequestBody HashMap<String,Object> params) {
        RespBean check = BlogForm.check(params);
        if (check.getStatus() == 500) {
            return check;
        }else {
            return tBlogService.saveBT(params);
        }
    }

    /**
     * 暂时保存博客
     * @param params
     * @return
     */
    @PostMapping("/temporarySave")
    public RespBean temporarySave(@RequestBody HashMap<String,Object> params){
        RespBean checkTemporaryBlog = BlogForm.checkTemporaryBlog(params);
        if (checkTemporaryBlog.getStatus() == 500) {
            return checkTemporaryBlog;
        }
        else {
            return tBlogService.temporarySave(params);
        }
    }

5、开启事务

1)在TBlogServiceImpl添加注解:

@Transactional(rollbackFor=Exception.class)  //开启事务

在这里插入图片描述
2)在启动类添加注解

@EnableTransactionManagement //开启事务支持

在这里插入图片描述

6、测试保存文章和标签

1)先登录
在这里插入图片描述
2)测试保存方法

  • 首先 测试 title为空时:
    在这里插入图片描述
  • 标签为空时:
    在这里插入图片描述
  • 都有数据时:
    在这里插入图片描述
  • 查看数据库
    博客表
    在这里插入图片描述
    标签表
    在这里插入图片描述
    博客标签关联表
    在这里插入图片描述
  • 暂时保存博客接口测试
    在这里插入图片描述

7、添加保存分类专栏方法

修改TTypeController

@RestController
@RequestMapping("/type")
public class TTypeController {

    @Autowired
    TTypeService tTypeService;

    RespBean respBean = RespBean.build();

    @PostMapping("/saveType")
    public RespBean saveType(@RequestBody TType tType){
        if (StringUtils.isEmpty(tType.getName())){
            respBean.setStatus(500);
            respBean.setMsg("分类专栏名称不能为空!");
            return respBean;
        }
        QueryWrapper<TType> queryWrapper = new QueryWrapper<TType>();
        queryWrapper.eq("name",tType.getName());
        List<TType> tBlogList = tTypeService.list(queryWrapper);
        if (tBlogList.size() > 0){
            respBean.setStatus(500);
            respBean.setMsg("添加失败,已有该分类专栏名称");
            return respBean;
        }
        Boolean result = tTypeService.save(tType);
        if (result){
            respBean.setStatus(200);
            respBean.setMsg("添加成功!");
            return respBean;
        }else {
            respBean.setStatus(500);
            respBean.setMsg("添加失败!");
            return respBean;
        }
        
    }

}

8、测试保存分类专栏

在这里插入图片描述
当重复添加时:
在这里插入图片描述

9、添加查询所有分类专栏方法

在TTypeController里加入:

    /**
     * 查询所有分类
     * @return
     */
    @GetMapping("/getAllType")
    public RespBean getAllType(){
        List<TType> typeList = tTypeService.list();
        return RespBean.ok("查询成功!",typeList);
    }

10、测试查询所有分类专栏

在这里插入图片描述

二、写博客功能前端

1、安装mavon-editor插件

npm install mavon-editor --save

在这里插入图片描述
在这里插入图片描述

2、然后在main.js中全局注册

在这里插入图片描述

import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
// 使用 mavonEditor
Vue.use(mavonEditor)

3、编写WriteBlog组件

在这里插入图片描述

<template>
  <div class="m_container">
   
    <!-- 博客内容 -->
    <div class="m_content">
      <el-form ref="editForm" status-icon :model="editForm" :rules="rules1"  label-width="80px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="editForm.title"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="editForm.description"></el-input>
        </el-form-item>
        <el-form-item label="首页图片" prop="first_picture">
          <el-input v-model="editForm.first_picture"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <mavon-editor v-model="editForm.content"/>
        </el-form-item>
        <el-form-item style="margin: auto;">
          <el-button type="info" @click="temporarySave()">暂时保存</el-button>
          <el-button type="primary" @click="tosubmitForm('editForm')"">发布文章</el-button>
          <!-- <el-button>取消</el-button> -->
        </el-form-item>
      </el-form>
    </div>

   <!-- 对话框内容 -->
   <el-dialog title="发布文章" :visible.sync="dialogFormVisible" width="35%">
      <el-form :model="editForm" ref="editForm2">
        <el-form-item label="文章标签"  :label-width="formLabelWidth">
          <!-- <el-input v-model="oldtags" placeholder="请选择标签,多个标签请用逗号隔开" width="80%"></el-input> -->
          <el-tag
            :key="tag"
            v-for="tag in editForm.tags"
            closable
            :disable-transitions="false"
            @close="handleClose(tag)">
            {{tag}}
          </el-tag>
          <el-input
            class="input-new-tag"
            v-if="inputVisible"
            v-model="inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm"
          >
          </el-input>
          <el-button v-else class="button-new-tag" style="margin-left: 10px;" size="small" @click="showInput">+ New Tag</el-button>
        </el-form-item>
        <el-form-item label="分类专栏" prop="type_id" :label-width="formLabelWidth"
            :rules="{
              required: true, message: '分类专栏不能为空', trigger: 'blur'
            }">
          <el-select v-model="editForm.type_id" placeholder="请选择分类专栏">
            <el-option v-for="(item,index) in getalltype" :key="item.index" :label="item.name" :value="item.id + ''"></el-option>
          </el-select>
          <el-button type="primary" size="small" @click="dialog2= true" style="margin-left: 10px;">新建分类专栏</el-button>
        </el-form-item>
        <el-form-item label="文章类型" prop="flag" :label-width="formLabelWidth"
            :rules="{
              required: true, message: '文章类型不能为空', trigger: 'blur'
            }">
          <el-select v-model="editForm.flag" placeholder="请选择文章类型,默认为原创">
            <el-option label="原创" value="原创"></el-option>
            <el-option label="转载" value="转载"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发布形式" prop="published" :label-width="formLabelWidth"
            :rules="{
              required: true, message: '发布形式不能为空', trigger: 'blur'
            }">
          <el-select v-model="editForm.published" placeholder="请选择发布形式,,默认为私密">
            <el-option label="私密" value=0></el-option>
            <el-option label="公开" value=1></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitBlog('editForm2')">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 新建分类专栏 -->
    <el-dialog
      title="新建分类专栏"
      :visible.sync="dialog2"
      width="30%"
      >
      <el-form status-icon :model="type" ref="type" :rules="rules2" label-width="120px">
        <el-form-item label="分类专栏名" prop="name">
          <el-input v-model="type.name" placeholder="请输入要新建的分类专栏名"></el-input>
        </el-form-item>
      </el-form>
       <span slot="footer" class="dialog-footer">
          <el-button @click="dialog2 = false">取 消</el-button>
          <el-button type="primary" @click="submitForm('type')">确 定</el-button>
        </span>
    </el-dialog>


  </div>
</template>
<script>
  export default {
    name: "WriteBlog",
    data() {
      return {
        editForm: {  //博客文章表单
          id: null,
          title: '',
          description: '',
          first_picture: '',
          content: '',
          type_id: '',
          flag:'',
          published: null,
          tags: [],
        },
        editForm2: {  //用来校验的表单
          type_id: null,
          flag:'',
          published: null,
        },
        oldtags:'',  //字符串类型的标签
        type:{  //分类专栏
           name:''
        },
        getalltype:[], // 所有分类专栏
        dialogFormVisible: false,  //控制发布博客对话框
        dialog2: false,  //控制新增分类专栏对话框
        rules1: {  //表单校验
          title: [
            {required: true, message: '请输入标题', trigger: 'blur'},
            {min: 3, max: 100, message: '长度在 3 到 100 个字符', trigger: 'blur'}
          ],
          description: [
            {required: true, message: '请输入摘要', trigger: 'blur'}
          ],
          first_picture: [
            {required: true, message: '请输入图片地址', trigger: 'blur'}
          ],
          content: [
            {required: true, message: '请输入文章内容', trigger: 'blur'}
          ],
        },
        rules2:{ //表单校验
          name: [
            {required: true, message: '分类专栏名不能为空', trigger: 'blur'}
          ],
        },
        formLabelWidth: '120px',  // 输入框的宽度
        inputVisible: false,
        inputValue: ''
      }
    },
    created() {
     
    },
    methods: {
      handleClose(tag) {
        this.editForm.tags.splice(this.editForm.tags.indexOf(tag), 1);
      },

      showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },

      handleInputConfirm() {
        let inputValue = this.inputValue;
        if (inputValue) {
          this.editForm.tags.push(inputValue);
        }
        this.inputVisible = false;
        this.inputValue = '';
      },
      //去发布文章
      toSubmit() {
        this.dialogFormVisible = true
        this.initType()
      },
      //初始化文章专栏
      initType(){
        const _this = this
        this.getRequest('/type/getAllType').then(resp=>{
          console.log(resp)
          _this.getalltype = resp.obj
        })
      },
      //添加新的分类专栏
      addNewType(){
        const _this = this 
        this.postRequest('/type/saveType',this.type).then(resp=>{
          if(resp){
            _this.type.name = ''
            this.initType()
            _this.dialog2 = false
          }
        })
      },
      //校验添加分类专栏表单
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.addNewType()
          } else {
            return false;
          }
        });
      },
      //校验博客基本内容表单
      tosubmitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.toSubmit()
          } else {
            return false;
          }
        });
      },
      //校验发布博客表单,校验成功后发布博客
      submitBlog(formName) {
        const _this = this
        this.$refs[formName].validate((valid) => {
          if (valid) {
            //发布博客
            this.postRequest('/blog/savaBT',this.editForm).then(resp=>{
              if(resp){
                _this.dialogFormVisible = false
                alert("发布成功,点击确定跳转到博客列表页面!")
                _this.$router.push('/admin/allblogs')
              }
            })
          } else {
            return false;
          }
        });
      },
      //暂时保存博客
      temporarySave(){
        const _this = this
        console.log( this.editForm)
        this.postRequest('/blog/temporarySave',this.editForm).then(resp=>{
          if(resp){
            this.$message('已成功保存草稿成功');
          }
        })
      }
    }
  }
</script>

<style>
  .m_container{
    margin-top: 20px;
  }
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>


4、效果展示

  • 暂时保存博客
    在这里插入图片描述

在这里插入图片描述
添加成功后跳转到博客列表:
在这里插入图片描述

  • 测试发布博客
    在这里插入图片描述
    弹出发布文章对话框:
    在这里插入图片描述
    下拉选择:
    在这里插入图片描述
    如果没有想要的分类,可以先新建文章分类专栏:
    在这里插入图片描述
    然后再选择:
    在这里插入图片描述
    选择完成后,点击确定发布博客,发布后跳转到文章列表:
    在这里插入图片描述

三、查询 编辑 删除 博客后端接口

1、在TBlogMapper新增

根据id查找博客,需要自定义,加入如下代码:
在这里插入图片描述

    //根据id查找博客
    TBlog getByBlogId(@Param("id") String id);

2、修改TBlogMapper.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.TBlogMapper">

	<!--自定义Map-->
    <resultMap id="MyBlogMap" type="com.xlblog.blog.entity.TBlog">
        <id column="id" property="id"/>
        <result column="title" property="title"/>
        <result column="description" property="description"/>
        <result column="first_picture" property="firstPicture"/>
        <result column="content" property="content"/>
        <result column="flag" property="flag"/>
        <result column="published" property="published"/>
        <result column="share_statement" property="shareStatement"/>
        <result column="views" property="views"/>
        <result column="type_id" property="typeId"/>
        <result column="user_id" property="userId"/>
        <result column="comment_count" property="commentCount"/>
        <result column="create_time" property="createTime"/>
        <result column="update_time" property="updateTime"/>
        <result column="is_delete" property="isDelete"/>
        <collection column="t_blog_tags" property="tBlogTags" ofType="com.xlblog.blog.entity.TBlogTags">
            <result column="blogsId" property="blogsId"/>
            <association property="tTag" javaType="com.xlblog.blog.entity.TTag">
                <id column="id" property="id"/>
                <result column="name" property="name"/>
            </association>
        </collection>
    </resultMap>
    
 	<!--根据id查找博客并使用自定义映射文件-->
    <select id="getByBlogId" resultMap="MyBlogMap">
        select * from t_blog_tags bt
          left join t_blog b on bt.blogs_id = b.id
          left join t_tag t on bt.tags_id = t.id
        where blogs_id = #{id}
    </select>
    
</mapper>

3、在TBlogService新增

    //更新博客
    RespBean updateBlog(HashMap<String,Object> params);
    //删除博客(逻辑删除)
    RespBean logicDeleteBlog(String id);
    //删除博客和标签(彻底删除)
    RespBean deleteBT(String id);
    //还原博客
    RespBean recoveryBlog(String id);
    //根据博客id查询
    RespBean getByBlogId(String id);

4、在TBlogServiceImpl新增

   /**
     * 更新文章
     * @param params
     * @return
     */
    @Override
    public RespBean updateBlog(HashMap<String, Object> params) {
        RespBean respBean = RespBean.build();
        //根据id查询文章
        TBlog tBlog = tBlogMapper.selectById(Long.parseLong(params.get("id").toString()));
        tBlog.setTitle((String) params.get("title"));
        tBlog.setDescription((String) params.get("description"));
        tBlog.setFirstPicture((String) params.get("first_picture"));
        tBlog.setContent((String) params.get("content"));
        tBlog.setTypeId(Long.parseLong(params.get("type_id").toString()));
        tBlog.setFlag((String) params.get("flag"));
        tBlog.setPublished(Boolean.valueOf(params.get("published").toString()));
        tBlog.setUpdateTime(LocalDateTime.now());

        //更新文章
        int result_blog = tBlogMapper.updateById(tBlog);
        int result_tag = 0;
        int resule_bt = 0;
        //先删除与这篇文章相关的标签和中间表记录
        QueryWrapper<TBlogTags> queryWrapper1 = new QueryWrapper<TBlogTags>();
        queryWrapper1.eq("blogs_id",tBlog.getId());
        List<TBlogTags> blogTagsList =  tBlogTagsMapper.selectList(queryWrapper1);
        for (TBlogTags bt : blogTagsList) {
            //先删除标签表的数据
            tTagMapper.deleteById(bt.getTagsId());
            //再删除博客标签关联表的数据
            QueryWrapper<TBlogTags> queryWrapper = new QueryWrapper<TBlogTags>();
            queryWrapper.eq("tags_id",bt.getTagsId());
            //再删除博客标签关联表的数据
            tBlogTagsMapper.delete(queryWrapper);
        }
        //然后再重新添加标签
        List<String> tags = (List) params.get("tags");
        for (String tag : tags) {
            //保存标签
            TTag tTag = new TTag();
            tTag.setName(tag);
            result_tag = tTagMapper.insert(tTag);
            //保存中间表记录
            TBlogTags tBlogTags = new TBlogTags();
            tBlogTags.setBlogsId(tBlog.getId());
            tBlogTags.setTagsId(tTag.getId());
            resule_bt = tBlogTagsMapper.insert(tBlogTags);
        }
        if (result_blog != 0 && result_tag != 0 && resule_bt !=0){
            respBean.setStatus(200);
            respBean.setMsg("更新博客成功!");
            return respBean;
        }
        respBean.setMsg("更新博客失败");
        return respBean;
    }

    /**
     * 逻辑删除博客
     * @param id
     * @return
     */
    @Override
    public RespBean logicDeleteBlog(String id) {
        RespBean respBean = RespBean.build();
        TBlog tBlog = tBlogMapper.selectById(id);
        if (tBlog != null){
            tBlog.setIsDelete(true);
            tBlog.setUpdateTime(LocalDateTime.now());
            tBlogMapper.updateById(tBlog);
            respBean.setStatus(200);
            respBean.setMsg("删除博客成功!");
            return respBean;
        }else {
            respBean.setStatus(500);
            respBean.setMsg("删除博客失败");
            return respBean;
        }
    }

    /**
     * 删除博客和标签(彻底删除)
     * @param id
     * @return
     */
    @Override
    public RespBean deleteBT(String id) {
        RespBean respBean = RespBean.build();
        TBlog tBlog = tBlogMapper.selectById(id);
        //删除与这篇文章相关的标签和中间表记录
        QueryWrapper<TBlogTags> queryWrapper1 = new QueryWrapper<TBlogTags>();
        queryWrapper1.eq("blogs_id",tBlog.getId());
        List<TBlogTags> blogTagsList =  tBlogTagsMapper.selectList(queryWrapper1);
        int r_tag = 0;
        int r_blog_tag = 0;
        for (TBlogTags bt : blogTagsList) {
            //先删除标签表的数据
            r_tag = tTagMapper.deleteById(bt.getTagsId());
            //再删除博客标签关联表的数据
            QueryWrapper<TBlogTags> queryWrapper = new QueryWrapper<TBlogTags>();
            queryWrapper.eq("tags_id",bt.getTagsId());
            //再删除博客标签关联表的数据
            r_blog_tag = tBlogTagsMapper.delete(queryWrapper);
        }
        //删除博客文章
        int r_blog = tBlogMapper.deleteById(id);
        if (r_tag != 0 && r_blog_tag!= 0 && r_blog!= 0){
            respBean.setStatus(200);
            respBean.setMsg("删除博客和标签成功");
            return respBean;
        }else {
            respBean.setStatus(500);
            respBean.setMsg("删除博客和标签失败");
            return respBean;
        }

    }

    /**
     * 还原删除的博客
     * @param id
     * @return
     */
    @Override
    public RespBean recoveryBlog(String id) {
        RespBean respBean = RespBean.build();
        TBlog tBlog = tBlogMapper.selectById(id);
        if (tBlog != null){
            tBlog.setIsDelete(false);
            tBlog.setUpdateTime(LocalDateTime.now());
            tBlogMapper.updateById(tBlog);
            respBean.setStatus(200);
            respBean.setMsg("还原博客成功!");
            return respBean;
        }else {
            respBean.setStatus(500);
            respBean.setMsg("还原博客失败");
            return respBean;
        }
    }

    /**
     * 根据id查找博客
     * @param id
     * @return
     */
    @Override
    public RespBean getByBlogId(String id) {
        RespBean respBean = RespBean.build();
        respBean.setStatus(200);
        respBean.setObj(tBlogMapper.getByBlogId(id));
        return respBean;
    }

5、在TBlogController新增

   /**
     * 更新博客和标签
     * @param params
     * @return
     */
    @PutMapping("/updateBlog")
    public RespBean updateBlog(@RequestBody HashMap<String,Object> params){
        RespBean checkUpdateBlog = BlogForm.check(params);
        if (checkUpdateBlog.getStatus() == 500) {
            return checkUpdateBlog;
        }
        else {
            return tBlogService.updateBlog(params);
        }
    }

    /**
     * 逻辑删除
     * @param id
     * @return
     */
    @DeleteMapping("/logicDeleteBlog")
    public RespBean logicDeleteBlog(String id){
        TBlog tBlog = tBlogService.getById(id);
        if (tBlog != null){
            return tBlogService.logicDeleteBlog(id);
        }else {
            respBean.setStatus(500);
            respBean.setMsg("没有数据");
            return respBean;
        }
    }

    /**
     * 删除博客和对应标签
     * @param id
     * @return
     */
    @DeleteMapping("/deleteBlog")
    public RespBean deleteBlog(String id){
        TBlog tBlog = tBlogService.getById(id);
        if (tBlog != null){
            return tBlogService.deleteBT(id);
        }else {
            respBean.setStatus(500);
            respBean.setMsg("没有数据");
            return respBean;
        }
    }

    /**
     * 还原删除的博客
     * @param id
     * @return
     */
    @GetMapping("/recoveryBlog")
    public RespBean recoveryBlog(String id){
        return tBlogService.recoveryBlog(id);
    }

    /**
     * 根据id查找博客
     * @param id
     * @return
     */
    @GetMapping("/getByBlogId")
    public RespBean getByBlogId(String id){
        respBean.setStatus(200);
        respBean.setMsg("查询成功");
        respBean.setObj(tBlogService.getById(id));
        return respBean;
    }

6、测试

更新
在这里插入图片描述

删除(逻辑删除)

7、修改实体类

将TBlog、TBlogTags、TTag、TType实体类中所有Long类型的字段加上下面的注解:

 @JsonSerialize(using = ToStringSerializer.class)

解析:后端向前端传递Long类型数据,会导致数据不一致,原因是Long类型太长,而Java序列化JSON会丢失精度。所以得加上@ToStringSerializer注解,让系统序列化时,保留相关精度。

在这里插入图片描述

四、编辑博客和删除博客前端

1、新建EditBlog.vue组件

在这里插入图片描述

<template>
    <div class="m_container">
     
      <!-- 博客内容 -->
      <div class="m_content">
        <el-form ref="editForm" status-icon :model="editForm" :rules="rules1"  label-width="80px">
          <el-form-item label="标题" prop="title">
            <el-input v-model="editForm.title"></el-input>
          </el-form-item>
          <el-form-item label="描述" prop="description">
            <el-input v-model="editForm.description"></el-input>
          </el-form-item>
          <el-form-item label="首页图片" prop="first_picture">
            <el-input v-model="editForm.first_picture"></el-input>
          </el-form-item>

          <el-form-item label="文章标签">
            <!-- <el-input v-model="oldtags" placeholder="请选择标签,多个标签请用逗号隔开" width="80%"></el-input> -->
            <el-tag
              :key="index"
              v-for="(tag,index) in editForm.tags"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)">
              {{tag}}
            </el-tag>
            <el-input
              style="width: 30%;margin-left: 10px;"
              v-if="inputVisible"
              v-model="inputValue"
              ref="saveTagInput"
              size="small"
              @keyup.enter.native="handleInputConfirm"
              @blur="handleInputConfirm"
            >
            </el-input>
            <el-button v-else class="button-new-tag" style="margin-left: 10px;" size="small" @click="showInput">+ New Tag</el-button>
          </el-form-item>

          <el-form-item label="分类专栏" prop="type_id">
            <el-select v-model="editForm.type_id" placeholder="请选择分类专栏">
              <el-option v-for="(item,index) in getalltype" :key="item.index" :label="item.name" :value="item.id + ''"></el-option>
            </el-select>
            <el-button type="primary" size="small" @click="dialog2= true" style="margin-left: 10px;">新建分类专栏</el-button>
          </el-form-item>
          <el-form-item label="文章类型" prop="flag">
            <el-select v-model="editForm.flag" placeholder="请选择文章类型,默认为原创">
              <el-option label="原创" value="原创"></el-option>
              <el-option label="转载" value="转载"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="发布形式" prop="published">
            <el-select v-model="editForm.published" placeholder="请选择发布形式,默认为私密">
              <el-option label="私密" value="false"></el-option>
              <el-option label="公开" value="true"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="内容" prop="content">
            <mavon-editor v-model="editForm.content"/>
          </el-form-item>
          <el-form-item style="margin: auto;">
            <el-button type="primary" @click="submitForm('editForm')"">保存发布</el-button>
            <router-link to="/admin/allblogs">
              <el-button style="margin-left: 10px;">返回</el-button>
            </router-link>
          </el-form-item>
        </el-form>
      </div>
  
  
      <!-- 新建分类专栏 -->
      <el-dialog
        title="新建分类专栏"
        :visible.sync="dialog2"
        width="30%"
        >
        <el-form status-icon :model="type" ref="type" :rules="rules2" label-width="120px">
          <el-form-item label="分类专栏名" prop="name">
            <el-input v-model="type.name" placeholder="请输入要新建的分类专栏名"></el-input>
          </el-form-item>
        </el-form>
         <span slot="footer" class="dialog-footer">
            <el-button @click="dialog2 = false">取 消</el-button>
            <el-button type="primary" @click="submitForm('type')">确 定</el-button>
          </span>
      </el-dialog>
  
  
    </div>
  </template>
  <script>
    export default {
      name: "EditBlog",
      data() {
        return {
          // id:'',
          editForm: {  //博客文章表单
            id: null,
            title: '',
            description: '',
            first_picture: '',
            content: '',
            type_id: '',
            flag:'',
            published: null,
            tags:null,
          },
          oldtags:'',  //字符串类型的标签
          type:{  //分类专栏
             name:''
          },
          getalltype:[], // 所有分类专栏
          dialogFormVisible: false,  //控制发布博客对话框
          dialog2: false,  //控制新增分类专栏对话框
          rules1: {  //表单校验
            title: [
              {required: true, message: '请输入标题', trigger: 'blur'},
              {min: 3, max: 100, message: '长度在 3 到 100 个字符', trigger: 'blur'}
            ],
            description: [
              {required: true, message: '请输入摘要', trigger: 'blur'}
            ],
            first_picture: [
              {required: true, message: '请输入图片地址', trigger: 'blur'}
            ],
            content: [
              {required: true, message: '请输入文章内容', trigger: 'blur'}
            ],
            type_id: [
              {required: true, message: '分类专栏不能为空', trigger: 'blur'}
            ],
            flag: [
              {required: true, message: '文章类型不能为空', trigger: 'blur'}
            ],
            published: [
              {required: true, message: '发布形式不能为空', trigger: 'blur'}
            ],
          },
          rules2:{ //表单校验
            name: [
              {required: true, message: '分类专栏名不能为空', trigger: 'blur'}
            ],
          },
          formLabelWidth: '120px' , // 输入框的宽度
          inputVisible: false,
          inputValue: '',
          btags: null,
          tblogTags: [],
        }
      },
      props:['id'],
      mounted() {
        this.initBlog()
        this.initType()
      },
      methods: {
        handleClose(tag) {
          this.editForm.tblogTags.splice(this.editForm.tblogTags.indexOf(tag), 1);
        },

        showInput() {
          this.inputVisible = true;
          this.$nextTick(_ => {
            this.$refs.saveTagInput.$refs.input.focus();
          });
        },

        handleInputConfirm() {
          let inputValue = this.inputValue;
          if (inputValue) {
            this.editForm.tags.push(inputValue);
          }
          this.inputVisible = false;
          this.inputValue = '';
        },
        //初始化博客数据
        initBlog(){
          const _this = this
          console.log(this.id)
          this.getRequest('/blog/getByBlogId?id=' + this.id).then(resp=>{
              console.log(resp.obj)
              _this.editForm = resp.obj
              _this.editForm.published = resp.obj.published = true ? "公开":"私密"
              _this.editForm.type_id = resp.obj.typeId + ''
              _this.editForm.first_picture = resp.obj.firstPicture

              _this.btags = resp.obj.tblogTags
              _this.btags.forEach(element => {
                  _this.tblogTags.push(element.ttag.name + '');                
              });
              _this.editForm.tags = _this.tblogTags
              console.log(_this.editForm.tags)

              // _this.editForm.tblogTags = resp.obj.tblogTags
              
              
          })
        },
        //初始化文章专栏
        initType(){
          const _this = this
          this.getRequest('/type/getAllType').then(resp=>{
            console.log(resp)
            _this.getalltype = resp.obj
          })
        },
        //添加新的分类专栏
        addNewType(){
          const _this = this 
          this.postRequest('/type/saveType',this.type).then(resp=>{
            if(resp){
              _this.type.name = ''
              this.initType()
              _this.dialog2 = false
            }
          })
        },
        //校验添加分类专栏表单
        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              this.addNewType()
            } else {
              return false;
            }
          });
        },
        //校验博客基本内容表单
        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              //发布博客
                this.putRequest('/blog/updateBlog',this.editForm).then(resp=>{
                    if(resp){
                      alert("更新成功,点击确定跳转到博客列表页面!")
                      _this.$router.push('/admin/allblogs')
                    }
                })
            } else {
              return false;
            }
          });
        },

      }
    }
  </script>
  
  <style>
    .m_container{
      margin-top: 20px;
    }
  </style>
  

2、配置路由

在这里插入图片描述

<template>
    <div class="m_container">
     
      <!-- 博客内容 -->
      <div class="m_content">
        <el-form ref="editForm" status-icon :model="editForm" :rules="rules1"  label-width="80px">
          <el-form-item label="标题" prop="title">
            <el-input v-model="editForm.title"></el-input>
          </el-form-item>
          <el-form-item label="描述" prop="description">
            <el-input v-model="editForm.description"></el-input>
          </el-form-item>
          <el-form-item label="首页图片" prop="first_picture">
            <el-input v-model="editForm.first_picture"></el-input>
          </el-form-item>

          <el-form-item label="文章标签">
            <!-- <el-input v-model="oldtags" placeholder="请选择标签,多个标签请用逗号隔开" width="80%"></el-input> -->
            <el-tag
              :key="index"
              v-for="(tag,index) in editForm.tags"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)">
              {{tag}}
            </el-tag>
            <el-input
              style="width: 30%;margin-left: 10px;"
              v-if="inputVisible"
              v-model="inputValue"
              ref="saveTagInput"
              size="small"
              @keyup.enter.native="handleInputConfirm"
              @blur="handleInputConfirm"
            >
            </el-input>
            <el-button v-else class="button-new-tag" style="margin-left: 10px;" size="small" @click="showInput">+ New Tag</el-button>
          </el-form-item>

          <el-form-item label="分类专栏" prop="type_id">
            <el-select v-model="editForm.type_id" placeholder="请选择分类专栏">
              <el-option v-for="(item,index) in getalltype" :key="item.index" :label="item.name" :value="item.id + ''"></el-option>
            </el-select>
            <el-button type="primary" size="small" @click="dialog2= true" style="margin-left: 10px;">新建分类专栏</el-button>
          </el-form-item>
          <el-form-item label="文章类型" prop="flag">
            <el-select v-model="editForm.flag" placeholder="请选择文章类型,默认为原创">
              <el-option label="原创" value="原创"></el-option>
              <el-option label="转载" value="转载"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="发布形式" prop="published">
            <el-select v-model="editForm.published" placeholder="请选择发布形式,默认为私密">
              <el-option label="私密" value="false"></el-option>
              <el-option label="公开" value="true"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="内容" prop="content">
            <mavon-editor v-model="editForm.content"/>
          </el-form-item>
          <el-form-item style="margin: auto;">
            <el-button type="primary" @click="submitForm('editForm')"">保存发布</el-button>
            <el-button>返回</el-button>
          </el-form-item>
        </el-form>
      </div>
  
  
      <!-- 新建分类专栏 -->
      <el-dialog
        title="新建分类专栏"
        :visible.sync="dialog2"
        width="30%"
        >
        <el-form status-icon :model="type" ref="type" :rules="rules2" label-width="120px">
          <el-form-item label="分类专栏名" prop="name">
            <el-input v-model="type.name" placeholder="请输入要新建的分类专栏名"></el-input>
          </el-form-item>
        </el-form>
         <span slot="footer" class="dialog-footer">
            <el-button @click="dialog2 = false">取 消</el-button>
            <el-button type="primary" @click="submitForm('type')">确 定</el-button>
          </span>
      </el-dialog>
  
  
    </div>
  </template>
  <script>
    export default {
      name: "EditBlog",
      data() {
        return {
          // id:'',
          editForm: {  //博客文章表单
            id: null,
            title: '',
            description: '',
            first_picture: '',
            content: '',
            type_id: '',
            flag:'',
            published: null,
            tags:null,
          },
          oldtags:'',  //字符串类型的标签
          type:{  //分类专栏
             name:''
          },
          getalltype:[], // 所有分类专栏
          dialogFormVisible: false,  //控制发布博客对话框
          dialog2: false,  //控制新增分类专栏对话框
          rules1: {  //表单校验
            title: [
              {required: true, message: '请输入标题', trigger: 'blur'},
              {min: 3, max: 100, message: '长度在 3 到 100 个字符', trigger: 'blur'}
            ],
            description: [
              {required: true, message: '请输入摘要', trigger: 'blur'}
            ],
            first_picture: [
              {required: true, message: '请输入图片地址', trigger: 'blur'}
            ],
            content: [
              {required: true, message: '请输入文章内容', trigger: 'blur'}
            ],
            type_id: [
              {required: true, message: '分类专栏不能为空', trigger: 'blur'}
            ],
            flag: [
              {required: true, message: '文章类型不能为空', trigger: 'blur'}
            ],
            published: [
              {required: true, message: '发布形式不能为空', trigger: 'blur'}
            ],
          },
          rules2:{ //表单校验
            name: [
              {required: true, message: '分类专栏名不能为空', trigger: 'blur'}
            ],
          },
          formLabelWidth: '120px' , // 输入框的宽度
          inputVisible: false,
          inputValue: '',
          btags: null,
          tblogTags: [],
        }
      },
      props:['id'],
      mounted() {
        this.initBlog()
        this.initType()
      },
      methods: {
        handleClose(tag) {
          this.editForm.tblogTags.splice(this.editForm.tblogTags.indexOf(tag), 1);
        },

        showInput() {
          this.inputVisible = true;
          this.$nextTick(_ => {
            this.$refs.saveTagInput.$refs.input.focus();
          });
        },

        handleInputConfirm() {
          let inputValue = this.inputValue;
          if (inputValue) {
            this.editForm.tags.push(inputValue);
          }
          this.inputVisible = false;
          this.inputValue = '';
        },
        //初始化博客数据
        initBlog(){
          const _this = this
          console.log(this.id)
          this.getRequest('/blog/getByBlogId?id=' + this.id).then(resp=>{
              console.log(resp.obj)
              _this.editForm = resp.obj
              _this.editForm.published = resp.obj.published = true ? "公开":"私密"
              _this.editForm.type_id = resp.obj.typeId + ''
              _this.editForm.first_picture = resp.obj.firstPicture

              _this.btags = resp.obj.tblogTags
              _this.btags.forEach(element => {
                  _this.tblogTags.push(element.ttag.name + '');                
              });
              _this.editForm.tags = _this.tblogTags
              console.log(_this.editForm.tags)

              // _this.editForm.tblogTags = resp.obj.tblogTags
              
              
          })
        },
        //初始化文章专栏
        initType(){
          const _this = this
          this.getRequest('/type/getAllType').then(resp=>{
            console.log(resp)
            _this.getalltype = resp.obj
          })
        },
        //添加新的分类专栏
        addNewType(){
          const _this = this 
          this.postRequest('/type/saveType',this.type).then(resp=>{
            if(resp){
              _this.type.name = ''
              this.initType()
              _this.dialog2 = false
            }
          })
        },
        //校验添加分类专栏表单
        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              this.addNewType()
            } else {
              return false;
            }
          });
        },
        //校验博客基本内容表单
        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              //发布博客
                this.putRequest('/blog/updateBlog',this.editForm).then(resp=>{
                    if(resp){
                      alert("更新成功,点击确定跳转到博客列表页面!")
                      _this.$router.push('/admin/allblogs')
                    }
                })
            } else {
              return false;
            }
          });
        },

      }
    }
  </script>
  
  <style>
    .m_container{
      margin-top: 20px;
    }
  </style>
  

3、修改home.vue

在这里插入图片描述

v-if="!child.hidden"

4、修改BlogListCom.vue

<template>
  <div>
        <!-- 博客文章 -->
        <el-table
            :data="blogsData"
            stripe
            style="width: 100%">
            <el-table-column label="文章列表">
            <template slot-scope="scope">
                <el-card  class="box-card">
                <div style="font-size: 18px;">
                    <!-- v-if="!scope.row.shareStatement" 这里根据shareStatement属性判断文章是否为草稿 -->
                    <el-button size="mini" v-if="!scope.row.shareStatement" type="info" icon="el-icon-edit" circle></el-button>
                    {{scope.row.title}}
                </div>
                <div style="margin-top: 10px;">

                    <el-tag size="small" style="margin-right: 10px;"  v-if="scope.row.isDelete" type="danger">已删除</el-tag>
                    <el-tag size="small" style="margin-right: 10px;"  v-if="!scope.row.shareStatement" type="warning">草稿</el-tag>
                    <el-tag style="margin-right: 10px;" v-if="scope.row.shareStatement" size="small">{{scope.row.flag}}</el-tag>
                    <el-tag style="margin-right: 20px;" v-if="scope.row.shareStatement" size="small" type="info">{{scope.row.published == '0' ? '私密' : '公开'}}</el-tag>
                    <!-- <el-tag style="margin-right: 20px;" v-if="scope.row.shareStatement" size="small" type="success">{{scope.row.typeId}}</el-tag> -->
                    <i style="margin-right: 20px;" class="el-icon-view"> {{scope.row.views}} </i>
                    <i style="margin-right: 20px;" class="el-icon-chat-square"> {{scope.row.commentCount}} </i>
                    <i style="margin-right: 20px;" class="el-icon-date"> {{scope.row.createTime}}</i>
                    
                    <el-button v-if="!scope.row.isDelete" style="float: right;" type="danger" size="mini" @click="logicDeleteBlog(scope.row.id)">删除</el-button>
                    <router-link :to=" '/admin/editblog/' + scope.row.id ">
                      <el-button v-if="!scope.row.isDelete" style="float: right; margin-right: 10px;" type="primary" size="mini">编辑</el-button>
                    </router-link>
                    <el-button v-if="scope.row.isDelete" style="float: right;" type="danger" size="mini" @click="deleteBlog(scope.row.id)">删除</el-button>
                    <el-button v-if="scope.row.isDelete" style="float: right; margin-right: 10px;" @click="recoveryBlog(scope.row.id)" type="primary" size="mini">还原</el-button>
                   
                
                </div>

                </el-card>
            </template>
                
            </el-table-column>
        </el-table>

       <!-- 分页 -->
       <div style="margin-top: 20px;">
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="pagesizes"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
              </el-pagination>
       </div>
 
  </div>
</template>

<script>
export default {
  name: 'BlogListCom',
  data () {
   return {
    blogsData: [], //文章数据
    currentPage: 1,  //当前页
    total:0, //总记录数
    pagesize:10, //页面大小
    pagesizes:[10,20,30], //页面数组
    t2index:0, //选项卡index
   }
  },
  props:["tindex"],
  mounted() {
    this.initIndex();
    this.initBlogs(); // 调用初始化博客数据
    
  },
  
  methods:{
    //删除博客(逻辑删除)
    logicDeleteBlog(id){
      const _this = this
      this.$confirm('此操作将删除该文章, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteRequest('/blog/logicDeleteBlog?id=' + id).then(resp=>{
            alert("删除成功!")
            location.reload(true); // 刷新当前页面
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    //彻底删除博客
    deleteBlog(id){
      const _this = this
      this.$confirm('此操作将彻底删除该文章, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteRequest('/blog/deleteBlog?id=' + id).then(resp=>{
            alert("删除成功!")
            location.reload(true); // 刷新当前页面
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    //还原博客
    recoveryBlog(id){
      const _this = this
      this.$confirm('确定要还原该博客吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.getRequest('/blog/recoveryBlog?id=' + id).then(resp=>{
            alert("还原成功!")
            location.reload(true); // 刷新当前页面
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消还原'
          });          
        });
    },
    //组件的index
    initIndex(){
        this.t2index = this.tindex  //保存父组件传过来的值
    },
    // 初始化【全部】博客的数据
    initBlogs(){
      const _this = this
      // 通用路由
      var baseurl = '/blog/getByPage?current=' + this.currentPage + '&size=' + this.pagesize
      //通过条件拼接路由
      if(this.t2index == "0"){ //全部
        baseurl +=' &is_delete=0'
      }
      if(this.t2index == "1"){ //原创
        baseurl +=' &flag=原创 &share_statement=1  &is_delete=0'
      }
      if(this.t2index == "2"){ //转载
        baseurl +=' &flag=转载 &share_statement=1  &is_delete=0'
      }
      if(this.t2index == "3"){  //草稿
        baseurl +=' &share_statement=0  &is_delete=0'
      }
      if(this.t2index == "4"){ //公开
        baseurl +=' &published=1 &share_statement=1  &is_delete=0'
      }
      if(this.t2index == "5"){ //私密
        baseurl +=' &published=0 &share_statement=1 &is_delete=0'
      }
      if(this.t2index == "6"){ //回收站
        baseurl +=' &is_delete=1 &share_statement=1  &is_delete=0'
      }
      // console.log(baseurl)
      this.getRequest(baseurl).then(resp=>{
        console.log(baseurl)
        if(resp){
          console.log(resp)
          _this.blogsData = resp.obj.records  //将获取到的后端的值赋值给blogsData
          _this.total = resp.obj.total   // 保存一下总记录数,用于前端展示
        }
      })
    },
    // 分页的当前页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val
      this.initBlogs()
    },
    //每页多少条
    handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pagesize = val
        this.initBlogs()
    },
 
  }
}
</script>

<style scoped>

</style>

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

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

<div style=&quot;color:#444444;&quot;> 适用人群 <p style=&quot;color:#666666;&quot;> 所有的IT从业者,尤其适合快速掌握新技术,快速增长工作经验人群,对教育公平,教育公益,教育爱心公益人士 </p> </div> <p> </p> 课程概述 <p> 该互联网实战项目是基于&nbsp;Spring&nbsp;Boot&nbsp;2+&nbsp;SpringSecurity5+Element&nbsp;UI+Vue&nbsp;Admin&nbsp;Template+蚂蚁可视化AntV&nbsp;等技术栈开发的项目,采用分布式,多模块,前后端分离开发。包括图形展示、权限管理、用户管理等功能。<br /> 【后端技术】<br /> 技术 说明<br /> Spring&nbsp;Boot2 MVC框架&nbsp;开发的一站式解决方案<br /> Spring&nbsp;Security5&nbsp; 认证和授权框架<br /> MyBatisPlus3.3.1&nbsp; 基于&nbsp;MyBatis&nbsp;框架的快速研发框架<br /> MyBatisCode工具 生成&nbsp;MyBatis&nbsp;相关代码<br /> Jackson 提供了处理&nbsp;JSON&nbsp;数据的工具<br /> Lombok 简化对象封装工具&nbsp;<br /> Druid&nbsp;&nbsp;&nbsp;数据库连接池&nbsp;<br /> 【前端技术】<br /> Vue &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;互联网最火的前端框架<br /> Vue&nbsp;Router 路由框架<br /> Vuex 全局状态管理框架<br /> Axios 前端&nbsp;HTTP&nbsp;框架<br /> Element&nbsp;UI 前端&nbsp;UI&nbsp;框架<br /> Vue&nbsp;Element&nbsp;Admin 前端模板<br /> Antv&nbsp;&nbsp;蚂蚁金服可视化技术,阿里巴巴可视化技术,天猫,淘宝,支付宝,花呗均使用AntV<br /> 【开发工具】<br /> IntelliJ&nbsp;IDEA 开发&nbsp;IDE<br /> SQLyog 数据库连接客户端<br /> Postman HTTP&nbsp;请求工具<br /> 【开发环境】<br /> 工具 版本<br /> JDK 1.8 </p> <p> MySQL 5.7 </p> <p> <img src=&quot;https://img-bss.csdn.net/202004100922276928.png&quot; alt=&quot;&quot; /><img src=&quot;https://img-bss.csdn.net/202004100922434479.png&quot; alt=&quot;&quot; /><img src=&quot;https://img-bss.csdn.net/202004100922566924.png&quot; alt=&quot;&quot; /><img src=&quot;https://img-bss.csdn.net/202004100923062693.png&quot; alt=&quot;&quot; /></p> <p> <br /></p> <p> <br /></p>
©️2021 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值