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()
相关文章
|
16天前
|
存储 JavaScript 前端开发
前端技术分享:使用Vue.js与Vuex管理状态
【10月更文挑战第1天】前端技术分享:使用Vue.js与Vuex管理状态
38 6
|
6天前
|
JavaScript 前端开发 API
Vue.js:现代前端开发的强大框架
【10月更文挑战第11天】Vue.js:现代前端开发的强大框架
58 41
|
8天前
|
JavaScript 前端开发 API
Vue.js:打造高效前端应用的最佳选择
【10月更文挑战第9天】Vue.js:打造高效前端应用的最佳选择
11 2
|
11天前
|
JavaScript 前端开发 API
vue获取图片的blob传给django后端
vue获取图片的blob传给django后端
17 4
|
9天前
|
前端开发 小程序 Java
java基础:map遍历使用;java使用 Patten 和Matches 进行正则匹配;后端传到前端展示图片三种情况,并保存到手机
这篇文章介绍了Java中Map的遍历方法、使用Pattern和matches进行正则表达式匹配,以及后端向前端传输图片并保存到手机的三种情况。
11 1
|
16天前
|
JavaScript 前端开发 API
前端技术分享:Vue.js 动态路由与守卫
【10月更文挑战第1天】前端技术分享:Vue.js 动态路由与守卫
|
18天前
|
存储 前端开发 Java
验证码案例 —— Kaptcha 插件介绍 后端生成验证码,前端展示并进行session验证(带完整前后端源码)
本文介绍了使用Kaptcha插件在SpringBoot项目中实现验证码的生成和验证,包括后端生成验证码、前端展示以及通过session进行验证码校验的完整前后端代码和配置过程。
20 0
验证码案例 —— Kaptcha 插件介绍 后端生成验证码,前端展示并进行session验证(带完整前后端源码)
|
6天前
|
监控 JavaScript 前端开发
深入了解Vue.js:构建现代前端应用的利器
【10月更文挑战第11天】深入了解Vue.js:构建现代前端应用的利器
10 0
|
10天前
|
前端开发 JavaScript Java
导出excel的两个方式:前端vue+XLSX 导出excel,vue+后端POI 导出excel,并进行分析、比较
这篇文章介绍了使用前端Vue框架结合XLSX库和后端结合Apache POI库导出Excel文件的两种方法,并对比分析了它们的优缺点。
148 0
|
10天前
|
前端开发 JavaScript 小程序
前端uni开发后端用PHP的圈子系统该 如何做源码?
圈子系统系统基于TP6+Uni-app框架开发;客户移动端采用uni-app开发,管理后台TH6开发。系统支持微信公众号端、微信小程序端、H5端、PC端多端账号同步,可快速打包生成APP