Java之Spring Boot+Vue+Element UI前后端分离项目（中-功能完善-实现查询）【博客论坛项目高仿CSDN】（一篇文章精通系列）

最新推荐文章于 2024-05-17 10:50:08 发布

2401_84152092

最新推荐文章于 2024-05-17 10:50:08 发布

阅读量372

点赞数 5

分类专栏：程序员文章标签： java spring boot vue.js

本文链接：https://blog.csdn.net/2401_84152092/article/details/138773359

版权

程序员专栏收录该内容

197 篇文章 0 订阅

订阅专栏

margin-bottom: 20px;

}

.el-col {

border-radius: 4px;

}

.bg-purple-dark {

background: #99a9bf;

}

.bg-purple {

background: #d3dce6;

}

.bg-purple-light {

background: #e5e9f2;

}

.grid-content {

border-radius: 4px;

min-height: 36px;

}

.row-bg {

padding: 10px 0;

background-color: #f9fafc;

}

#top {

position: fixed;

top: 0px;

height: 50px;

width: 100%;

background-color: #f9fafc;

height: 80px;

z-index: 1;

box-shadow: 2px 2px 5px #888888;

left: 0px;

}

#top1 {

width: 70%;

margin: auto;

padding-top: 20px;

}

访问http://localhost:8080/#/

在这里插入图片描述

点击翻页

在这里插入图片描述

三、实现查询博客详情（后端功能实现）

1、修改BlogArticle

在这里插入图片描述

package cn.itbluebox.springbootcsdn.domain;

import lombok.AllArgsConstructor;

import lombok.Data;

import lombok.NoArgsConstructor;

import javax.persistence.Table;

import java.util.Date;

@Data

@NoArgsConstructor

@AllArgsConstructor

@Table(name = “blog_article”)

public class BlogArticle extends Blog{

private Long id;

private String context;

private Date last_update_time; //更新时间

private Character is_original;

}

2、完善BlogController实现通过id查询

在这里插入图片描述

@GetMapping(“queryBlogArticleById”)

public ResponseEntity queryBlogById(

@RequestParam(value = “id”) Long id

) {

return ResponseEntity.ok(blogService.queryBlogArticleById(id));

}

3、完善BlogService以及BlogServiceImpl

BlogService

在这里插入图片描述

package cn.itbluebox.springbootcsdn.service;

import cn.itbluebox.springbootcsdn.domain.Blog;

import cn.itbluebox.springbootcsdn.domain.BlogArticle;

import cn.itbluebox.springbootcsdn.vo.PageResult;

public interface BlogService {

PageResult queryBlogByPage(String title, Integer page, Integer rows);

BlogArticle queryBlogArticleById(Long id);

}

BlogServiceImpl

在这里插入图片描述

@Override

public BlogArticle queryBlogArticleById(Long id) {

return blogArticleMapper.queryBlogArticleById(id);

}

4、完善BlogArticleMapper

在这里插入图片描述

package cn.itbluebox.springbootcsdn.mapper;

import cn.itbluebox.springbootcsdn.domain.BlogArticle;

import org.apache.ibatis.annotations.Select;

import tk.mybatis.mapper.common.Mapper;

public interface BlogArticleMapper extends Mapper {

@Select(“select * from blog_article ba LEFT JOIN blog b on ba.id = b.blog_article_id where ba.id = #{id} LIMIT 0,1”)

BlogArticle queryBlogArticleById(Long id);

}

5、运行测试

在这里插入图片描述

访问：http://localhost:9090/blog/queryBlogArticleById?id=1

在这里插入图片描述

三、实现查询博客详情（前端功能实现）

1、在HelloWorld.vue当中设置跳转页面的方法并携带参数

在这里插入图片描述

open(row) {

this.$router.push(“/Article?” + row.blog_article_id);

2、创建Article.vue

（1）实现通过id查询对应的详细内容

在这里插入图片描述

浏览量：

点赞数：

（2）在router下的index.js当中设置页面跳转路径

在这里插入图片描述

import Vue from ‘vue’

import Router from ‘vue-router’

import HelloWorld from ‘@/components/HelloWorld’

import Article from ‘@/components/Article’

Vue.use(Router)

export default new Router({

routes: [

{

path: ‘/’,

name: ‘HelloWorld’,

component: HelloWorld

{

path: ‘/Article’,

name: ‘Article’,

component: Article

]

})

（3）点击测试

在这里插入图片描述

3、实现浏览量增加

实现浏览量的增加

（1）修改BlogController

在这里插入图片描述

@GetMapping(“queryBlogArticleById”)

public ResponseEntity queryBlogById(

@RequestParam(value = “id”) Long id

) {

//查询当前id 对应的博客信息

BlogArticle blogArticle = blogService.queryBlogArticleById(id);

Blog blog = blogService.queryBlogById(blogArticle.getId());

Long view_count = blog.getView_count();

//将访问量查询并自增后重新设置值

view_count = view_count + 1;

blog.setView_count(view_count);

//更新数据库大当中的值

blogService.updateBlog(blog);

return ResponseEntity.ok(blogArticle);

}

（2）对应的实现的查询和更新的接口和实现类

在这里插入图片描述

Blog queryBlogById(Long id);

void updateBlog(Blog blog);

在这里插入图片描述

@Override

public Blog queryBlogById(Long id) {

return blogMapper.queryBlogById(id);

}

@Transactional(rollbackFor = Exception.class)

public void updateBlog(Blog blog) {

blogMapper.updateByView(blog);

}

（2）对应的BlogMapper

在这里插入图片描述

@Select(“select * from blog where id = #{id} limit 0,1”)

Blog queryBlogById(Long id);

@Update(“UPDATE blog set view_count = #{view_count} WHERE id = #{id}”)

void updateByView(Blog blog);

4、实现点赞

（1）完善Article.vue设置事件和请求方式

在这里插入图片描述

对应的方法

在这里插入图片描述

放置手残实现全部代码

浏览量：

点赞数：

（2）完善后端接口

BlogController

在这里插入图片描述

@GetMapping(“blogLikeId”)

public ResponseEntity queryBlogLikeId(

@RequestParam(value = “id”) Long id

) {

//查询当前id 对应的博客信息

BlogArticle blogArticle = blogService.queryBlogArticleById(id);

Blog blog = blogService.queryBlogById(blogArticle.getId());

Long like_count = blog.getLike_count();

//将访问量查询并自增后重新设置值

like_count = like_count + 1;

blog.setLike_count(like_count);

//更新数据库大当中的值

blogService.updateBlogLikeCount(blog);

return ResponseEntity.ok(blogArticle);

}

在这里插入图片描述

void updateBlogLikeCount(Blog blog);

BlogServiceImpl

在这里插入图片描述

@Override

public void updateBlogLikeCount(Blog blog) {

blogMapper.updateByLike(blog);

}

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
22e92ecfa5ea68.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YyX6Iqz56eR5oqA,size_20,color_FFFFFF,t_70,g_se,x_16)

void updateBlogLikeCount(Blog blog);

BlogServiceImpl

在这里插入图片描述

@Override

public void updateBlogLikeCount(Blog blog) {

blogMapper.updateByLike(blog);

}