Node.js 切近实战(二) 之图书管理系统(登录)

我们看一下项目结构

wKiom1df14-SO_pbAAAccPovL5M192.png-wh_50

典型的NodeJs三层架构,controller,model,view,这里每个部分什么职能,我就不多说了。

首先我们看一下登录界面,先上图,我看博客的时候,会首先看博客中有没有图,比如一篇博客讲的是实时通讯或者自己包装了一个HTML5播放器,结果整篇博客全是代码和汉字,没有图片,这样的博客也没有什么吸引力。废话不多说,看看界面。

wKiom1df153Td2UAAAA_gWFCnLk458.png-wh_50

还是BootStrap布局,只是我将BootStrap的primary样式改了下,变成Telerik Kendo UI中的primary样式,因为后面的话我们是要使用Kendo UI去做前端UI的。Telerik Kendo UI for Html5是很不错的,样式美观大方,支持Jquey和Angualr JS。地址:http://www.telerik.com/kendo-ui

wKioL1df2AWTGYYxAABsGnPxX-8416.png

其实这个登录界面很简单,还是使用jade模板,代码如下

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

doctype html

html

  head

    base(href='/')

    title #{title}

    link(rel='stylesheet', href='/stylesheets/style.css')

    link(rel='stylesheet',href='/stylesheets/bootstrap/css/bootstrap.min.css')

    link(rel='stylesheet',href='/stylesheets/bootstrap/css/bootstrap-theme.min.css')

    link(rel='stylesheet',href='/stylesheets/kendo/kendo.common-material.min.css')

    link(rel='stylesheet',href='/stylesheets/kendo/kendo.material.min.css')

    script(src='/javascripts/thirdpart/angular.min.js',type="text/javascript")

  body(style='background-color:#CCCCCC;')

    #main_layout(ng-app='loginModule' ng-controller='loginController')

     .panel.panel-primary

       .panel-heading

         h3.panel-title

          img(src='/images/userlogin.png' style='width:25px;height:25px')

          label.left-margin-10 User login

       form(ng-submit='loginIn()' role='form')

        div.panel-content

          .center-align-text

            h3 Please Enter your Information

          .row

            .col-md-12.row-margin

              .input-group.row-margin

                span.input-group-addon(style='background-color:#FF9900')

                  img.input-group-img(src='/images/userno.png')

                input.form-control(ng-model='Login.UserName' type='text' autofocus='autofocus' placeholder='Please input user name' maxlength=15 required title='User name can\'t be empty!')

            .col-md-12.row-margin-large

              .input-group

                span.input-group-addon(style='background-color:#009966')

                  img.input-group-img(src='/images/password.jpg')

                input.form-control(ng-model='Login.Password' type='password' placeholder='Please input password' required maxlength='15' title='Password can\'t be empty!')

            .col-md-12.row-margin-large(style='margin-bottom:10px')

            .col-md-6

              div.row-middle-height

               input#chk_remember.k-checkbox(type='checkbox' ng-model='IsRemember' ng-true-value='true' ng-false-value='false')

               label.k-checkbox-label(for='chk_remember') Remember me

            .col-md-6

              .right-align-text.row-middle-height

                button.k-button.k-primary(type='submit') Login

          .row.row-margin

            .center-align-text

              span(ng-show='IsLoading')

               img(src='/stylesheets/images/loading_2x.gif')

               span(style='color:#337ab7;font-weight:bold')  login,please wait......

 

script(type='text/javascript' src='/javascripts/local/login.js')

大家看到了,使用AngularJS做前端数据绑定,有些人说这是MVC模式,我看是MVVM模式还差不多,做过Silverlight和WPF的同学肯定会认为这是MVVM模式。OK,在这里我们使用Html5的验证,效果

wKiom1df10aDt--qAABLLwYcwM4547.png-wh_50

提交的时候自己去做验证,OK,我们看一下Js。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

var appModule = angular.module('loginModule', []);

 

appModule.config(function ($locationProvider) {

    $locationProvider.html5Mode(true);

});

 

appModule.controller('loginController'function ($scope, $http, $location) {

    var config;

    $scope.IsLoading = false;

    $scope.Login = {

        UserName: '',

        Password: ''

    };

     

    $scope.setRemeberUserInfo = function () {

        if (localStorage.UserInfo != null) {

            var userObj = angular.fromJson(localStorage.UserInfo);

            $scope.Login.UserName = userObj.UserName;

            $scope.Login.Password = userObj.Password;

        }

    }

     

    var sessionConfig = sessionStorage.getItem("config");

    if (sessionConfig != null) {

        config = angular.fromJson(sessionConfig);

    }

    else {

        $http.get('/config').success(function (data) {

            config = data;

            sessionStorage.setItem("config", JSON.stringify(data));

        });

    }

     

    $scope.setRemeberUserInfo();

     

    $scope.loginIn = function () {

        var postData = JSON.stringify($scope.Login);

        $scope.IsLoading = true;

         

        if (sessionStorage.getItem("LoginUser") != null) {

            $http({

                method: "post",

                url: "/user",

                headers: { 'Content-Type''application/json' },

                data: JSON.parse(sessionStorage.getItem("LoginUser"))

            }).success(function (data) {

                window.location.href = '/main'

            });

        }

        else {   

            $http.post(config.loginUrl, postData).success(function (data, status, headers) {

                sessionStorage.setItem("LoginUser", JSON.stringify(data.UserInfo));

                if ($scope.IsRemember) {

                    localStorage.UserInfo = postData;

                }

                 

                $scope.IsLoading = false;

                $http({

                    method: "post",

                    url: "/user",

                    headers: { 'Content-Type''application/json' },

                    data: data.UserInfo

                }).success(function (data) {

                    window.location.href = '/main'

                });

            }).error(function (data) {

                $scope.IsLoading = false;

                 

                if (data.error) {

                    alert('Login failed,please check your account.')

                }

            });

        }

    }

});

在这里,用户名和密码是Login对象的两个属性,所以我们页面直接绑定Login.UserName和Login.Password即可。在登陆的时候判断如果用户在本地存在,则直接跳过登录,将用户信息存入数据库,否则调用登录api进行登录,登陆成功,如果需要记住密码,则将用户信息存到本地localStorage。

下一次当打开该页面时,系统会拿localStorage中的用户信息直接赋值到文本框( $scope.setRemeberUserInfo();)

sessionStorage中我们存储用户信息

1

sessionStorage.setItem("LoginUser", JSON.stringify(data.UserInfo));

localStorage中我们存储登录信息

1

localStorage.UserInfo = postData;

我们拿浏览器看一下存储的两个Storage,谷歌浏览器按F12,选择Resources菜单

wKioL1dg5rai0nAyAAAqkRvszww816.png

LocalStorage中的内容如下

wKioL1dg5xiwkebwAAB4V_sjP3k547.png

看到了吧,就存在这里,对于敏感的数据我们还是不要存在这里,或者我们可以加密存储。

 

OK,登录就说这么多,登录其实和NodeJs服务端没有什么联系。我们看一下登陆后的界面。

wKioL1df287ArEFZAANhIzRqo9M287.png

OK,今天就到这里,更多精彩内容,请看下期

原文转自:乐搏学院http://www.learnbo.com/front/article/cmsIndex

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页