From 1b9b6ada10631608d4307da5f958f04542cc9779 Mon Sep 17 00:00:00 2001 From: "liliang@qniao.cn" Date: Wed, 29 Mar 2023 20:08:33 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0src/views/sys/scrapy/index.vu?= =?UTF-8?q?e=E7=88=AC=E8=99=AB=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.development | 4 +- .eslintrc.js | 4 +- spider-management-backend-web | 1 - src/api/sys/model/scrapyModel.ts | 39 ++++ src/api/sys/scrapy.ts | 56 ++++++ src/layouts/default/content/index.vue | 1 - src/router/routes/modules/scrapy.ts | 30 +++ src/store/modules/scrapy.ts | 17 ++ src/utils/http/axios/index.ts | 70 ++++++- src/views/sys/login/useLogin.ts | 1 - src/views/sys/scrapy/createSpider.vue | 81 ++++++++ src/views/sys/scrapy/index.vue | 259 ++++++++++++++++++++++++++ src/views/sys/scrapy/product.data.ts | 55 ++++++ types/axios.d.ts | 11 ++ vite.config.ts | 2 +- yarn.lock | 12 ++ 16 files changed, 630 insertions(+), 13 deletions(-) delete mode 160000 spider-management-backend-web create mode 100644 src/api/sys/model/scrapyModel.ts create mode 100644 src/api/sys/scrapy.ts create mode 100644 src/router/routes/modules/scrapy.ts create mode 100644 src/store/modules/scrapy.ts create mode 100644 src/views/sys/scrapy/createSpider.vue create mode 100644 src/views/sys/scrapy/index.vue create mode 100644 src/views/sys/scrapy/product.data.ts diff --git a/.env.development b/.env.development index 9236123..09aa0a4 100644 --- a/.env.development +++ b/.env.development @@ -6,7 +6,9 @@ VITE_PUBLIC_PATH = / # Cross-domain proxy, you can configure multiple # Please note that no line breaks -VITE_PROXY = [["/basic-api","http://localhost:3000"],["/upload","http://localhost:3300/upload"]] + +#本地跨域代理 +VITE_PROXY = [["/basic-api","http://localhost:3000"],["/basic-api","http://8.135.1.175:7023"],["/upload","http://localhost:3300/upload"]] # VITE_PROXY=[["/api","https://vvbin.cn/test"]] # Delete console diff --git a/.eslintrc.js b/.eslintrc.js index 9aa3e10..a4ab4f6 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -16,9 +16,7 @@ module.exports = { }, }, extends: [ - 'plugin:vue/vue3-recommended', - 'plugin:@typescript-eslint/recommended', - 'plugin:prettier/recommended', + "plugin:prettier/recommended","prettier" ], rules: { 'vue/script-setup-uses-vars': 'error', diff --git a/spider-management-backend-web b/spider-management-backend-web deleted file mode 160000 index f25cfcc..0000000 --- a/spider-management-backend-web +++ /dev/null @@ -1 +0,0 @@ -Subproject commit f25cfcc7beafd63ca7c80757785ac3f0cf4b9a3a diff --git a/src/api/sys/model/scrapyModel.ts b/src/api/sys/model/scrapyModel.ts new file mode 100644 index 0000000..b731db6 --- /dev/null +++ b/src/api/sys/model/scrapyModel.ts @@ -0,0 +1,39 @@ +/** + * @description: getScrapList interface parameters + */ + +export interface getScrapyParams{ + spiderName: string; + status: string; +} + + +/** + * @description: Getscray interface return value + */ + +export interface getScrapyInfoModel{ + records: recordsModel[]; + total: number; + size:number; + current: number; + pages:number; +} + +export interface recordsModel{ + id: number; + createdTime: string; + updatedTime: string; + spiderName: string; + duration: number; + status: number; +} + +export interface createModel{ + id:number; +} + +export interface getStauts{ + key: number; + value: string; +} diff --git a/src/api/sys/scrapy.ts b/src/api/sys/scrapy.ts new file mode 100644 index 0000000..f507688 --- /dev/null +++ b/src/api/sys/scrapy.ts @@ -0,0 +1,56 @@ +import { defHttp } from "/@/utils/http/axios"; +import { createModel, getStauts, recordsModel } from "/@/api/sys/model/scrapyModel"; + +enum Api { + getScrapyInfo = '/admin/query/spider', + createSpider = '/admin/create/spider', + runSpider = '/admin/run/spider', + getSpiderStatus = '/admin/get/spider/status', + + stopSpiderDuration = '/admin/stop/spider' +} + +/** +* @description:查询爬虫列表 +*/ +export function getScrapyApi(params) { + + return defHttp.get( + { + url: Api.getScrapyInfo, + params + }, + ); +} + +/** + * @description:创建爬虫 + */ +export function createSpiderApi(params) { + return defHttp.post( + { + url: Api.createSpider, + params + }, + ); +} + +/** + * @description:运行爬虫 + */ +export function runSpiderApi(params) { + return defHttp.post( + { + url: Api.runSpider, + params, + }, + ); +} + +export function getStatusApi(){ + return defHttp.get( + { + url:Api.getSpiderStatus, + }, + ); +} diff --git a/src/layouts/default/content/index.vue b/src/layouts/default/content/index.vue index 7e59868..81a0f29 100644 --- a/src/layouts/default/content/index.vue +++ b/src/layouts/default/content/index.vue @@ -36,7 +36,6 @@ position: relative; flex: 1 1 auto; min-height: 0; - // begin: 下面这块代码 在我的项目打包后在比较宽的屏幕(2K 31 寸)有显示 bug 有偶发性 清缓存首次进入会出现 , 刷新就没了, 这里为什么要指定宽度 ? &.fixed { width: 1200px; diff --git a/src/router/routes/modules/scrapy.ts b/src/router/routes/modules/scrapy.ts new file mode 100644 index 0000000..c74f2bb --- /dev/null +++ b/src/router/routes/modules/scrapy.ts @@ -0,0 +1,30 @@ +import type { AppRouteModule } from '/@/router/types'; + +import { LAYOUT } from '/@/router/constant'; +// import { t } from '/@/hooks/web/useI18n'; + +const scrapy: AppRouteModule = { + path: '/scrapy', + name: 'scrapyName', + component: LAYOUT, + redirect: '/scrapy/index', + meta: { + orderNo: 200, + icon: 'ion:git-compare-outline', + title: '爬虫', + }, + children: [ + { + path: 'index', + name: 'ScrapyPage', + component: () => import('/@/views/sys/scrapy/index.vue'), + meta: { + title: '爬虫页面', + icon: 'simple-icons:about-dot-me', + hideMenu: true, + }, + }, + ], +}; + +export default scrapy; diff --git a/src/store/modules/scrapy.ts b/src/store/modules/scrapy.ts new file mode 100644 index 0000000..ebb9271 --- /dev/null +++ b/src/store/modules/scrapy.ts @@ -0,0 +1,17 @@ +// import { defineStore } from "pinia"; +// import { getScrapyInfoModel, getScrapyParams } from "/@/api/sys/model/scrapyModel"; +// import { getScrapyApi } from "/@/api/sys/scrapy"; + +// export const useScrapyStore = defineStore({ +// async getScrapyInfo( +// params: getScrapyParams +// ):Promise{ +// try { +// const { ...getScrapyParams} = params +// const data = await getScrapyApi(getScrapyParams); +// return data +// }catch (error){ +// return Promise.reject(error); +// } +// } +// }) diff --git a/src/utils/http/axios/index.ts b/src/utils/http/axios/index.ts index 872cd40..9363dc5 100644 --- a/src/utils/http/axios/index.ts +++ b/src/utils/http/axios/index.ts @@ -51,11 +51,11 @@ const transform: AxiosTransform = { throw new Error(t('sys.api.apiRequestFailed')); } // 这里 code,result,message为 后台统一的字段,需要在 types.ts内修改为项目自己的接口返回格式 - const { code, result, message } = data; + const { code, message, result} = data; //const { current pages records size total } = data // 这里逻辑可以根据项目进行修改 - const hasSuccess = data && Reflect.has(data, 'code') && code === ResultEnum.SUCCESS; - if (hasSuccess) { + //const hasSuccess = data && Reflect.has(data, 'code') && code === ResultEnum.SUCCESS; + // if (hasSuccess) { let successMsg = message; if (isNull(successMsg) || isUnDef(successMsg) || isEmpty(successMsg)) { @@ -68,7 +68,7 @@ const transform: AxiosTransform = { createMessage.success(successMsg); } return result; - } + // } // 在此处根据自己项目的实际情况对不同的code执行不同的操作 // 如果不希望中断当前请求,请return数据,否则直接抛出异常即可 @@ -259,7 +259,7 @@ function createAxios(opt?: Partial) { // 接口拼接地址 urlPrefix: urlPrefix, // 是否加入时间戳 - joinTime: true, + joinTime: false, // 忽略重复请求 ignoreCancelToken: true, // 是否携带token @@ -275,6 +275,9 @@ function createAxios(opt?: Partial) { ), ); } + + + export const defHttp = createAxios(); // other api url @@ -284,3 +287,60 @@ export const defHttp = createAxios(); // urlPrefix: 'xxx', // }, // }); + + + +function createAxios1(opt?: Partial) { + return new VAxios( + // 深度合并 + deepMerge( + { + // See https://developer.mozilla.org/en-US/docs/Web/HTTP/Authentication#authentication_schemes + // authentication schemes,e.g: Bearer + // authenticationScheme: 'Bearer', + authenticationScheme: '', + timeout: 10 * 1000, + // 基础接口地址 + // baseURL: globSetting.apiUrl, + + headers: { 'Content-Type': ContentTypeEnum.JSON }, + // 如果是form-data格式 + // headers: { 'Content-Type': ContentTypeEnum.FORM_URLENCODED }, + // 数据处理方式 + transform: clone(transform), + // 配置项,下面的选项都可以在独立的接口请求中覆盖 + requestOptions: { + // 默认将prefix 添加到url + joinPrefix: true, + // 是否返回原生响应头 比如:需要获取响应头时使用该属性 + isReturnNativeResponse: false, + // 需要对返回数据进行处理 + isTransformResponse: true, + // post请求的时候添加参数到url + joinParamsToUrl: false, + // 格式化提交参数时间 + formatDate: true, + // 消息提示类型 + errorMessageMode: 'message', + // 接口地址 + apiUrl: globSetting.apiUrl, + // 接口拼接地址 + urlPrefix: urlPrefix, + // 是否加入时间戳 + joinTime: false, + // 忽略重复请求 + ignoreCancelToken: true, + // 是否携带token + withToken: true, + retryRequest: { + isOpenRetry: true, + count: 5, + waitTime: 100, + }, + }, + }, + opt || {}, + ), + ); +} +export const Http = createAxios1() diff --git a/src/views/sys/login/useLogin.ts b/src/views/sys/login/useLogin.ts index 0710fe3..977f906 100644 --- a/src/views/sys/login/useLogin.ts +++ b/src/views/sys/login/useLogin.ts @@ -35,7 +35,6 @@ export function useFormValid(formRef: Ref) const form = unref(formRef); return form?.validate ?? ((_nameList?: NamePath) => Promise.resolve()); }); - async function validForm() { const form = unref(formRef); if (!form) return; diff --git a/src/views/sys/scrapy/createSpider.vue b/src/views/sys/scrapy/createSpider.vue new file mode 100644 index 0000000..bed0844 --- /dev/null +++ b/src/views/sys/scrapy/createSpider.vue @@ -0,0 +1,81 @@ + + + + + diff --git a/src/views/sys/scrapy/index.vue b/src/views/sys/scrapy/index.vue new file mode 100644 index 0000000..6b10eaf --- /dev/null +++ b/src/views/sys/scrapy/index.vue @@ -0,0 +1,259 @@ + + diff --git a/src/views/sys/scrapy/product.data.ts b/src/views/sys/scrapy/product.data.ts new file mode 100644 index 0000000..3235651 --- /dev/null +++ b/src/views/sys/scrapy/product.data.ts @@ -0,0 +1,55 @@ +import { BasicColumn } from '/@/components/Table'; +export const scrapyColumns: BasicColumn[] = [ + { + title: 'ID', + dataIndex: 'id', + fixed: 'left', + width: 180, + sorter: true, + }, + { + title: '爬虫名称', + dataIndex: 'spiderName', + width: 150, + + }, + { + title: '状态', + dataIndex: 'statusChinese', + width: 80, + + }, + // { + // title: 'Event', + // dataIndex: 'event', + // width: 150, + // + // }, + { + title: '运行周期', + dataIndex: 'duration', + width: 80, + }, + // { + // title: '状态', + // dataIndex: 'statusChinese', + // width: 100, + // + // }, + { + title: '创建时间', + width: 180, + sorter: true, + dataIndex: 'createdTime', + }, + { + title: '更新时间', + width: 180, + sorter: true, + dataIndex: 'updatedTime', + }, +]; + + + + diff --git a/types/axios.d.ts b/types/axios.d.ts index 0ff2f58..4f7a0e3 100644 --- a/types/axios.d.ts +++ b/types/axios.d.ts @@ -40,6 +40,17 @@ export interface Result { type: 'success' | 'error' | 'warning'; message: string; result: T; + pages: number; + current: number; + size: number; + total: number; +} + +export interface Records { + code: number; + type: 'success' | 'error' | 'warning'; + message: string; + records:T; } // multipart/form-data: upload file diff --git a/vite.config.ts b/vite.config.ts index 830e298..dfd34f9 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -31,6 +31,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => { const isBuild = command === 'build'; + // @ts-ignore return { base: VITE_PUBLIC_PATH, root, @@ -85,7 +86,6 @@ export default ({ command, mode }: ConfigEnv): UserConfig => { define: { __APP_INFO__: JSON.stringify(__APP_INFO__), }, - css: { preprocessorOptions: { less: { diff --git a/yarn.lock b/yarn.lock index 63b9ac7..f73df06 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8366,6 +8366,11 @@ sort-keys@^2.0.0: dependencies: is-plain-obj "^1.0.0" +sortablejs@1.14.0: + version "1.14.0" + resolved "https://registry.npmmirror.com/sortablejs/-/sortablejs-1.14.0.tgz#6d2e17ccbdb25f464734df621d4f35d4ab35b3d8" + integrity sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w== + sortablejs@^1.15.0: version "1.15.0" resolved "https://registry.npmmirror.com/sortablejs/-/sortablejs-1.15.0.tgz#53230b8aa3502bb77a29e2005808ffdb4a5f7e2a" @@ -9653,6 +9658,13 @@ vue@^3.2.45: "@vue/server-renderer" "3.2.45" "@vue/shared" "3.2.45" +vuedraggable@^4.1.0: + version "4.1.0" + resolved "https://registry.npmmirror.com/vuedraggable/-/vuedraggable-4.1.0.tgz#edece68adb8a4d9e06accff9dfc9040e66852270" + integrity sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww== + dependencies: + sortablejs "1.14.0" + vxe-table-plugin-export-xlsx@^3.0.4: version "3.0.4" resolved "https://registry.npmjs.org/vxe-table-plugin-export-xlsx/-/vxe-table-plugin-export-xlsx-3.0.4.tgz#35faabc0791b4e9aa516b78ea3fd45e67314afe4"