34 Flutter仿京东商城项目 用户注册 注册流程 POST发送验证码 倒计时功能 验证验证码

Stella981
• 阅读 404

加群_452892873_ 下载对应34课文件,运行方法,建好项目,直接替换lib目录

以下列出的是本课涉及的文件。

RegisterFirst.dart

import 'package:flutter/material.dart';
import 'package:flutter_jdshop/services/ScreenAdapter.dart';
import 'package:flutter_jdshop/widget/JdButton.dart';
import 'package:flutter_jdshop/widget/JdText.dart';
import '../config/Config.dart';
import 'package:dio/dio.dart';
import 'package:fluttertoast/fluttertoast.dart';
class RegisterFirstPage extends StatefulWidget {
  RegisterFirstPage({Key key}) : super(key: key);

  _RegisterFirstPageState createState() => _RegisterFirstPageState();
}

class _RegisterFirstPageState extends State<RegisterFirstPage> {
  String tel;



  sendCode() async{
    RegExp reg=new RegExp(r"^1\d{10}$");
    if(reg.hasMatch(this.tel)){
      print("正确");
      var api='${Config.domain}api/sendCode';
      var responses=await Dio().post(api,data:{"tel":this.tel});
      if(responses.data["success"]){
        print(responses); //演示期间服务器直接返回给手机发送的验证码
         Navigator.pushNamed(context, '/RegisterSecond',arguments: {
           "tel":this.tel
         });

      }else{
        Fluttertoast.showToast(
          msg: "${responses.data["message"]}",
          toastLength: Toast.LENGTH_SHORT,
          gravity: ToastGravity.CENTER,
        );
      }
    }else{
        Fluttertoast.showToast(
          msg: "手机号格式不对",
          toastLength: Toast.LENGTH_SHORT,
          gravity: ToastGravity.CENTER,
        );
    }   
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('用户注册-第一步'),
      ),
      body: Container(
        padding: EdgeInsets.all(ScreenAdapter.width(20)),
        child: ListView(
          children: <Widget>[
            SizedBox(height: 20),
            JdText(
              text: "请输入手机号",
              // password: true,
              onChanged: (value) {
                this.tel=value;
                // print(value);
              },
            ),
            SizedBox(height: 20),
            JdButton(
              text: "下一步",
              color: Colors.red,
              cb:sendCode
            )
          ],
        ),
      ),
    );
  }
}

RegisterSecond.dart

import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:flutter_jdshop/config/Config.dart';
import 'package:flutter_jdshop/services/ScreenAdapter.dart';
import 'package:flutter_jdshop/widget/JdButton.dart';
import 'package:flutter_jdshop/widget/JdText.dart';
import 'dart:async';

import 'package:fluttertoast/fluttertoast.dart';

class RegisterSecondPage extends StatefulWidget {
  Map arguments;
  RegisterSecondPage({Key key, this.arguments}) : super(key: key);

  _RegisterSecondPageState createState() => _RegisterSecondPageState();
}

class _RegisterSecondPageState extends State<RegisterSecondPage> {
  String tel;
  bool sendCodeBtn = false;
  int seconds = 10;
  String code;
  @override
  void initState() {
    super.initState();
    this.tel = widget.arguments["tel"];
    this._showTimer();
  }

  //
  _showTimer() {
    print("执行倒计时");
    print(this.sendCodeBtn);
    Timer t;
    t = Timer.periodic(Duration(microseconds: 1000), (timer) {
      setState(() {
        this.seconds--;
      });
      if (this.seconds == 0) {
        t.cancel(); //清除定时器:
        setState(() {
          this.sendCodeBtn = true;
        });
      }
    });
  }

  //重新发送验证码:
  sendCode() async {
    setState(() {
      this.sendCodeBtn = false;
      this.seconds = 10;
      this._showTimer();
    });
    var api = '${Config.domain}api/sendCode';
    var responses = await Dio().post(api, data: {"tel": this.tel});
    if (responses.data["success"]) {
      print(responses); //演示期间服务器直接返回给手机发送的验证码
      print(this.sendCodeBtn);
    } else {
      Fluttertoast.showToast(
        msg: "${responses.data["message"]}",
        toastLength: Toast.LENGTH_SHORT,
        gravity: ToastGravity.CENTER,
      );
    }
  }

  validateCode() async {
    var api = '${Config.domain}api/validateCode';
    var responses =
        await Dio().post(api, data: {"tel": this.tel, "code": this.code});
    if (responses.data["success"]) {
      print(responses);
      Navigator.pushNamed(context, '/RegisterThird');
    } else {
      Fluttertoast.showToast(
        msg: "${responses.data["message"]}",
        toastLength: Toast.LENGTH_SHORT,
        gravity: ToastGravity.CENTER,
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('用户注册-第二步'),
      ),
      body: Container(
        padding: EdgeInsets.all(ScreenAdapter.width(20)),
        child: ListView(
          children: <Widget>[
            Container(
              margin: EdgeInsets.all(20),
              child: Text("请输入${this.tel}手机收到的验证码"),
            ),
            Stack(
              children: <Widget>[
                JdText(
                  text: "请输入验证码",
                  // password: true,
                  onChanged: (value) {
                    print(value);
                    this.code = value;
                  },
                ),
                Positioned(
                  right: 0,
                  top: 0,
                  child: this.sendCodeBtn? RaisedButton(
                          child: Text("重新${this.sendCodeBtn}发送"),
                          onPressed: this.sendCode,
                        ): RaisedButton(
                          child: Text('${this.seconds}秒后重发'),
                          onPressed: () {},
                    ),
                )
              ],
            ),
            SizedBox(height: 20),
            JdButton(
              text: "下一步",
              color: Colors.red,
              cb: validateCode,
            )
          ],
        ),
      ),
    );
  }
}

import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:flutter_jdshop/config/Config.dart';
import 'package:flutter_jdshop/services/ScreenAdapter.dart';
import 'package:flutter_jdshop/widget/JdButton.dart';
import 'package:flutter_jdshop/widget/JdText.dart';
import 'dart:async';

import 'package:fluttertoast/fluttertoast.dart';

class RegisterSecondPage extends StatefulWidget {
  Map arguments;
  RegisterSecondPage({Key key, this.arguments}) : super(key: key);

  _RegisterSecondPageState createState() => _RegisterSecondPageState();
}

class _RegisterSecondPageState extends State<RegisterSecondPage> {
  String tel;
  bool sendCodeBtn = false;
  int seconds = 10;
  String code;
  @override
  void initState() {
    super.initState();
    this.tel = widget.arguments["tel"];
    this._showTimer();
  }

  //
  _showTimer() {
    print("执行倒计时");
    print(this.sendCodeBtn);
    Timer t;
    t = Timer.periodic(Duration(microseconds: 1000), (timer) {
      setState(() {
        this.seconds--;
      });
      if (this.seconds == 0) {
        t.cancel(); //清除定时器:
        setState(() {
          this.sendCodeBtn = true;
        });
      }
    });
  }

  //重新发送验证码:
  sendCode() async {
    setState(() {
      this.sendCodeBtn = false;
      this.seconds = 10;
      this._showTimer();
    });
    var api = '${Config.domain}api/sendCode';
    var responses = await Dio().post(api, data: {"tel": this.tel});
    if (responses.data["success"]) {
      print(responses); //演示期间服务器直接返回给手机发送的验证码
      print(this.sendCodeBtn);
    } else {
      Fluttertoast.showToast(
        msg: "${responses.data["message"]}",
        toastLength: Toast.LENGTH_SHORT,
        gravity: ToastGravity.CENTER,
      );
    }
  }

  validateCode() async {
    var api = '${Config.domain}api/validateCode';
    var responses =
        await Dio().post(api, data: {"tel": this.tel, "code": this.code});
    if (responses.data["success"]) {
      print(responses);
      Navigator.pushNamed(context, '/RegisterThird');
    } else {
      Fluttertoast.showToast(
        msg: "${responses.data["message"]}",
        toastLength: Toast.LENGTH_SHORT,
        gravity: ToastGravity.CENTER,
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('用户注册-第二步'),
      ),
      body: Container(
        padding: EdgeInsets.all(ScreenAdapter.width(20)),
        child: ListView(
          children: <Widget>[
            Container(
              margin: EdgeInsets.all(20),
              child: Text("请输入${this.tel}手机收到的验证码"),
            ),
            Stack(
              children: <Widget>[
                JdText(
                  text: "请输入验证码",
                  // password: true,
                  onChanged: (value) {
                    print(value);
                    this.code = value;
                  },
                ),
                Positioned(
                  right: 0,
                  top: 0,
                  child: this.sendCodeBtn? RaisedButton(
                          child: Text("重新${this.sendCodeBtn}发送"),
                          onPressed: this.sendCode,
                        ): RaisedButton(
                          child: Text('${this.seconds}秒后重发'),
                          onPressed: () {},
                    ),
                )
              ],
            ),
            SizedBox(height: 20),
            JdButton(
              text: "下一步",
              color: Colors.red,
              cb: validateCode,
            )
          ],
        ),
      ),
    );
  }
}

router.dart

import 'package:flutter/material.dart';
import 'package:flutter_jdshop/pages/Login.dart';
import 'package:flutter_jdshop/pages/RegisterFirst.dart';
import 'package:flutter_jdshop/pages/RegisterSecond.dart';
import 'package:flutter_jdshop/pages/RegisterThird.dart';
import 'package:flutter_jdshop/pages/tabs/Cart.dart';
import '../pages/tabs/Tabs.dart';

import '../pages/Search.dart';

import '../pages/ProductList.dart';

import '../pages/ProductContent.dart';

//配置路由
final routes = {
  '/': (context) => Tabs(),
  '/login': (context) => LoginPage(),
  '/RegisterFirst': (context) =>RegisterFirstPage(),
  '/RegisterSecond': (context,{arguments}) =>RegisterSecondPage(arguments:arguments),
  '/RegisterThird': (context) =>RegisterThirdPage(),
  '/search': (context) => SearchPage(),
  '/cart': (context) => CartPage(),
  '/productList': (context,{arguments}) => ProductListPage(arguments:arguments),
  '/productContent': (context,{arguments}) => ProductContentPage(arguments:arguments),
};

//固定写法
var onGenerateRoute = (RouteSettings settings) {
// 统一处理
  final String name = settings.name;
  final Function pageContentBuilder = routes[name];
  if (pageContentBuilder != null) {
    if (settings.arguments != null) {
      final Route route = MaterialPageRoute(
          builder: (context) =>
              pageContentBuilder(context, arguments: settings.arguments));
      return route;
    } else {
      final Route route =
          MaterialPageRoute(builder: (context) => pageContentBuilder(context));
      return route;
    }
  }
};
点赞
收藏
评论区
推荐文章
Wesley13 Wesley13
2年前
springMVC+Java验证码完善注册功能
这篇文章简单的写了一个java验证码,为之前写过的springMVC注册功能加上验证码,验证码的作用就不多说了,防止机器人程序恶意注册什么的。。。基本的注册功能的实现请查看之前的文章Maven搭建springMVCspringhibernate实现用户注册(https://www.oschina.net/action/GoToLi
宙哈哈 宙哈哈
11个月前
PHP短信验证码防刷方案
短信验证码是通过发送验证码到手机的一种有效的验证码系统。利用短信验证码来注册会员,大大降低了非法注册的数据。
Stella981 Stella981
2年前
Flutter学习之动态ListView
import'package:flutter/material.dart';voidmain(){runApp(listname(item:newList<String.generate(1000,(i)"genarate$i")));}
Stella981 Stella981
2年前
Flutter中日期组件DatePicker及组件汉化
Flutter提供了DatePicker组件进行时间选择。日期组件及时间组件代码示例:import'package:flutter/material.dart';//第三方插件,需要提前配置import'package:date_format/date_format.dart';classDat
Stella981 Stella981
2年前
Flutter学习之重叠布局
1.两个元素的重叠布局可以使用stack组件import'package:flutter/material.dart';voidmain(){runApp(MyApp());}classMyAppextendsStatelessWidget{
Stella981 Stella981
2年前
Flutter Widget不刷新问题
import'package:flutter/material.dart';///温度显示okclassTemperatureIndicationextendsStatefulWidget{finalValueChanged<intvalueChanged;final
Stella981 Stella981
2年前
Flutter入门(四)
\TabBar(顶部导航)import'package:flutter/material.dart';classCategoryPageextendsStatefulWidget{CategoryPage({Keykey}):super(key:key);@o
Stella981 Stella981
2年前
Flutter BottomSheet底部弹窗效果
BottomSheet是一个从屏幕底部滑起的列表(以显示更多的内容)。你可以调用showBottomSheet()或showModalBottomSheet弹出import'package:flutter/material.dart';import'dart:async';classBottomSheetDem
Stella981 Stella981
2年前
Flutter 基础组件:文本、字体样式
//文本、字体样式import'package:flutter/material.dart';classTextFontStyleextendsStatelessWidget{//声明文本样式TextStyletextStyleconstT
Stella981 Stella981
2年前
DBShop功能简介
DBShop功能简介商城模块功能功能描述系统设置基本设置1、网站名称、关键字、描述等seo设置2、网站logo、备案号设置3、系统关闭、系统开启、系统时区设置(针对不同国家时区)验证码1、注册验证码2、登录验证码3、商品咨询验证码4、手机验证码消息通知