javascript 注册表提交/处理后,Flask返回新的Angular 页面

yrdbyhpb  于 2023-04-28  发布在  Java
关注(0)|答案(1)|浏览(88)

我正在创建一个具有Angular前端和Flask后端的Web应用程序。我有注册和登录页面。当用户提交注册表单时,我希望Flask处理数据,然后重定向到登录页面。
我首先使用静态html对Flask应用程序进行了原型化。要在注册后呈现新页面,我将用途:

flash("A confirmation email has been sent via email", "success")
return redirect(url_for("main.index"))

如何使用Angular实现同样的功能?是否存在等效的render_template函数?
register.component.ts:

import { Component, Injectable, NgModule } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

import { CustomValidators } from './custom-validators';
import { HttpClientModule } from '@angular/common/http';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.scss'],
  providers: [HttpClientModule]
})
export class RegisterComponent {
  public frmSignup: FormGroup;

  constructor(private fb: FormBuilder, private http: HttpClient) {
    this.frmSignup = this.createSignupForm();
  }

  createSignupForm(): FormGroup {
    return this.fb.group(
      {
        full_name: [
          null,
          Validators.compose([Validators.required])
        ],
        org: [
          null,
          Validators.compose([Validators.required])
        ],
        user_type: [
          null,
          Validators.compose([Validators.required])
        ],
        email: [
          null,
          Validators.compose([Validators.email, Validators.required])
        ],
        password: [
          null,
          Validators.compose([
            Validators.required,
            CustomValidators.patternValidator(/\d/, {
              hasNumber: true
            }),
            CustomValidators.patternValidator(/[A-Z]/, {
              hasUpperCase: true
            }),
            CustomValidators.patternValidator(/[a-z]/, {
              hasLowerCase: true
            }),
            CustomValidators.patternValidator(
              /[ !@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/,
              {
                hasSpecialCharacters: true
              }
            ),
            Validators.minLength(8)
          ])
        ],
        confirmPassword: [null, Validators.compose([Validators.required])]
      },
      {
        validator: CustomValidators.passwordMatchValidator
      }
    );
  }

  submit() {
    this.frmSignup.valueChanges.subscribe(console.log);
    var registrationData = this.frmSignup.value
    console.log(registrationData)
    this.http.post("http://127.0.0.1:5000/register", registrationData)
      .subscribe((result) => {
        console.warn("result", result)
      })

  }
}

flask 中的寄存器功能:

@auth.route("/register", methods=["POST"])
def register_post():
    name = request.json["full_name"]
    org = request.json["org"]
    user_type = request.json["user_type"]
    email = request.json["email"]
    password = request.json["password"]

    user = User.query.filter_by(email=email).first()

    if user:
        status = "Email address already exists"
        return jsonify({'result': status})

    new_user = User(
        id=str(uuid.uuid4()),
        name=name,
        org=org,
        user_type=user_type,
        email=email,
        password=generate_password_hash(password, method="sha256"),
        admin="N",
        registered_on=datetime.datetime.now(),
        confirmed="N",
        confirmed_on=datetime.datetime.now(),
    )

    db.session.add(new_user)
    db.session.commit()

    token = generate_confirmation_token(new_user.email)
    confirm_url = url_for("auth.confirm_email", token=token, _external=True)
    html = render_template("activate.html", confirm_url=confirm_url)
    subject = "Please confirm your email"
    send_email(new_user.email, subject, html)

    login_user(new_user)

    status = "A confirmation email has been sent via email"
    return jsonify({'result': status})
hfsqlsce

hfsqlsce1#

您可以使用路由器在Angular ,以导航到您的不同的意见。在发出帖子请求后,检查结果并做相应的导航。您需要声明路由器,然后使用函数navigate https://angular.io/api/router/Router

export class Test {
  constructor(private router: Router) {
    this.router.navigate("/url-u-want")
  }
}

相关问题