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()
相关文章
|
3月前
|
前端开发 API UED
Python后端与前端交互新纪元:AJAX、Fetch API联手,打造极致用户体验!
Python后端与前端交互新纪元:AJAX、Fetch API联手,打造极致用户体验!
121 2
|
8天前
|
机器学习/深度学习 前端开发 算法
婚恋交友系统平台 相亲交友平台系统 婚恋交友系统APP 婚恋系统源码 婚恋交友平台开发流程 婚恋交友系统架构设计 婚恋交友系统前端/后端开发 婚恋交友系统匹配推荐算法优化
婚恋交友系统平台通过线上互动帮助单身男女找到合适伴侣,提供用户注册、个人资料填写、匹配推荐、实时聊天、社区互动等功能。开发流程包括需求分析、技术选型、系统架构设计、功能实现、测试优化和上线运维。匹配推荐算法优化是核心,通过用户行为数据分析和机器学习提高匹配准确性。
37 3
|
2月前
|
JSON 前端开发 Java
震惊!图文并茂——Java后端如何响应不同格式的数据给前端(带源码)
文章介绍了Java后端如何使用Spring Boot框架响应不同格式的数据给前端,包括返回静态页面、数据、HTML代码片段、JSON对象、设置状态码和响应的Header。
164 1
震惊!图文并茂——Java后端如何响应不同格式的数据给前端(带源码)
|
2月前
|
JavaScript 前端开发 API
vue获取图片的blob传给django后端
vue获取图片的blob传给django后端
62 4
|
2月前
|
前端开发 小程序 Java
java基础:map遍历使用;java使用 Patten 和Matches 进行正则匹配;后端传到前端展示图片三种情况,并保存到手机
这篇文章介绍了Java中Map的遍历方法、使用Pattern和matches进行正则表达式匹配,以及后端向前端传输图片并保存到手机的三种情况。
27 1
|
2月前
|
存储 前端开发 Java
验证码案例 —— Kaptcha 插件介绍 后端生成验证码,前端展示并进行session验证(带完整前后端源码)
本文介绍了使用Kaptcha插件在SpringBoot项目中实现验证码的生成和验证,包括后端生成验证码、前端展示以及通过session进行验证码校验的完整前后端代码和配置过程。
299 0
验证码案例 —— Kaptcha 插件介绍 后端生成验证码,前端展示并进行session验证(带完整前后端源码)
|
2月前
|
JSON 前端开发 数据格式
@RequestMapping运用举例(有源码) 前后端如何传递参数?后端如何接收前端传过来的参数,传递单个参数,多个参数,对象,数组/集合(有源码)
文章详细讲解了在SpringMVC中如何使用`@RequestMapping`进行路由映射,并介绍了前后端参数传递的多种方式,包括传递单个参数、多个参数、对象、数组、集合以及JSON数据,并且涵盖了参数重命名和从URL中获取参数的方法。
239 0
@RequestMapping运用举例(有源码) 前后端如何传递参数?后端如何接收前端传过来的参数,传递单个参数,多个参数,对象,数组/集合(有源码)
|
2月前
|
前端开发 JavaScript Java
导出excel的两个方式:前端vue+XLSX 导出excel,vue+后端POI 导出excel,并进行分析、比较
这篇文章介绍了使用前端Vue框架结合XLSX库和后端结合Apache POI库导出Excel文件的两种方法,并对比分析了它们的优缺点。
857 0
|
2月前
|
前端开发 JavaScript 小程序
前端uni开发后端用PHP的圈子系统该 如何做源码?
圈子系统系统基于TP6+Uni-app框架开发;客户移动端采用uni-app开发,管理后台TH6开发。系统支持微信公众号端、微信小程序端、H5端、PC端多端账号同步,可快速打包生成APP
|
2月前
|
前端开发 Java 数据库
springBoot:template engine&自定义一个mvc&后端给前端传数据&增删改查 (三)
本文介绍了如何自定义一个 MVC 框架,包括后端向前端传递数据、前后端代理配置、实现增删改查功能以及分页查询。详细展示了代码示例,从配置文件到控制器、服务层和数据访问层的实现,帮助开发者快速理解和应用。