我有连接到服务器的数据库和连接到客户端的服务器,但是尝试注册时出现错误。我的客户注册文件:
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import {withRouter} from 'react-router-dom';
import {connect} from 'react-redux';
import RaisedButton from 'material-ui/RaisedButton';
import {signError, signUp} from '../actions';
import $ from 'jquery';
import path from 'path';
import TextInput from '../components/text-input';
import Header from '../components/header';
import Footer from '../components/footer';
class Signup extends Component {
constructor(props) {
super(props);
this.state = {
muiTheme: getMuiTheme(),
dialogStyle: {display: 'none'},
isSubmitting: false
};
}
static childContextTypes = {
muiTheme: PropTypes.object
};
getChildContext() {
return {muiTheme: this.state.muiTheme};
}
static propTypes = {
topOffset: PropTypes.number,
leftOffset: PropTypes.number
};
componentDidMount() {
this.setState({
dialogStyle: {
display: 'flex',
justifyContent: 'center',
marginTop: 0,
marginBottom: 0,
marginLeft: 0,
marginRight: 0,
top: this.props.topOffset,
left: this.props.leftOffset
}
});
$('#avatar_image').hide();
}
componentWillMount() {
this.props.signError('');
}
submitForm = (e) => {
e.preventDefault();
const {isSubmitting} = this.state;
if(isSubmitting) return;
const email = $('#email').val();
const password = $('#password').val();
const passwordConfirm = $('#passwordConfirm').val();
const name = $('#name').val();
const fileToUpload = document.getElementById('fileToUpload').files;
if (email && password && passwordConfirm && name) {
if (email.length > 0 && password.length > 0 && passwordConfirm.length > 0 && name.length > 0) {
if(password === passwordConfirm) {
if(!isSubmitting) {
$('#submit').html('<img src="/public/assets/images/spinner.gif"/>');
this.setState({isSubmitting:true});
}
const failed = () => {
$('#submit').html('Submit');
this.setState({isSubmitting:false});
};
let avatar = null;
if (fileToUpload) {
if (fileToUpload[0]) {
const filename = fileToUpload[0].name;
if (filename && filename.length > 0) {
const ext = path.extname(filename).toLowerCase();
if (ext === '.png' || ext === '.jpg' || ext === '.jpeg' || ext === '.gif' || ext === '.ico') {
avatar = fileToUpload[0];
}
}
}
}
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
return sleep(300).then(() => {
this.props.signUp({email, password, name, avatar, failed});
});
}
}
}
};
signError = () => {
if (this.props.error) {
return (
<div className="alert alert-danger">
<strong>{this.props.error}</strong>
</div>
);
}
};
uploadFile(event) {
const file = event.target.files[0];
if(file) {
const ext = path.extname(file.name).toLowerCase();
if (ext === '.png' || ext === '.jpg' || ext === '.jpeg' || ext === '.gif' || ext === '.ico') {
let reader = new FileReader();
reader.onload = function (e) {
const avatar_image = $('#avatar_image');
avatar_image.attr('src', e.target.result);
const avatar_text = $('#avatar_text');
avatar_text.attr('placeholder', file.name);
avatar_image.show();
};
reader.readAsDataURL(file);
}
}
else {
$('#avatar_image').hide();
}
}
renderButton = () => {
return (
<div style={{display: 'flex', justifyContent:'left', alignItems:'center', width:'100%', height:'60px'}}>
<RaisedButton
label="Avatar Image"
labelPosition="before"
style={{marginLeft: 0, marginRight:20}}
containerElement="label"
>
<input
type="file"
style={{
cursor: 'pointer',
position: 'absolute',
top: 0,
bottom: 0,
right: 0,
left: 0,
width: '100%',
opacity: 0,
marginRight: 20
}}
id="fileToUpload"
name="fileToUpload"
className="form-control"
onChange={this.uploadFile}/>
</RaisedButton>
<div>
<input id="avatar_text" type="text" readOnly="" className="form-control" placeholder=""/>
</div>
<div>
<img id="avatar_image" width="50px" height="50px" alt="" className="img-circle" style={{marginLeft:4,marginRight:4, verticalAlign:'middle'}}/>
</div>
</div>
);
};
validateEmail = (value) => {
let error = '';
if (!value || value.length <= 0) {
error = 'Required';
} else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)) {
error = 'Invalid email address';
}
return error;
};
validateName = (value) => {
let error = '';
if (!value || value.length <= 0) {
error = 'Required';
} else if (value.length < 4) {
error = 'Must be 4 characters or more';
} else if (value.length > 30) {
error = 'Must be 30 characters or less';
}
return error;
};
validatePassword = (value) => {
let error = '';
if (!value || value.length <= 0) {
error = 'Required';
} else if (value.length < 4) {
error = 'Must be 4 characters or more';
} else if (value.length > 15) {
error = 'Must be 15 characters or less';
}
return error;
};
validatePasswordConfirm = (value) => {
let error = '';
if (!value || value.length <= 0) {
error = 'Required';
}
const password = $('#password').val();
if (value !== password) {
error = 'Passwords must match';
}
return error;
};
reset = () => {
this._email.reset();
this._password.reset();
this._passwordConfirm.reset();
this._name.reset();
$('#fileToUpload').val('');
$('#avatar_image').attr('src', '').hide();
$('#avatar_text').attr('placeholder', '');
};
render() {
return (
<div>
<Header/>
<div style={{textAlign: 'center'}}>
{this.signError()}
</div>
<div style={this.state.dialogStyle}>
<form style={{width:'60%', height:'100%',
marginTop:20, marginBottom:100}}
id='form_info'
name='form_info'
onSubmit={(e) => this.submitForm(e)}>
<TextInput
ref={e=>this._email = e}
label="Email"
name="email"
type="text"
validate={this.validateEmail}
/>
<TextInput
ref={e=>this._password = e}
label="Password"
name="password"
type="password"
validate={this.validatePassword}
placeholder="Please enter a password"
/>
<TextInput
ref={e=>this._passwordConfirm = e}
label="Confirm Password"
name="passwordConfirm"
type="password"
validate={this.validatePasswordConfirm}
placeholder="Please re-type password"
/>
<TextInput
ref={e=>this._name = e}
label="Name"
name="name"
type="text"
validate={this.validateName}
placeholder="Please enter your name"
/>
<div className="form-group">
{this.renderButton()}
</div>
<div style={{clear:'both'}}> </div>
<div style={{display:'flex', justifyContent:'center'}}>
<button
id="submit"
type="submit"
value="Submit"
name="submit"
className="btn btn-lg btn-primary">Submit</button>
<button
type="button"
value="Clear"
name="clear"
className="btn btn-lg btn-default"
onClick={(e) => {
e.preventDefault();
this.props.signError('');
this.reset();
}}>Clear</button>
</div>
</form>
</div>
<Footer/>
</div>
);
}
}
function mapStateToProps(state) {
return {
error: state.auth.error
};
}
const mapDispatchToProps = dispatch => {
return {
signError: (error) => dispatch(signError(error)),
signUp: ({email, password, name, avatar, failed}) => dispatch(signUp({email, password, name, avatar, failed}))
}
};
export default Signup = withRouter(connect(mapStateToProps, mapDispatchToProps)(Signup));
但是提交后,我在Web控制台“ xhr.js:178 POST http://localhost:5000/signup net :: ERR_CONNECTION_RESET”中遇到错误
服务器控制台中的错误:“ TypeError:无法读取null的属性'seq'
在C:/projekti/iStudy/iStudy-Server/models/user.js:39:25
在model.Query。 (C:\ projekti \ iStudy \ iStudy-
服务器\ node_modules \猫鼬\ lib \ model.js:4093:16)
在C:\ projekti \ iStudy \ iStudy-Server \ node_modules \ kareem \ index.js:273:21
在C:\ projekti \ iStudy \ iStudy-Server \ node_modules \ kareem \ index.js:131:16
在_combinedTickCallback(内部/进程/next_tick.js:132:7)
在process._tickDomainCallback(internal / process / next_tick.js:219:9)
还有我的user.js
import mongoose from 'mongoose';
import {counter} from './sequence';
const Schema = mongoose.Schema;
const ObjectId = Schema.Types.ObjectId;
const UserSchema = new Schema({
no: Number,
email: {type: String, unique: true, lowercase: true},
password: {type: String, default: ''},
profile: {
name: {type: String, default: ''},
picture: {type: String, default: ''},
instructor: {type: Boolean, default: false}
},
courses: [{
ref: { type: ObjectId, ref: 'Course'},
no: { type: Number, default: 0},
learn: { type: Boolean, default: false}
}],
google: {
type: Object
},
facebook: {
type: Object
},
twitter: {
type: Object
}
});
UserSchema.pre('save', function (next) {
const doc = this;
const name = 'user_counter';
counter.findByIdAndUpdate({_id: name}, {$inc: { seq: 1} }, function(err, result) {
if(err) {
return next(err);
}
doc.no = result.seq;
next();
});
});
export default mongoose.model('User', UserSchema, 'users');