SpringBoot+Vue+Mybatis-plus 博客（三）：完成搜索及博客列表展示功能前后端

最新推荐文章于 2023-06-16 20:27:53 发布
最新推荐文章于 2023-06-16 20:27:53 发布
阅读量2.3k 收藏 6
点赞数 6
分类专栏： 小L星光博客
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_45234510/article/details/110932322
版权

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、在AllBlogs添加标签页

先看效果：
在这里插入图片描述
开始实现：

https://element.eleme.cn/#/zh-CN/component/tabs
在这里插入图片描述
在这里插入图片描述

<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="全部（120）" name="first">全部（120）</el-tab-pane>
      <el-tab-pane label="原创（20）" name="second">原创（20）</el-tab-pane>
      <el-tab-pane label="转载（20）" name="third">转载（20）</el-tab-pane>
      <el-tab-pane label="草稿（20）" name="fourth">草稿（20）</el-tab-pane>
      <el-tab-pane label="公开（50）" name="fifth">公开（50）</el-tab-pane>
      <el-tab-pane label="私密（10）" name="sixth">私密（10）</el-tab-pane>
      <el-tab-pane label="回收站（20）" name="serven">回收站（20）</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: 'AllBlogs',
  data () {
   return {
    activeName: 'second'
   }
  },
  methods:{
    handleClick(tab, event) {
        console.log(tab.index);
    }
  }
}
</script>

<style scoped>

</style>

2、【全部】文章展示页面

在这里插入图片描述
AllBlogs.vue

<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick" style="margin-top: 10px;">
      <el-tab-pane label="全部（120）" name="first">
         <!-- 搜索 -->
        <el-input size="small" v-model="input_title" placeholder="请输入标题，可回车搜索..." prefix-icon="el-icon-search"
        style="width: 400px;margin-right: 10px;"></el-input>
        <el-button size="small" type="primary" icon="el-icon-search">搜索</el-button>
        <el-button size="small" type="primary">高级搜索</el-button>

        <!-- 博客文章 -->
        <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.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: 10px;" v-if="scope.row.shareStatement" size="small" type="info">{{scope.row.published}}</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 style="float: right;" type="danger" size="mini">删除</el-button>
                <el-button style="float: right; margin-right: 10px;" 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>

      </el-tab-pane>

      <el-tab-pane label="原创（20）" name="second">原创（20）</el-tab-pane>
      <el-tab-pane label="转载（20）" name="third">转载（20）</el-tab-pane>
      <el-tab-pane label="草稿（20）" name="fourth">草稿（20）</el-tab-pane>
      <el-tab-pane label="公开（50）" name="fifth">公开（50）</el-tab-pane>
      <el-tab-pane label="私密（10）" name="sixth">私密（10）</el-tab-pane>
      <el-tab-pane label="回收站（20）" name="serven">回收站（20）</el-tab-pane>
    </el-tabs>

    
 
  </div>
</template>

<script>
export default {
  name: 'AllBlogs',
  data () {
   return {
    activeName: 'first',
    input_title: '', //输入框的值
    blogsData: [{   //文章数据
        title: '用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作',
        flag: '原创',
        published:'公开',
        createTime:'2020年12月07日 12:00:00',
        views:'999',
        commentCount:'99',
        typeId:'springboot学习',
        shareStatement:false,
      }, {
        title: '用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作',
        flag: '原创',
        published:'公开',
        createTime:'2020年12月07日 12:00:00',
        views:'999',
        commentCount:'99',
        typeId:'springboot学习',
        shareStatement:true,
      }],
      currentPage: 1,  //当前页
      total:100, //总记录数
      pagesize:10, //页面大小
      pagesizes:[10,20,30], //页面数组

    }
  },
  methods:{
    handleClick(tab, event) {
        console.log(tab.index);
    },
    // 分页的当前页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    //每页多少条
    handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
  }
}
</script>

<style scoped>

</style>

二、博客展示后端开发

1、修改RespBean

在这里插入图片描述

    public static RespBean build(){
        return new RespBean();
    }

2、分页查询 修改TBlogService

修改TBlogService
在这里插入图片描述

	/分页查询
    RespBean pageBlogs(Long current, Long limit, Boolean published, String flag, Boolean share_statement, Boolean is_delete);

3、修改TBlogServiceImpl

@Service
public class TBlogServiceImpl extends ServiceImpl<TBlogMapper, TBlog> implements TBlogService {

    @Autowired
    TBlogMapper tBlogMapper;

    RespBean respBean = RespBean.build();

    @Override
    public RespBean pageBlogs(Long current, Long limit, Boolean published, String flag,
                              Boolean share_statement, Boolean is_delete) {
        RespBean respBean = RespBean.build();
        //创建Page对象
        Page<TBlog> tBlogPage = new Page<>(current,limit);
        //构建条件
        QueryWrapper<TBlog> wrapper = new QueryWrapper<>();
        //获取传入讲师的条件是否为空
        //多条件组合查询
        //判断条件值是否为空,如果不为空拼接条件
        if (published != null){
            //构建条件
            wrapper.eq("published",published);
        }
        if (flag != null){
            //构建条件
            wrapper.eq("flag",flag);
        }
        if (share_statement != null){
            //构建条件
            wrapper.eq("share_statement",share_statement);
        }
        if (is_delete != null){
            //构建条件
            wrapper.eq("is_delete",is_delete);
        }
        
        //以更新时间排序（降序）
        wrapper.orderByDesc("update_time");
        
        //调用mybatis plus分页方法进行查询
        tBlogMapper.selectPage(tBlogPage,wrapper);

        //通过Page对象获取分页信息
        List<TBlog> tBlogList = tBlogPage.getRecords(); //每页的数据 list集合
        long size = tBlogPage.getSize(); //每页显示的条数
        long total = tBlogPage.getTotal(); //总记录数
        long pages = tBlogPage.getPages(); //总页数

        respBean.setStatus(200);
        respBean.setObj(tBlogPage);
        return respBean;
    }
}

4、修改TBlogController

在这里插入图片描述

@RestController
@RequestMapping("/blog")
public class TBlogController {

    @Autowired
    TBlogService tBlogService;

    RespBean respBean = RespBean.build();

    /**
     * 分页查询
     * @param current
     * @param size
     * @param published
     * @param flag
     * @param share_statement
     * @param is_delete
     * @return
     */
    @GetMapping("/getByPage")
    @ApiOperation("博客分页查询")
    @ApiImplicitParams({
            @ApiImplicitParam(name = "current",value = "当前页") ,
            @ApiImplicitParam(name = "size",value = "每页的数量"),
            @ApiImplicitParam(name = "published",value = "是否公开"),
            @ApiImplicitParam(name = "flag",value = "原创或转载"),
            @ApiImplicitParam(name = "share_statement",value = "草稿"),
            @ApiImplicitParam(name = "is_delete",value = "是否已删除"),
    })
    public RespBean getByPage(Long current, Long size, Boolean published,
                              String flag, Boolean share_statement, Boolean is_delete){
        return tBlogService.pageBlogs(current, size,published,flag,share_statement,is_delete);
    }
}

5、测试

1）分页查询【全部】
在这里插入图片描述
对应
在这里插入图片描述
2）分页查询【原创】
在这里插入图片描述
对应：
在这里插入图片描述
3）分页查询【转载】
在这里插入图片描述
对应：
在这里插入图片描述

4）其他类似

6、根据标题查询

在这里插入图片描述
在TBlogService 添加：

    //根据博客标题查询
    RespBean getByTitle(String title);

在TBlogServiceImpl 添加：

    /**
     * 根据标题查询
     * @param title
     * @return
     */
    @Override
    public RespBean getByTitle(String title) {
       	RespBean respBean = RespBean.build();
        QueryWrapper<TBlog> queryWrapper = new QueryWrapper<TBlog>();
        queryWrapper.like("title",title);
        List<TBlog> tBlogList = tBlogMapper.selectList(queryWrapper);
        respBean.setStatus(200);
        respBean.setObj(tBlogList);
        return respBean;
    }

在 TBlogController中添加：

    /**
     * 根据博客标题查询
     * @param title
     * @return
     */
    @GetMapping("/getByTitle")
    @ApiOperation("通过文章标题查询")
    @ApiImplicitParam(name = "title",value = "文章的标题")
    public RespBean findByTitle(String title){
        return tBlogService.getByTitle(title);
    }

7、测试

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

8、日期格式化

在TBlogs加入注解：

  @JsonFormat(pattern="yyyy-MM-dd HH:mm:ss", timezone = "Asia/ShangHai")

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

三、博客展示前端对接

1、新建搜索专用子组件

SearchBlogsCom.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>
                    <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 style="float: right;" type="danger" size="mini">删除</el-button>
                    <el-button style="float: right; margin-right: 10px;" type="primary" size="mini">编辑</el-button>
                
                </div>

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

  </div>
</template>

<script>
export default {
  name: 'SearchBlogsCom',
  data () {
   return {
    blogsData: [], //文章数据

   }
  },
  props:["blogsData"], //接收父组件传过来的值
  methods:{
  }
}
</script>

<style scoped>

</style>

2、新建通用博客列表子组件

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 style="float: right;" type="danger" size="mini">删除</el-button>
                    <el-button style="float: right; margin-right: 10px;" type="primary" size="mini">编辑</el-button>
                
                </div>

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

       <!-- 分页 -->
       <div v-if="!hidden_page" 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:{
    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=>{
        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>

3、修改博客管理

AllBlogs.vue (后面给出完整代码)

导入刚才创建的两个子组件：
在这里插入图片描述
在这里插入图片描述
完整代码：

<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick" style="margin-top: 10px;">
      <el-tab-pane label="全部（120）" name="first">
         <!-- 搜索 -->
        <el-input size="small" v-model="input_title" placeholder="请输入标题，可回车搜索..." prefix-icon="el-icon-search"
        style="width: 400px;margin-right: 10px;" @keydown.enter.native="search_title"></el-input>
        <el-button size="small" type="primary"  @click="search_title" icon="el-icon-search">搜索</el-button>
        <el-button size="small" type="primary">高级搜索</el-button>
        <!-- 通用博客列表组件 -->
        <BlogListCom :tindex="tabindex" v-if="tabindex == 0 && hidden_searchcom == false"></BlogListCom>
        <!-- 搜索专用组件 -->
        <SearchBlogsCom v-if="tabindex == 0 && hidden_searchcom == true" :blogsData="blogsData"></SearchBlogsCom>

      </el-tab-pane>

      <el-tab-pane label="原创（20）" name="second">
        <BlogListCom :tindex="tabindex" v-if="tabindex == 1"></BlogListCom>
      </el-tab-pane>
      <el-tab-pane label="转载（20）" name="third">
        <BlogListCom :tindex="tabindex" v-if="tabindex == 2"></BlogListCom>
      </el-tab-pane>
      <el-tab-pane label="草稿（20）" name="fourth">
        <BlogListCom :tindex="tabindex" v-if="tabindex == 3"></BlogListCom>
      </el-tab-pane>
      <el-tab-pane label="公开（50）" name="fifth">
        <BlogListCom :tindex="tabindex" v-if="tabindex == 4"></BlogListCom>
      </el-tab-pane>
      <el-tab-pane label="私密（10）" name="sixth">
        <BlogListCom :tindex="tabindex" v-if="tabindex == 5"></BlogListCom>
      </el-tab-pane>
      <el-tab-pane label="回收站（20）" name="serven">
        <BlogListCom :tindex="tabindex" v-if="tabindex == 6"></BlogListCom>
      </el-tab-pane>
    </el-tabs>

    
 
  </div>
</template>

<script>
  //导入子组件
  import BlogListCom from '@/components/blogs/BlogListCom'
  import SearchBlogsCom from '@/components/blogs/SearchBlogsCom'
export default {
  name: 'AllBlogs',
  components:{ BlogListCom,SearchBlogsCom }, //注册子组件
  data () {
   return {
    activeName: 'first',
    input_title: '', //输入框的值
    blogsData: [], //文章数据
   
    tabindex:0, //选项卡index
    
    hidden_searchcom: false , //是否隐藏搜索子组件

    }
  },
  mounted() {
    
  },
  methods:{
    // 获取标签栏的index
    handleClick(tab, event) {
        this.tabindex = tab.index
        console.log("tabindex = " + this.tabindex);
    },
    //根据标题搜索
    search_title(){
      //判断使用的是通用博客子组件还是搜索专用子组件
      if(this.input_title == ''){
        //如果搜索值为空，就隐藏搜索专用子组件，显示通用子组件
        this.hidden_searchcom = false
      }else{
        //如果搜索值不为空，就显示搜索专用子组件
        this.hidden_searchcom = true
      }
      const _this = this
      //发起根据标题搜索请求
      this.getRequest('/blog/getByTitle?title=' + this.input_title).then(resp=>{
        if(resp){
          _this.blogsData = resp.obj
        }
      
      })
    }

  }
}
</script>

<style scoped>

</style>

4、说明一下父组件如何传值给子组件

父组件
在这里插入图片描述
在这里插入图片描述
子组件：
在这里插入图片描述
在这里插入图片描述

5、效果展示

【全部】
在这里插入图片描述
【搜索】
在这里插入图片描述
在这里插入图片描述
【原创】
在这里插入图片描述
【转载】
在这里插入图片描述
【草稿】
在这里插入图片描述

【公开】
在这里插入图片描述

【私密】
在这里插入图片描述

【回收站】
在这里插入图片描述

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

x-dragon8899
关注
  • 6
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于Spring Boot和Vue3的博客平台文章详情与评论功能实现
sybh的博客
04-05 1443
在前面的教程中，我们已经实现了基于Spring Boot和Vue3的发布、编辑、删除文章功能以及文章列表与分页功能。本教程将引导您实现博客平台的文章详情与评论功能。1.1. 创建Comment实体类。1.2. 创建CommentMapper接口。1.3. 创建CommentService接口及其实现。1.4. 创建CommentController类。2.1. 创建文章详情页面组件。2.2. 创建评论列表组件。2.3. 创建评论表单组件。
外卖点餐系统，后端：springboot+mybatis+mybatis-plus 前端：vue+elmen
05-08
后端使用Spring Boot和MyBatis作为开发框架，而前端使用Vue和ElementUI作为开发工具。 后端开发框架 后端使用Spring Boot作为开发框架，Spring Boot是一个轻量级的框架，易于学习和使用，可以快速搭建项目。它提供...
一个使用 SpringBoot+Vue+Mybatis-Plus 开发的前后端分离个人博客，有配套开发教程，欢迎来学习！
x-dragon8899的博客
03-09 4204
文章目录简介技术路线效果展示前台页面后台博客管理前端页面项目部署配套教程 简介 这是一个使用 SpringBoot+Vue+Mybatis-Plus 开发的前后端分离个人博客，有配套开发教程，欢迎star学习！ 技术路线 SpringBoot Vue Mybatis-Plus SpringSecurity MySQL … 效果展示 前台页面 博客首页 分类专栏 标签 留言板 友链 搜索 后台博客管理前端页面 写博客 文章管理 分类管理 标签管
手把手教你基于Springboot+Vue搭建个人博客网站
热门推荐
累计发表博客60余万字，CSDN 博客专家、Java 领域优质创作者、华为云享专家、阿里云专家博主。专注分享 Java 优质文章，毕设实战项目开发，全网粉丝10W+
10-09 3万+
Hello，你好呀，我是灰小猿，一个超会写bug的程序猿！ 利用国庆期间做了一个基于springboot+vue的前后端分离的个人博客网站，今天在这里将开发过程和大家分享一下，手把手教你搭建一个自己专属的个人博客。 完整源码放置在Gitee上了，【源码链接】 小伙伴们记得⭐star⭐哟！ 小伙伴们一键三连➕关注！灰小猿带你上高速啦????????????！ 先看一下博客网站的演示视频： ⚡项目目录⚡ 个人博客网站项目整体思路 Java后端接口开发 （1）数据库设计 ​（2）整合My
SpringBoot+Vue+Mybatis-plus 博客（四）：完成发布文章、编辑文章、删除文章及查询文章功能
x-dragon8899的博客
03-09 7313
文章目录一、写博客功能1、安装mavon-editor插件2、然后在main.js中全局注册 一、写博客功能 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) ...
基于Spring Boot+Vue的博客系统 13——评论功能的实现
芊雨的博客
10-13 5066
需求 评论分为匿名评论和实名评论，匿名评论的评论者（也就是commentator字段）的值为0，头像为默认头像，用户登录之后可以进行实名评论 在文章评论下面，还可以对一级评论进行评论，一级评论和二级评论的区别在于type字段的不同，一级评论为1，二级评论为2 后端设计 新建com.qianyucc.blog.model.dto.CommentDTO类，用于封装前端向后端传输的评论信息 pa...
SpringBoot整合Mybatis-plus实现多级评论
不愧是暮言的博客
05-03 1747
本文介绍了如何使用SpringBoot整合Mybatis-plus实现多级评论功能，同时提供了数据库的设计和详细的后端代码，前端界面使用的Vue2，希望本文能够对您有所帮助。
基于springboot+vue+mybatis-plus的校园管理系统
04-17
项目采用前后端分离架构思想，前端采用HTML+CSS+VUE来实现页面效果展示，后端采用SpringBoot+MybatisPlus框架实现数据存储等服务。存储层使用高性能的MySQL，服务器使用SpringBoot内置的Tomcat9.x，项目构建工具使用...
Springboot+Mybatis-plus+Vue项目内容：前后端分离的管理系统
最新发布
05-20
该项目利用了基于springboot + vue + mysql的开发模式框架实现的课设系统，包括了项目的源码资源、sql文件、相关指引文档等等。 【项目资源】：包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理...
基于SpringBoot+MyBatis-Plus+Vue+element ui的前后端分离的影院选座购票系统源码.zip
05-27
本项目是一个完整的影院选座购票系统，采用现代技术栈实现，包括后端的SpringBoot、MyBatis-Plus，以及前端的Vue.js和Element UI。下面将分别介绍这些技术及其在系统中的应用。 1. **SpringBoot**： SpringBoot是...
SpringBoot+Mybatis -plus+Mysql+Vue渲染整合
11-04
SpringBoot+Mybatis -plus+Mysql+Vue渲染整合,需求为，院系和学生之间的多对一关系管理，外键不可删除，添加学生时完整显示学院姓名，成功添加，删除，修改，查询，模糊查询包括下拉框（院系），区间段（学生年龄）等功能
springboot+mybatisplus+vue+elementUI分页.rar
10-29
springboot+mybatisplus+vue+elementUI实现后台分页，资源齐全，前后台代码都有，数据库语句也有
Java项目:网上书城系统(java+Springboot+Vue+ElementUI+Mybatis-plus+mysql)
04-08
实现了商品的展示、商品分类查询、关键字搜索商品、商品详细信息展示、登录、注册、用户购物车、订单结算、用户订单、用户收藏列表以及错误处理功能 后台：实现了 销售额显示 订单显示 饼状图 曲线 轮播图管理 ...
基于java+springboot+mybatis+vue+mysql的漫画动漫管理网站
qq_3306428634的博客
12-10 542
本系统主要包括管理员和用户两个角色组成，主要包括以下功能：（1）前台：首页、漫画资源、排行榜、交流论坛、公告信息、个人中心、后台管理。（2）管理员：首页、个人中心、用户管理、漫画分类管理、漫画资源管理、分类管理、排行榜管理、交流论坛、系统管理。（3）用户：首页、个人中心、漫画资源管理。考虑到实际生活中在漫画网站方面的需要以及对该系统认真的分析,将系统权限按管理员和用户这两类涉及用户划分。(a) 管理员；
SpringBoot整合Mybatis-plus实现评论自带IP功能
不愧是暮言的博客
05-08 737
在开发Web应用的过程中，我们经常需要记录用户请求的IP地址。一种常见的用途是在用户发表评论时记录评论内容以及评论所处的省份，从而实现精准的地域分析，以及对恶意评论的过滤等功能。本篇博文将介绍如何使用SpringBoot和Mybatis-plus实现评论自带IP功能，并采用Vue作为前端框架。本篇博文介绍了如何使用SpringBoot和Mybatis-plus实现评论自带IP功能，并采用Vue作为前端框架。通过本篇博文的学习，读者可以了解到开发中使用到的技术栈，以及具体的开发流程和实现方式。
【项目笔记】前端Vue+Element-UI加上后端Springboot+mybatis-plus技术，完善各功能
努力敲代码的小盆友
06-16 2008
此项目使用的是VUE+ELEMENTUI以及Springboot+mybatis-plus的技术进行的开发，基于IDEA软件。【项目笔记】后端框架的搭建用法以及一些常用功能的实现，使用Springboot+mybatis-plus等技术的基础上，记录了前端联合后端的开发。
Springboot＋Vue实现发表文章功能
全栈开发者社区
07-30 5972
点击上方[全栈开发者社区]→右上角[...]→[设为星标⭐]效果图前端编辑页面文章列表页面文章详情页面环境介绍JDK：1.8数据库：Mysql5.6前端：Vue后端：SpringBoot...
SpringBoot+Vue+Mybatis-plus 博客（一）：完成博客后台前端登录页面、后端登录接口
x-dragon8899的博客
03-09 8981
目录一、搭建前端1、更换npm镜像2、使用vue-cli3脚手架构建项目3、创建项目4、启动项目5、目录结构6、用VSCode打开项目二、登录页面1、使用Element ui2、整理app.vue3、删掉一些没有用到的组件4、新建Login.vue组件5、在router/index.js引入组件并配置路由6、启动项目三、搭建后端1、新建数据库（blog）2、新建一个普通springboot项目，pom.xml如下3、修改配置文件4、开启mapper接口扫描，添加分页插件5、代码生成6、启动main方法7、生
springboot+vue实现《个人小博客》发布小文章（添加文章）功能
java13146099909的博客
05-10 625
案例目录 《个人小博客》1、登录注册（带验证码）3、文章管理（删改查）项目技术栈介绍前端：vue3+elementplus后端：springboot+mybatisplusjdk：1.8以上数据库：mysql。
写一个springboot+vue+mybatis-plus+redis的博客系统
03-26
一个Spring Boot + Vue + MyBatis-Plus + Redis的博客系统是一个基于Java的Web应用程序，用于创建和管理博客内容。下面是该系统的一般架构和主要功能： 1. 架构： - 后端使用Spring Boot框架，提供RESTful API接口。 - 前端使用Vue框架，通过Ajax请求后端API获取数据并展示。 - 数据库使用MySQL或其他关系型数据库，通过MyBatis-Plus进行ORM映射。 - 缓存使用Redis，提高系统性能和响应速度。 2. 主要功能： - 用户管理：注册、登录、权限管理等。 - 博客管理：发布、编辑、删除博客文章。 - 标签管理：为博客文章添加标签，方便分类和检索。 - 评论管理：用户可以对博客文章进行评论和回复。 - 点赞和收藏：用户可以对喜欢的博客文章进行点赞和收藏。 - 搜索功能：支持关键字搜索博客文章。 - 分页和排序：对博客文章进行分页和按照不同的排序方式展示。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值