Question

我正在尝试在我的应用中实施用户注册。我使用node.js express来创建我的后端，并在我在路由器文件夹中创建的.js文件中传递了一个插入查询。我已经在app.js中添加了所有必要的东西。

以下是我的后端代码。

var express = require('express');
var router = express.Router();
var mysql =  require('mysql');

var connection = mysql.createConnection({
      host: 'localhost',
      user: 'root',
      password: '',
      database:'MobileDB',
})

/* GET users listing. */
router.post('/', function(req, res, next) {

        var name = req.body.name;
        var email = req.body.username;
        var password = req.body.password;
        var phone = req.body.phone;
        connection.query("INSERT INTO `user` (`id`, `name`, `username`, `password`, `phone`) VALUES (NULL, '', '', '', '')",[null,name,username,password,phone],function(err,row,fields){
          if (err) console.log(err);

          if(row.length > 0){
              res.send({'success': true, 'message': 'welcome new user'});
          } else {
            res.send({'success':false,'message':'user not found, please try again'});
          }
      });
  });

module.exports = router;

以下是我的注册页面：

import React, { Component } from 'react';
import{
  Image,
  View
} from 'react-native';
import { Container, Content, List,Thumbnail, ListItem, InputGroup, Input, Icon, Text, Picker, Button,Header,Footer} from 'native-base';
import {
Router,
Actions,
Scene } from 'react-native-router-flux';
const Item = Picker.Item;
export default class Reg extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name:'',
            username:'',
            password:'',
            phone:'',
            }

        };
    }
      Reg = () => {


            fetch('http://192.168.0.20:3000/reg', {
             method : 'POST',
                  headers: {
                  'Accept': 'application/json',
                  'Content-type': 'application/json',
                  },

                  body: JSON.stringify({
                  name:this.state.name,
                  username:this.state.username,
                  password:this.state.password,
                  phone:this.state.phone,

                  })
            })

            .then((response) => response.json())
            .then((res) => {
                  if(res.success=== true){
                  var username = res.message;

                     AsyncStorage.setItem('username', username);
                     Actions.Ideas();}
                     else {
                    alert(res.message);
                }



            })

            .done();

      }
    render(){
      return(
      <Container>
            <Content>
                    <View style={{alignSelf:'center'}}>
                    <Button transparent onPress={Actions.upload}>
                    <Icon name='ios-contact' style={{fontSize:30}}/>
                    </Button>
                    </View>
                    <View style={{top:20}}>
                    <List>
                        <ListItem>
                            <InputGroup>
                                <Icon name="ios-person-outline" style={{ color: '#5bc0de' }} />
                                <Input onChangeText={(name) => this.setState({name})}
                                  value={this.state.name} placeholder="Name" />
                            </InputGroup>
                        </ListItem>
                        <ListItem>
                            <InputGroup>
                                <Icon name="ios-at-outline" style={{color:'#5bc0de'}}/>
                                <Input onChangeText={(username) => this.setState({username})}
                                   value={this.state.username} placeholder="Email" />
                            </InputGroup>
                        </ListItem>
                        <ListItem>
                            <InputGroup>
                                <Icon name="ios-lock-outline" style={{ color: '#5bc0de' }} />
                                <Input onChangeText={(password) => this.setState({password})}
                                 value={this.state.password}placeholder="Password" secureTextEntry />
                            </InputGroup>
                        </ListItem>
                        <ListItem>
                            <InputGroup>
                                <Icon name="ios-call-outline" style={{ color: '#5bc0de' }} />
                                <Input onChangeText={(phone) => this.setState({phone})}
                                 value={this.state.phone}placeholder="Phone" keyboardType="numeric" />
                            </InputGroup>
                        </ListItem>

                    </List>
                    <Button info style={{ alignSelf: 'center', marginTop:20, marginBottom: 20 }} onPress={this.Reg}>
                        SIGN UP
                    </Button>
                    </View>
                </Content>
            </Container>

        );
    }
}

当我点击SignUp按钮时，它会显示无法识别的令牌错误。我无法弄清楚我哪里出错了。请帮忙。

Answer 1

附加Chrome调试器并启用例外暂停，您将了解出现了什么问题。

Answer 2

在Reg()函数中，'http://192.168.0.20:3000/reg'应该是'http://192.168.0.20:3000/'我相信。

我认为您正在使用当前代码获取一些不需要的HTML。我假设它是因为您尝试将POST请求发送到未定义的路由。

在您的if声明之前，console.log回复res，以便您准确了解您从后端获得的回复。

JSON解析错误：无法识别的令牌＆lt;

2 个答案: