本文介绍正则采集器的采集网站管理的开发。
系统需要动态添加采集网站，对网站地址、名称、匹配商品的正则表达式字段进行设置。
新建数据库表
CREATE TABLE `item_website` (`id` bigint NOT NULL AUTO_INCREMENT,`code` varchar(16) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci DEFAULT NULL,`name` varchar(64) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci DEFAULT NULL,`url` varchar(512) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci DEFAULT NULL,`regexp_str` varchar(512) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci DEFAULT NULL,`regexp_contents` varchar(2048) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci DEFAULT NULL,`start_str` varchar(64) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci DEFAULT NULL,`end_str` varchar(64) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci DEFAULT NULL,PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;后端代码
在后端代码中新建实体类、Mapper类和Controller类，下面贴出Controller类，因为采集网站不会非常多，所以不分页。请求地址和参数采用REST风格编写。
package com.learn.reptile.web.controller;import java.util.List;import javax.annotation.Resource;import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.learn.reptile.entity.po.ItemWebsite;
import com.learn.reptile.entity.vo.R;
import com.learn.reptile.mapper.ItemWebsiteMapper;@RequestMapping("/itemWebsite")
@RestController
public class ItemWebsiteController {@ResourceItemWebsiteMapper itemWebsiteMapper;@GetMappingpublic R<List<ItemWebsite>> list() {return R.ok(itemWebsiteMapper.selectList(new QueryWrapper<>()));}@GetMapping("{id}")public R get(@PathVariable("id") Long id) {return R.ok(itemWebsiteMapper.selectById(id));}@PostMappingpublic R add(@RequestBody ItemWebsite itemWebsite) {itemWebsiteMapper.insert(itemWebsite);return R.ok();}@PutMapping("{id}")public R update(@PathVariable("id") Long id, @RequestBody ItemWebsite itemWebsite) {itemWebsiteMapper.updateById(itemWebsite);return R.ok();}@DeleteMapping("{id}")public R deleteById(@PathVariable("id") Long id) {itemWebsiteMapper.deleteById(id);return R.ok();}
}前端代码
添加router，位置：src/router/modules/home.js
{path: '/item', //父菜单，下面还会加其他菜单component: Layout,name: 'item',meta: {title: '商品',},icon: 'icon-home',children: [{path: 'itemWebsite',name: 'itemWebiste',component: () => import('@/views/item_website/index.vue'),meta: {title: '网站',},},],},添加api，位置：src/api/itemWebsite.js
import request from '@/utils/request'export const add = data => {return request({url: '/api/itemWebsite',method: 'post',data,})
}export const update = data => {return request({url: '/api/itemWebsite/' + data.id,method: 'put',data,})
}export const deleteById = id => {return request({url: '/api/itemWebsite/' + id,method: 'delete',})
}export const list = () => {return request({url: '/api/itemWebsite',method: 'get',})
}export const getById = id => {return request({url: '/api/itemWebsite/' + id,method: 'get',})
}
添加页面，位置src/views/item_website/index.vue
<template><div><el-button type="primary" @click="edit(null)">添加</el-button><el-table:data="list"v-loading="loading"element-loading-text="Loading"highlight-current-rowborderfit><el-table-column prop="code" label="编码"></el-table-column><el-table-column prop="name" label="名称"></el-table-column><el-table-column label="操作"><template #default="scope"><el-buttontype="primary"@click="$router.push('/item/itemRegexp/' + scope.row.id)">商品匹配规则</el-button><el-button @click="edit(scope.row)">修改</el-button><el-popconfirm title="确认删除?" @confirm="deleteById(scope.row.id)"><template #reference><el-button type="danger">删除</el-button></template></el-popconfirm></template></el-table-column></el-table><el-dialogv-model="editDialogVisible":title="editForm.id ? '修改网站' : '添加网站'"width="40%"@close="editDialogVisible = false"><el-formref="editFormRef":model="editForm":rules="editFormRules"label-position="left"><el-form-item prop="code" label="编码"><el-input v-model="editForm.code"></el-input></el-form-item><el-form-item prop="name" label="名称"><el-input v-model="editForm.name"></el-input></el-form-item><el-form-item prop="url" label="URL"><el-input v-model="editForm.url"></el-input></el-form-item><el-form-item><el-button type="primary" @click="save">保存</el-button><el-button type="warning" @click="editDialogVisible = false">取消</el-button></el-form-item></el-form></el-dialog></div>
</template><script>
import {getCurrentInstance,reactive,toRefs,ref,computed,watch,onMounted,
} from 'vue'
import { list, add, update, deleteById } from '@/api/itemWebsite'export default {setup() {const { proxy: ctx } = getCurrentInstance()const state = reactive({loading: false,list: [],editDialogVisible: false,editForm: {id: '',code: '',name: '',url: '',},editFormRules: {code: [{ required: true, message: '编码不能为空' }],name: [{ required: true, message: '名称不能为空' }],url: [{ required: true, message: 'URL不能为空' }],},editFormRef: ref(null),save() {ctx.$refs.editFormRef.validate(valid => {if (valid) {if (ctx.editForm.id) {update(ctx.editForm).then(res => {ctx.$message.success('更新成功')ctx.editDialogVisible = falsectx.getList()})} else {add(ctx.editForm).then(res => {ctx.$message.success('添加成功')ctx.editDialogVisible = falsectx.getList()})}}})},edit(row) {if (row) {ctx.editForm = {id: row.id,code: row.code,name: row.name,url: row.url,}} else {ctx.editForm = {id: '',code: '',name: '',url: '',}}ctx.editDialogVisible = true},deleteById(id) {deleteById(id).then(res => {ctx.$message.success('删除成功')ctx.getList()})},getList() {ctx.loading = truelist().then(res => {ctx.list = res.datactx.loading = false})},})onMounted(() => {ctx.getList()})return {...toRefs(state),}},
}
</script><style></style>
这是典型的vue模板代码的结构，template、script和style三部分，template是html网页模板，javascript是逻辑代码，用于数据、事件绑定。
Vue3，首先导入方法:
import {getCurrentInstance,reactive,toRefs,ref,computed,watch,onMounted,
} from 'vue'在setup方法中设置好template中可用的对象和方法，vue3中没有this，可以用ctx代替。
const { proxy: ctx } = getCurrentInstance()- 页面加载完成后调用onMounted，加载list，数据渲染在el-table组件中。
- 点击添加或编辑按钮时调用edit方法，弹出编辑框el-dialog组件。
el-dialog组件中数据表单使用el-form组件，提交时通过ctx.$refs.editForm.validate进行数据校验。 - 删除方法，通过el-popconfirm加上确认行为。
代码地址及演示地址见博文：正则采集器——需求说明-CSDN博客
方法)
