Electron+Vue使用Nodejs开发爬虫

微信扫一扫,分享到朋友圈

Electron+Vue使用Nodejs开发爬虫
npm install request cheerio async -save

request

var request = require('request');
// 通过 GET 请求来读取 http://cnodejs.org/ 的内容
request('http://cnodejs.org/', function (error, response, body) {
if (!error && response.statusCode == 200) {
// 输出网页内容
console.log(body);
}
});

请求跨域的解决方式

// Create the browser window.
const win = new BrowserWindow({
width: 1200,
height: 800,
webPreferences: {
webSecurity: false,
nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION
}
});
app.commandLine.appendSwitch("disable-features", "OutOfBlinkCors");

主要添加了第6行和第11行,正式运行时删除即可

文件夹路径

const { app } = require('electron')
app.getPath(name)

app位于主进j程中,渲染进程

const { app } = window.require("electron").remote;

String – You can request the following paths by the name
:

  • home
    用户的 home 文件夹(主目录)

  • appData

Per-user application data directory, which by default points to:
- `%APPDATA%` Windows 中
  • $XDG_CONFIG_HOME
    or ~/.config
    Linux 中

    • ~/Library/Application Support
      macOS 中
    • userData
      储存你应用程序设置文件的文件夹,默认是 appData
      文件夹附加应用的名称

    • temp
      临时文件夹

    • exe
      当前的可执行文件

    • module
      The libchromiumcontent

    • desktop
      当前用户的桌面文件夹

    • documents
      用户文档目录的路径

    • downloads
      用户下载目录的路径

    • music
      用户音乐目录的路径

    • pictures
      用户图片目录的路径

    • videos
      用户视频目录的路径

    • recent
      Directory for the user’s recent files (Windows only).

    • logs
      应用程序的日志文件夹

    • pepperFlashSystemPlugin
      Pepper Flash 插件的系统版本的完成路径。

    • crashDumps
      Directory where crash dumps are stored.

Returns String
– A path to a special directory or file associated with name
. On failure, an Error
is thrown.

If app.getPath('logs')
is called without called app.setAppLogsPath()
being called first, a default log directory will be created equivalent to calling app.setAppLogsPath()
without a path
parameter.

选择文件夹

添加引用

const { app, dialog } = window.require("electron").remote;

弹窗选择

select_dir: function() {
var that = this;
dialog
.showOpenDialog({
properties: ["openFile", "openDirectory"]
})
.then(result => {
if (!result.canceled) {
that.outpath = result.filePaths[0];
}
})
.catch(err => {
console.log(err);
});
}

文件下载

引用

const request = require("request");
var fs = window.require("fs");

下载

var fileurl = "http://www.psvmc.cn/favicon.ico";
let filename = fileurl.split("/").reverse()[0];
let filepath = this.outpath + "\\" + filename;
let stream = fs.createWriteStream(filepath);
request(fileurl)
.pipe(stream)
.on("close", function(error) {
if (!error) {
console.log("文件[" + filename + "]下载完毕");
}
});

文件上传

electron写应用时,会遇到自动上传的需求。但是H5中只能通过input(type=file)来手动上传,JS又没有读取文件的权限,此时,我们可以借助node模块完成需求。

const FormData = require("form-data");
uploadfile: function() {
var filename = "favicon.ico";
let filepath = this.outpath + "\\" + filename;
fs.readFile(filepath, (err, data) => {
if (!err) {
let file = new File([data], filename, {
type: "image/" + filename.split(".").reverse()[0]
});
let form = new FormData();
form.append("file", file);
form.append("savefolder", "resourcetest");
form.append("iscover", 0);
form.append("isrename", 0);
let request_url = "http://file.psvmc.com/up/upfile";
let xhr = new XMLHttpRequest();
xhr.open("post", request_url);
xhr.send(form);
xhr.onload = function() {
console.info(this.responseText);
};
}
});
}

接口

var request = require('request');
var url="请求url";
var loginname = this.$refs["loginname"].value;
var loginpwd = this.$refs["loginpwd"].value;
var requestData = {
loginname: loginname,
loginpwd: loginpwd
}
request({
url: url,
method: "POST",
json: true,
headers: {
"content-type": "application/json",
},
body: requestData
}, function(error, response, body) {
if (!error && response.statusCode == 200) {
console.log(body) // 请求成功的处理逻辑
}
});

微信扫一扫,分享到朋友圈

Electron+Vue使用Nodejs开发爬虫

AIRP跨境交流⑤-东南亚/新加坡,Grab Financial Group 围绕金融科技在中国寻找海外合作伙伴

上一篇

暴力、搞笑、大尺度,这部女版“死侍”太好看了!

下一篇

你也可能喜欢

Electron+Vue使用Nodejs开发爬虫

长按储存图像,分享给朋友