Java之Spring Boot+Vue+Element UI前后端分离项目（中-功能完善-实现查询） 【博客论坛项目高仿CSDN

},

created() {//编写构造函数

this.getInfo();

},

methods: {

getInfo() {

this.$axios.get(‘http://localhost:9090/blog/queryBlogByPage?title=’ + this.title + ‘&page=’ + this.page + ‘&rows=’ + this.rows)

.then(response => (

this.info = response.data,

this.total = this.info.total,

this.totalPage = this.info.totalPage,

this.items = this.info.items

)).catch(function (error) { // 请求失败处理

console.log(error);

});

},

current_change:function(currentPage){

this.page = currentPage;

this.getInfo();

}

},

watch: {

page: function () {

this.getInfo();

},

rows: function () {

this.getInfo();

},

}

}

访问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查询对应的详细内容

浏览量：

点赞数：

<img height=“50” @click=“like” src=“https://img2.baidu.com/it/u=966753824,2436291344&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500”>

（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设置事件和请求方式

对应的方法

放置手残实现全部代码

浏览量：

点赞数：

<img height=“50” @click=“like” src=“https://img2.baidu.com/it/u=966753824,2436291344&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500”>