完成登录页

coderben2017 · coderben2017 · commit 8be7467d3be8 · 2021-06-01T17:52:12.000+08:00
diff --git a/README.md b/README.md
@@ -11,5 +11,5 @@
 - [x] 首页（文章列表）
 - [x] 文章详情
 - [x] 新增文章
-- [ ] 登录
+- [x] 登录
 - [ ] 发表评论
diff --git a/lib/config.dart b/lib/config.dart
@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
 
 const appConfig = {'title': 'flutter个人博客模板'};
 
-const baseUrl = 'http://192.168.1.138:3001';
+const baseUrl = 'http://2.0.1.173:3001';
 
 const primaryColor = const MaterialColor(
   0xFF66BB6A,
diff --git a/lib/main.dart b/lib/main.dart
@@ -1,3 +1,4 @@
+import 'package:blog_flutter/pages/login.dart';
 import 'package:blog_flutter/router.dart';
 import 'package:flutter/material.dart';
 import 'config.dart';
@@ -14,6 +15,6 @@ class App extends StatelessWidget {
           primarySwatch: primaryColor,
         ),
         routes: routerMap,
-        home: homeWidget);
+        home: LoginWidget());
   }
 }
diff --git a/lib/pages/home.dart b/lib/pages/home.dart
@@ -19,7 +19,6 @@ class HomeWidgetState extends State<HomeWidget> {
 
   void _getArticles() async {
     var response = await ArticleService.getArticles(_start, _limit);
-    print(response);
     setState(() {
       _articles.addAll(response.data['data']);
       _total = response.data['total'];
diff --git a/lib/pages/login.dart b/lib/pages/login.dart
@@ -1,4 +1,7 @@
+import 'package:blog_flutter/config.dart';
+import 'package:blog_flutter/services/user_service.dart';
 import 'package:flutter/material.dart';
+import 'package:fluttertoast/fluttertoast.dart';
 
 class LoginWidget extends StatefulWidget {
   @override
@@ -8,10 +11,15 @@ class LoginWidget extends StatefulWidget {
 class LoginWidgetState extends State<LoginWidget> {
   final title = '新增文章';
 
-  TextEditingController _unameController = new TextEditingController();
-  TextEditingController _pwdController = new TextEditingController();
+  TextEditingController _userNameController = new TextEditingController();
+  TextEditingController _passwordController = new TextEditingController();
   GlobalKey _formKey = new GlobalKey<FormState>();
 
+  void _login(String userName, String password) async {
+    await UserService.login(userName, password);
+    Navigator.of(context).pushNamed('/home');
+  }
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
@@ -27,48 +35,39 @@ class LoginWidgetState extends State<LoginWidget> {
             children: <Widget>[
               TextFormField(
                   autofocus: true,
-                  controller: _unameController,
-                  decoration: InputDecoration(
-                      labelText: "用户名",
-                      hintText: "用户名或邮箱",
-                      icon: Icon(Icons.person)),
+                  controller: _userNameController,
+                  decoration: InputDecoration(labelText: "用户名", hintText: "用户名或邮箱", icon: Icon(Icons.person)),
                   // 校验用户名
                   validator: (v) {
                     return v.trim().length > 0 ? null : "用户名不能为空";
                   }),
               TextFormField(
-                  controller: _pwdController,
-                  decoration: InputDecoration(
-                      labelText: "密码",
-                      hintText: "您的登录密码",
-                      icon: Icon(Icons.lock)),
+                  controller: _passwordController,
+                  decoration: InputDecoration(labelText: "密码", hintText: "您的登录密码", icon: Icon(Icons.lock)),
                   obscureText: true,
                   //校验密码
                   validator: (v) {
-                    return v.trim().length > 5 ? null : "密码不能少于6位";
+                    return v.trim().length > 3 ? null : "密码不能少于4位";
                   }),
               // 登录按钮
               Padding(
                 padding: const EdgeInsets.only(top: 28.0),
                 child: Row(
                   children: <Widget>[
                     Expanded(
-                      child: RaisedButton(
-                        padding: EdgeInsets.all(15.0),
+                      child: ElevatedButton(
                         child: Text("登录"),
-                        color: Theme.of(context).primaryColor,
-                        textColor: Colors.white,
+                        style: ButtonStyle(
+                            foregroundColor: MaterialStateProperty.all(Colors.white),
+                            backgroundColor: MaterialStateProperty.resolveWith((states) {
+                              if (states.contains(MaterialState.pressed)) {
+                                return primaryColor[600];
+                              }
+                              return primaryColor;
+                            })),
                         onPressed: () {
-                          //在这里不能通过此方式获取FormState，context不对
-                          //print(Form.of(context));
-
-                          // 通过_formKey.currentState 获取FormState后，
-                          // 调用validate()方法校验用户名密码是否合法，校验
-                          // 通过后再提交数据。
                           if ((_formKey.currentState as FormState).validate()) {
-                            //验证通过提交数据
-                            print(_unameController.text);
-                            print(_pwdController.text);
+                            _login(_userNameController.text, _passwordController.text);
                           }
                         },
                       ),
diff --git a/lib/services/http.dart b/lib/services/http.dart
@@ -1,7 +1,7 @@
 import 'package:blog_flutter/config.dart';
 import 'package:dio/dio.dart';
-import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
+import 'package:fluttertoast/fluttertoast.dart';
 
 class Http {
   factory Http() => _getInstance();
@@ -18,26 +18,26 @@ class Http {
   }
 
   Http._() {
-    BaseOptions options =
-        new BaseOptions(baseUrl: baseUrl);
-    InterceptorsWrapper interceptorsWrapper = new InterceptorsWrapper(
-      onResponse: (res, handler) {
-        // if (res.data.code != 0) {
-        //   return handler.reject(DioError(requestOptions: res.requestOptions));
-        // }
-        return handler.next(res);
-      },
-      onError: (e, handler) {
-        AlertDialog(
-          title: Text('网络出错'),
-          content: Text(e.toString()),
-        );
-        return handler.next(e);
-      },
-    );
+    BaseOptions options = new BaseOptions(baseUrl: baseUrl);
+    DioInterceptor dioInterceptor = new DioInterceptor();
+    _http = Dio(options)..interceptors.add(dioInterceptor);
+  }
+}
+
+class DioInterceptor extends InterceptorsWrapper {
+  @override
+  onResponse(response, handler) {
+    if (response.data['code'] != 1) {
+      Fluttertoast.showToast(msg: response.data['msg']);
+      return null;
+    }
+    return handler.next(response);
+  }
 
-    _http = Dio(options);
-    _http.interceptors.add(interceptorsWrapper);
+  @override
+  onError(e, handler) {
+    print(e.toString());
+    return handler.next(e);
   }
 }
 
diff --git a/lib/services/user_service.dart b/lib/services/user_service.dart
@@ -0,0 +1,11 @@
+
+import 'package:blog_flutter/services/http.dart';
+
+abstract class UserService {
+  static Future login(String userName, String password) {
+    return http.post('/login', data: {
+      'userName': userName,
+      'password': password
+    });
+  }
+}
diff --git a/pubspec.lock b/pubspec.lock
diff --git a/pubspec.yaml b/pubspec.yaml

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+import 'package:blog_flutter/pages/login.dart';`
`1`	`2`	`import 'package:blog_flutter/router.dart';`
`2`	`3`	`import 'package:flutter/material.dart';`
`3`	`4`	`import 'config.dart';`
`@@ -14,6 +15,6 @@ class App extends StatelessWidget {`
`14`	`15`	`primarySwatch: primaryColor,`
`15`	`16`	`),`
`16`	`17`	`routes: routerMap,`
`17`		`- home: homeWidget);`
	`18`	`+ home: LoginWidget());`
`18`	`19`	`}`
`19`	`20`	`}`