1、中关村笔记本前后端数据展示显示

ruoyi-ui/src/api/business/webmagic/zol/zolNotebook.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+// 查询爬虫中关村笔记本搜索列表
+export function listZolNotebook(query) {
+  return request({
+    url: '/webmagic/zol-notebook/list',
+    method: 'get',
+    params: query
+  })
+}

ruoyi-ui/src/views/business/webmagic/zol/notebook/index.vue

@@ -0,0 +1,200 @@
+<template>
+  <div class="app-container" v-loading="loading">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" :rules="rules">
+      <el-form-item label="查询条件" prop="condition">
+        <el-input v-model="queryParams.condition"
+                  placeholder="请输入笔记本名称、描述等"
+                  maxlength="21"
+                  size="small"
+        ></el-input>
+      </el-form-item>
+
+      <el-form-item label="创建时间">
+        <el-date-picker
+          v-model="daterangeCreateTime"
+          size="small"
+          style="width: 320px"
+          value-format="yyyy-MM-dd"
+          format="yyyy 年 MM 月 dd 日"
+          type="daterange"
+          range-separator="-"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :picker-options="pickerOptions"
+          @change="dateQuery"
+        ></el-date-picker>
+      </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>
+      <el-row :gutter="10">
+        <el-col :span="4" v-for="(data,index) in formList" :key="data.id">
+          <div class="grid-content bg-purple">
+            <el-card class="" shadow="hover">
+              <!--图片 -->
+              <div style="width: 100%">
+                <el-image
+                  style="width: 220px; height: 165px"
+                  :src="data.pictureUrl"
+                  fit="fit"></el-image>
+              </div>
+              <el-tooltip class="item" effect="dark" :content="data.notebookName+data.description" placement="top">
+                <!--描述 -->
+                <div style="width: 100%" class="content">
+                  <a :href="data.detailPage" target="_blank">
+                    <span>{{ data.notebookName }}</span>
+                    <span style="color: red">{{ data.description }}</span>
+                  </a>
+                </div>
+              </el-tooltip>
+              <!--参考价 -->
+              <div class="content">
+                <span style="color: #999093;font-size: 13px">参考价：</span>
+                <span style="color: red;font-size: 15px">￥{{ data.price }}</span>
+              </div>
+              <!--评分 -->
+              <div style="padding-bottom: 10px">
+                <el-rate
+                  style="float: left"
+                  disabled
+                  :max="5"
+                  v-model.number="data.heat/2"> >
+                </el-rate>
+                <span style="float: left;color: red;font-size: 12px">{{ data.heat }}评分</span>
+              </div>
+
+            </el-card>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+  </div>
+</template>
+
+<script>
+import {pickerOptions} from "@/layout/mixin/PickerOptions";
+import {listZolNotebook} from "@/api/business/webmagic/zol/zolNotebook";
+
+export default {
+  name: "ZolNotebook",
+  mixins: [pickerOptions],
+  data() {
+    return {
+      queryParams: {
+        pageNum: 1,
+        pageSize: 18,
+        condition: null,
+      },
+
+      //检查查询范围
+      daterangeCreateTime: [],
+
+      //表单数据
+      formList: {},
+
+      //总数
+      total: 0,
+
+      // 遮罩层
+      loading: true,
+
+      rules: {
+        condition: [
+          {min: 0, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
+        ]
+      }
+    }
+  },
+
+  created() {
+    this.getList()
+  },
+
+  methods: {
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.daterangeCreateTime = [];
+      this.queryParams.createTime = null
+      this.queryParams.endCreateTime = null
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+
+    dateQuery() {
+      //清空时间参数
+      this.queryParams.createTime = null
+      this.queryParams.endCreateTime = null
+
+      this.handleQuery();
+    },
+
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.$refs["queryForm"].validate(valid => {
+          if (valid) {
+            this.getList();
+          }
+        }
+      );
+    },
+
+    getList() {
+      if (null != this.daterangeCreateTime && '' !== this.daterangeCreateTime) {
+        this.queryParams.createTime = this.daterangeCreateTime[0];
+        this.queryParams.endCreateTime = this.daterangeCreateTime[1];
+      }
+
+      this.loading = true;
+      listZolNotebook(this.queryParams).then(res => {
+        this.loading = false;
+        this.formList = res.data.records
+        this.total = res.data.total
+      })
+
+
+    },
+  },
+
+
+}
+</script>
+
+<style scoped>
+
+.grid-content {
+  border-radius: 4px;
+  min-height: 36px;
+}
+
+.content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  height: 35px;
+  -webkit-line-clamp: 2; /* 限制在一个块元素显示的文本的行数 */
+  -webkit-box-orient: vertical; /* 垂直排列 */
+  word-break: break-all; /* 内容自动换行 */
+  font-size: 12px;
+}
+
+a:hover {
+  color: red;
+}
+
+</style>

ruoyi-ui/src/views/business/webmagic/zol/phone/index.vue

@@ -89,7 +89,6 @@
 <script>
 import {pickerOptions} from "@/layout/mixin/PickerOptions";
 import {listZolPhone} from "@/api/business/webmagic/zol/zolPhone";
-import {updateWord} from "@/api/business/english/word";
 
 export default {
   name: "ZolPhone",

xjs-business/xjs-business-webmagic/src/main/java/com/xjs/zol/controller/ZolNotebookController.java

@@ -0,0 +1,39 @@
+package com.xjs.zol.controller;
+
+import com.baomidou.mybatisplus.core.metadata.IPage;
+import com.ruoyi.common.core.web.domain.AjaxResult;
+import com.ruoyi.common.security.annotation.RequiresPermissions;
+import com.xjs.validation.group.SelectGroup;
+import com.xjs.web.MyBaseController;
+import com.xjs.zol.pojo.ZolNotebook;
+import com.xjs.zol.service.ZolNotebookService;
+import io.swagger.annotations.Api;
+import io.swagger.annotations.ApiOperation;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.validation.annotation.Validated;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+
+/**
+ * 爬虫中关村笔记本controller
+ * @author xiejs
+ * @since 2022-04-18
+ */
+@RestController
+@RequestMapping("zol-notebook")
+@Api(tags = "爬虫模块-中关村笔记本")
+public class ZolNotebookController extends MyBaseController<ZolNotebook> {
+
+    @Autowired
+    private ZolNotebookService zolNotebookService;
+
+    @RequiresPermissions("webmagic:zol-notebook:list")
+    @GetMapping("/list")
+    @ApiOperation("查询中关村笔记本列表")
+    public AjaxResult list(@Validated({SelectGroup.class}) ZolNotebook zolNotebook) {
+        IPage<ZolNotebook> page=zolNotebookService.selectZolPhoneByPage(startPageMP(),zolNotebook);
+        return AjaxResult.success(page);
+    }
+
+}

xjs-business/xjs-business-webmagic/src/main/java/com/xjs/zol/service/ZolNotebookService.java

@@ -1,5 +1,7 @@
 package com.xjs.zol.service;
 
+import com.baomidou.mybatisplus.core.metadata.IPage;
+import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
 import com.baomidou.mybatisplus.extension.service.IService;
 import com.xjs.zol.pojo.ZolNotebook;
 
@@ -9,4 +11,11 @@ import com.xjs.zol.pojo.ZolNotebook;
  * @since 2022-04-18
  */
 public interface ZolNotebookService extends IService<ZolNotebook> {
+    /**
+     * 分页查询笔记本数据
+     * @param startPageMP mp封装分页数据
+     * @param zolNotebook 实体
+     * @return page
+     */
+    IPage<ZolNotebook> selectZolPhoneByPage(Page<ZolNotebook> startPageMP, ZolNotebook zolNotebook);
 }

xjs-business/xjs-business-webmagic/src/main/java/com/xjs/zol/service/impl/ZolNotebookServiceImpl.java

@@ -1,16 +1,38 @@
 package com.xjs.zol.service.impl;
 
+import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
+import com.baomidou.mybatisplus.core.metadata.IPage;
+import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
 import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
+import com.ruoyi.common.core.utils.StringUtils;
 import com.xjs.zol.mapper.ZolNotebookMapper;
 import com.xjs.zol.pojo.ZolNotebook;
 import com.xjs.zol.service.ZolNotebookService;
 import org.springframework.stereotype.Service;
 
+import java.util.Objects;
+
 /**
  * 爬虫数据中关村笔记本service接口实现
+ *
  * @author xiejs
  * @since 2022-04-18
  */
 @Service
 public class ZolNotebookServiceImpl extends ServiceImpl<ZolNotebookMapper, ZolNotebook> implements ZolNotebookService {
+
+    @Override
+    public IPage<ZolNotebook> selectZolPhoneByPage(Page<ZolNotebook> startPageMP, ZolNotebook zolNotebook) {
+        String condition = zolNotebook.getCondition();
+        LambdaQueryWrapper<ZolNotebook> wr = new LambdaQueryWrapper<>();
+        boolean b = Objects.nonNull(zolNotebook.getCreateTime()) && Objects.nonNull(zolNotebook.getEndCreateTime());
+        wr.between(b, ZolNotebook::getCreateTime, zolNotebook.getCreateTime(), zolNotebook.getEndCreateTime());
+        //通用查询/组合查询
+        wr.and(StringUtils.isNotEmpty(condition), obj -> {
+            obj.like(ZolNotebook::getNotebookName, condition)
+                    .or()
+                    .like(ZolNotebook::getDescription, condition);
+        });
+        return this.page(startPageMP, wr);
+    }
 }