mirror of
https://github.com/NaiboWang/EasySpider.git
synced 2025-04-16 16:26:56 +08:00
212 lines
12 KiB
HTML
212 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html">
|
||
|
||
<head>
|
||
<script src="js/jquery-3.4.1.min.js"></script>
|
||
<meta charset="UTF-8">
|
||
<meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
|
||
name="viewport">
|
||
<meta content="ie=edge" http-equiv="X-UA-Compatible">
|
||
<script src="js/vue.global.js"></script>
|
||
<!-- <script src="https://unpkg.com/vue-i18n@9"></script> -->
|
||
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
|
||
</link>
|
||
<title>EasySpider: NoCode Visual Web Crawler</title>
|
||
</head>
|
||
<style>
|
||
.img-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-top: 40px;
|
||
}
|
||
|
||
.img-container img {
|
||
/*max-width: 50%;*/
|
||
height: 75px;
|
||
margin-top: 10px;
|
||
margin-bottom: 10px; /* 可根据需要调整图片之间的间距 */
|
||
}
|
||
</style>
|
||
<body>
|
||
<div id="app">
|
||
|
||
<div style="padding: 10px; text-align: center;vertical-align: middle;" v-if="init">
|
||
<h5 style="margin-top: 20px">选择语言/Select Language</h5>
|
||
|
||
<p><a @click="changeLang('zh')" class="btn btn-outline-primary btn-lg"
|
||
style="margin-top: 15px; width: 300px;height:60px;padding-top:12px;">中文</a></p>
|
||
|
||
<p><a @click="changeLang('en')" class="btn btn-outline-primary btn-lg"
|
||
style="margin-top: 15px; width: 300px;height:60px;padding-top:12px;">English</a></p>
|
||
<p style="font-size: 17px">当前版本/Current Version: <b>v0.3.5</b></p>
|
||
<p style="font-size: 17px"><a href="https://github.com/NaiboWang/EasySpider/releases" target="_blank">Github</a>最新版本/Newest Version：<b>{{newest_version}}</b></p>
|
||
<!-- <p>如发现新版本更新，可从以下Github仓库下载最新版本使用/If a new version is found, you can download the latest version from the following Github repository:</p>-->
|
||
<!-- <p></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>
|
||
<a href="https://www.nus.edu.sg" alt="新加坡国立大学 National University of Singpaore" target="_blank"><img src="img/nuslogo.png"></a>
|
||
<a href="https://www.xidian.edu.cn" alt="西安电子科技大学 Xidian University" target="_blank"><img src="img/xidian.png"></a>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div style="padding: 10px; text-align: center;vertical-align: middle;" v-else>
|
||
<div v-if="lang=='en'">
|
||
<div v-if="step == -1">
|
||
TEST
|
||
</div>
|
||
<div v-if="step == 0">
|
||
<p style="margin-top: 20px">Hint: Click Button below to start.</p>
|
||
|
||
<p><a @click="step = 1"
|
||
class="btn btn-primary btn-lg"
|
||
style="margin-top: 15px; width: 300px;height:60px;padding-top:12px;color:white">Design/Modify Task</a>
|
||
</p>
|
||
|
||
<p><a @click="startInvoke('en')"
|
||
@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>
|
||
<a href="https://www.nus.edu.sg" alt="National University of Singapore" target="_blank"><img src="img/nuslogo.png"></a>
|
||
<a href="https://www.xidian.edu.cn" alt="Xidian University" target="_blank"><img src="img/xidian.png"></a>
|
||
</div>
|
||
</div>
|
||
<div v-else-if="step == 1">
|
||
<h4 style="margin-top: 20px">Please select design mode</h4>
|
||
<p style="margin-top: 20px; text-align: justify; width:310px; margin-left: 18%">
|
||
Clean Mode: Start with a clean browser with no cookie/user data.</p>
|
||
<p style="text-align: justify; width:310px; margin-left: 18%">
|
||
Data Mode: Start with a browser that stores user data such as website login information and cookies.</p>
|
||
<p><a @click="startDesign('en')"
|
||
class="btn btn-primary btn-lg"
|
||
style="margin-top: 15px; width: 300px;height:60px;padding-top:12px;color:white">Start Clean Mode</a>
|
||
</p>
|
||
|
||
<p><a @click="startDesign('en', false, true)"
|
||
class="btn btn-primary btn-lg"
|
||
style="margin-top: 15px; width: 300px;height:60px;padding-top:12px;color:white">Clean Mode (Mobile)</a>
|
||
</p>
|
||
|
||
<p><a @click="step = 2" @click
|
||
class="btn btn-primary btn-lg"
|
||
style="margin-top: 15px; width: 300px;height:60px;padding-top:12px;color:white">Start Data Mode</a>
|
||
</p>
|
||
|
||
<a @click="step = 0" class="btn btn-outline-primary btn-lg"style="margin-top: 10px; width: 302px;height:45px;padding-top:5px">Go to Home Page</a>
|
||
|
||
</div>
|
||
<div v-else-if="step == 2">
|
||
<h4 style="margin-top: 20px">Specify user data folder</h4>
|
||
<div style="margin: 0 auto; width:90%">
|
||
<p style="margin-top: 20px; text-align: justify">
|
||
Please specify the directory of user data below. Once set, the browser will load cookies and other contents such as user login information from this directory. The browser will load data from this directory every time it is designed and executed, as long as the directory remains the same. </p>
|
||
<p style="text-align: justify">For example, if the <b>./user_data</b> folder is set and you log in at <b>ebay.com</b> during the design process, then the previous login status will still be retained when you specify the <b>./user_data</b> folder again for the next design or task execution when you open <b>ebay.com</b>.</p>
|
||
<p style="text-align: justify">If there are multiple configurations, different directories can be set for each configuration. Each directory will be treated as a separate configuration set, and if a directory does not exist, it will be created automatically.</p>
|
||
<p><textarea class="form-control" style="min-height: 50px;"
|
||
v-model="user_data_folder"></textarea>
|
||
</p>
|
||
</div>
|
||
<p><a @click="startDesign('en', true)"
|
||
class="btn btn-primary btn-lg"
|
||
style="margin-top: 15px; width: 300px;height:60px;padding-top:12px;color:white">Start Design</a></p>
|
||
<p>
|
||
<p><a @click="startDesign('en', true, true)"
|
||
class="btn btn-primary btn-lg"
|
||
style="margin-top: 15px; width: 300px;height:60px;padding-top:12px;color:white">Start Design (Mobile)</a></p>
|
||
<p>
|
||
<a @click="step = 0" class="btn btn-outline-primary btn-lg"style="margin-top: 10px; width: 302px;height:45px;padding-top:5px">Go to Home Page</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div v-else-if="lang=='zh'">
|
||
<div v-if="step == -1">
|
||
<h4 style="margin-top: 20px">版权和注意事项声明</h4>
|
||
<p>请仔细阅读下方有关软件使用和商用付费的说明，并接受使用协议以使用本软件。</p>
|
||
<textarea class="form-control" style="min-height: 200px;" readonly>
|
||
</div>
|
||
<div v-if="step == 0">
|
||
<p style="margin-top: 20px">提示：点击下方按钮开始使用。</p>
|
||
|
||
<p><a @click="step = 1" class="btn btn-primary btn-lg"
|
||
style="margin-top: 15px; width: 300px;height:60px;padding-top:12px;color:white">设计/修改任务</a></p>
|
||
|
||
<p><a @click="startInvoke('zh')"
|
||
@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>
|
||
<a href="https://www.nus.edu.sg" alt= "新加坡国立大学" target="_blank"><img src="img/nuslogo.png"></a>
|
||
<a href="https://www.xidian.edu.cn" alt="西安电子科技大学" target="_blank"><img src="img/xidian.png"></a>
|
||
</div>
|
||
</div>
|
||
<div v-else-if="step == 1">
|
||
<h4 style="margin-top: 20px">请选择设计模式</h4>
|
||
<p style="margin-top: 20px; text-align: left; width:320px; margin-left: 18%">
|
||
纯净版浏览器：无任何用户信息的浏览器。</p>
|
||
<p style="text-align: left; width:320px; margin-left: 18%">
|
||
带用户信息的浏览器：保存有用户数据，如网站的登录信息，cookie的浏览器。</p>
|
||
<p><a @click="startDesign('zh')"
|
||
class="btn btn-primary btn-lg"
|
||
style="margin-top: 15px; width: 320px;height:60px;padding-top:12px;color:white;">使用纯净版浏览器设计</a>
|
||
</p>
|
||
<p><a @click="startDesign('zh', false, true)"
|
||
class="btn btn-primary btn-lg"
|
||
style="margin-top: 15px; width: 320px;height:60px;padding-top:12px;color:white;">纯净版浏览器设计（手机模式）</a>
|
||
</p>
|
||
|
||
<p><a @click="step = 2" class="btn btn-primary btn-lg"
|
||
style="margin-top: 15px; width: 320px;height:60px;padding-top:12px;color:white">使用带用户信息浏览器设计</a>
|
||
</p>
|
||
<p>
|
||
<a @click="step = 0" class="btn btn-outline-primary btn-lg"style="margin-top: 10px; width: 322px;height:45px;padding-top:5px">返回首页</a>
|
||
</p>
|
||
|
||
|
||
</div>
|
||
<div v-else-if="step == 2">
|
||
<h4 style="margin-top: 20px">指定用户信息目录</h4>
|
||
<div style="margin: 0 auto; width:90%">
|
||
<p style="margin-top: 20px; text-align: left">
|
||
请在下方指定用户信息目录。设置后，浏览器将加载目录里的cookie，如用户的登录信息等内容，目录不变的情况下，每次设计和执行时浏览器都会加载此目录里的数据。</p>
|
||
<p style="margin-top: 10px; text-align: left">例如：设置了./user_data文件夹，并在设计过程中登录了知乎网站，则下次再次设计或者执行任务时指定./user_data文件夹，打开知乎网站页面会仍然保留之前的登录状态。</p>
|
||
<p style="margin-top: 10px; text-align: left">如果有多套配置，可以设置不同的目录，每个目录为一套，如果目录不存在将会被自动创建。</p>
|
||
<p><textarea class="form-control" style="min-height: 50px;"
|
||
v-model="user_data_folder"></textarea>
|
||
</p>
|
||
</div>
|
||
<p><a @click="startDesign('zh', true)"
|
||
class="btn btn-primary btn-lg"
|
||
style="margin-top: 15px; width: 320px;height:60px;padding-top:12px;color:white">开始设计</a></p>
|
||
<p>
|
||
<p><a @click="startDesign('zh', true, true)"
|
||
class="btn btn-primary btn-lg"
|
||
style="margin-top: 15px; width: 320px;height:60px;padding-top:12px;color:white">开始设计（手机模式）</a></p>
|
||
<p>
|
||
<a @click="step = 0" class="btn btn-outline-primary btn-lg"style="margin-top: 10px; width: 322px;height:45px;padding-top:5px">返回首页</a>
|
||
</p>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<script type="module" src="index.js"></script>
|
||
</body>
|
||
|
||
</html>
|