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

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

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

1、完善后端代码实现查询博客信息并实现分页查询

（1）创建BlogService和BlogServiceImpl

BlogService

  1. package cn.itbluebox.springbootcsdn.service;
  2. public interface BlogService {
  3. }

BlogServiceImpl

  1. package cn.itbluebox.springbootcsdn.service.Impl;
  2. import cn.itbluebox.springbootcsdn.service.BlogService;
  3. @Service
  4. public class BlogServiceImpl implements BlogService {
  5. }
（2）编写BlogController

  1. package cn.itbluebox.springbootcsdn.web;
  2. import cn.itbluebox.springbootcsdn.domain.Blog;
  3. import cn.itbluebox.springbootcsdn.service.BlogService;
  4. import cn.itbluebox.springbootcsdn.vo.PageResult;
  5. import org.springframework.beans.factory.annotation.Autowired;
  6. import org.springframework.http.ResponseEntity;
  7. import org.springframework.web.bind.annotation.GetMapping;
  8. import org.springframework.web.bind.annotation.RequestMapping;
  9. import org.springframework.web.bind.annotation.RequestParam;
  10. import org.springframework.web.bind.annotation.RestController;
  12. @RestController
  13. @RequestMapping("blog")
  14. public class BlogController {
  15.     @Autowired
  16.     private BlogService blogService;
  18.     @GetMapping("queryBlogByPage")
  19.     public ResponseEntity<PageResult<Blog>> queryBlogByPage(
  20.             @RequestParam(value = "title", defaultValue = "") String title,
  21.             @RequestParam(value = "page", defaultValue = "1") Integer page,
  22.             @RequestParam(value = "rows", defaultValue = "5") Integer rows
  23.     ) {
  24.         System.out.println(title + page + rows);
  25.         return ResponseEntity.ok(blogService.queryBlogByPage(title, page, rows));
  26.     }
  27. }

（3）完善BlogService 和BlogServiceImpl

BlogService

  1. package cn.itbluebox.springbootcsdn.service;
  3. import cn.itbluebox.springbootcsdn.domain.Blog;
  4. import cn.itbluebox.springbootcsdn.vo.PageResult;
  5. public interface BlogService {
  6.     PageResult<Blog> queryBlogByPage(String title, Integer page, Integer rows);
  7. }

BlogServiceImpl

  1. package cn.itbluebox.springbootcsdn.service.Impl;
  3. import cn.itbluebox.springbootcsdn.domain.Blog;
  4. import cn.itbluebox.springbootcsdn.mapper.BlogMapper;
  5. import cn.itbluebox.springbootcsdn.service.BlogService;
  6. import cn.itbluebox.springbootcsdn.vo.PageResult;
  7. import com.github.pagehelper.PageHelper;
  8. import com.github.pagehelper.PageInfo;
  9. import org.springframework.beans.factory.annotation.Autowired;
  10. import org.springframework.stereotype.Service;
  12. import java.util.List;
  14. @Service
  15. public class BlogServiceImpl implements BlogService {
  17.     @Autowired
  18.     private BlogMapper blogMapper;
  20.     @Override
  21.     public PageResult<Blog> queryBlogByPage(String title, Integer page, Integer rows) {
  22.         PageHelper.startPage(page, rows);//自动创建好分页的条件
  23.         System.out.println("----------");
  24.         List<Blog> list = blogMapper.queryBlogByPage(title);
  25.         PageResult pageResult = new PageResult();
  26.         pageResult.setItems(list);//设置数据
  27.         //解析分页结果
  28.         PageInfo<Blog> pageInfo = new PageInfo<Blog>(list);//得到分页信息
  29.         pageResult.setTotal(pageInfo.getTotal());//设置总条数
  30.         long l = pageInfo.getTotal() / pageInfo.getPageSize();
  31.         pageResult.setTotalPage(Integer.parseInt(l+1+""));
  32.         return pageResult;
  33.     }
  34. }
（4）完善BlogMapper

  1. package cn.itbluebox.springbootcsdn.mapper;
  3. import cn.itbluebox.springbootcsdn.domain.Blog;
  4. import org.apache.ibatis.annotations.Select;
  5. import tk.mybatis.mapper.common.Mapper;
  7. import java.util.List;
  9. public interface BlogMapper extends Mapper<Blog> {
  11.     @Select("select * from blog  where  title like '%${title}%'")
  12.     List<Blog> queryBlogByPage(String title);
  13. }
（5）完善SpringBootCSDNApplication

  1. package cn.itbluebox.springbootcsdn;
  3. import org.springframework.boot.SpringApplication;
  4. import org.springframework.boot.autoconfigure.SpringBootApplication;
  5. import tk.mybatis.spring.annotation.MapperScan;
  7. @SpringBootApplication
  8. @MapperScan("cn.itbluebox.springbootcsdn.mapper")
  9. public class SpringBootCSDNApplication {
  10.     public static void main(String[] args) {
  11.         SpringApplication.run(SpringBootCSDNApplication.class, args);
  12.     }
  13. }

2、运行测试

访问：http://localhost:9090/blog/queryBlogByPage?title=&page=1&rows=5

二 、实现查询博客功能（前端功能实现）

1、修改App.vue

2、完善HelloWorld.vue

  1. <template>
  2.   <div>
  3.     <el-table
  4.       :data="items"
  5.       @row-click="open"
  6.       style="width: 80%;margin: auto;top:80px">
  7.       <el-table-column
  8.         prop="thumbnail"
  9.         label="缩略图"
  10.         width="180">
  11.         <!-- 图片的显示 -->
  12.         <template  slot-scope="scope">
  13.           <img :src="scope.row.thumbnail"  min-width="70" height="70" />
  14.         </template>
  15.       </el-table-column>
  16.       <el-table-column
  17.         prop="title"
  18.         label="标题"
  19.         width="180">
  20.       </el-table-column>
  21.       <el-table-column
  22.         prop="abstract_text"
  23.         label="摘要">
  24.       </el-table-column>
  26.     </el-table>
  27.     <div style="height: 500px;margin-top: 100px  ">
  28.       <el-pagination
  29.         layout="prev, pager, next"
  30.         :total="total"
  31.         @current-change="current_change"
  32.       >
  33.       </el-pagination>
  34.     </div>
  35.   </div>
  36. </template>
  38. <script>
  39. export default {
  40.     name: 'HelloWorld',
  41.     data() {
  42.       return {
  43.         info: "",
  44.         total: 0,
  45.         totalPage: 0,
  46.         items: [],
  47.         title: "",
  48.         page: 1,
  49.         rows:5,
  50.         first: 1,
  51.         last: 5,
  52.         startBlogTime: "",
  53.         endBlogTime: "",
  54.         id: "",
  55.         name: "请登录",
  56.         image: "",
  57.         email: "",
  58.       }
  59.     },
  60.     created() {//编写构造函数
  61.      this.getInfo();
  62.     },
  63.     methods: {
  64.       getInfo() {
  65.         this.$axios.get('http://localhost:9090/blog/queryBlogByPage?title=' + this.title + '&page=' + this.page + '&rows=' + this.rows)
  66.           .then(response => (
  67.             this.info = response.data,
  68.               this.total = this.info.total,
  69.               this.totalPage = this.info.totalPage,
  70.               this.items = this.info.items
  71.           )).catch(function (error) { // 请求失败处理
  72.           console.log(error);
  73.         });
  74.       },
  75.       current_change:function(currentPage){
  76.         this.page = currentPage;
  77.         this.getInfo();
  78.       }
  79.     },
  80.     watch: {
  81.       page:  function () {
  82.         this.getInfo();
  83.       },
  84.       rows: function () {
  85.         this.getInfo();
  86.       },
  87.     }
  88.   }
  89. </script>
  91. <style scoped>
  92.   .el-row {
  93.     margin-bottom: 20px;
  94.   }
  96.   .el-col {
  97.     border-radius: 4px;
  98.   }
  100.   .bg-purple-dark {
  101.     background: #99a9bf;
  102.   }
  104.   .bg-purple {
  105.     background: #d3dce6;
  106.   }
  108.   .bg-purple-light {
  109.     background: #e5e9f2;
  110.   }
  112.   .grid-content {
  113.     border-radius: 4px;
  114.     min-height: 36px;
  115.   }
  117.   .row-bg {
  118.     padding: 10px 0;
  119.     background-color: #f9fafc;
  120.   }
  122.   #top {
  123.     position: fixed;
  124.     top: 0px;
  125.     height: 50px;
  126.     width: 100%;
  127.     background-color: #f9fafc;
  128.     height: 80px;
  129.     z-index: 1;
  130.     box-shadow: 2px 2px 5px #888888;
  131.     left: 0px;
  132.   }
  133.   #top1 {
  135.     width: 70%;
  136.     margin: auto;
  137.     padding-top: 20px;
  138.   }
  140. </style>

访问http://localhost:8080/#/

点击翻页

三 、实现查询博客详情（后端功能实现）

1、修改BlogArticle

  1. package cn.itbluebox.springbootcsdn.domain;
  3. import lombok.AllArgsConstructor;
  4. import lombok.Data;
  5. import lombok.NoArgsConstructor;
  7. import javax.persistence.Table;
  8. import java.util.Date;
  9. @Data
  10. @NoArgsConstructor
  11. @AllArgsConstructor
  12. @Table(name = "blog_article")
  13. public class BlogArticle extends Blog{
  14.     private Long id;
  15.     private String context;
  16.     private Date last_update_time;      //更新时间
  17.     private Character is_original;
  18. }

2、完善BlogController实现通过id查询

  1. @GetMapping("queryBlogArticleById")
  2.     public ResponseEntity<BlogArticle> queryBlogById(
  3.             @RequestParam(value = "id") Long id
  4.     ) {
  5.         return ResponseEntity.ok(blogService.queryBlogArticleById(id));
  6.     }

3、完善BlogService以及BlogServiceImpl

BlogService

  1. package cn.itbluebox.springbootcsdn.service;
  3. import cn.itbluebox.springbootcsdn.domain.Blog;
  4. import cn.itbluebox.springbootcsdn.domain.BlogArticle;
  5. import cn.itbluebox.springbootcsdn.vo.PageResult;
  7. public interface BlogService {
  9.     PageResult<Blog> queryBlogByPage(String title, Integer page, Integer rows);
  11.     BlogArticle queryBlogArticleById(Long id);
  12. }

BlogServiceImpl

  1. @Override
  2.     public BlogArticle queryBlogArticleById(Long id) {
  4.         return blogArticleMapper.queryBlogArticleById(id);
  5.     }

4、完善BlogArticleMapper

  1. package cn.itbluebox.springbootcsdn.mapper;
  3. import cn.itbluebox.springbootcsdn.domain.BlogArticle;
  4. import org.apache.ibatis.annotations.Select;
  5. import tk.mybatis.mapper.common.Mapper;
  7. public interface BlogArticleMapper extends Mapper<BlogArticle> {
  9.     @Select("select * from blog_article ba LEFT JOIN blog b on ba.id = b.blog_article_id where ba.id = #{id} LIMIT 0,1")
  10.     BlogArticle queryBlogArticleById(Long id);
  11. }

5、运行测试

访问：http://localhost:9090/blog/queryBlogArticleById?id=1

三 、实现查询博客详情（前端功能实现）

1、在HelloWorld.vue当中设置跳转页面的方法并携带参数

  1. open(row) {
  2.         this.$router.push("/Article?" + row.id);
  3.       },

2、创建Article.vue

（1）实现通过id查询对应的详细内容

  1. <template>
  3.   <div style="width: 100%;background-color: #99a9bf ">
  4.     <div style="width: 80%;margin: auto;background-color: #f9fafc">
  6.       <el-row style="position: fixed; top: 0px;background-color: #2c3e50  ;width: 80%; z-index: 1"  >
  7.         <el-col :span="24" style="background-color: white">
  8.           <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"
  9.                >
  10.               <span  v-html="title"></span>
  11.               <span style="margin-left: 50px"  > 浏览量：<span v-html="info.view_count"></span></span>
  12.           </div>
  14.         </el-col>
  15.       </el-row>
  16.       <el-row>
  17.         <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
  18.         <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
  19.       </el-row>
  20.       <el-row>
  21.         <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
  22.         <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
  23.         <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
  24.       </el-row>
  25.       <el-row>
  26.         <el-col :span="24" style="margin-top: 80px;">
  27.           <div style="padding: 50px">
  28.             <p style="text-align: left" v-html="info.context"></p>
  29.           </div>
  30.         </el-col>
  31.       </el-row>
  32.       <el-row style="position: fixed; bottom : 0px;background-color: #2c3e50  ;width: 80%; z-index: 1"  >
  33.         <el-col :span="24" style="background-color: white">
  34.           <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"
  35.           >
  36.             <span style="margin-left: 50px"  > 点赞数：<span v-html="info.like_count"></span></span>
  38.             <span style="float:right;margin-right: 150px">
  40.               <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">
  42.             </span>
  43.           </div>
  45.         </el-col>
  46.       </el-row>
  47.     </div>
  48.   </div>
  49. </template>
  51. <script>
  52.     export default {
  53.         name: "Article",
  54.         data() {
  55.           return {
  56.             id:"",
  57.             info: "",
  58.             total: 0,
  59.             totalPage: 0,
  60.             items: [],
  61.             title: "",
  62.             page: 1,
  63.             rows: 10,
  64.             first: 1,
  65.             last: 10,
  66.             startBlogTime: "",
  67.             endBlogTime: "",
  68.           }
  69.         },
  70.         created() {//编写构造函数
  71.           this.id = location.href.split("?")[1];
  72.           this.getInfo();
  73.         },
  74.         methods: {
  75.           getInfo() {
  76.             this.$axios.get('http://localhost:9090/blog/queryBlogArticleById?id=' + this.id )
  77.               .then(response => (
  78.                 this.info = response.data,
  79.                   this.title = this.info.title
  80.               )).catch(function (error) { // 请求失败处理
  81.               console.log(error);
  82.             });
  83.           },
  84.           selectBlog() {
  85.             this.page = 1;
  86.             this.rows = 10;
  87.             let startTime = (new Date(((this.value1+"").split(",")[0]))).getTime();
  88.             let endTime = (new Date(((this.value1+"").split(",")[1]))).getTime();
  89.             this.startBlogTime = startTime;
  90.             this.endBlogTime = endTime;
  91.             this.getInfo();
  92.           },
  93.           like(){
  94.             this.$axios.get('http://localhost:9090/blogging/blogLikeId?id=' + this.id );
  95.             this.getInfoView();
  96.           },
  97.           current_change:function(currentPage){
  98.             this.page = currentPage;
  99.             this.getInfo();
  100.           },
  101.         },
  102.         watch: {
  103.           page:  function () {
  104.             this.getInfo();
  105.           },
  106.           rows: function () {
  107.             this.getInfo();
  108.           },
  110.         }
  111.     }
  112. </script>
  114. <style scoped>
  116. </style>
（2）在router下的index.js当中设置页面跳转路径

  1. import Vue from 'vue'
  2. import Router from 'vue-router'
  3. import HelloWorld from '@/components/HelloWorld'
  4. import Article from '@/components/Article'
  6. Vue.use(Router)
  8. export default new Router({
  9.   routes: [
  10.     {
  11.       path: '/',
  12.       name: 'HelloWorld',
  13.       component: HelloWorld
  14.     },
  15.     {
  16.       path: '/Article',
  17.       name: 'Article',
  18.       component: Article
  19.     },
  20.   ]
  21. })
（3）点击测试

3、实现浏览量增加

实现浏览量的增加

（1）修改BlogController

  1. @GetMapping("queryBlogArticleById")
  2.     public ResponseEntity<BlogArticle> queryBlogById(
  3.             @RequestParam(value = "id") Long id
  4.     ) {
  5.         //查询当前id 对应的博客信息
  6.         BlogArticle blogArticle = blogService.queryBlogArticleById(id);
  7.         Blog blog = blogService.queryBlogById(blogArticle.getId());
  8.         Long view_count = blog.getView_count();
  9.         //将访问量查询并自增后重新设置值
  10.         view_count = view_count + 1;
  11.         blog.setView_count(view_count);
  12.         //更新数据库大当中的值
  13.         blogService.updateBlog(blog);
  14.         return ResponseEntity.ok(blogArticle);
  15.     }
（2）对应的实现的查询和更新的接口和实现类

  1. Blog queryBlogById(Long id);
  3.     void updateBlog(Blog blog);

  1. @Override
  2.     public Blog queryBlogById(Long id) {
  3.         return blogMapper.queryBlogById(id);
  4.     }
  6.     @Transactional(rollbackFor = Exception.class)
  7.     public void updateBlog(Blog blog) {
  9.         blogMapper.updateByView(blog);
  10.     }
（2）对应的BlogMapper

  1. @Select("select * from blog  where  id  = #{id} limit 0,1")
  2.     Blog queryBlogById(Long id);
  4.     @Update("UPDATE blog set view_count = #{view_count} WHERE  id = #{id}")
  5.     void updateByView(Blog blog);

4、实现点赞

（1）完善Article.vue设置事件和请求方式

对应的方法

放置手残实现全部代码

  1. <template>
  3.   <div style="width: 100%;background-color: #99a9bf ">
  4.     <div style="width: 80%;margin: auto;background-color: #f9fafc">
  6.       <el-row style="position: fixed; top: 0px;background-color: #2c3e50  ;width: 80%; z-index: 1"  >
  7.         <el-col :span="24" style="background-color: white">
  8.           <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"
  9.                >
  10.               <span  v-html="title"></span>
  11.               <span style="margin-left: 50px"  > 浏览量：<span v-html="info.view_count"></span></span>
  12.           </div>
  14.         </el-col>
  15.       </el-row>
  16.       <el-row>
  17.         <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
  18.         <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
  19.       </el-row>
  20.       <el-row>
  21.         <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
  22.         <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
  23.         <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
  24.       </el-row>
  25.       <el-row>
  26.         <el-col :span="24" style="margin-top: 80px;">
  27.           <div style="padding: 50px">
  28.             <p style="text-align: left" v-html="info.context"></p>
  29.           </div>
  30.         </el-col>
  31.       </el-row>
  32.       <el-row style="position: fixed; bottom : 0px;background-color: #2c3e50  ;width: 80%; z-index: 1"  >
  33.         <el-col :span="24" style="background-color: white">
  34.           <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"
  35.           >
  36.             <span style="margin-left: 50px"  > 点赞数：<span v-html="info.like_count"></span></span>
  38.             <span style="float:right;margin-right: 150px">
  40.               <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">
  42.             </span>
  43.           </div>
  45.         </el-col>
  46.       </el-row>
  47.     </div>
  48.   </div>
  49. </template>
  51. <script>
  52.     export default {
  53.         name: "Article",
  54.         data() {
  55.           return {
  56.             id:"",
  57.             info: "",
  58.             total: 0,
  59.             totalPage: 0,
  60.             items: [],
  61.             title: "",
  62.             page: 1,
  63.             rows: 10,
  64.             first: 1,
  65.             last: 10,
  66.             startBlogTime: "",
  67.             endBlogTime: "",
  68.           }
  69.         },
  70.         created() {//编写构造函数
  71.           this.id = location.href.split("?")[1];
  72.           this.getInfo();
  73.         },
  74.         methods: {
  75.           getInfo() {
  76.             this.$axios.get('http://localhost:9090/blog/queryBlogArticleById?id=' + this.id )
  77.               .then(response => (
  78.                 this.info = response.data,
  79.                   this.title = this.info.title
  80.               )).catch(function (error) { // 请求失败处理
  81.               console.log(error);
  82.             });
  83.           },
  84.           selectBlog() {
  85.             this.page = 1;
  86.             this.rows = 10;
  87.             let startTime = (new Date(((this.value1+"").split(",")[0]))).getTime();
  88.             let endTime = (new Date(((this.value1+"").split(",")[1]))).getTime();
  89.             this.startBlogTime = startTime;
  90.             this.endBlogTime = endTime;
  91.             this.getInfo();
  92.           },
  93.           like(){
  94.             this.$axios.get('http://localhost:9090/blog/blogLikeId?id=' + this.id );
  95.             this.getInfo();
  96.           },
  97.           current_change:function(currentPage){
  98.             this.page = currentPage;
  99.             this.getInfo();
  100.           },
  101.         },
  102.         watch: {
  103.           page:  function () {
  104.             this.getInfo();
  105.           },
  106.           rows: function () {
  107.             this.getInfo();
  108.           },
  110.         }
  111.     }
  112. </script>
  114. <style scoped>
  116. </style>
（2）完善后端接口

BlogController

  1. @GetMapping("blogLikeId")
  2.     public ResponseEntity<BlogArticle> queryBlogLikeId(
  3.             @RequestParam(value = "id") Long id
  4.     ) {
  5.         //查询当前id 对应的博客信息
  6.         BlogArticle blogArticle = blogService.queryBlogArticleById(id);
  7.         Blog blog = blogService.queryBlogById(blogArticle.getId());
  8.         Long like_count = blog.getLike_count();
  9.         //将访问量查询并自增后重新设置值
  10.         like_count = like_count + 1;
  11.         blog.setLike_count(like_count);
  12.         //更新数据库大当中的值
  13.         blogService.updateBlogLikeCount(blog);
  14.         return ResponseEntity.ok(blogArticle);
  15.     }

  1. void updateBlogLikeCount(Blog blog);

BlogServiceImpl

  1. @Override
  2.     public void updateBlogLikeCount(Blog blog) {
  3.         blogMapper.updateByLike(blog);
  4.     }

BlogMapper

  1. @Update("UPDATE blog set like_count = #{like_count} WHERE  id = #{id}")
  2.     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