Java之Spring Boot+Vue+Element UI前后端分离项目（中-功能完善-实现查询） 【博客论坛项目高仿CSDN】（一篇文章精通系列）

转x33g5p2x  于2022-03-06 转载在 Java  
字(16.8k)|赞(0)|评价(0)|浏览(293)

一 、实现查询博客功能（后端功能实现）

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

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

点击测试

版权说明 : 本文为转载文章, 版权归原作者所有 版权申明

原文链接 : https://code100.blog.csdn.net/article/details/123011385

内容来源于网络，如有侵权，请联系作者删除！

vue.jsJavaScript前端

相关文章

    查看更多
    微信公众号

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新文章

    更多

    目录

    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com