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

总结

虽然面试套路众多，但对于技术面试来说，主要还是考察一个人的技术能力和沟通能力。不同类型的面试官根据自身的理解问的问题也不尽相同，没有规律可循。

上面提到的关于这些JAVA基础、三大框架、项目经验、并发编程、JVM及调优、网络、设计模式、spring+mybatis源码解读、Mysql调优、分布式监控、消息队列、分布式存储等等面试题笔记及资料

有些面试官喜欢问自己擅长的问题，比如在实际编程中遇到的或者他自己一直在琢磨的这方面的问题，还有些面试官，尤其是大厂的比如 BAT 的面试官喜欢问面试者认为自己擅长的，然后通过提问的方式深挖细节，刨根到底。

本文已被CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录

需要这份系统化的资料的朋友，可以点击这里获取

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

浏览量：

点赞数：

<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”>

（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);

最后

面试题文档来啦，内容很多，485页！

由于笔记的内容太多，没办法全部展示出来，下面只截取部分内容展示。

1111道Java工程师必问面试题

MyBatis 27题 + ZooKeeper 25题 + Dubbo 30题：

Elasticsearch 24 题 +Memcached + Redis 40题：

Spring 26 题+ 微服务 27题+ Linux 45题：

Java面试题合集：

本文已被CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录

需要这份系统化的资料的朋友，可以点击这里获取

@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);

最后

面试题文档来啦，内容很多，485页！

由于笔记的内容太多，没办法全部展示出来，下面只截取部分内容展示。

1111道Java工程师必问面试题

[外链图片转存中…(img-Gkwq09Nx-1715293017189)]

MyBatis 27题 + ZooKeeper 25题 + Dubbo 30题：

[外链图片转存中…(img-mpzwkflc-1715293017189)]

Elasticsearch 24 题 +Memcached + Redis 40题：

[外链图片转存中…(img-KUGBCi1T-1715293017190)]

Spring 26 题+ 微服务 27题+ Linux 45题：

[外链图片转存中…(img-RT6p30dQ-1715293017190)]

Java面试题合集：

[外链图片转存中…(img-EeVcXCS9-1715293017191)]

本文已被CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录

需要这份系统化的资料的朋友，可以点击这里获取