devbox
一键难忘520
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

正则采集器之六——商品管理

作者：一键难忘520 | 2024-08-06 15:45:06

赞

踩

正则采集器之六——商品管理

将采集到的商品保存到数据库中并在后台系统展示，接下来讲解后端和前端代码。

后端

mapper类：

  1. package com.learn.reptile.mapper;
  2.  
  3. import org.apache.ibatis.annotations.Mapper;
  4.  
  5. import com.baomidou.mybatisplus.core.mapper.BaseMapper;
  6. import com.learn.reptile.entity.po.Item;
  7.  
  8. @Mapper
  9. public interface ItemMapper extends BaseMapper<Item> {
  10.  
  11. }

controller类增加两个方法，craw抓取并保存商品，items分页展示商品数据：

  1. package com.learn.reptile.web.controller;
  2.  
  3. import java.util.List;
  4.  
  5. import javax.annotation.Resource;
  6.  
  7. import org.springframework.web.bind.annotation.GetMapping;
  8. import org.springframework.web.bind.annotation.PostMapping;
  9. import org.springframework.web.bind.annotation.RequestBody;
  10. import org.springframework.web.bind.annotation.RequestMapping;
  11. import org.springframework.web.bind.annotation.RestController;
  12.  
  13. import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
  14. import com.baomidou.mybatisplus.core.metadata.IPage;
  15. import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
  16. import com.learn.reptile.entity.po.Item;
  17. import com.learn.reptile.entity.po.ItemWebsite;
  18. import com.learn.reptile.entity.vo.R;
  19. import com.learn.reptile.mapper.ItemMapper;
  20. import com.learn.reptile.utils.ItemCraw;
  21.  
  22. @RequestMapping("/item")
  23. @RestController
  24. public class ItemController {
  25.  
  26. 	@Resource
  27. 	ItemMapper itemMapper;
  28. 	
  29. 	@GetMapping
  30. 	public R<IPage<Item>> items(Page<Item> page) {
  31. 		return R.ok(itemMapper.selectPage(page, new QueryWrapper<>()));
  32. 	}
  33. 	
  34. 	/**
  35. 	 * 前端指定匹配商品的网址、正则匹配方法，抓取并保存商品
  36. 	 * @param itemWebsite
  37. 	 * @return
  38. 	 */
  39. 	@PostMapping("craw")
  40. 	public R craw(ItemWebsite itemWebsite) {
  41. 		List<Item> items = ItemCraw.parseItemsFromUrl(itemWebsite.getUrl(), itemWebsite.getRegexpStr(), itemWebsite.getStartStr(), itemWebsite.getEndStr());
  42. 		for(Item item: items) {
  43. 			//根据淘宝id作重复校验
  44. 			Item pre = itemMapper.selectOne(new QueryWrapper<Item>().eq("item_id", item.getItemId()));
  45. 			item.setSource(itemWebsite.getCode());
  46. 			if(pre==null) {
  47. 				itemMapper.insert(item);
  48. 			} else {
  49. 				item.setId(pre.getId());
  50. 				itemMapper.updateById(item);
  51. 			}
  52. 		}
  53. 		return R.ok();
  54. 	}
  55. 	
  56. 	/**
  57. 	 * 前端指定匹配商品的网址、正则匹配方法，仅作抓取测试
  58. 	 * @param itemWebsite
  59. 	 * @return
  60. 	 */
  61. 	@PostMapping("test")
  62. 	public R<List<Item>> test(@RequestBody ItemWebsite itemWebsite) {
  63. 		return R.ok(ItemCraw.parseItemsFromUrl(itemWebsite.getUrl(), itemWebsite.getRegexpStr(), itemWebsite.getStartStr(), itemWebsite.getEndStr()));
  64. 	}
  65. }

前端

router，位置：src/router/modules/home.js：

  1. {
  2.     path: '/item',
  3.     component: Layout,
  4.     name: 'item',
  5.     meta: {
  6.       title: '商品',
  7.     },
  8.     icon: 'icon-home',
  9.     children: [
  10.       {
  11.         path: 'itemWebsite',
  12.         name: 'itemWebiste',
  13.         component: () => import('@/views/item_website/index.vue'),
  14.         meta: {
  15.           title: '网站',
  16.         },
  17.       },
  18.       {
  19.         path: 'itemRegexp/:id',
  20.         name: 'itemRegexp',
  21.         component: () => import('@/views/item_website/regexp.vue'),
  22.         meta: {
  23.           title: '商品匹配正则',
  24.         },
  25.         hidden: true,
  26.       },
  27.       {
  28.         path: '',
  29.         name: 'item',
  30.         component: () => import('@/views/item/index.vue'),
  31.         meta: {
  32.           title: '商品',
  33.         },
  34.       },
  35.     ],
  36.   },

/src/views/item/index.vue，首先写列表部分代码：

html部分

  1. <template>
  2.   <div>
  3.     <el-table
  4.       :data="list"
  5.       v-loading="loading"
  6.       element-loading-text="Loading"
  7.       highlight-current-row
  8.       border
  9.       fit
  10.     >
  11.       <el-table-column prop="sourceName" label="采集网站"></el-table-column>
  12.       <el-table-column prop="itemId" label="淘宝ID"></el-table-column>
  13.       <el-table-column prop="title" label="标题"></el-table-column>
  14.       <el-table-column prop="pic" label="图片">
  15.         <template #default="scope">
  16.           <img :src="scope.row.pic" class="item-img" />
  17.         </template>
  18.       </el-table-column>
  19.       <el-table-column prop="price" label="价格"></el-table-column>
  20.       <el-table-column prop="prePrice" label="原价"></el-table-column>
  21.       <el-table-column prop="createTime" label="采集时间"></el-table-column>
  22.     </el-table>
  23.     <el-pagination
  24.       :current-page="searchForm.current"
  25.       :page-sizes="[20, 45, 80]"
  26.       :page-size="searchForm.size"
  27.       layout="total, sizes, prev, pager, next, jumper"
  28.       :total="total"
  29.       :hide-on-single-page="true"
  30.       @size-change="pageSizeChange"
  31.       @current-change="pageNoChange"
  32.     />
  33.   </div>
  34. </template>

javascript部分

  1. import { getCurrentInstance, reactive, toRefs, ref, onMounted } from 'vue'
  2. import { list, craw } from '@/api/item'
  3. import { list as websites } from '@/api/itemWebsite'
  4.  
  5. export default {
  6.   setup() {
  7.     const { proxy: ctx } = getCurrentInstance()
  8.     const state = reactive({
  9.       loading: false,
  10.       searchForm: {
  11.         current: 1,
  12.         size: 20,
  13.       },
  14.       total: 0,
  15.       list: [],
  16.       getList() {
  17.         ctx.loading = true
  18.         list(ctx.searchForm).then(res => {
  19.           ctx.list = res.data.records
  20.           ctx.list.forEach(item => {
  21.             ctx.websites.forEach(website => {
  22.               if (item.source == website.code) {
  23.                 item.sourceName = website.name
  24.               }
  25.             })
  26.           })
  27.           ctx.total = res.data.total
  28.           ctx.loading = false
  29.         })
  30.       },
  31.       pageSizeChange(pageSize) {
  32.         ctx.searchForm.size = pageSize
  33.         ctx.getList()
  34.       },
  35.       pageNoChange(pageNo) {
  36.         ctx.searchForm.current = pageNo
  37.         ctx.getList()
  38.       },
  39.     })
  40.     onMounted(() => {
  41.       websites().then(res => {
  42.         ctx.websites = res.data
  43.         ctx.getList()
  44.       })
  45.     })
  46.     return {
  47.       ...toRefs(state),
  48.     }
  49.   },
  50. }

增加采集按钮和javascript代码：

  1.     <el-button type="primary" @click="showCraw">采集</el-button>
  2.     
  3.         <el-dialog
  4.       v-model="crawDialogVisible"
  5.       title="商品采集"
  6.       width="40%"
  7.       @close="crawDialogVisible = false"
  8.     >
  9.       <el-form :model="crawForm" label-position="left">
  10.         <el-form-item prop="id" label="采集网站">
  11.           <el-select v-model="crawForm.id" clearable placeholder="自定义">
  12.             <el-option value="">自定义</el-option>
  13.             <el-option
  14.               v-for="website in websites"
  15.               :key="website.id"
  16.               :value="website.id"
  17.               :label="website.name"
  18.               @click="crawForm = website"
  19.             >
  20.               {{ website.name }}
  21.             </el-option>
  22.           </el-select>
  23.         </el-form-item>
  24.         <el-form-item prop="code" label="网站名称" v-if="!crawForm.id">
  25.           <el-input v-model="crawForm.code"></el-input>
  26.         </el-form-item>
  27.         <el-form-item prop="url" label="URL" v-if="!crawForm.id">
  28.           <el-input v-model="crawForm.url"></el-input>
  29.         </el-form-item>
  30.         <el-form-item>
  31.           <el-button type="primary" @click="craw">采集</el-button>
  32.           <el-button type="warning" @click="crawDialogVisible = false">
  33.             取消
  34.           </el-button>
  35.         </el-form-item>
  36.       </el-form>
  37.     </el-dialog>

javascript部分增加craw和showCraw方法，增加后的完整代码如下：

  1. import { getCurrentInstance, reactive, toRefs, ref, onMounted } from 'vue'
  2. import { list, craw } from '@/api/item'
  3. import { list as websites } from '@/api/itemWebsite'
  4.  
  5. export default {
  6.   setup() {
  7.     const { proxy: ctx } = getCurrentInstance()
  8.     const state = reactive({
  9.       loading: false,
  10.       searchForm: {
  11.         current: 1,
  12.         size: 20,
  13.       },
  14.       total: 0,
  15.       list: [],
  16.       websites: [],
  17.       crawForm: {
  18.         id: '',
  19.         code: '',
  20.         name: '',
  21.         url: '',
  22.       },
  23.       crawDialogVisible: false,
  24.       getList() {
  25.         ctx.loading = true
  26.         list(ctx.searchForm).then(res => {
  27.           ctx.list = res.data.records
  28.           ctx.list.forEach(item => {
  29.             ctx.websites.forEach(website => {
  30.               if (item.source == website.code) {
  31.                 item.sourceName = website.name
  32.               }
  33.             })
  34.           })
  35.           ctx.total = res.data.total
  36.           ctx.loading = false
  37.         })
  38.       },
  39.       pageSizeChange(pageSize) {
  40.         ctx.searchForm.size = pageSize
  41.         ctx.getList()
  42.       },
  43.       pageNoChange(pageNo) {
  44.         ctx.searchForm.current = pageNo
  45.         ctx.getList()
  46.       },
  47.       showCraw() {
  48.         ctx.crawDialogVisible = true
  49.       },
  50.       craw() {
  51.         craw(ctx.crawForm).then(res => {
  52.           ctx.$message.success('采集完成')
  53.           ctx.crawDialogVisible = false
  54.           ctx.getList()
  55.         })
  56.       },
  57.     })
  58.     onMounted(() => {
  59.       websites().then(res => {
  60.         ctx.websites = res.data
  61.         ctx.getList()
  62.       })
  63.     })
  64.     return {
  65.       ...toRefs(state),
  66.     }
  67.   },
  68. }

代码及演示网站见：正则采集器之一——需求说明-CSDN博客

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/一键难忘520/article/detail/938100
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号