Flutter-防京东商城项目-编写注册(2)-35

一直觉得自己写的不是技术，而是情怀，一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的，希望我的这条路能让你们少走弯路，希望我能帮你们抹去知识的蒙尘，希望我能帮你们理清知识的脉络，希望未来技术之巅上有你们也有我。

代码文档

Flutter防京东商城源码(1-10)链接

Flutter防京东商城源码(11-20)链接

Flutter防京东商城源码(21-30)链接

Flutter防京东商城源码(31-46)链接

注册获取到的验证码在打印台上面可以收到。

gif图的效果是34和35的代码来的。

修改两个BUG

1.第一个

 String tel = "";

2.第二个 回到

children: <Widget>[


//--------------------------------------------
   Container(
     child: JdText(
//--------------------------------------------    

       text: "请输入验证码",
       onChanged: (value) {
         this.code=value;
       },
     ),

//--------------------------------------------
     height: ScreenAdaper.width(100),
   ),
//--------------------------------------------   

  Positioned(

3.回到页面添加下面的代码

//--------------------------------------------
import '../config/Config.dart';
import 'package:dio/dio.dart';
import 'package:fluttertoast/fluttertoast.dart';
import '../services/Storage.dart';
import 'dart:convert';
import '../tabs.dart';//引入Tabs
//--------------------------------------------

class RegisterThirdPage extends StatefulWidget {


//--------------------------------------------
  Map arguments;
//--------------------------------------------

  
  RegisterThirdPage({Key key, this.arguments}) : super(key: key);//------------------------

  _RegisterThirdPageState createState() => _RegisterThirdPageState();
}

class _RegisterThirdPageState extends State<RegisterThirdPage> {



//--------------------------------------------
  String tel;
  String code;
  String password='';
  String rpassword='';
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    this.tel = widget.arguments["tel"];
    this.code = widget.arguments["code"];
  }
  //注册
  doRegister() async {
    if (password.length < 6) {
      Fluttertoast.showToast(
        msg: '密码长度不能小于6位',
        toastLength: Toast.LENGTH_SHORT,
        gravity: ToastGravity.CENTER,
      );
    } else if (rpassword != password) {
      Fluttertoast.showToast(
        msg: '密码和确认密码不一致',
        toastLength: Toast.LENGTH_SHORT,
        gravity: ToastGravity.CENTER,
      );
    } else {
      var api = '${Config.domain}api/register';
      var response = await Dio().post(api, data: {
        "tel": this.tel,
        "code": this.code,
        "password": this.password
      });
      if (response.data["success"]) {
        //保存用户信息   
        Storage.setString('userInfo', json.encode(response.data["userinfo"]));

        //返回到根
        Navigator.of(context).pushAndRemoveUntil(
            new MaterialPageRoute(builder: (context) => new Tabs()),
            (route) => route == null);
      } else {
        Fluttertoast.showToast(
          msg: '${response.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>[
            SizedBox(height: 50),
            JdText(
              text: "请输入密码",
              password: true,
              onChanged: (value) {

//--------------------------------------------
                this.password=value;
//--------------------------------------------

                
              },
            ),
            SizedBox(height: 10),
            JdText(
              text: "请输入确认密码",
              password: true,
              onChanged: (value) {


//--------------------------------------------
                this.rpassword=value;
//--------------------------------------------



                
              },
            ),
            SizedBox(height: 20),
            JdButton(
              text: "注册",
              color: Colors.red,
              height: 74,
              cb: doRegister,//--------------------------------------------
            )
          ],
        ),
      ),
    );
  }
}

5.回到路由修改下面的代码

'/registerThird': (context,{arguments}) => RegisterThirdPage(arguments: arguments),

6.回到页面

Navigator.pushNamed(context, '/registerThird',arguments: {
  "tel":this.tel,
  "code":this.code
});

7.把这个文件拖进来

UserServices

import '../services/Storage.dart';
import 'dart:convert';

class UserServices{
  static getUserInfo() async{
     List userinfo;
     try {
      List userInfoData = json.decode(await Storage.getString('userInfo'));
      userinfo = userInfoData;
    } catch (e) {
     userinfo = [];
    }
    return userinfo;      
  }
  static getUserLoginState() async{    
      var userInfo=await UserServices.getUserInfo();
      if(userInfo.length>0&&userInfo[0]["username"]!=""){
        return true;
      }
      return false;
  }
  static loginOut(){
    Storage.remove('userInfo');
  }
}

8.然后回到文件里面

9.导入

import '../../services/UserServices.dart';

10.添加下面的代码

bool isLogin=false;
List userInfo=[];

@override
void initState() {
  // TODO: implement initState
  super.initState();
  this._getUserinfo();
}

_getUserinfo() async{

    var isLogin=await UserServices.getUserLoginState();      
    var userInfo=await UserServices.getUserInfo();

    setState(() {          
      this.userInfo=userInfo;
      this.isLogin=isLogin;
    });

}

11.三木运算判断是否登录

!this.isLogin?Expanded(//--------------------------------------------
  flex: 1,
  child: InkWell(
    onTap: () {
      Navigator.pushNamed(context, '/login');
    },
    child: Text("登录/注册", style: TextStyle(color: Colors.white)),
  ),



//--------------------------------------------
):Expanded(
  flex: 1,
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      Text("用户名：${this.userInfo[0]["username"]}",
          style: TextStyle(
              color: Colors.white,
              fontSize: ScreenAdapter.size(32))),
      Text("普通会员",
          style: TextStyle(
              color: Colors.white,
              fontSize: ScreenAdapter.size(24))),
    ],
  ),
)
//--------------------------------------------

12.修改用户名:

写了不用写

Text("用户名：

//--------------------------------------------
${this.userInfo[0]["username"]
//--------------------------------------------


}",

13.编写临时退出按键

import 'package:flutter_app/widget/JDButton.dart';

JdButton(
  text: "退出登录",
  cb: (){
    UserServices.loginOut();
    this._getUserinfo();
  },
)