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

一 、实现查询博客功能（后端功能实现） 1、完善后端代码实现查询博客信息并实现分页查询 （1）创建BlogService和BlogServiceImpl

BlogService

package cn.itbluebox.springbootcsdn.service;
public interface BlogService {
}

BlogServiceImpl

package cn.itbluebox.springbootcsdn.service.Impl;
import cn.itbluebox.springbootcsdn.service.BlogService;
@Service
public class BlogServiceImpl implements BlogService {
}

（2）编写BlogController

package cn.itbluebox.springbootcsdn.web;
import cn.itbluebox.springbootcsdn.domain.Blog;
import cn.itbluebox.springbootcsdn.service.BlogService;
import cn.itbluebox.springbootcsdn.vo.PageResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("blog")
public class BlogController {
    @Autowired
    private BlogService blogService;

    @GetMapping("queryBlogByPage")
    public ResponseEntity> queryBlogByPage(
            @RequestParam(value = "title", defaultValue = "") String title,
            @RequestParam(value = "page", defaultValue = "1") Integer page,
            @RequestParam(value = "rows", defaultValue = "5") Integer rows
    ) {
        System.out.println(title + page + rows);
        return ResponseEntity.ok(blogService.queryBlogByPage(title, page, rows));
    }
}

（3）完善BlogService 和BlogServiceImpl

BlogService

package cn.itbluebox.springbootcsdn.service;

import cn.itbluebox.springbootcsdn.domain.Blog;
import cn.itbluebox.springbootcsdn.vo.PageResult;
public interface BlogService {
    PageResult queryBlogByPage(String title, Integer page, Integer rows);
}

BlogServiceImpl

package cn.itbluebox.springbootcsdn.service.Impl;

import cn.itbluebox.springbootcsdn.domain.Blog;
import cn.itbluebox.springbootcsdn.mapper.BlogMapper;
import cn.itbluebox.springbootcsdn.service.BlogService;
import cn.itbluebox.springbootcsdn.vo.PageResult;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class BlogServiceImpl implements BlogService {

    @Autowired
    private BlogMapper blogMapper;

    @Override
    public PageResult queryBlogByPage(String title, Integer page, Integer rows) {
        PageHelper.startPage(page, rows);//自动创建好分页的条件
        System.out.println("----------");
        List list = blogMapper.queryBlogByPage(title);
        PageResult pageResult = new PageResult();
        pageResult.setItems(list);//设置数据
        //解析分页结果
        PageInfo pageInfo = new PageInfo(list);//得到分页信息
        pageResult.setTotal(pageInfo.getTotal());//设置总条数
        long l = pageInfo.getTotal() / pageInfo.getPageSize();
        pageResult.setTotalPage(Integer.parseInt(l+1+""));
        return pageResult;
    }
}

（4）完善BlogMapper

package cn.itbluebox.springbootcsdn.mapper;

import cn.itbluebox.springbootcsdn.domain.Blog;
import org.apache.ibatis.annotations.Select;
import tk.mybatis.mapper.common.Mapper;

import java.util.List;

public interface BlogMapper extends Mapper {

    @Select("select * from blog  where  title like '%${title}%'")
    List queryBlogByPage(String title);
}

（5）完善SpringBootCSDNApplication

package cn.itbluebox.springbootcsdn;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import tk.mybatis.spring.annotation.MapperScan;

@SpringBootApplication
@MapperScan("cn.itbluebox.springbootcsdn.mapper")
public class SpringBootCSDNApplication {
    public static void main(String[] args) {
        SpringApplication.run(SpringBootCSDNApplication.class, args);
    }
}

2、运行测试

访问：http://localhost:9090/blog/queryBlogByPage?title=&page=1&rows=5

二 、实现查询博客功能（前端功能实现） 1、修改App.vue

2、完善HelloWorld.vue

访问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.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);
    }

BlogMapper

    @Update("UPDATE blog set like_count = #{like_count} WHERe  id = #{id}")
    void updateByLike(Blog blog);

点击测试