文章/答案/技术大牛

发布

社区首页 >问答首页 >使用电子技术消费RESTful API

问使用电子技术消费RESTful API
EN

Stack Overflow用户

提问于 2017-09-04 00:04:06

回答 1查看 1.5K关注 0票数 1

我想提出一些请求(GET，POST，PUT ...)在显示我的电子应用程序的任何窗口之前获取RESTful应用程序接口(使用电子应用程序作为客户端)。是否可以使用ClientRequest来实现这一点？谁能举个例子？

非常感谢。

spring-boot

electron

node.js

rest

回答 1

Stack Overflow用户

发布于 2021-02-25 21:29:53

只需克隆这个repo - git克隆https://github.com/AldoHub/Electron-Weather.git。

同样的视频是at - https://www.youtube.com/watch?v=5_r7UQvnbtQ。此外，您还需要向https://weatherstack.com/注册并获取'Your API Access Key‘并将其粘贴到文件中。

Electron-Weather/src/public/functions.js

在第5行

await fetch(`http://api.weatherstack.com/current?access_key=<your_access_key>&query=${city}`)

此外，要调试电子应用程序，请参阅链接- https://discuss.atom.io/t/how-to-make-developer-tools-appear/16232/6最后，要运行电子应用程序，请执行以下命令

1. npm install or yarn install
2. npm start or yarn start

另一个帖子示例：

方法: POST

网址：http://161.117.231.37/api/v1/login

正文：

{
    "email": "admin@gmail.com",
    "password": "12345678"
}

响应示例如下：

{
    "success": true,
    "data": {
        "expiresIn": 6000,
        "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6ImFkbWluQGdtYWlsLmNvbSIsImlhdCI6MTYxNDMxNzM1MiwiZXhwIjoxNjE0MzIzMzUyfQ.wPcSA9Mx8PSLUgi1Okxwl8LBfx3Ia8m9bL5PEndcrs8",
        "type": "Admin",
        "verification": {
            "mobile": true,
            "email": true,
            "isProfileCompleted": 0,
            "isOnboardingComplete": false,
            "forcePasswordChange": true
        }
    }
}

现在，相同的代码是function.js

const cityForm = document.querySelector("#weatherForm");

document.addEventListener("DOMContentLoaded", (e) => {
    cityForm.addEventListener("submit", (e) => {
        e.preventDefault();
        if(document.querySelector("#email").value != ""){
            let conditionsDiv = document.querySelector("#conditions");
            if(conditionsDiv){
                document.querySelector("main").removeChild(conditionsDiv);
            }
            getToken(document.getElementById("email").value, document.getElementById("password").value);
        }else{
            console.log("You must provide a email and password");
        }
    })
})

const getToken = async(_email, _password) => {
    let _body = {email: _email, password: _password}
    console.log({email: _email, password: _password})
    await fetch('http://161.117.231.37/api/v1/login',{
        method: 'POST', // *GET, POST, PUT, DELETE, etc.
        mode: 'cors', // no-cors, *cors, same-origin
        cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
        credentials: 'same-origin', // include, *same-origin, omit
        headers: {
          'Content-Type': 'application/json'
          // 'Content-Type': 'application/x-www-form-urlencoded',
        },
        redirect: 'follow', // manual, *follow, error
        referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
        body: JSON.stringify({email: _email, password: _password}) // body data type must match "Content-Type" header
      })
    .then(res => res.json())
    .then(data => {
        console.log(data)
        let div = document.createElement("div");
        div.setAttribute("id", "conditions");


        let temp = document.createElement("div");
        let tempNode = document.createTextNode("Your token is this......" + data.data.token );
        temp.appendChild(tempNode);

        div.appendChild(temp);
        document.querySelector("main").appendChild(div);

    }).catch(err => console.log(err))

}

在index.html中，您可以：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../public/main.css" type="text/css" />
    <title>Electron Weather</title>
</head>
<body>
    
    <img id="hero" src="../public/images/taxi-autopilot.png" />
    <header>
        <h1>Electron <br/> Weather</h1>
        <p>illustration by <strong>Ouch.pics</strong></p>
    </header>

    <main>
        
        <p>Type the email and password to find out the token ...</p>
        <form method="POST" id="weatherForm">
            <input type="text" id="email" placeholder="Email Name" />
            <input type="text" id="password" placeholder="Password Name" />
            <input id="postSubmit" type="submit" value="Submit" />   
        </form>
    </main>

    <script src="../public/functions.js"></script>
</body>
</html>

在按Ctrl + Shift +I两次后，您将在电子应用程序中看到控制台窗口，如下所示：

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/46025319

复制

相似问题

问使用电子技术消费RESTful API
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用电子技术消费RESTful APIEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用电子技术消费RESTful API
EN