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()
相关文章
|
8月前
|
JavaScript 前端开发 Java
制造业ERP源码,工厂ERP管理系统,前端框架:Vue,后端框架:SpringBoot
这是一套基于SpringBoot+Vue技术栈开发的ERP企业管理系统,采用Java语言与vscode工具。系统涵盖采购/销售、出入库、生产、品质管理等功能,整合客户与供应商数据,支持在线协同和业务全流程管控。同时提供主数据管理、权限控制、工作流审批、报表自定义及打印、在线报表开发和自定义表单功能,助力企业实现高效自动化管理,并通过UniAPP实现移动端支持,满足多场景应用需求。
769 1
|
10月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
546 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
存储 JavaScript 前端开发
前端技术分享:使用Vue.js与Vuex管理状态
【10月更文挑战第1天】前端技术分享:使用Vue.js与Vuex管理状态
153 6
|
11月前
|
SQL JavaScript 安全
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
496 11
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
|
JavaScript 前端开发 API
Vue.js:现代前端开发的强大框架
【10月更文挑战第11天】Vue.js:现代前端开发的强大框架
430 41
|
JavaScript 前端开发 API
vue获取图片的blob传给django后端
vue获取图片的blob传给django后端
294 4
|
JavaScript 前端开发 API
Vue.js:打造高效前端应用的最佳选择
【10月更文挑战第9天】Vue.js:打造高效前端应用的最佳选择
171 2
|
JavaScript 前端开发 API
前端技术分享:Vue.js 动态路由与守卫
【10月更文挑战第1天】前端技术分享:Vue.js 动态路由与守卫
|
前端开发 数据安全/隐私保护
angular前端基本页面验证
angular前端基本页面验证
140 1
|
JavaScript 前端开发 开发者
使用 Vue.js 和 Vuex 构建响应式前端应用
【10月更文挑战第2天】使用 Vue.js 和 Vuex 构建响应式前端应用
166 1

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    665
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    277
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    247
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    194
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    301
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    441
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    193
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    135
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    203
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    279