Java 之 Spring Boot + Vue + Element UI 前后端分离项目(上-项目搭建) | |
---|---|
Java之Spring Boot+Vue+Element UI前后端分离项目(中-功能完善-实现查询) | |
Java之Spring Boot+Vue+Element UI前后端分离项目(下-功能完善-发布文章-文章搜索) |
源代码下载:https://download.csdn.net/download/qq_44757034/85045367
Java SpringBoot 前后端分离项目高仿CSDN项目源代码(前端Vue+Element UI 后端Java的SpringBoot+Myabtis,数据库Mysql)
一 、实现查询博客功能(后端功能实现)
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<PageResult<Blog>> 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<Blog> 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<Blog> queryBlogByPage(String title, Integer page, Integer rows) {
PageHelper.startPage(page, rows);//自动创建好分页的条件
System.out.println("----------");
List<Blog> list = blogMapper.queryBlogByPage(title);
PageResult pageResult = new PageResult();
pageResult.setItems(list);//设置数据
//解析分页结果
PageInfo<Blog> pageInfo = new PageInfo<Blog>(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<Blog> {
@Select("select * from blog where title like '%${title}%'")
List<Blog> 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
<template>
<div>
<el-table
:data="items"
@row-click="open"
style="width: 80%;margin: auto;top:80px">
<el-table-column
prop="thumbnail"
label="缩略图"
width="180">
<!-- 图片的显示 -->
<template slot-scope="scope">
<img :src="scope.row.thumbnail" min-width="70" height="70" />
</template>
</el-table-column>
<el-table-column
prop="title"
label="标题"
width="180">
</el-table-column>
<el-table-column
prop="abstract_text"
label="摘要">
</el-table-column>
</el-table>
<div style="height: 500px;margin-top: 100px ">
<el-pagination
:page-size="rows"
layout="prev, pager, next"
:total="total"
@current-change="current_change"
>
</el-pagination>
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
info: "",
total: 0,
totalPage: 0,
items: [],
title: "",
page: 1,
rows:5,
first: 1,
last: 5,
startBlogTime: "",
endBlogTime: "",
id: "",
name: "请登录",
image: "",
email: "",
}
},
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();
},
}
}
</script>
<style scoped>
.el-row {
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;
}
</style>
点击翻页
三 、实现查询博客详情(后端功能实现)
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<BlogArticle> 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<Blog> 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<BlogArticle> {
@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查询对应的详细内容
<template>
<div style="width: 100%;background-color: #99a9bf ">
<div style="width: 80%;margin: auto;background-color: #f9fafc">
<el-row style="position: fixed; top: 0px;background-color: #2c3e50 ;width: 80%; z-index: 1" >
<el-col :span="24" style="background-color: white">
<div style="text-align: left;box-shadow: 5px 10px 15px 2px rgba(0,0,0,0.1);height: 50px;line-height: 50px;font-weight: bold;padding-left: 10px;background-color: #f9fafc"
>
<span v-html="title"></span>
<span style="margin-left: 50px" > 浏览量:<span v-html="info.view_count"></span></span>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row>
<el-col :span="24" style="margin-top: 80px;">
<div style="padding: 50px">
<p style="text-align: left" v-html="info.context"></p>
</div>
</el-col>
</el-row>
<el-row style="position: fixed; bottom : 0px;background-color: #2c3e50 ;width: 80%; z-index: 1" >
<el-col :span="24" style="background-color: white">
<div style="text-align: left;box-shadow: 5px 10px 15px 2px rgba(0,0,0,0.1);height: 50px;line-height: 30px;font-weight: bold;padding-left: 20px;background-color: #f9fafc"
>
<span style="margin-left: 50px" > 点赞数:<span v-html="info.like_count"></span></span>
<span style="float:right;margin-right: 150px">
<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">
</span>
</div>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
export default {
name: "Article",
data() {
return {
id:"",
info: "",
total: 0,
totalPage: 0,
items: [],
title: "",
page: 1,
rows: 10,
first: 1,
last: 10,
startBlogTime: "",
endBlogTime: "",
}
},
created() {//编写构造函数
this.id = location.href.split("?")[1];
this.getInfo();
},
methods: {
getInfo() {
this.$axios.get('http://localhost:9090/blog/queryBlogArticleById?id=' + this.id )
.then(response => (
this.info = response.data,
this.title = this.info.title
)).catch(function (error) { // 请求失败处理
console.log(error);
});
},
selectBlog() {
this.page = 1;
this.rows = 10;
let startTime = (new Date(((this.value1+"").split(",")[0]))).getTime();
let endTime = (new Date(((this.value1+"").split(",")[1]))).getTime();
this.startBlogTime = startTime;
this.endBlogTime = endTime;
this.getInfo();
},
like(){
this.$axios.get('http://localhost:9090/blogging/blogLikeId?id=' + this.id );
this.getInfoView();
},
current_change:function(currentPage){
this.page = currentPage;
this.getInfo();
},
},
watch: {
page: function () {
this.getInfo();
},
rows: function () {
this.getInfo();
},
}
}
</script>
<style scoped>
</style>
(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<BlogArticle> 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设置事件和请求方式
对应的方法
放置手残实现全部代码
<template>
<div style="width: 100%;background-color: #99a9bf ">
<div style="width: 80%;margin: auto;background-color: #f9fafc">
<el-row style="position: fixed; top: 0px;background-color: #2c3e50 ;width: 80%; z-index: 1" >
<el-col :span="24" style="background-color: white">
<div style="text-align: left;box-shadow: 5px 10px 15px 2px rgba(0,0,0,0.1);height: 50px;line-height: 50px;font-weight: bold;padding-left: 10px;background-color: #f9fafc"
>
<span v-html="title"></span>
<span style="margin-left: 50px" > 浏览量:<span v-html="info.view_count"></span></span>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row>
<el-col :span="24" style="margin-top: 80px;">
<div style="padding: 50px">
<p style="text-align: left" v-html="info.context"></p>
</div>
</el-col>
</el-row>
<el-row style="position: fixed; bottom : 0px;background-color: #2c3e50 ;width: 80%; z-index: 1" >
<el-col :span="24" style="background-color: white">
<div style="text-align: left;box-shadow: 5px 10px 15px 2px rgba(0,0,0,0.1);height: 50px;line-height: 30px;font-weight: bold;padding-left: 20px;background-color: #f9fafc"
>
<span style="margin-left: 50px" > 点赞数:<span v-html="info.like_count"></span></span>
<span style="float:right;margin-right: 150px">
<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">
</span>
</div>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
export default {
name: "Article",
data() {
return {
id:"",
info: "",
total: 0,
totalPage: 0,
items: [],
title: "",
page: 1,
rows: 10,
first: 1,
last: 10,
startBlogTime: "",
endBlogTime: "",
}
},
created() {//编写构造函数
this.id = location.href.split("?")[1];
this.getInfo();
},
methods: {
getInfo() {
this.$axios.get('http://localhost:9090/blog/queryBlogArticleById?id=' + this.id )
.then(response => (
this.info = response.data,
this.title = this.info.title
)).catch(function (error) { // 请求失败处理
console.log(error);
});
},
selectBlog() {
this.page = 1;
this.rows = 10;
let startTime = (new Date(((this.value1+"").split(",")[0]))).getTime();
let endTime = (new Date(((this.value1+"").split(",")[1]))).getTime();
this.startBlogTime = startTime;
this.endBlogTime = endTime;
this.getInfo();
},
like(){
this.$axios.get('http://localhost:9090/blog/blogLikeId?id=' + this.id );
this.getInfo();
},
current_change:function(currentPage){
this.page = currentPage;
this.getInfo();
},
},
watch: {
page: function () {
this.getInfo();
},
rows: function () {
this.getInfo();
},
}
}
</script>
<style scoped>
</style>
(2)完善后端接口
BlogController
@GetMapping("blogLikeId")
public ResponseEntity<BlogArticle> 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);
点击测试
Java 之 Spring Boot + Vue + Element UI 前后端分离项目(上-项目搭建) | |
---|---|
Java之Spring Boot+Vue+Element UI前后端分离项目(中-功能完善-实现查询) | |
Java之Spring Boot+Vue+Element UI前后端分离项目(下-功能完善-发布文章-文章搜索) |
源代码下载:https://download.csdn.net/download/qq_44757034/85045367
Java SpringBoot 前后端分离项目高仿CSDN项目源代码(前端Vue+Element UI 后端Java的SpringBoot+Myabtis,数据库Mysql)