當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Angular之简单的登录注册

發(fā)布時間：2023/12/20 编程问答 17 豆豆

生活随笔收集整理的這篇文章主要介紹了 Angular之简单的登录注册小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

使用Angular實現(xiàn)了一個簡單的登錄注冊的功能........

涉及到的Angular知識點很少主要是這個功能的實現(xiàn)...(*^__^*) 嘻嘻……

里面涉及到的知識點記錄:

1.本地存儲的操作 localStorage

獲取本地存儲的值 window.localStorage.getItem(key)-->value ? (得到的數(shù)據(jù)是字符串"[ { "name": "andim", 'pwd': '123' } ]" )

設置本地存儲的值 window.localStorage.setItem(key,value) ?

操作:

將取出來的數(shù)據(jù)(字符串)轉(zhuǎn)化為數(shù)組-->然后插入(push)新的值-->再轉(zhuǎn)化為字符串-->再存到本地存儲中

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

JSON.parse( ?) ? ? ?將 json 格式的字符串, 轉(zhuǎn)換成對象
JSON.stringifly( ) ?將一個對象轉(zhuǎn)換成一個 JSON 格式的字符串
JSON 格式已經(jīng)是網(wǎng)絡傳輸中使用的核心數(shù)據(jù)格式:
1. 對象的形式: '{ "key": value, "key": value, ... }'
2. 數(shù)組形式: '[ jsonObj, jsonObj, ... ]'

2.數(shù)組中的some()方法

遍歷數(shù)組,遇到符合條件的就停止遍歷,有符合就返回true,反之返回flase

數(shù)組.some(function(數(shù)組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  14  15 <div ng-controller="ZhuCeController"> 16 用戶名: <input type="text" ng-model="name"><br /> 17 密  碼: <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 // 先將以前的數(shù)據(jù)取出來, 然后在合并到數(shù)據(jù)中, 再寫一會去 35 var storage = window.localStorage.getItem( 'PersonInfo' ); // 第一次沒有數(shù)據(jù) 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 如果輸入了內(nèi)容驗證密碼輸入是否一致 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 寫入數(shù)據(jù)庫( 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> View Code

很簡陋的方法...勿見笑>>>>

轉(zhuǎn)載于:https://www.cnblogs.com/xiaoyun1121/p/6044815.html

總結(jié)

以上是生活随笔為你收集整理的Angular之简单的登录注册的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。