mysql - 从 angular+node.js webapp 在数据库中添加新用户会添加/复制自身

问题描述

当我注册新用户时，几秒钟后，进行了相同的 api 调用（我在终端中检查了我记录的数据...进行了 api 调用...在数据库中没有问题）并且该用户的重复条目是存储在数据库中，它需要一些时间才能复制用户。我尝试使电子邮件字段唯一以避免重复条目，但是由于电子邮件键的重复值的 MYSQL 错误，它使节点服务器崩溃。我将用户对象设为全局，在每个用户之后重置表单，但没有任何效果，只是稍微延迟了复制。

HTML 注册表单

<div class="container">
    <mat-card class="card">
        <mat-card-title>SIGNUP</mat-card-title>
        <mat-card class="form-card">
            <form [formGroup]="signupForm" #form="ngForm" (ngSubmit)="register(form)"> 
                <mat-form-field appearance='outline'>
                    <mat-label>FirstName</mat-label>
                    <input matInput formControlName="first_name" type="text" placeholder="FirstName" required/>
                    <mat-error>
                        <div *ngIf="signupForm.get('first_name').hasError('required')">FirstName is <strong>required</strong>.</div>
                    </mat-error>
                </mat-form-field>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <mat-form-field appearance='outline'>
                    <mat-label>LastName</mat-label>
                    <input matInput formControlName="last_name" type="text" placeholder="LastName" required/>
                    <mat-error>
                        <div *ngIf="signupForm.get('last_name').hasError('required')">LastName is <strong>required</strong>.</div>
                    </mat-error>
                </mat-form-field>
                <br>
                <mat-form-field appearance='outline' class="full-width">
                    <mat-label>Email</mat-label>
                    <input matInput formControlName="email" type="email" placeholder="Email" required/>
                    <mat-icon matSuffix>email</mat-icon>
                    <mat-error>
                        <div *ngIf="signupForm.get('email').hasError('email')">Enter valid Email ID.</div>
                        <div *ngIf="signupForm.get('email').hasError('required')">Email is <strong>required</strong>.</div>
                    </mat-error>
                </mat-form-field>
                <br>
                <mat-form-field appearance='outline' class="full-width">
                    <mat-label>Password</mat-label>
                    <input matInput formControlName="pass" [type]="hidePass ? 'password' : 'text'" placeholder="Password" required/>
                    <button mat-icon-button matSuffix (click)="hidePass = !hidePass">
                        <mat-icon>{{hidePass ? 'visibility_off' : 'visibility'}}</mat-icon>
                    </button>
                    <mat-error>
                        <div *ngIf="signupForm.get('pass').hasError('required')">Password is <strong>required</strong>.</div>
                        <div *ngIf="signupForm.get('pass').hasError('minlength')">Password should be <strong>atleast 6 characters long</strong>.</div>
                    </mat-error>
                </mat-form-field>
                <br>
                <mat-form-field appearance='outline' class="full-width">
                    <mat-label>Confirm Password</mat-label>
                    <input matInput formControlName="conf_pass" [type]="hideConfPass ? 'password' : 'text'" placeholder="Re-enter the Password" [errorStateMatcher]="matcher" required/>
                    <button mat-icon-button matSuffix (click)="hideConfPass = !hideConfPass">
                        <mat-icon>{{hideConfPass ? 'visibility_off' : 'visibility'}}</mat-icon>
                    </button>
                    <mat-error> 
                        <div *ngIf="signupForm.hasError('notSame')">Password & Confirm Password does not match.</div>
                    </mat-error>
                </mat-form-field>
                <br>
                <mat-card-actions>
                    <button type="submit" mat-raised-button class="button full-width" [disabled]="signupForm.invalid">Signup</button>
                </mat-card-actions>
                <button mat-button class="" [routerLink]="'/login'" >Already have an account</button>
            </form>
        </mat-card>
    </mat-card>
</div>

提交时调用的函数

register(form: NgForm){
    // Make an User object to store in database.
      this.user = {
      firstname: this.signupForm.controls.first_name.value,
      lastname: this.signupForm.controls.last_name.value,
      email: this.signupForm.controls.email.value,
      password: this.signupForm.controls.pass.value
    }
    this.authService.registerUser(this.user).subscribe((data: any) => {
      if (data.statusCode === util.statusCode.OK) {
        console.log(data);
      }
    });
    console.log(this.user);
    form.resetForm();
  }

}

前端服务（authService）

registerUser(user: User): Observable<any> {
    const cpHeaders = new HttpHeaders({'Content-Type': 'application/json'});
    const options = {headers: cpHeaders};
    return this.http.post(this.baseUrl + '/register-user', user, options)
      .pipe(catchError(err => this.handleError(err)));
  }

路线

router.post('/register-user', (req, res) => {
  authService.registerUser(req.body, (data) => {
    res.send(data);
  });
});

后端服务 (authService)

let registerUser = (data, callback) => {
  async.auto({
    user: (cb) => {
      bcrypt.hash(data.password, saltRounds, function(err, hash) {
        var dataToSet = {
          "first_name": data.firstname,
          "last_name": data.lastname,
          "email": data.email,
          "password": hash
        }
        userDAO.registerUser(dataToSet, (err, dbData) => {
            if (err) {
                cb(null, { "statusCode":404, "statusMessage": "Server is busy" });
                return;
            }
            cb(null, { "statusCode": util.statusCode.OK, "statusMessage": util.statusMessage.USER_ADDED, "result":dataToSet });
        });
      });
    }
  }, (err, response) => {
    callback(response.user);
  })
}

userDAO.registerUser()

let registerUser = (dataToSet, callback) => {
  console.log("data in DAO", dataToSet);
  console.log("insert into Users set ? ", dataToSet);
  dbConfig.getDB().query(`insert into Users set ? `, dataToSet);
}

它在浏览器控制台中第二次调用自身时显示此 CORS 错误

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:3000/register-user. (Reason: CORS request did not succeed).
Http failure response for http://localhost:3000/register-user: 0 Unknown Error auth.service.ts:33:12
ERROR 0 core.js:9110:19

标签： mysqlnode.jsangularexpress

mysql - 从 angular+node.js webapp 在数据库中添加新用户会添加/复制自身

问题描述

解决方案

推荐阅读