精通系列)
Posted 蓝盒子itbluebox
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了精通系列)相关的知识,希望对你有一定的参考价值。
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
100天精通Oracle-实战系列(第2天)史上最详细 Linux 6 安装单机 Oracle 11GR2 数据库
100天精通Oracle-实战系列(第3天)超详细 Linux 7 安装单机 Oracle 11GR2 数据库
精通Eclipse V3.4,第1部分: Eclipse工作台