精通系列)

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>

访问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<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


在这里插入图片描<p>以上是关于精通系列)的主要内容,如果未能解决你的问题,请参考以下文章</p> 
<p > <a style=100天精通Oracle-实战系列(第2天)史上最详细 Linux 6 安装单机 Oracle 11GR2 数据库

100天精通Oracle-实战系列(第3天)超详细 Linux 7 安装单机 Oracle 11GR2 数据库

精通Eclipse V3.4,第1部分: Eclipse工作台

StarRocks从入门到精通系列五:导入数据

Infopath入门到精通系列-2 Infopath 文件内容查看

精通awk系列:awk读取行的细节