使用Perl与ReactJS

Question

我想做的是从ReactJS运行带参数的Perl脚本并返回结果。为了达到我的目的，如果我可以通过ReactJS运行控制台命令，也可以实现相同的效果。最终，我计划将其制作成一款电子应用程序。有什么建议的方法吗？谢谢。

- Panos

---

http://andrewhfarmer.com/react-ajax-best-practices/ - ThisSuitIsBlackNot

@ThisSuitIsBlackNot 我认为他可能是指服务器端的ReactJS... - clt60

你尝试过什么？你遇到了什么问题？ - Dave Cross

我尝试了几个插件，但都没有成功。据我所知，v8编译器不适用于ReactJS。问题是，在效率、速度等方面，什么是最好的解决方案？我相信我可以手动编译Perl 5模块，但在这样做之前，我应该这样做吗？还是有更好的解决方案？ - Panos

你需要编辑你的问题，展示一些你尝试过的事情和你遇到的问题的证据。 - Dave Cross

Answer 1

将你的 Perl 脚本托管在 Web API 上，例如：http://www.example.com/your/perl/script.pl。然后，在你的 React 代码中，只需执行以下操作：

fetch('http://www.example.com/your/perl/script.pl', {
    'headers': {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
    },
    'method':'POST',
    'body':JSON.stringify({'someargument':'123'}),
})
.then((response) => response.json())
.then((responseJson)=>{
    console.info("Response?");
    console.info(responseJson);
});

您的 Perl 脚本需要有一个 JSON 解析器（我建议使用 CPAN 的 JSON 库）。然后，您将在前端（ReactJS）和后端（您的 Perl 脚本）之间进行通信。让我们开始吧。=）

如果您想了解更多关于 Fetch() 的信息，请访问：https://scotch.io/tutorials/how-to-use-the-javascript-fetch-api-to-get-data

- HoldOffHunger

Answer 2

如果您想使用perl插入数据，可以尝试以下代码：

在insert.js中导入以下文件：

    import React, { Component } from 'react';
    import './App.css';
    export default class Insert extends React.Component {

  constructor() {
      super();
      this.state = {
        fields: {},
        json_response : []

      }
      this.instantform= this.instantform.bind(this);
      this.change=this.change.bind(this);
  }
   change= (e)=>{
            let fields= this.state.fields;
            fields[e.target.name] = e.target.value;
            //alert (fields);
            this.setState({
            fields

        });
    };
      renderListing() {
        let recordList = []
        this.state.json_response.map(record => {

            alert(record.Usernamename);

            return recordList.push(
            <tr>

            <td>{record.Usernamename}</td>
            <td>{record.password}</td>

            </tr>
                   )
        })
        return recordList;
    }

验证您的页面：

handleValidation(){
var pattern;
  let fields = this.state.fields;
  let errors = {};
  let formIsValid = true;
    if (!fields["channel_id"]) {
           formIsValid = false;
           errors["channel_id"] = "*Please enter your channel_id";
           alert('Please enter your channel_id');
      }
  if (typeof fields["channel_id"] !== "undefined") {
     pattern = new RegExp(/^-?\d*$/);
    if (!pattern.test(fields["channel_id"])) {
      formIsValid = false;
      errors["channel_id"] = "*Please enter valid channel id.";
      alert('Please enter valid channel id');
    }
  }
  if (!fields["Username"]) {
    formIsValid = false;
    errors["Username"] = "*Please enter your Username.";
    alert('Please enter your Username.');
  }


  if (typeof fields["Username"] !== "undefined") {


    if (!fields["Username"].match(/^[a-zA-Z ]*$/)) {

      formIsValid = false;
      errors["Username"] = "*Please enter alphabet characters only.";
      alert('Please enter alphabet characters only.');

    }
  }
if (!fields["Hotel_id"]) {
    formIsValid = false;
    errors["Hotel_id"] = "*Please enter your Hotel_id";
    alert('Please enter your Hotel_id');
  }

  if (typeof fields["Hotel_id"] !== "undefined") {

    //regular expression for email validation
    //var pattern = new RegExp(/^-?\d*$/);
    if (!fields["Hotel_id"].match(/^-?\d*$/)) {
      formIsValid = false;
      errors["Hotel_id"] = "*Please enter valid Hotel - id.";
      alert('Please enter valid Hotel - id.');
    }
  }

 if (!fields["password"]) {
    formIsValid = false;
    errors["password"] = "*Please enter your password.";
    alert('*Please enter your password.');
  }

  if (typeof fields["password"] !== "undefined") {
    if (!fields["password"].match(/((?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@#$%]).{6,20})/)) {
      formIsValid = false;
      errors["password"] = "*Please enter secure and strong password.";
      alert('*Please enter secure and strong password');
    }
}

  this.setState({
    errors: errors

  });
  return formIsValid;    
  }

表单点击方法：

instantform =(e)=>{
    e.preventDefault();

if(this.handleValidation())
{

    //alert("Sucess");        
    var fields = this.state.fields;
    this.setState({ loading: true, disabled: true }, () =>
            {
                //console.log(fields);
                   fetch('http://ubuntu:90/common-cgi/trainee/krunal/my-app/src/database/insert.pl',
                   //fetch('http://192.168.0.50:3000/myfirst_app/src/testing.php',
                    {
                        method: 'POST',
                        headers: 
                        {
                            'Accept': 'application/json',
                            'Content-Type': 'application/json',
                        },  
                        body: JSON.stringify(fields)

                  }).then(res => {

                    //.then(res => res.text()).then(text => {
                        alert("Success");
                      //  this.setState({
                      //    json_response: json_response
                      //})


                       //JSON.stringify(json_response);
                        //alert(json_response.Username);                            
                        //fields["Username"] = "";
                        //fields["lastname"] = "";
                        //fields["email"] = "";
                        //fields["message"] = "";
                        //this.setState({fields:fields});

                   }).catch((error) =>
                  {
                        console.error(error.toString());
                       //console.warn(error);
                        this.setState({ loading: false, disabled: false });
                  });
            });
    }
 }

渲染：

 render() {
      return (     


     <div className="container">
     <center>
               <div className="keyformwrap">
                     <form method="post" name="instantform" onSubmit={this.instantform}>
                            <br />

                           <label>User name</label>
                           <input
                                     type="text"
                                     id="Username"
                                     name ="Username"
                                     placeholder="Your User name..."
                                     value = {this.state.fields.Username}
                                     onChange ={e => this.change(e)}
                                    />
                           <label>User Lastname</label>

                            <input type="text" id="Fullname"
                                             name ="Fullname"
                                             placeholder="Your Full name.."
                                             value = {this.state.fields.Fullname}
                                             onChange ={e => this.change(e)}
                                         />
                           <label>Department</label>
                           <input type="text" id="department"
                                             name ="department"
                                             placeholder="Your department.."
                                             value = {this.state.fields.department}
                                             onChange ={e => this.change(e)}
                                         />
                           <label>Email </label>
                           <input
                                   type="text" id="Email"
                                     name ="Email"
                                     placeholder="Your Hotel  ID.."
                                     value = {this.state.fields.Email}
                                     onChange ={e => this.change(e)}
                                    />

                           <label>Password</label>
                            <input
                                     type="password"
                                     id="password"
                                     name ="password"
                                     placeholder="Your User Password..."
                                     value = {this.state.fields.password}
                                     onChange ={e => this.change(e)}
                                    />
                           <label>Retrive property   * </label><input type="submit" value="Submit"  />
                           <p>{JSON.stringify(this.state.fields)}</p>
                    </form>               
              </div>
              </center>
        </div>
  );
 }
}

App.js:

    import React, { Component } from 'react';
import './App.css';
//import './Temp.css';

import Insert from "./Insert.js";
import Design_bookingcom  from "./Design_bookingcom.js";



class App extends Component {

  render() {
      return (        
        <div >
           <Insert />
        </div>
    );
  }
}
export default App;

Perl文件 insert.js

    #!/usr/bin/perl
use CGI qw(:all);

use LWP::UserAgent;
use HTTP::Request;
use HTTP::Headers;                                               
use HTTP::Response;                                              
use Data::Dumper;
use Encode;
use LWP::Simple::Post("post_xml");
use XML::Simple;
use CGI;
use JSON;
use DBI;

my $cgi = new CGI;
my $json_response;
my $response;

#   Header to fatch the data from react js file 
print $cgi->header(
    -type => 'text/json',
    -access_control_allow_origin => '*',
    -access_control_allow_headers => 'content-type',
    -access_control_allow_methods => 'POST',
    -access_control_allow_credentials => 'true',
);

#    END

$response =  $cgi->param('POSTDATA');
my $json = decode_json($response);
my $username =  $json->{'Username'};
my $Email = $json->{'Email'};
my $Fullname = $json->{'Fullname'};
my $department = $json->{'department'};
my $password = $json->{'password'};
my $driverr="mysql";
my $db="krunal";
my $driver="DBI:$driverr:database=$db";
my $userid="root";
my $password="passwd";
my $conn =DBI->connect($driver,$userid,$password) or die $DBI::errstr;
$qry="INSERT INTO employee(emp_id,emp_username,emp_fullname,emp_dept,emp_psasword,emp_email) VALUES('',?,?,?,?,?)";
$statement=$conn->prepare("$qry");
$statement->execute($username,$Fullname,$department,$password,$Email);
$final =    $statement->finish();
print $final;

- krunal shimpi