zoukankan      html  css  js  c++  java
  • Ionic Cordova Sqlite 实现保存用户名登陆

    1.添加sqlite 组件

    cordova plugin add https://github.com/litehelpers/Cordova-sqlite-storage.git --save

    2.编写代码 app.js  =>run=> $ionicPlatform.ready 添加

    if(window.cordova ) {
          ltdb = $cordovaSQLite.openDB({name: "ltapp.db", location: 1});
          //创建用户表
          $cordovaSQLite.execute(ltdb, "CREATE TABLE IF NOT EXISTS users (id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT, email TEXT, phonenumber INTEGER, password TEXT)");
          
          $cordovaSQLite.execute(ltdb, 'SELECT COUNT(*) FROM users ').then(function (res) {
              if (res.rows.length < 0) {
                var query = "INSERT INTO users (name,email,phonenumber,password) VALUES ( ?, ?, ?, ?)";
                $cordovaSQLite.execute(ltdb, query, ['admin', 'sulin11026@163.com', '13683365354', '123']).then(function (result) {
                  console.log("success");
                }, function (error) {
                })
              }
            },
            function (error) {
              console.log(error);
            }
          );
        }

    controllers .js

    controller('LoginCtrl',['$scope', '$state', '$ionicPopup', 'AuthService', function($scope, $state, $ionicPopup, AuthService) {
    $scope.login = function() {
    var user= $scope.user;
    AuthService.login(user.uname, user.pwd).then(function(authenticated) {

    $state.go('tabs.home', {}, {reload: true});
    $scope.setCurrentUsername(user.username);
    }, function(err) {
    var alertPopup = $ionicPopup.alert({
    title: '登录失败',
    template: '请输入正确的账号密码!'
    });
    });
    };
    }])

    servcies.js

    .factory('AuthService',['$q', '$http','$cordovaSQLite', function($q, $http,$cordovaSQLite) {var username = '';var login = function(name, pw) {
        return $q(function(resolve, reject) {
          try {
            $cordovaSQLite.execute(ltdb, "SELECT * FROM users WHERE name = ? ",[name]).then(
              function(res) {
                if (res.rows.length > 0) {
                  if(pw.toLocaleUpperCase()==res.rows.item(0).password.toLocaleUpperCase()){
                    resolve('Login success.');
                  }
                }else{
                  reject('Login Failed.');
                }
              },
              function(error) {
                reject('Login Failed.');
              }
            );
          }
          catch(ex){
          }
        });
      };return {
        login: login
      };
    }])
    

    index.html

    <ion-view class="login" hide-nav-bar="true" style="z-index: 1" cache-view="false">
      <form ng-submit="login()"   name="theform">
        <div id="login">
          <div class="logo"><img src="img/fixed/logo.png"></div>
          <div class="fill">
            <label class="item item-input ion-ios-person-outline">
            <input type="text" placeholder="账号" ng-model="user.uname"
                   ng-focus="hide='1'" ng-blur="hide='1'" ng-required="true" >
          </label>
            <label class="item item-input ion-ios-locked-outline">
              <input type="password" placeholder="密码" ng-model="user.pwd" ng-required="true"
                     ng-focus="hide='1'" ng-blur="hide='1'" >
             </label>
            <label class="btn">
              <button class="button button-block button-light" type="submit">登录</button>
            </label>
        </div>

    以上测试正常通过,如果有问题需要耐心慢慢调试

  • 相关阅读:
    Spring 事务不回滚
    Druid详细配置信息
    Servlet和JSP规范及版本对应关系
    CDN(内容分发网络)技术原理
    开发者需要了解的WebKit
    浏览器的渲染原理简介
    在浏览器中输入Google.com并且按下回车之后发生了什么?
    为什么说DOM操作很慢
    亿级Web系统搭建——单机到分布式集群
    linux下用rinetd做端口转发
  • 原文地址:https://www.cnblogs.com/linsu/p/5688374.html
Copyright © 2011-2022 走看看