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

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

转载作者：知者更新时间：2024-03-13 05:48:24

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

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

点击测试

文章推荐： JavaScript学习笔记5-变量和字符串的使用

文章推荐：完美C语言系列之《C语言程序设计现代方法》----第六章

文章推荐： Dubbo 从入门到精通

文章推荐： JavaScript学习笔记4-变量类型

jquery-ui - Angular-UI 从 ui-date 中的日期减去一天
情况我想使用 ui-date 在我的应用程序中设置/编辑日期。我使用最新稳定版本的 Angular、Angular-UI、JQuery-UI 等。问题一旦使用日期选择器选择了日期，我的模型中的日期将
jquery-ui - 触发 jQuery UI 事件 : ui-selectable
编辑: jQuery UI 可选择小部件内置了一个回调，stop，我需要知道如何以编程方式触发此事件。 (措辞不佳)我已将事件监听器附加到 jQuery UI Selectable Widget 。如
How to use Tailwind UI (headless ui) components with Next JS server components?(如何将TailWind UI(Headless UI)组件与Next JS服务器组件配合使用？)
我正在尝试建立一个下一个JS与尾风用户界面提供的反应组件的网络应用程序。顺风用户界面是在幕后使用无头用户界面。。默认情况下，Next JS将构建服务器端组件，除非您在页面顶部添加“使用客户端”。不幸的
How to use Tailwind UI (headless ui) components with Next JS server components?(如何将TailWind UI(Headless UI)组件与Next JS服务器组件配合使用？)
我正在尝试建立一个下一个JS与尾风用户界面提供的反应组件的网络应用程序。顺风用户界面是在幕后使用无头用户界面。。默认情况下，Next JS将构建服务器端组件，除非您在页面顶部添加“使用客户端”。不幸的
jquery-ui - jQuery UI 主题冲突 : SlickGrid and jQuery UI Tabs
我正在尝试应用这个 SlickGrid 示例: http://mleibman.github.com/SlickGrid/examples/example4-model.html 到我自己的网络项目。
swagger-ui - 如何在 Swagger-ui SpringDoc open ui 上对模式进行排序
我想整理我的 Schemas为我的实体类生成，DTO 类位于 Springdoc ui . 我可以对 tags 进行排序和 operations通过以下配置 yml文件，但我的模式不是按排序顺序排列的
angular-ui-router - UI-ROUTER - 阻止 ui-sref 改变状态
有谁知道阻止 ui-sref 重新加载状态的方法吗？我无法通过“$stateChangeStart”事件执行此操作，因为 ui-sref 仅更改参数而不更改状态名称。我的左边是书单，左边是书的详细
jquery-ui - 模态 ui 对话框内的 jquery UI 自动完成 - 建议未显示？
我正在 jquery ui 对话框中使用 jquery ui 自动完成小部件。当我输入搜索文本时，文本框缩进(ui-autocomplet-loading)但不显示任何建议。 var availabl
kendo-ui - Kendo UI MVVM 与 Kendo UI 拖放
我正在尝试将 Kendo UI MVVM 框架与 Kendo UI 拖放机制结合使用；但我很难找到如何将数据从 draggable 对象中删除。我的代码是这样的...... var viewMode
kendo-ui - Kendo UI Core 与 Kendo UI Web
Kendo UI Web 和 Kendo UI Core 之间有什么区别 https://www.nuget.org/packages/KendoUIWeb http://www.nuget.org/
kendo-ui - Kendo UI MVVM 与 Kendo UI 拖放
我正在尝试将 Kendo UI MVVM 框架与 Kendo UI 拖放机制结合使用；但是我很难找到如何从 draggable 对象中删除数据。我的代码是这样的…… var viewModel =
angularjs - Angular UI - UI-Router - 在子 ui-view 上传递数据和调用函数
使用 Angular JS - UI 路由器，我需要从我的父 View project.details 到我的 subview project.details.tasks 进行通信。我的 subvie
kendo-ui - Kendo UI Flatcolorpicker 在 Kendo UI 窗口中无法正确呈现
KendoUI 版本 2013.3.1119使用 Kendo MVVM 我有一个我构建的颜色选择器，它使用平面颜色选择器和使用调色板的颜色选择器。它们都可以正常运行，但平面颜色选择器的布局已关闭， s
c# - 如何从非 UI 线程获取 UI SynchronizationContext 并且没有表单或 UI 创建的任何对象
我在非 UI 线程上，我需要创建并显示一个 SaveDialog。但是当我尝试显示它时:.ShowDialog() 我得到: "An unhandled exception of type 'Syst
css - 为什么 .ui-widget 匹配 .ui-widget .ui-widget
我正在试验 jquery-ui 并查看和克隆一些示例。在一个示例(自动完成的组合框)中，我看到一个带有 ui-widget 类的 anchor (a) 元素，它与包含的 css 文件中的 .ui-wi
angular - 类型 'Observable>' 不可分配给类型 'Observable' 。类型 'UI[] | Promise' 不可分配给类型 'UI[]'
我需要返回一个 UI 列表，我用这个方法: getList(): Observable { return this.httpClient.get("/api/listui").pipe
angular-ui-bootstrap - ui-grid 在 angular-ui-tab 中消失
我有 ui-grids在 angular-ui-tabs ，它们位于 ng-if 中以避免呈现问题。如果有更多数据并且网格进入滚动模式，则单击选项卡时数据会完全消失。我相信这是一个 ui-grids-
reactjs - material-ui lab@material-ui/lab/和material-ui core中组件的区别
这似乎是一个通用的问题，与其他几个 React 开源框架相比，我真的很喜欢 Material ui 的可扩展性。问题 “@material-ui/core”和“@material-ui/lab”中的
javascript - Angular UI Router - 根据另一个 ui-view 更改子菜单 ui-view
我有一个根页面(index.html)，带有侧边栏(“菜单”)和主要内容 div(“主”)，因此有两个 ui-view div - 一个称为“菜单”，一个称为“主”。当主要内容区域有网站列表 (/s
jquery-ui - 如何在 Angular 中从一种 ui-sortable 迁移到另一种 ui-sortable？
有人在http://jsfiddle.net/hKYWr/上整理了一个很好的 fiddle 。关于使用 angular-ui 和 jqueryui sortable 来获得良好的可排序效果。如何在两

知者

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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

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

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

（1）创建BlogService和BlogServiceImpl

（2）编写BlogController

（3）完善BlogService 和BlogServiceImpl

（4）完善BlogMapper

（5）完善SpringBootCSDNApplication

2、运行测试

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

1、修改App.vue

2、完善HelloWorld.vue

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

1、修改BlogArticle

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

3、完善BlogService以及BlogServiceImpl

4、完善BlogArticleMapper

5、运行测试

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

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

2、创建Article.vue

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

（2）在router下的index.js当中设置页面跳转路径

（3）点击测试

3、实现浏览量增加

（1）修改BlogController

（2）对应的实现的查询和更新的接口和实现类

（2）对应的BlogMapper

4、实现点赞

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

（2）完善后端接口

首页

博学

6Ren·AI

商城

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

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

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

（1）创建BlogService和BlogServiceImpl

（2）编写BlogController

（3）完善BlogService 和BlogServiceImpl

（4）完善BlogMapper

（5）完善SpringBootCSDNApplication

2、运行测试

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

1、修改App.vue

2、完善HelloWorld.vue

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

1、修改BlogArticle

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

3、完善BlogService以及BlogServiceImpl

4、完善BlogArticleMapper

5、运行测试

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

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

2、创建Article.vue

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

（2）在router下的index.js当中设置页面跳转路径

（3）点击测试

3、实现浏览量增加

（1）修改BlogController

（2）对应的实现的查询和更新的接口和实现类

（2）对应的BlogMapper

4、实现点赞

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

（2）完善后端接口

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

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

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

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

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