当前位置： 文江博客话题详情

尝试通过我的树莓派上托管的网络服务器编辑文本文件。树莓派是一个热点，我用笔记本电脑连接到它

发布于 2025-01-19 00:45:59 字数 6212 浏览 2 评论 0原文

所以我有一个运行树莓派 3 的树莓派操作系统（牛眼）。我正在用 apache 运行一个网络服务器。覆盆子被设置为热点。我用笔记本电脑连接到它。我制作了一个可点击的框并在 javascript 中运行一个函数。我想要这个函数来编辑树莓派上的文本文件。我找到了一些有关node.js的信息并尝试以这种方式读取和写入文件。在终端中运行节点“文件名”.js 时它可以工作，但当我按下该框时我无法让它工作。这是我遇到的问题。我希望它在按下该框时编辑文本文件，而不仅仅是在终端中使用节点“文件名”.js 时。

我读到一些关于 require('fs') 在本地不起作用的内容，我不知道如何解决这个问题。

function forwardf() {
  // Läs om variabeln är true eller false
  alert("hit kommer vi");
  document.getElementById("variabler.txt");
    var file = this.files[0];
    var reader = new FileReader();
    alert("hit kommer vi");

      // Entire file
      //alert(this.result);

      // By lines
      var lines = this.result('\n');
      for(var line = 0; line < lines.length; line++){
        alert(lines[line]);
      }
    }
    reader.readAsText(file);
  alert(text);


  /*
  //const fs = require('fs');
  //let fileString = fs.readFileSync("variabler.txt").toString();
  const line = fileString.split(/\r?\n/);
  const our_variable = line[0].split("=");
  let temp = our_variable[1];
  // Change this_var to true
  if (temp == "false") {
    //alert("temp was false");
    console.log("temp was false" + "\n");
    fileString = fileString.replace(/goforward=false/, "goforward=true");
  } 
  // else change this_var to false
  else {
    //alert("temp was true");
    console.log("temp was true" + "\n");
    fileString = fileString.replace(/goforward=true/, "goforward=false");
  }
  fs.writeFileSync("variabler.txt", fileString);
  console.log(fileString);
}
*/
.allt {
  width:1200px;
  height:700px;
  border:1px solid black;
  padding:3px;
  display:inline-flex;
}
.box {
  width:796px;
  height:690px;
  border:1px solid black;
}
.karta {
  width:460px;
  height:460px;
  border:1px solid black;
  display:inline-block;
  margin:5px 0px 0px 5px;
  text-align: center;
  float:left;
}
.autonomt {
  width:313px;
  height:460px;
  border:1px solid black;
  display:inline-block;
  text-align: center;
  margin:5px 5px 5px 5px;
}
.auto {
    width:290px;
    height:220px;
    border:1px solid black;
    margin:5px;
}
.status {
  width:290px;
  height:220px;
  border:1px solid black;
  margin:5px;
}
.konsol {
  Width:780px;
  height:200px;
  border:1px solid black;
  margin:5px 0px 0px 5px;
  text-align:center;
}
.movementbox {
    width:386px;
    height:680px;
    border:1px solid black;
    float:right;
    margin: 5px;
}
.dartbox {
  width:100px;
  height:100px;
  border:1px solid white;
  display:inline-block;
  margin:4px 5px;
  text-align: center;
}
.image {
  width:100%;
  height:100%;
  object-fit:scale-down;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <html>
    <head>
      <link rel="stylesheet" type="text/css" href="forsta_utkast_styles.css" media="screen" />
      <script type="text/javascript"
        src="funktioner.js";>
      </script>
    </head>
    <body>
    <div id="allt" class="allt">
      <div id="box" class="box">
        <div id="karta" class="karta">
          <h2>Karta</h2>
        </div>
        <div id="autonomt" class="autonomt">
          <div id="auto" class="auto">
            <h2>Autonomt</h2>
          </div>
          <div id="status" class="status">
            <p>b</p>
            <p>b</p>
            <p>b</p>
            <p>b</p>
          </div>
      </div>
      <div id="konsol" class="konsol">
        <h1>konsol</h1>
      </div>
    </div>
      <div id="movementbox" class="movementbox">
        <div id="dartbox1" class="dartbox"><img src="bilder_pilar/forwardpil.png" alt="fel"></div>
        <div id="dartbox2" class="dartbox"><img src="bilder_pilar/forwardpil.png" alt="fel"></div>
        <div id="dartbox3" class="dartbox"><img src="bilder_pilar/forwardpil.png" alt="fel"></div>
        <div id="dartbox4" class="dartbox"><img src="bilder_pilar/forwardpil.png" alt="fel"></div>
        <div id="dartbox5" class="dartbox"><img src="bilder_pilar/forwardpil.png" alt="fel"></div>
        <div id="dartbox6" class="dartbox"><img src="bilder_pilar/forwardpil.png" alt="fel"></div>
        <div id="dartbox7" class="dartbox"><img src="bilder_pilar/forwardpil.png" alt="fel"></div>
        <div id="dartbox8" class="dartbox"><img src="bilder_pilar/forwardpil.png" alt="fel"></div>
        <div id="dartbox9" class="dartbox"><img src="bilder_pilar/forwardpil.png" alt="fel"></div>
        <div id="dartbox10" class="dartbox"><img src="bilder_pilar/counter_clockwise.png" alt="fel"></div>
        <div id="forwardbox" class="dartbox" onclick="forwardf()" style="cursor:pointer;"><img src="bilder_pilar/forwardpil.png" alt="fel"></div>
        <div id="dartbox12" class="dartbox"><img src="bilder_pilar/clockwise.png" alt="fel"></div>
        <div id="dartbox13" class="dartbox"><img src="bilder_pilar/leftpil.png" alt="fel"></div>
        <div id="dartbox14" class="dartbox"><img src="bilder_pilar/manuell_styrning.png" alt="fel"></div>
        <div id="dartbox15" class="dartbox"><img src="bilder_pilar/rightpil.png" alt="fel"></div>
        <div id="dartbox16" class="dartbox"><img src="bilder_pilar/land.png" alt="fel"></div>
        <div id="dartbox17" class="dartbox"><img src="bilder_pilar/backwardpil.png" alt="fel"></div>
        <div id="dartbox18" class="dartbox"><img src="bilder_pilar/lift.png" alt="fel"></div>
    </div>
    </div>
    </body>
  </html>

原文

So i have a raspberry 3 running raspberry pi os (bullseye). i am running a webserver on it with apache. The raspberry is set up as a hotspot. I am connected to it with my laptop. I have made a box which is clickable and runs a function in javascript. I want this funtion to edit a textfile which is on the raspberry. I found some information about node.js and tried reading and writing the file this way. it works when running node 'filename'.js in terminal but i cant get it to work when i press the box. This is the problem i have. i want it to edit the textfile when i press the box and not just when i use node 'filename'.js in terminal.

i read something about require('fs') doesnt work locally and i dont know how to solve this.

function forwardf() {
  // Läs om variabeln är true eller false
  alert("hit kommer vi");
  document.getElementById("variabler.txt");
    var file = this.files[0];
    var reader = new FileReader();
    alert("hit kommer vi");

      // Entire file
      //alert(this.result);

      // By lines
      var lines = this.result('\n');
      for(var line = 0; line < lines.length; line++){
        alert(lines[line]);
      }
    }
    reader.readAsText(file);
  alert(text);


  /*
  //const fs = require('fs');
  //let fileString = fs.readFileSync("variabler.txt").toString();
  const line = fileString.split(/\r?\n/);
  const our_variable = line[0].split("=");
  let temp = our_variable[1];
  // Change this_var to true
  if (temp == "false") {
    //alert("temp was false");
    console.log("temp was false" + "\n");
    fileString = fileString.replace(/goforward=false/, "goforward=true");
  } 
  // else change this_var to false
  else {
    //alert("temp was true");
    console.log("temp was true" + "\n");
    fileString = fileString.replace(/goforward=true/, "goforward=false");
  }
  fs.writeFileSync("variabler.txt", fileString);
  console.log(fileString);
}
*/
.allt {
  width:1200px;
  height:700px;
  border:1px solid black;
  padding:3px;
  display:inline-flex;
}
.box {
  width:796px;
  height:690px;
  border:1px solid black;
}
.karta {
  width:460px;
  height:460px;
  border:1px solid black;
  display:inline-block;
  margin:5px 0px 0px 5px;
  text-align: center;
  float:left;
}
.autonomt {
  width:313px;
  height:460px;
  border:1px solid black;
  display:inline-block;
  text-align: center;
  margin:5px 5px 5px 5px;
}
.auto {
    width:290px;
    height:220px;
    border:1px solid black;
    margin:5px;
}
.status {
  width:290px;
  height:220px;
  border:1px solid black;
  margin:5px;
}
.konsol {
  Width:780px;
  height:200px;
  border:1px solid black;
  margin:5px 0px 0px 5px;
  text-align:center;
}
.movementbox {
    width:386px;
    height:680px;
    border:1px solid black;
    float:right;
    margin: 5px;
}
.dartbox {
  width:100px;
  height:100px;
  border:1px solid white;
  display:inline-block;
  margin:4px 5px;
  text-align: center;
}
.image {
  width:100%;
  height:100%;
  object-fit:scale-down;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <html>
    <head>
      <link rel="stylesheet" type="text/css" href="forsta_utkast_styles.css" media="screen" />
      <script type="text/javascript"
        src="funktioner.js";>
      </script>
    </head>
    <body>
    <div id="allt" class="allt">
      <div id="box" class="box">
        <div id="karta" class="karta">
          <h2>Karta</h2>
        </div>
        <div id="autonomt" class="autonomt">
          <div id="auto" class="auto">
            <h2>Autonomt</h2>
          </div>
          <div id="status" class="status">
            <p>b</p>
            <p>b</p>
            <p>b</p>
            <p>b</p>
          </div>
      </div>
      <div id="konsol" class="konsol">
        <h1>konsol</h1>
      </div>
    </div>
      <div id="movementbox" class="movementbox">
        <div id="dartbox1" class="dartbox"><img src="bilder_pilar/forwardpil.png" alt="fel"></div>
        <div id="dartbox2" class="dartbox"><img src="bilder_pilar/forwardpil.png" alt="fel"></div>
        <div id="dartbox3" class="dartbox"><img src="bilder_pilar/forwardpil.png" alt="fel"></div>
        <div id="dartbox4" class="dartbox"><img src="bilder_pilar/forwardpil.png" alt="fel"></div>
        <div id="dartbox5" class="dartbox"><img src="bilder_pilar/forwardpil.png" alt="fel"></div>
        <div id="dartbox6" class="dartbox"><img src="bilder_pilar/forwardpil.png" alt="fel"></div>
        <div id="dartbox7" class="dartbox"><img src="bilder_pilar/forwardpil.png" alt="fel"></div>
        <div id="dartbox8" class="dartbox"><img src="bilder_pilar/forwardpil.png" alt="fel"></div>
        <div id="dartbox9" class="dartbox"><img src="bilder_pilar/forwardpil.png" alt="fel"></div>
        <div id="dartbox10" class="dartbox"><img src="bilder_pilar/counter_clockwise.png" alt="fel"></div>
        <div id="forwardbox" class="dartbox" onclick="forwardf()" style="cursor:pointer;"><img src="bilder_pilar/forwardpil.png" alt="fel"></div>
        <div id="dartbox12" class="dartbox"><img src="bilder_pilar/clockwise.png" alt="fel"></div>
        <div id="dartbox13" class="dartbox"><img src="bilder_pilar/leftpil.png" alt="fel"></div>
        <div id="dartbox14" class="dartbox"><img src="bilder_pilar/manuell_styrning.png" alt="fel"></div>
        <div id="dartbox15" class="dartbox"><img src="bilder_pilar/rightpil.png" alt="fel"></div>
        <div id="dartbox16" class="dartbox"><img src="bilder_pilar/land.png" alt="fel"></div>
        <div id="dartbox17" class="dartbox"><img src="bilder_pilar/backwardpil.png" alt="fel"></div>
        <div id="dartbox18" class="dartbox"><img src="bilder_pilar/lift.png" alt="fel"></div>
    </div>
    </div>
    </body>
  </html>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

若无相欠,怎会相见 2025-01-26 00:45:59

现在，这是如何工作的。

这就是为什么它不起作用的原因： （不要忽略它，否则您不会理解任何一个）

  • 有前端，并且有后端。
    • 前端是在浏览器上运行的东西 - 在用户方面。这就是用户看到的。
    • 后端将在服务器上运行 - 在这种情况下，它是您的Raspberry pi。
  • 您从终端执行的文件读/写代码将在后端执行。
  • 但是，当您在HTML中添加JS文件时，浏览器将尝试在用户的侧面 - 前端执行它。

这是您需要做的事情：

  • 阅读REST API
  • 实现了基于NodeJS的REST API，该API还将具有读取/编写文件的代码
  • ，从您的浏览器中读取REST API，请按按钮单击。最简单的方法是使用HTML表单，并以形式使用REST API操作。

祝你好运。愉快的编码！

Thats now how any of it works.

Here's why its not working: (dont ignore this, else you wont understand any of it)

  • There is frontend and there is backend.
    • Frontend is something that runs on the browser - on the user's side. This is what the user sees.
    • Backend is something that will run on the server - in this case its your Raspberry Pi.
  • The file read/write code that you execute from terminal, gets executed on the backend.
  • However, when you are adding the js file in HTML, the browser will try to execute it on the user's side - the frontend.

Here's what you need to do:

  • Read what REST API is
  • Implement a nodejs based REST API, which will also have the code to read/write the file
  • Call the REST API from your browser, on button click. Simplest way is to use HTML Form, and the REST API action in the form.

Good luck. Happy coding!

回复 原文
~没有更多了~

关于作者

魄砕の薆

暂无简介

文章
评论
28 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

李珊平

文章 0 评论 0

Quxin

文章 0 评论 0

范无咎

文章 0 评论 0

github_ZOJ2N8YxBm

文章 0 评论 0

若言

文章 0 评论 0

南…巷孤猫

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文