7.用户注册_前后端交互——解决跨域问题、wtform验证结果提示信息的传递

1.Tornado解决跨域问题

**报错如下：**Could not proxy request /api/user/get from localhost:3000 to http://localhost:8000/.

1.1产生跨域问题的原因

由于现在是前后端分离的项目，这就会产生两个项目：前端项目与后端项目。假设我们前端的端口号是3000，后端的端口号是8000。默认是不支持不同端口号互相传递的。

1.2方法1：

在控制器的类下添加一个函数，并且，在注册路由的路由前添加/api/

    def set_default_headers(self) -> None:
        self.set_header('Access-Control-Allow-Origin','*')

('/api/user/add/', UserHandler.AddUserHandler)

1.3方法3：

创建一个基类，写入1.2的代码，让以后的每个类都去继承基类即可。

from tornado.web import RequestHandler
from forum import manager

class BaseHandler(RequestHandler):
    def set_default_headers(self) -> None:
        self.set_header('Access-Control-Allow-Origin','*')

新创建的类的继承

class AddUserHandler(BaseHandler):

2.将wtforms验证字段状态信息传递给前端

2.1代码展示

# 调用wtforms做添加用户数据之前的数据表单验证
class AddUserHandler(BaseHandler):
    async def post(self):
        # 创建应该响应对象
        rs_data = {}
        # 接受请求的参数并封装到Form对象中
        user_form = UserForm(self.request.arguments)
        if user_form.validate():
            # 从表单中获取email信息
            email = user_form.email.data
            try:
                # 异步查询数据表信息
                exist_user = await manager.get(UserModel,email = email)
                if exist_user:
                    # 存在此用户，验证失败
                    rs_data['code'] = 500
                    rs_data['msg'] = '用户名已存在'
            except Exception as e:
                # 验证成功
                # 异步保存数据到数据库中
                user_form.id.data = uuid4()
                await manager.create(UserModel,**user_form.data)
                rs_data['code'] = 200
                rs_data['msg'] = '注册成功'
        else:
            # 验证失败
            rs_data['code'] = 500
            rs_data['msg'] = '注册失败'
            # 将验证失败的具体原因返回给rs_data，提示信息
            for f in user_form.errors:
                rs_data[f] = user_form.errors[f][0]
        self.finish(rs_data)

2.2前端测试