1、36壁纸页面列表显示前端实现

ruoyi-ui/src/api/business/webmagic/_36wallpaper/wallpaper36.js

@@ -35,3 +35,11 @@ export function getWallpaperList(data) {
     params: data
   })
 }
+
+// 获取壁纸类别
+export function getType() {
+  return request({
+    url: '/webmagic/_36wallpaper/getType',
+    method: 'get',
+  })
+}

ruoyi-ui/src/views/business/webmagic/_36wallpaper/show/index.vue

@@ -1,19 +1,50 @@
 <template>
-  <div>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
+      <el-form-item label="图片类型" prop="type">
+        <el-select
+          v-model="queryParams.type"
+          placeholder="请输入"
+          size="small"
+          @change="handleQuery"
+          style="width: 180px">
+          <el-option
+            v-for="index in typeList"
+            :key="index"
+            :label="index"
+            :value="index"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+
     <div class="bigDiv">
-      <el-row :gutter="20" class="el-row" >
+      <el-row :gutter="20" class="el-row">
         <el-col :span="4" v-for="data in wallpaperList">
           <div class="grid-content bg-purple">
+
+            <div style="height: 10px;background-color: #ffba00"></div>
+
+            <!--图片div-->
             <div style="">
               <el-image
-                style="height: 108px;width: 192px"
                 :src="data.pictureUrl"
+                fit="fill"
+                style="height: 160px"
+                :alt="data.pictureName"
                 :preview-src-list="[data.pictureUrl]">
               </el-image>
             </div>
 
-            <div>
+            <!--标签div-->
-
+            <div style="margin-top: 5px">
+              <div v-for="label in data.labels" style="float: left;margin-left: 4px;margin-top: 4px">
+                <el-tag>{{ label }}</el-tag>
+              </div>
             </div>
 
           </div>
@@ -35,7 +66,7 @@
 
 <script>
 
-import {getWallpaperList} from '@/api/business/webmagic/_36wallpaper/wallpaper36'
+import {getWallpaperList, getType} from '@/api/business/webmagic/_36wallpaper/wallpaper36'
 
 export default {
   name: "wallpaper_36Show",
@@ -47,28 +78,57 @@ export default {
         pageNum: 1,
         pageSize: 12,
         condition: null,
+        type: null,
       },
 
       //总数
-      total:0,
+      total: 0,
 
       //壁纸列表数据
-      wallpaperList:{},
+      wallpaperList: {},
+
+      //壁纸类别
+      typeList: [],
     }
   },
 
   created() {
-    this.getList();
+    this.init()
+
   },
 
 
-  methods:{
+  methods: {
     getList() {
+
       getWallpaperList(this.queryParams).then(response => {
         this.wallpaperList = response.data.records;
         this.total = response.data.total;
       });
     },
+
+
+    init() {
+      //获取类别
+      getType().then(res => {
+        this.typeList = res.data
+
+        this.queryParams.type = this.typeList[0]
+        this.getList();
+      })
+    },
+
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.queryParams.type = this.typeList[0]
+      this.handleQuery();
+    },
   }
 
 
@@ -77,22 +137,22 @@ export default {
 
 <style scoped>
 .bg-purple {
-  background: #d3dce6;
+  background: #666666;
 }
 
 .grid-content {
-  border-radius: 4px;
+  border-radius: 10px;
   min-height: 36px;
   max-height: 350px;
-  height: 320px;
+  height: 310px;
   margin-bottom: 10px;
 }
 
-.bigDiv{
+.bigDiv {
   margin: 15px;
 }
 
-.el-row{
+.el-row {
   margin-bottom: 15px;
 }
 

xjs-business/xjs-business-webmagic/src/main/java/com/xjs/_36wallpaper/controller/_36wallpaperController.java

@@ -14,6 +14,7 @@ import io.swagger.annotations.ApiOperation;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.web.bind.annotation.*;
 
+import java.util.List;
 import java.util.Objects;
 
 /**
@@ -70,6 +71,15 @@ public class _36wallpaperController extends MyBaseController<_36wallpaper> {
         return AjaxResult.success(list);
     }
 
+    @GetMapping("getType")
+    @ApiOperation("获取壁纸类别")
+    @RequiresPermissions("webmagic:_36wallpaper:list")
+    public AjaxResult getType() {
+        List<Object> list = wallpaperService.getType();
+        return AjaxResult.success(list);
+    }
+
+
 
 
     //----------------------远程rpc调用---------------------------

xjs-business/xjs-business-webmagic/src/main/java/com/xjs/_36wallpaper/pojo/_36wallpaper.java

@@ -44,6 +44,12 @@ public class _36wallpaper extends BaseEntity implements Serializable {
     @Excel(name = "照片标签(多个用 , 分割)")
     private String label;
 
+    /**
+     * label分割成数组
+     */
+    @TableField(exist = false)
+    private String[] labels;
+
     /** 创建时间 */
     @Excel(name = "创建时间",dateFormat = "yyyy-MM-dd HH:mm:ss")
     @TableField(fill = FieldFill.INSERT)

xjs-business/xjs-business-webmagic/src/main/java/com/xjs/_36wallpaper/service/_36wallpaperService.java

@@ -6,6 +6,8 @@ import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
 import com.baomidou.mybatisplus.extension.service.IService;
 import com.xjs._36wallpaper.pojo._36wallpaper;
 
+import java.util.List;
+
 /**
  * 36壁纸网service接口
  * @author xiejs
@@ -45,4 +47,12 @@ public interface _36wallpaperService extends IService<_36wallpaper> {
      * @return page
      */
     IPage<_36wallpaper> selectWallpaperList(Page<_36wallpaper> page, _36wallpaper wallpaper);
+
+
+    /**
+     * 获取壁纸类别
+     * @return list
+     */
+    List<Object> getType();
+
 }

xjs-business/xjs-business-webmagic/src/main/java/com/xjs/_36wallpaper/service/impl/_36wallpaperServiceImpl.java

@@ -18,6 +18,7 @@ import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
 
 import javax.annotation.Resource;
+import java.util.List;
 import java.util.regex.Pattern;
 
 import static com.xjs._36wallpaper.consts._36wallpaperConst.*;
@@ -136,13 +137,30 @@ public class _36wallpaperServiceImpl extends ServiceImpl<_36wallpaperMapper, _36
     public IPage<_36wallpaper> selectWallpaperList(Page<_36wallpaper> page, _36wallpaper wallpaper) {
         String condition = wallpaper.getCondition();
         QueryWrapper<_36wallpaper> wr = new QueryWrapper<>();
+        wr.eq(StringUtils.isNotEmpty(wallpaper.getType()), "type", wallpaper.getType());
         wr.and(StringUtils.isNotEmpty(condition), obj -> {
             obj.like("picture_name", condition)
                     .or().like("type", condition)
                     .or().like("label", condition);
         });
+        Page<_36wallpaper> wallpaperList = this.page(page, wr);
+        for (_36wallpaper record : wallpaperList.getRecords()) {
+            //分割label
+            String label = record.getLabel();
+            if (StringUtils.isNotEmpty(label)) {
+                String[] strings = label.split(",");
+                record.setLabels(strings);
+            }
+        }
 
-        return this.page(page,wr);
+        return wallpaperList;
+    }
+
+    @Override
+    public List<Object> getType() {
+        QueryWrapper<_36wallpaper> wrapper = new QueryWrapper<_36wallpaper>().groupBy("type");
+        wrapper.select("type");
+        return this.listObjs(wrapper);
     }