如何在客户端 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 在服务器端 var iable 时，如何更改它。

简单来说，“修改 api/scraper.js 中的 url varible”，带有客户端的表单标记。

有什么想法可以处理这个问题吗？

编辑客户端如下所示

    // 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>

JavaScript next.js 服务器端客户端


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>
  );

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

How to change Server side variables in the client side nextjs

评论

客户

评论