Add Example Description

lycsqq · Jul 10, 2023 · d89665e · d89665e
1 parent 351757e
commit d89665e
Show file tree

Hide file tree

Showing 9 changed files with 76 additions and 10 deletions.
diff --git a/ElectronJS/main.js b/ElectronJS/main.js
@@ -1,5 +1,5 @@
 // Modules to control application life and create native browser window
-const {app, BrowserWindow, dialog, ipcMain, screen} = require('electron');
+const {app, BrowserWindow, dialog, ipcMain, screen, session} = require('electron');
 app.commandLine.appendSwitch("--disable-http-cache");
 const {Builder, By, Key, until} = require("selenium-webdriver");
 const chrome = require('selenium-webdriver/chrome');
@@ -520,6 +520,10 @@ function handleOpenInvoke(event, lang = "en") {
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.
 app.whenReady().then(() => {
+ session.defaultSession.webRequest.onBeforeSendHeaders((details, callback) => {
+ details.requestHeaders['Accept-Language'] = 'zh'
+ callback({ cancel: false, requestHeaders: details.requestHeaders })
+ })
  ipcMain.on('start-design', handleOpenBrowser);
  ipcMain.on('start-invoke', handleOpenInvoke);
  createWindow();

diff --git a/ElectronJS/src/img/animation_en.gif b/ElectronJS/src/img/animation_en.gif
diff --git a/ElectronJS/src/img/animation_zh.gif b/ElectronJS/src/img/animation_zh.gif
diff --git a/ElectronJS/src/index.html b/ElectronJS/src/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html">
 
 <head>
  <script src="js/jquery-3.4.1.min.js"></script>
@@ -67,6 +67,9 @@ <h5 style="margin-top: 20px">选择语言/Select Language</h5>
  @click class="btn btn-primary btn-lg"
  style="margin-top: 15px; width: 300px;height:60px;padding-top:12px;color:white">View/Manage/Invoke
  Tasks</a></p>
+ <p>
+ <a href="https://www.easyspider.cn/index_english.html" target="_blank" style="text-align: center; font-size: 18px">Browse official website to watch tutorials</a>
+ </p>
  <div class="img-container">
 <!-- <h5>Producer</h5>-->
  <a href="https://www.zju.edu.cn" alt="Zhejiang University" target="_blank"><img src="img/zju.png"></a>
@@ -132,6 +135,9 @@ <h4 style="margin-top: 20px">Specify user data folder</h4>
  @click class="btn btn-primary btn-lg"
  style="margin-top: 15px; width: 300px;height:60px;padding-top:12px;color:white">查看/管理/执行任务</a>
  </p>
+ <p>
+ <a href="https://www.easyspider.cn?lang=zh" target="_blank" style="text-align: center; font-size: 18px">点此访问官网查看教程</a>
+ </p>
  <div class="img-container">
 <!-- <h5>出品方</h5>-->
  <a href="https://www.zju.edu.cn" alt="浙江大学" target="_blank"><img src="img/zju.png"></a>

diff --git a/ElectronJS/src/taskGrid/global.js b/ElectronJS/src/taskGrid/global.js
@@ -28,11 +28,44 @@ function getUrlParam(name) {
  return ""; //返回参数值,默认后台地址
 }
 
+// 判断字符串中英文字符的个数哪个多
+function detectLang(str) {
+ let enCount = 0;
+ let cnCount = 0;
+
+ for (let i = 0; i < str.length; i++) {
+ const charCode = str.charCodeAt(i);
+ if ((charCode >= 0x0000) && (charCode <= 0x007F)) {
+ enCount += 1;
+ } else if ((charCode >= 0x4E00) && (charCode <= 0x9FA5)) {
+ cnCount += 1;
+ }
+ }
+
+ if (enCount === cnCount) {
+ return 2;
+ } else if (enCount > cnCount) {
+ return 0;
+ }
+ return 1;
+}
+
 Vue.filter('lang', function (value) {
+ let value1 = value.split("~")[0];
+ let value2 = value.split("~")[1];
+ let value_zh = "";
+ let value_en = "";
+ if (detectLang(value1) == 1) {
+ value_zh = value1;
+ value_en = value2;
+ } else {
+ value_zh = value2;
+ value_en = value1;
+ }
  if (getUrlParam("lang") == "zh") {
- return value.split("~")[1];
+ return value_zh;
  } else {
- return value.split("~")[0];
+ return value_en;
  }
 })
 

diff --git a/ElectronJS/src/taskGrid/invokeTask.html b/ElectronJS/src/taskGrid/invokeTask.html
@@ -177,7 +177,7 @@ <h4 style="text-align: center;">{{"Task Invocation~任务调用" | lang}}</h4>
  <p style="word-wrap: break-word;word-break: break-all;overflow: hidden;max-height: 100px;">{{"Task Description:~任务描述：" | lang}} {{task["desc"]}}</p>
  <p style="word-wrap: break-word;word-break: break-all;overflow: hidden;max-height: 100px;">{{"API URL (POST):~API 调用网址（POST）：" |
  lang}} {{backEndAddressServiceWrapper}}/invokeTask?id={{task["id"]}}</p>
- <p style="word-wrap: break-word;word-break: break-all;overflow: hidden;max-height: 100px;">{{"Click here to see how to invoke task by API via POST request: ~点此查看通过POST方式进行API调用的示例代码：" | lang}}<a target="_blank" href="https://github.com/NaiboWang/EasySpider/wiki/API-Invoke-Example">https://github.com/NaiboWang/EasySpider/wiki/API-Invoke-Example</a></p>
+ <p style="word-wrap: break-word;word-break: break-all;overflow: hidden;max-height: 100px;">{{"Click here to see how to invoke task by API via POST request (Postman or JavaScript): ~点此查看通过POST方式进行API调用的示例（Postman或JS代码）：" | lang}}<a target="_blank" href="https://github.com/NaiboWang/EasySpider/wiki/API-Invoke-Example">https://github.com/NaiboWang/EasySpider/wiki/API-Invoke-Example</a></p>
  <p><button class="btn btn-primary" @click="readFromExcel">{{"Read parameters from Excel file~从Excel文件读取输入参数"
  | lang}}
  </button></p>
@@ -365,10 +365,11 @@ <h4 style="text-align: center;">{{"Task Invocation~任务调用" | lang}}</h4>
  t.forEach(function (item, index) {
  para[item.name] = item.value;
  });
- $.post(app.$data.backEndAddressServiceWrapper + "/invokeTask", {
- id: this.task.id,
+ let message = {
+ id: this.task.id, //这里写任务ID号，如1
  paras: JSON.stringify(para)
- }, function (result) {
+ }
+ $.post(app.$data.backEndAddressServiceWrapper + "/invokeTask", message, function (result) {
  app.$data.ID = result; //得到返回的ID
  });
  // }

diff --git a/ElectronJS/src/taskGrid/newTask.html b/ElectronJS/src/taskGrid/newTask.html
@@ -41,6 +41,16 @@ <h4 style="text-align: center;">{{"New Task~新任务" | lang}}</h4>
 <!-- <textarea class="form-control" id="user-data-folder" style="min-height: 50px;">{{user_data_folder}}</textarea>-->
 <!-- <button type="submit" id="sendWithCookie" style="margin-top: 10px" class="btn btn-primary">{{"Start Design with cookie data from local browser~带本地数据开始设计" | lang}}</button>-->
 <!-- </div>-->
+ <div style="margin-top: 20px">
+ <h5>{{"Example 1~示例1" | lang}}</h5>
+ <p>{{"(Right click) Select a large product block -> Click the 'Select All' option -> Click the 'Select Child Elements' option -> Click the 'Collect Data' option, you can collect the information of all products, and will be saved by sub-field. ~ （右键）选中一个大商品块 -> 自动检测到同类型商品块 -> 点击“选中全部”选项 -> 点击“选中子元素”选项 -> 点击“采集数据”选项，即可采集到所有商品的所有信息，并分成不同字段保存。" | lang}}</p>
+ <img src="../img/animation_zh.gif" alt="" style="width: 100%;height: 100%">
+ <p></p>
+ <h5>{{"Example 2~示例2" | lang}}</h5>
+ <p>{{"（右键）选中一个商品标题，同类型标题会被自动匹配，点击“选中全部”选项 -> 点击“采集数据”选项，即可采集到所有商品的标题信息。~ (Right Click) Select a product title, the same type of title will be automatically matched, click the 'Select All' option -> Click the 'Collect Data' option, you can collect the title information of all products." | lang}}</p>
+ <img src="../img/animation_en.gif" alt="" style="width: 100%;height: 100%">
+ <p></p>
+ </div>
  </div>
  </div>
 
@@ -116,4 +126,4 @@ <h4 style="text-align: center;">{{"New Task~新任务" | lang}}</h4>
  }
  });
 
-</script>
+</script>
diff --git a/ElectronJS/tasks/157.json b/ElectronJS/tasks/157.json
diff --git a/Readme.md b/Readme.md
@@ -16,8 +16,20 @@ Visit the official website of EasySpider: www.easyspider.net
 
 A visual code-free/no-code web crawler/spider, just select the content you want to crawl on the web page and operate according to the prompt box to complete the design and execution of the crawler. At the same time, the software can be executed by command line alone, so it can be easily embedded into other systems.
 
+### 示例1/Example 1
+
+（右键）选中一个大商品块 -> 自动检测到同类型商品块 -> 点击“选中全部”选项 -> 点击“选中子元素”选项 -> 点击“采集数据”选项，即可采集到所有商品的所有信息，并分成不同字段保存。
+
+(Right click) Select a large product block -> Click the 'Select All' option -> Click the 'Select Child Elements' option -> Click the 'Collect Data' option, you can collect the information of all products, and will be saved by sub-field.
+
 ![animation_zh](media/animation_zh.gif)
 
+### 示例2/Example 2
+
+（右键）选中一个商品标题，同类型标题会被自动匹配，点击“选中全部”选项 -> 点击“采集数据”选项，即可采集到所有商品的标题信息。
+
+(Right Click) Select a product title, the same type of title will be automatically matched, click the 'Select All' option -> Click the 'Collect Data' option, you can collect the title information of all products.
+
 ![animation_en](media/animation_en.gif)
 
 ## 下载易采集/Download EasySpider