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()
相关文章
|
21天前
|
前端开发 JavaScript 开发者
React与Vue:前端框架的巅峰对决与选择策略
【10月更文挑战第23天】React与Vue:前端框架的巅峰对决与选择策略
|
21天前
|
前端开发 JavaScript 数据管理
React与Vue:两大前端框架的较量与选择策略
【10月更文挑战第23天】React与Vue:两大前端框架的较量与选择策略
|
27天前
|
JavaScript 前端开发 算法
前端优化之超大数组更新:深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点,探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化,React 利用虚拟 DOM 和 `diffing` 算法优化更新,Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略,如使用 `key`、分片渲染、虚拟滚动等,帮助开发者在处理大型数组时提升性能。总结指出,选择合适的框架应根据项目复杂度和性能需求来决定。
|
1月前
|
前端开发 JavaScript 安全
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
93 4
|
21天前
|
前端开发 JavaScript 开发者
React与Vue:前端框架的巅峰对决与选择策略
【10月更文挑战第23天】 React与Vue:前端框架的巅峰对决与选择策略
|
28天前
|
前端开发 JavaScript API
2025年前端框架是该选vue还是react?有了大模型-例如通义灵码辅助编码,就不用纠结了!vue用的多选react,react用的多选vue
本文比较了Vue和React两大前端框架,从状态管理、数据流、依赖注入、组件管理等方面进行了详细对比。当前版本和下载量数据显示React更为流行,但Vue在国内用户量增长迅速。Vue 3通过组合式API提供了更灵活的状态管理和组件逻辑复用,适合中小型项目;React则更适合大型项目和复杂交互逻辑。文章还给出了选型建议,强调了多框架学习的重要性,认为技术问题已不再是选型的关键,熟悉各框架的最佳实践更为重要。
|
1月前
|
JSON 前端开发 JavaScript
Vue微前端新探:iframe优雅升级,扬长避短,重获新生
Vue微前端新探:iframe优雅升级,扬长避短,重获新生
107 0
|
1月前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
146 0
|
1月前
|
JavaScript 前端开发 应用服务中间件
Vue开发中,在实现单页面应用(SPA)前端路由时的hash模式和history模式的区别及详细介绍
Vue开发中,在实现单页面应用(SPA)前端路由时的hash模式和history模式的区别及详细介绍
26 0
|
1月前
|
JavaScript 前端开发
前端js,vue系统使用iframe嵌入第三方系统的父子系统的通信
前端js,vue系统使用iframe嵌入第三方系统的父子系统的通信

热门文章

最新文章

下一篇
无影云桌面