Question

我正在尝试编写用户个人资料页面以从http://SITE_URL/users/username这样的URL中获取用户名，并使用该信息通过比较数据库集合中提取的详细信息来呈现页面，但似乎我正在创建一个代码周围的巨大错误。

我对MERN堆栈完全不熟悉。希望能找到帮助。

App.js

app.get('/users/:username', function (req, res) {
var userurl = req.params.username;
user.findByUsername(userurl,function(result){
//res.send(result);
res.sendFile(__dirname + '/html/users.html');
}); 
})

app.post('/users/:username', function (req, res) {
var newurl = req.params.username;
user.foundByUsername(newurl,function(result){
res.send(result);
//res.sendFile(__dirname + '/html/users.html');
}); 
})

Users.js

findByUsername: function(userurl, callback){
    MongoClient.connect(url, function(err, db){

        db.collection('user').findOne( { username : userurl 
        },function(err, result){
            if(result==null){
                callback(false)
            }
            else{
                callback(result);
            }
        });
    });
},
foundByUsername: function(newurl, callback){
    MongoClient.connect(url, function(err, db){

        db.collection('user').findOne( { username : newurl
        },
        function(err, result){
            assert.equal(err, null);
            console.log("Retrived the user entry.");
            if(err == null){
                callback(result)
            }
            else{
                callback(false)
            }
        });
    });
},

Users.jsx

var Router = window.ReactRouter.Router;
var Route = window.ReactRouter.Route;
var hashHistory = window.ReactRouter.hashHistory;
var browserHistory = window.ReactRouter.browserHistory;
var Link = window.ReactRouter.Link;

class UserProfile extends React.Component {

constructor(props){
super(props);
this.foundByUsername = this.foundByUsername.bind(this);
this.state = {
  username: '',
}
}
componentDidMount() {
this.foundByUsername();
}
foundByUsername(){
  var username = this.props.params.username;

  var self = this;

  axios.post('/users/:username', {
    username: username
  })
  .then(function (response) {
    if(response){
    console.log(response);
      self.setState({username:response.data.username});
    }

  })
  .catch(function (error) {
    console.log('error is ',error);
  });

}
render() {
  return (

  <div>
    Username: { this.state.username }<br />

  </div>

  )
}
}

ReactDOM.render(
<Router history={hashHistory}>

    <Route component={UserProfile} path="/users/:username"></Route> 
</Router>,
document.getElementById('app'));

Answer 1

如果您使用create-react-app，则必须代理所有请求，或在提出请求时提供服务器的完整网址。例如，在package.json中添加以下内容

"proxy":{
  "/api/*":{
    "target":"http://127.0.0.1:YOUR_PORT_FOR_NODEJS"
  }
}

使用Node，React，Express AXIOS和MONGODB获取URL参数和渲染用户页面

1 个答案: