山大软院创新项目实训（十）

目录

一、成果概述

二、关键代码

1.封面添加

2.分页查询

---

 

一、成果概述

给日志添加封面属性以及分页查询功能，前端展示更加美观、和谐。

二、关键代码

1.封面添加

Blog类：

@ApiModelProperty("日志封面")
      private String picture;

前端展示：

<div style="width: 110px">
            <img v-if="item.picture" :src="item.picture" alt=""
                 style="width: 100px; height:60px; right: 5px">
          </div>

新增日志&编辑日志：

<el-form-item label="上传封面" prop="picture" style="width: 30%">
            <el-upload
                class="avatar-uploader"
                :action="'/api/file/uploadphoto'"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
            >
              <img v-if="form.picture" :src="form.picture" class="avatar">
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </el-form-item>

与之前上传头像类似，调用已写好的/api/file/uploadphoto接口，将图片保存在设置好的绝对路径下；如果数据库中存有图片的url，则展示，否则默认是钩子。

前端效果展示：

2.分页查询

前端：

<el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[2, 5, 10, 20]"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total">
        </el-pagination>

其中:page-sizes表示默认值。

2个监听函数：

handleSizeChange(pageSize) {
      console.log(pageSize)
      this.pageSize = pageSize
      this.loads()
    },
handleCurrentChange(pageNum) {
      console.log(pageNum)
      this.pageNum = pageNum
      this.loads()
    },

后端API：

@ApiOperation("博客菜单栏查询：根据文章标题name或者发布人username进行查询")
    @GetMapping("/page")
    public Result findPage(@RequestParam String name,
                           @RequestParam String user,
                           @RequestParam Integer pageNum,
                                @RequestParam Integer pageSize) {
        QueryWrapper<Blog> queryWrapper = new QueryWrapper<>();
        queryWrapper.like("user",user);
        queryWrapper.orderByDesc("time");//根据time降序输出
        if (StrUtil.isNotBlank(name)) {
            queryWrapper.like("name", name);
        }
        return Result.success(blogService.page(new Page<>(pageNum, pageSize), queryWrapper));
    }

pageNum为页数，pageSize为一页最大个数。

效果展示：