我正在创建一个具有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)
})
}
}
在烧瓶中注册功能:
@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})