如何在客户端 nextjs 中更改服务器端变量

贝尔纳多·奥利桑

所以我在 api/scraper.js 中有这段代码

const request = require("request-promise");
const cheerio = require("cheerio");

let url = "https://crese.org/distintivo-azul/";

let result;

request(url, (err, response, html) => {
    if (!err && response.statusCode == 200) {
        const $ = cheerio.load(html);

        const allText = $("html *").contents().filter(function () {return this.type === "text"}).text();
        
        const texts = ["respeto a la dignidad de las personas", "respect for the dignity of people"]
        result = allText.includes("respeto a la dignidad de las personas")

    }
})

export default function handler(req, res) {
    res.status(200).json({result: result})
}

它可以正常工作，但是let url变量需要更改。我有一个表单来处理此更改，因此用户可以将 url 从客户端放入输入表单中......当用户从客户端“输入表单”发送 url 并更改让 url服务器端的变量。

简而言之，使用客户端中的表单标记“修改 api/scraper.js 中的 url 变量”。

有什么想法来处理这个吗？

编辑客户端看起来像这样

    // Automate steps process
const handleSubmit = async (event) => {
    event.preventDefault();
    const response = await fetch("/api/scraper");

    if (!response.ok) {
        throw new Error(`Error: ${response.status}`);
    }

    const result = await response.json();
    console.log(Object.values(result))
    return setData(result)
    //console.log(event.target.url.value);
  };

// get results from backend
const [results, setData] = useState([])


return (
    <div>
        <Head>
            <title>Blue Token | Steps</title>
            <meta name="description" content="Generated by create next app" />
            <link rel="icon" href="/logo.png" />
        </Head>

        <div className={styles.minting}>
            <form onSubmit={handleSubmit}>
                <h1>Enter Your website URL</h1>
                <label>We are going to check if you have the requesits</label><br /><br />  
                <input type="url" name="url" placeholder="url" />
                <input type="submit" />
            </form>

因德尔

你可以做这样的事情。您必须在 http 请求的正文中从客户端传入 url


function startScrape(req, res) {
  request(req.body, (err, response, html) => {
    if (!err && response.statusCode == 200) {
      const $ = cheerio.load(html);

      const allText = $("html *")
        .contents()
        .filter(function () {
          return this.type === "text";
        })
        .text();

      const texts = [
        "respeto a la dignidad de las personas",
        "respect for the dignity of people"
      ];
      let result = allText.includes("respeto a la dignidad de las personas");

      res.status(200).json({ result: result });
    }
  });
}

export default function handler(req, res) {
if(req.method==='POST')
  startScrape(req, res);
}

客户

const [results, setData] = useState([]);
  const [url, setUrl] = useState("");

  const handleSubmit = async (event) => {
    event.preventDefault();
    
    // Here we're passing url inside body of the request which will 
    // be received on the backend

    const response = await fetch("/api/scraper", { method: "POST", body: url });

    if (!response.ok) {
      throw new Error(`Error: ${response.status}`);
    }

    const result = await response.json();
    console.log(Object.values(result));
    return setData(result);
    //console.log(event.target.url.value);
  };

  return (
    <div>
      <div>
        <form onSubmit={handleSubmit}>
          <h1>Enter Your website URL</h1>
          <label>We are going to check if you have the requesits</label>
          <br />
          <br />
          <input
            type="url"
            name="url"
            placeholder="url"
            value={url}
            onChange={(e) => setUrl(e.target.value)}
          />
          <input type="submit" />
        </form>
      </div>
    </div>
  );

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。