Angular之简单的登录注册

使用Angular实现了一个简单的登录注册的功能........

涉及到的Angular知识点很少主要是这个功能的实现...(*^__^*) 嘻嘻……

里面涉及到的知识点记录:

1.本地存储的操作 localStorage

获取本地存储的值 window.localStorage.getItem(key)-->value (得到的数据是字符串"[ { "name": "andim", 'pwd': '123' } ]" )

设置本地存储的值 window.localStorage.setItem(key,value)

操作:

将取出来的数据(字符串)转化为数组-->然后插入(push)新的值-->再转化为字符串-->再存到本地存储中

方法 :JSON.parse( storage )-->storage.push( this )-->JSON.stringify( storage )-->window.localStorage.setItem(...)

JSON.parse( ) 将 json 格式的字符串, 转换成对象
JSON.stringifly( ) 将一个对象转换成一个 JSON 格式的字符串
JSON 格式已经是网络传输中使用的核心数据格式:
1. 对象的形式: '{ "key": value, "key": value, ... }'
2. 数组形式: '[ jsonObj, jsonObj, ... ]'

2.数组中的some()方法

遍历数组,遇到符合条件的就停止遍历,有符合就返回true,反之返回flase

数组.some(function(数组v){

return 条件

})

1 storage.some(function ( v ) {
2 
3     return v.name === name;
4 
5 //strorage中name的值和输入的值相等,返回true 返之返回false
6 
7 });

附上源代码.......

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Document</title>
  6     <style>
  7         .red {
  8             color: red;
  9         }
 10     </style>
 11 </head>
 12 <body ng-app="ZhuCeApp">
 13     <!-- ZhuCeCtrl -->
 14     <!-- View -->
 15     <div ng-controller="ZhuCeController">
 16         用 户 名: <input type="text" ng-model="name"><br />
 17         密&nbsp;&nbsp;码: <input type="text" ng-model="pwd"><br />
 18         确认密码: <input type="text" ng-model="pwd2"><br />
 19         <input type="button" value="注册" ng-click="ZhuCe()">
 20         <span class="red">{{message}}</span>
 21     </div>
 22 
 23 </body>
 24 <script src="./angular.js"></script>
 25 <script>
 26     // Model
 27     function PersonInfo ( name, pwd ) {
 28         this.name = name;
 29         this.pwd = pwd;
 30     } 
 31 
 32     PersonInfo.prototype.saveToLocalStorage = function () {
 33         // 将 this 写入 本地存储
 34         // 先将以前的数据取出来, 然后在合并到数据中, 再写一会去
 35         var storage = window.localStorage.getItem( 'PersonInfo' ); // 第一次 没有数据  undefiend
 36                                                                    // 第二次 "[ { "name": "andim", 'pwd': '123' } ]"
 37 
 38         storage = storage ? JSON.parse( storage ) : [];  // 第一次 storage 是 []
 39                                                          // 第二次 storage 是 [ { "name": "andim", 'pwd': '123' } ]
 40 
 41         storage.push( this );  // 第一次 [ { "name": "andim", 'pwd': '123' } ]
 42                                // 第二次  [ { "name": "andim", 'pwd': '123' }, { "name": "zhangsan", "pwd": "123456" } ]
 43 
 44         window.localStorage.setItem( 'PersonInfo', JSON.stringify( storage ) );
 45     }
 46 
 47      //检测是否有重名
 48     PersonInfo.selectByName = function ( name ) {
 49         var storage = window.localStorage.getItem( 'PersonInfo' );
 50         storage = storage ? JSON.parse( storage ) : [];
 51 
 52         return storage.some(function ( v ) {
 53             return v.name === name;
 54         });
 55     } 
 56 
 57     // Controller
 58     angular.module( 'ZhuCeApp', [] )
 59         .controller( 'ZhuCeController', function ( $scope ) {
 60             
 61             // 处理逻辑
 62             $scope.ZhuCe = function () {
 63                 $scope.message = '';
 64                     
 65                 // 1 需要验证用户的输入
 66                 var name = $scope.name, 
 67                     pwd = $scope.pwd, 
 68                     pwd2 = $scope.pwd2;
 69                     
 70                 if ( name === undefined || name.trim().length === 0 ||
 71                      pwd === undefined || pwd.trim().length === 0 ||
 72                      pwd2 === undefined || pwd2.trim().length === 0 ) {
 73                     $scope.message = '请输入完整信息';
 74                     return;
 75                 }
 76 
 77                 
 78                 // 2 如果输入了内容验证密码输入是否一致
 79                 if ( pwd !== pwd2 ) {
 80                     $scope.message = '两次密码输入不一致';
 81                     return;
 82                 }
 83                 
 84                 // 判断 名字是否已被使用
 85                 if ( PersonInfo.selectByName( name ) ) {
 86                     $scope.message = '该用户已存在....';
 87                     return;
 88                 }
 89                 
 90                 
 91                 // 3 写入数据库( localStorage )
 92                 var data = new PersonInfo( name, pwd );
 93 
 94                 // 写到 本地存储中
 95                 data.saveToLocalStorage();
 96                 $scope.name = $scope.pwd = $scope.pwd2 = '';
 97             }
 98         });
 99 </script>
100 </html>