flask+vue的前端发送与后端验证

简介: 前端发送与后端验证
+关注继续查看

前端数据代码

数据表示与发送
    
<view class="login_from_input form-group">
    <view class="login_from_name">用户名</view>
    <view class="login_from_fun"><input type="text" name="username" v-model="username" placeholder="请输如用户名"></view>
</view>
<view class="login_from_input form-group">
    <view class="login_from_name">密码</view>
    <view class="login_from_fun"><input type="digit" v-model="password" name="password" password="true" placeholder="请输入登录密码"></view>
</view>

<script>
    export default{
    data(){
     return {
        username:"",
        password:"",
        }
    },
    methods:{
    login(){
        uni.request({
        url:"http://127.0.0.1:5000/auth/register",
        method:"POST",
        //这里的data 后端flask可以根据变量名得到  request.form.get("username")
        data:{
            username :this.username,
            password:this.password,
        },
        header: {
            "Content-Type": "application/x-www-form-urlencoded"
        },
        success:(res) => {
            console.log(res)
        }
    })        
}

后端接收数据

1.接受文件接口

@bp.route("/register" , methods=['GET','POST'])
@cross_origin()
def register():
    form = RegisterForm(request.form)
     if form.validate():
         username = form.username.data
         password = form.password.data
         user_model = UserModel(username=username,password=generate_password_hash(password),email=email)
            db.session.add(user_model)
            db.session.commit()
            return redirect("login")
        else:
            print(form.errors)
            return "fail"

2.数据验证 (格式,邮箱是否已存在,验证码是否正确)

class RegisterForm(wtforms.Form):
    email = wtforms.StringField(validators=[Email(message="邮箱格式错误!")])
    captcha = wtforms.StringField(validators=[Length(min=4, max=4, message="验证码格式错误")])
    username = wtforms.StringField(validators=[Length(min=3, max=10, message="用户名格式错误")])
    password = wtforms.StringField(validators=[Length(min=6, max=20, message="密码格式错误")])
    #test = wtforms.StringField(validators=[Length(min=4,max=4,message="test信息错误")])
    #1. 邮箱是否已经被注册
    def validate_email(self,filed):
        email = filed.data
        #print(email)
        user = UserModel.query.filter_by(email = email).first()
        if user:
            raise wtforms.ValidationError(message="邮箱已经被注册")

    #2. 验证码是否正确
    def validate_captcha(self,filed):
        captcha = filed.data
        #print(captcha)
        email = self.email.data
        captcha_model = EmailCaptchaModel.query.filter_by(email=email, captcha=captcha).first()
        #captcha_model.used = True
        if not captcha_model:
            raise wtforms.ValidationError(message="邮箱或验证码错误")
        else:
            db.session.delete(captcha_model)
            db.session.commit()
相关文章
|
2月前
|
Python
python flask 后端报错 ImportError: cannot import name ‘cached_prope‘
问题python flask 后端报错 ImportError: cannot import name ‘cached_prope‘flask程序启动但抛出该错误,是因为werkzeug 版本过高,需要降低版本即可 解决:一般这种情况是需要注意第三方库版本的对应,werkzeug需要0.16.0 版本时 flask的版本应该时1.x.x 的版本,不能是2.x过高的版本。
23 0
|
5月前
|
JSON JavaScript 数据格式
FLASK+VUE+axios前后端交互
FLASK+VUE+axios前后端交互
131 0
|
7月前
|
JavaScript 前端开发 Python
Vue前后端页面下载功能实现演示,Python+flask提供后台下载服务
Vue前后端页面下载功能实现演示,Python+flask提供后台下载服务
132 0
|
11月前
|
前端开发 JavaScript Go
Python3+Flask结合Socket.io配合前端Vue实现简单全双工在线客服系统
在之前的一篇文章中:[为美多商城(Django2.0.4)添加基于websocket的实时通信,主动推送,聊天室及客服系统](https://v3u.cn/a_id_67),详细介绍了websocket协议以及结合Django如何实现各种功能,本次我们尝试采用Socket.io这个库和Flask来配合使用,完成一个简易的在线客服聊天系统,看看二者有什么区别。
Python3+Flask结合Socket.io配合前端Vue实现简单全双工在线客服系统
|
11月前
|
前端开发 JavaScript Python
Flask:使用SocketIO实现WebSocket与前端Vue进行实时推送(gevent-websocket、flask-socketio、flask不出现running on 127..问题)
本文旨在记录使用Flask框架过程中与前端Vue对接过程中,存在WebSocket总是连接失败导致前端取不到数据的问题。以及在使用WebSocket相关功能的库包gevent-websocket之后,导致运行Flask项目之后,控制台没有显示running on 127.0.0.1:5000 问题、以及没有输出log日志记录的问题、以及总是报错Websocket connection to‘ws://127.0.0.1:5000/socket.io/?EIO=4&transport=websocket’failed:Error during Websocket handshake:Unexpe
Flask:使用SocketIO实现WebSocket与前端Vue进行实时推送(gevent-websocket、flask-socketio、flask不出现running on 127..问题)
|
JavaScript 前端开发 IDE
Arco Vue + Flask 手把手实战开发一测试需求平台
使用最新的Acro Vue前端框架,和Python Flask服务从0-1手把手实现一个测试需求平台,内容将囊括基础、扩展和实战,由浅入深带你实现测试开发岗位中平台工具技术能力入门和提升。
589 0
Arco Vue + Flask 手把手实战开发一测试需求平台
|
NoSQL JavaScript 前端开发
Vue + Flask 小知识(七)
今天继续 Vue + Flask 小知识系列,登陆 session 的相关管理
|
JavaScript 前端开发 Python
Vue + Flask 小知识(六)
Vue + Flask 小知识(六)
|
存储 缓存 JSON
Vue + Flask 小知识(五)
今天继续分享 Vue 系列,使用 JWT 来管理用户认证信息 认证:判定用户的合法性,一般是判断是否已经登陆 鉴权:判断用户的权限,一般是判断用户是否可以继续继续某个操作 今天先来看看认证相关
|
存储 JavaScript 前端开发
Vue + Flask 小知识(四)
今天继续分享 Vue 系列,提交多对多表单
Vue + Flask 小知识(四)
相关产品
云迁移中心
推荐文章
更多