我是个新手。当我点击停止睡眠或信息按钮时,我会向
users.json
文件来更改
status
.My JSON文件包含:;
{
"users": [
{
"hostname": "XXX.XX.XX.XXX",
"username": "username",
"password": "admin",
"command": "whoami",
"status": "sleep",
"info": "temp",
"id": 1
}
]
}
补丁请求发送成功,但在网页上没有重新加载,我看不到新状态。这是我的应用程序。js文件;
import React, { Component } from "react";
import AddUser from "./components/AddUser";
import Users from "./components/Users";
import axios from "axios";
const fs = require('fs');
const path = require('path');
class App extends Component {
constructor(props) {
super(props);
this.state = {
users:[],
};
this.deleteUser = this.deleteUser.bind(this);
this.addUser = this.addUser.bind(this);
this.stopPC = this.stopPC.bind(this);
this.infoPC = this.infoPC.bind(this) ;
}
async componentDidMount(){
const response = await axios.get("http://localhost:3002/users");
// console.log(response);
this.setState({users:response.data})
}
componentWillUnmount(){
clearInterval(this.interval);
}
async statusUpdate(){
const response = await axios.get("http://localhost:3002/users");
// console.log(response);
this.interval = setInterval(() => this.setState({users:response.data.status}),3000)
}
//AXIOS API
deleteUser = async (id) => {
axios.delete('http://localhost:3002/users/'+ id);
let updatedUsers = this.state.users;
updatedUsers = updatedUsers.filter(user => user.id !== id);
this.setState({
users : updatedUsers
})
}
addUser(newUser){
axios({
method: 'post',
url: 'http://localhost:3002/users/',
data: {
hostname: newUser.hostname,
username : newUser.username,
password: newUser.password,
command : newUser.command,
status : newUser.status
}
});
let updatedUsers = this.state.users;
updatedUsers.push(newUser);
this.setState({
users : updatedUsers
})
}
stopPC(id){
axios.patch('http://localhost:3002/users/'+id, {
command: 'shutdown -s -t 0',
});
}
sleepPC(id){
axios.patch('http://localhost:3002/users/'+id, {
command: 'rundll32.exe user32.dll,LockWorkStation',
status : 'sleep'
});
}
infoPC(id){
axios.patch('http://localhost:3002/users/'+id, {
command: 'whoami',
status : 'info'
});
}
render() {
const title = "Remote Control"
return (
<div className="container">
<h1>{title}</h1>
<hr/>
<AddUser addUser= {this.addUser}/>
<hr/>
<Users deleteUser= {this.deleteUser} users = {this.state.users} stopPC= {this.stopPC} sleepPC= {this.sleepPC} infoPC={this.infoPC} statusUpdate={this.statusUpdate} />
</div>
);
}
}
export default App;
这是我的用户。js文件;
import React , {Component} from "react";
import User from "./User";
class Users extends Component {
render(){
const {users , deleteUser,stopPC,sleepPC,infoPC} = this.props;
return(
<table className="table table-dark">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Hostname</th>
<th scope="col">Username</th>
<th scope="col">Stop</th>
<th scope="col">Sleep</th>
<th scope="col">Start</th>
<th scope="col">Status</th>
<th scope="col">CPU Temperature</th>
<th scope="col">Info</th>
<th scope="col">Delete</th>
</tr>
</thead>
<tbody>
{
users.map(user => {
const {id,hostname,username,password,command,status,info} = user;
return <User key={id}
id = {id}
hostname = {hostname}
username = {username}
password = {password}
command = {command}
status={status}
info={info}
deleteUser = {deleteUser}
stopPC={stopPC}
sleepPC = {sleepPC}
infoPC = {infoPC}
/>;
})
}
</tbody>
</table>
)
}
}
export default Users;
还有我的用户。js文件;
import React , {Component} from "react";
import Popup from "./Popup";
const axios = require('axios');
const fs = require('fs');
const path = require('path');
class User extends Component {
constructor(props) {
super(props);
this.state = {
buttonPopup: false
};
}
onDeleteClick(id,e){
const {deleteUser} = this.props;
deleteUser(id);
}
onStopClick(id,e){
const {stopPC} = this.props;
stopPC(id);
}
onSleepClick(id,e){
const {sleepPC} = this.props;
sleepPC(id);
}
onStartClick(id,e){
}
buttonPopupfunc(id,e){
this.setState({buttonPopup : true})
}
infofunc(id,e){
const {infoPC} = this.props;
infoPC(id);
}
render(){
const {id,hostname,username,status,info,cpuTemp} = this.props;
return(
<tr>
<td>{id}</td>
<td>{hostname}</td>
<td>{username}</td>
<td><button onClick={() =>{this.onStopClick.bind(this,id);document.location.reload(true)}} className="btn btn-danger">Stop</button></td>
<td><button onClick={this.onSleepClick.bind(this,id)} className="btn btn-warning">Sleep</button></td>
<td><button onClick={this.onStartClick.bind(this,id)} className="btn btn-success">Start</button></td>
<td>{status}</td>
<td>{cpuTemp}</td>
<td><button onClick={() => {this.buttonPopupfunc();this.infofunc(id);}} type="button" class="btn btn-info">🛈</button>
<Popup trigger = {this.state.buttonPopup} setTrigger = {() =>this.setState({buttonPopup : false})} >
<text>{this.infos}</text>
</Popup>
</td>
<td><button onClick={this.onDeleteClick.bind(this,id)} className="btn btn-danger">Delete</button></td>
</tr>
)
}
}
export default User;
我想在网页上看到状态的即时变化。如果你能帮忙,我会很高兴的。这是我的网页;
web page
