使用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 条件

})

 storage.some(function ( v ) {

     return v.name === name;

 //strorage中name的值和输入的值相等,返回true 返之返回false

 });

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

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style>

         .red {

             color: red;

         }

     </style>

 </head>

 <body ng-app="ZhuCeApp">

     <!-- ZhuCeCtrl -->

     <!-- View -->

     <div ng-controller="ZhuCeController">

         用 户 名: <input type="text" ng-model="name"><br />

         密&nbsp;&nbsp;码: <input type="text" ng-model="pwd"><br />

         确认密码: <input type="text" ng-model="pwd2"><br />

         <input type="button" value="注册" ng-click="ZhuCe()">

         <span class="red">{{message}}</span>

     </div>

 </body>

 <script src="./angular.js"></script>

 <script>

     // Model

     function PersonInfo ( name, pwd ) {

         this.name = name;

         this.pwd = pwd;

     } 

     PersonInfo.prototype.saveToLocalStorage = function () {

         // 将 this 写入 本地存储

         // 先将以前的数据取出来, 然后在合并到数据中, 再写一会去

         var storage = window.localStorage.getItem( 'PersonInfo' ); // 第一次 没有数据  undefiend

                                                                    // 第二次 "[ { "name": "andim", 'pwd': '123' } ]"

         storage = storage ? JSON.parse( storage ) : [];  // 第一次 storage 是 []

                                                          // 第二次 storage 是 [ { "name": "andim", 'pwd': '123' } ]

         storage.push( this );  // 第一次 [ { "name": "andim", 'pwd': '123' } ]

                                // 第二次  [ { "name": "andim", 'pwd': '123' }, { "name": "zhangsan", "pwd": "123456" } ]

         window.localStorage.setItem( 'PersonInfo', JSON.stringify( storage ) );

     }

      //检测是否有重名

     PersonInfo.selectByName = function ( name ) {

         var storage = window.localStorage.getItem( 'PersonInfo' );

         storage = storage ? JSON.parse( storage ) : [];

         return storage.some(function ( v ) {

             return v.name === name;

         });

     } 

     // Controller

     angular.module( 'ZhuCeApp', [] )

         .controller( 'ZhuCeController', function ( $scope ) {

             // 处理逻辑

             $scope.ZhuCe = function () {

                 $scope.message = '';

                 // 1 需要验证用户的输入

                 var name = $scope.name,

                     pwd = $scope.pwd,

                     pwd2 = $scope.pwd2;

                 if ( name === undefined || name.trim().length === 0 ||

                      pwd === undefined || pwd.trim().length === 0 ||

                      pwd2 === undefined || pwd2.trim().length === 0 ) {

                     $scope.message = '请输入完整信息';

                     return;

                 }

                 // 2 如果输入了内容验证密码输入是否一致

                 if ( pwd !== pwd2 ) {

                     $scope.message = '两次密码输入不一致';

                     return;

                 }

                 // 判断 名字是否已被使用

                 if ( PersonInfo.selectByName( name ) ) {

                     $scope.message = '该用户已存在....';

                     return;

                 }

                 // 3 写入数据库( localStorage )

                 var data = new PersonInfo( name, pwd );

                 // 写到 本地存储中

                 data.saveToLocalStorage();

                 $scope.name = $scope.pwd = $scope.pwd2 = '';

             }

         });

 </script>

 </html>

很简陋的方法...勿见笑>>>>

Angular之简单的登录注册的更多相关文章

  1. Python 实现简单的登录注册界面

    Python 实现简单的登录注册界面 注意:编写代码之前需要导入很重要的包 import tkinter as tk import pickle from tkinter import message ...

  2. 7. Swift 基于Xmpp和openfire实现一个简单的登录注册

    1. 基本步骤:首先导入Xmpp框架,配置环境 ->由于我们使用的是OC的Xmpp框架,再进行Swift开发时需要进行桥接. 具体方法就是创建一个基于c的.h的头文件,然后将我们需要编译OC的语 ...

  3. node.js实现简单的登录注册页面

    首先需要新建四个文件 一个服务器js 一个保存数据的txt 一个登陆.一个注册页面html 1.注册页面 <!DOCTYPE html> <html lang="en&qu ...

  4. spring boot1.1 idea + springboot + mybatis（mybatis-generator） +mysql +html实现简单的登录注册

    前言 这两年springboot比较火,而我平时的工作中不怎么使用spring boot,所以工作之余就自己写写项目练练手,也跟大家一起学习. 打算从最开始的搭架子,登录注册,到后台管理的增删改查,业 ...

  5. go语言实现一个简单的登录注册web小程序

    最近学习golang也有一段时间了,基础差不多学了个大概,因为本人是java程序员,所以对web更感兴趣.根据<go web编程>中的例子改编一个更简单的例子,供新手参考,废话不多说,上菜 ...

  6. Python简单的登录注册代码

    #-*- coding: utf-8 -*- import hashlib # 定义数据库(声明字典) #注册登录的简单hash处理 db={} def get_md5(password): md5= ...

  7. PHP 链接数据库1(连接数据库&简单的登录注册)

    对 解析变量的理解 数据库的名称和表的名称不能重复 从结果中取出的数据   都是以数组的形式取出的 1.PHP查询数据库中的某条信息 //PHP链接数据库 /*1.造链接对象 IP地址 用户名 密码 ...

  8. java web 简单的登录注册

    --sql文件 create database studentgouse studentgocreate table stuinfo(--stuid int primary key identity( ...

  9. 基于SSM框架实现简单的登录注册

    一.环境配置 工程目录 在pom.xml添加依赖 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=& ...

随机推荐

  1. CentOS 6.5 & 7 的网络YUM源配置

    中国科技大学CentOS 6.5的网络源 [base]name=CentOS-$releasever - Base#mirrorlist=http://mirrorlist.centos.org/?r ...

  2. 实现Nginx中使用PHP-FPM时记录PHP错误日志的配置方法

    最近在本地搭建的LNMP的开发环境.为了开发的时候不影响前端的正常开发就屏蔽的PHP里面php.ini中的一些错误提示.但是这样一来,就影响到了后端开发的一些问题比如不能及时调试开发中的一些问题 ng ...

  3. Docker学习笔记(2)-docker镜像操作

    本节将会涉及Docker的镜像操作. 1. 获取镜像 如何获取Docker Hub上的镜像?可通过docker pull命令获取,其格式为: docker pull [选项] [Docker Regi ...

  4. Andrew Ng 的 Machine Learning 课程学习 (week2) Linear Regression

    这学期一直在跟进 Coursera上的 Machina Learning 公开课, 老师Andrew Ng是coursera的创始人之一,Machine Learning方面的大牛.这门课程对想要了解 ...

  5. HDU 5419——Victor and Toys——————【线段树|差分前缀和】

    Victor and Toys Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 262144/131072 K (Java/Others ...

  6. ViewData、ViewBag和TempData比较

    一.ViewData.ViewBag和TempData的定义 public dynamic ViewBag { get; } public ViewDataDictionary ViewData { ...

  7. Props 和 IActorRef 3

    在Actor模式中我们使用IActorRef通过ActorSystem来发送消息数据.这么做有两个理由 1.ActorSystem会在消息中封装一些元数据(metadata),这些数据我们可以通过上下 ...

  8. Spring cloud微服务 Hystrix熔断器学习教程

    以下demo代码:https://github.com/wades2/HystrixtDemo 官网定义:Hystrix是一个延迟容错库.在分布式环境中,许多服务依赖项中的一些不可避免地会失败.Hys ...

  9. SqlServer存储过程中常用函数及操作

    1.case语句 用于选择语句 SELECT ProductNumber, Category = CASE ProductLine WHEN 'R' THEN 'Road' WHEN 'M' THEN ...

  10. 了解Web及网络基础（一）

    在理解HTTP之前,先大概知道TCP/IP是什么. 当不同的硬件.操作系统或者不同的设备想要进行通信,那么双方就要遵循同一个协议才可以进行通信,而这个协议的通称就是TCP/IP,也就是说TCP/IP之 ...