SpringBoot+Vue+Element个人博客项目3-精选文章置顶

目录

SpringBoot+Vue+Element个人博客项目

一.需求解析

 二.代码的实现

第一步 修改实体及数据库

第二步 修改查询语句

第三步：测试类 

 第四步 补充三层结构的代码 (Controller,Service )

第五步： 编写前端请求

三.最终效果  

---

---

SpringBoot+Vue+Element个人博客项目

一.需求解析

 提出需求：如图首页的精选文章因为过多，导致页面变形。我们需要对筛选出的文章进行控制。

 解决思路:  至此我们可以为文章实现置顶功能（即 置顶的文章 = 精选文章），通过设置文章的权重属性，对精选文章进行排序。 并且让其输出固定数量的博客。

 

---

 二.代码的实现

第一步 修改实体及数据库

注意：在企业开发中其实对于设计之初就会对功能块进行预留字段。

1.为博客实体增加两个属性

    //是否置顶
    private Boolean isStick;

    //权重大小
    private int weightNum;

2.修改数据库的表字段

第二步 修改查询语句

我们使用MyBatisPlus的条件构造器QueryWrapper，构造下列语句

SELECT id,title,user_id,create_time,blog_describe,tag_name,content,image_url,is_stick,weight_num
 FROM blog
 WHERE is_stick IS NOT NULL ORDER BY weight_num DESC
 LIMIT 0,6;

没有使用过QueryWrapper.可以参考我的笔记：

1.QueryWrapper的使用

2.QueryWrapper官方文档  

代码解析 ：

//初始化queryWrapper
QueryWrapper<Blog> queryWrapper = new QueryWrapper<>();
// 前面的参数为数据库的列名   is_stick不为空 ，且按照weight_num（权重字段排序）
queryWrapper.isNotNull("is_stick").orderByDesc("weight_num");

 //总页数+总记录数 在使用page对象，控制置顶博客的数量
 Page<Blog> page = new Page<>(1, 6,false);
// 不返回总记录数 设置false
// IPage<Map<String, Object>> iPage = blogMapper.selectMapsPage(page, queryWrapper);
 List <Blog> list = blogMapper.selectPage(page,queryWrapper).getRecords();

注意： 我们使用Page对象控制需要查询的数量 。

第三步：测试类 

通过测试方法，检验查询语句是否合理的。

package com.aze.blog.dao;
import java.util.Date;
import java.util.HashMap;
import	java.util.List;
import java.util.Map;

import com.aze.blog.model.Blog;
import com.aze.blog.model.Tag;
import com.baomidou.mybatisplus.core.conditions.Wrapper;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import org.apache.catalina.User;
import org.junit.Assert;
import org.junit.jupiter.api.Test;
import org.junit.runner.RunWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;
import org.springframework.test.context.junit4.SpringRunner;


import static org.junit.jupiter.api.Assertions.*;

@RunWith(SpringRunner.class)
@SpringBootTest
class BlogMapperTest {

    @Autowired
    BlogMapper blogMapper;

/**
     * @description: 测试条件构造器
     * @author: Aze
     * @time: 2019/11/8 16:14
     * @return:
     */
    //查询 置顶博客
    @Test
    public void selectWrapper(){
        QueryWrapper<Blog> queryWrapper = new QueryWrapper<>();
        //QueryWrapper<Blog> queryWrapper = Wrapper.<Blog>query();
        // 前面的参数为数据库的列名   lt ： 小于
        queryWrapper.isNotNull("is_stick").orderByDesc("weight_num");

        //总页数+总记录数
          Page<Blog> page = new Page<>(1, 2 ,false);
//      不返回总记录数 设置false
        IPage<Map<String, Object>> iPage = blogMapper.selectMapsPage(page, queryWrapper);
        List <Blog> list = blogMapper.selectPage(page,queryWrapper).getRecords();
        // Blog blog = blogMapper.selectOne(queryWrapper);
        list.forEach(System.out::println);
    }

    /**
     * @description:使用map构造条件查询 
     * @author: Aze
     * @time: 2019/11/8 17:13
     * @return:
     */
    @Test
    public void selectByMap(){
        Map<String, Object> columnMap =new  HashMap<String ,Object>();
        columnMap.put("weight_num",2);
        /*模糊查询 like操作*/
        List <Blog> list = blogMapper.selectByMap(columnMap);
        list.forEach(System.out::println);
    }




}

 第四步 补充三层结构的代码 (Controller,Service )

Service

package com.aze.blog.service;

import com.aze.blog.model.Blog;

import javax.validation.constraints.Min;
import java.util.List;

public interface BlogService {

    /**
     * @description: 获取置顶博客
     * @author: Aze
     * @time: 2019/11/11 14:48
     * @return:
     */
    List<Blog> selectByIsStick();

}

ServiceImpl

package com.aze.blog.service.impl;

import com.aze.blog.dao.BlogMapper;
import com.aze.blog.model.Blog;
import com.aze.blog.service.BlogService;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

/**
 * @author ：Aze
 * @description：博客Service
 * @date ：Created in 2019/10/29 14:16
 * @modified By：
 * @version:
 */
@Service
public class BlogServiceImpl implements BlogService {
    @Autowired
    BlogMapper blogMapper;


    /**
     * @description: 查询置顶博客
     * @author: Aze
     * @time: 2019/11/11 14:44
     * @return:
     */
    @Override
    public List<Blog> selectByIsStick() {
        QueryWrapper<Blog> queryWrapper = new QueryWrapper<>();
        queryWrapper.isNotNull("is_stick").orderByDesc("weight_num");
        //总页数+总记录数
        Page<Blog> page = new Page<>(1, 6 ,false);
        //不返回总记录数 设置false
        //IPage<Map<String, Object>> iPage = blogMapper.selectMapsPage(page, queryWrapper);
        List<Blog> list = blogMapper.selectPage(page,queryWrapper).getRecords();
        return list;
    }
}

Controller

package com.aze.blog.controller.api;

import java.nio.file.Path;
import java.util.List;
import java.util.Map;

import com.aze.blog.common.Result;
import com.aze.blog.dao.BlogMapper;
import com.aze.blog.model.Blog;
import com.aze.blog.service.BlogService;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

/**
 * @author ：Aze
 * @description：前台api
 * @date ：Created in 2019/10/29 15:02
 * @modified By：
 * @version:
 */
@RestController
@RequestMapping("/api/blog")
public class BlogApiController {
    @Autowired
    BlogMapper blogMapper;
    @Autowired
    BlogService blogService;

    /**
     * @description: 查询所有
     * @author: Aze
     * @time: 2019/10/29 15:11
     * @return:
     */
    @GetMapping("/list")
    public Result listAll() {
        return Result.successData(blogMapper.selectList(null));
    }

    /**
     * @description: 查询置顶博客
     * @author: Aze
     * @time: 2019/11/11 14:05
     * @return:
     */
    @GetMapping("/select-by-stick" )
    public Result selectByIsStick(){
        return Result.successData(blogService.selectByIsStick());
    }

    @PostMapping("/insert")
    public Result insertBlog(@RequestBody Blog blog) {
        return Result.successData(blogMapper.insert(blog));
    }

    @GetMapping("/getById/{blogId}")
    public Result getById(@PathVariable String blogId) {
        return Result.successData(blogMapper.selectById(blogId));
    }


}

第五步： 编写前端请求

只需要使用stickBlog容器绑定即可

    /*查询置顶博客*/
            listStickBlog(){
                var that = this;
                $.ajax({
                    type: 'GET',
                    url: '/api/blog/select-by-stick',
                    success: function(data) {
                        that.stickBlog = data.data;
                    }
                });
            },

前端完整部分代码

  <div class="aside-widget">
                        <header>
                            <h3>精选文章</h3>
                        </header>
                        <div class="body">
                            <ul class="clean-list">
                                <li v-for="item in stickBlog"><a @click="toSingle(item.id)">{{item.title}}</a></li>
                            </ul>
                        </div>
                    </div>

 

---

三.最终效果