Ionic—登录组件开发

最新推荐文章于 2021-07-19 16:12:57 发布
最新推荐文章于 2021-07-19 16:12:57 发布
阅读量228 收藏
点赞数 1
分类专栏： Ionic 文章标签： Ionic Angular
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34829447/article/details/84777291
版权

一.开发用户未登录的页面

  • app.component.*文件主要用于定义app全局的所有组件
1.需求一：设置组件主题样式

  • 组件自身的样式定义在自己的scss文件中，希望全局生效的内容定义到全局的theme.scss文件中

  • 在theme文件下创建light.scss文件，用于设定白天模式的样式

    • 实例代码[important表示强制覆盖]

      ion-content {
    background-color:#e5e6e8!important;
}

    • 需要在variables.scss文件中使用@import 'light'导入自定义的样式

  • 在theme文件下创建dark.scss文件，用于设定夜间模式的样式

2.需求二：调整“更多”页面

  • 设计流程

    • 修改项目title
    • 使用ion-card添加more页面内部内容
    • 使用ion-button添加对应的按钮
    • 查看CSS Utilities对应设定好的CSS样式并使用

  • 实例代码

    • more.page.html
    <ion-header>
  <ion-navbar>
    <ion-title>More</ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
  <ion-card>
    <ion-card-header text-center>
      Log in 'Free Skin' and experience more features...
    </ion-card-header>
    <ion-card-content text-center>
      <button ion-button outline> Sign in / Sign up </button>
    </ion-card-content>
  </ion-card>
</ion-content>
    • more.page.scss
    page-more {
    ion-card {
        margin: 0!important;
        width: 100%!important;
    }
}

  • 注意全局样式对组件的影响，即组件上自带的样式，可以通过手动删除或样式覆盖进行自定义设置

3.需求三：开发Rest模块，处理网络请求

  • 提示：VSCode生成注释的插件 Document this

  • 生成一个rest的service用于处理网络请求：ionic g service rest

  • 添加内容【需要在module中注册HttpModule】

    import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';

/*
  Generated class for the RestProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class RestProvider {

  constructor(public http: HttpClient) {
    //console.log('Hello RestProvider Provider');
  }

  //发送get请求
  private getRequest(url:string):Observable<any>{
    return this.http.get(url);
  }

}

二.开发用户登录页面

1.需求一：开发用户登录首页

  • 为登录注册按钮添加监听事件

  • 导入并使用ModalController

  • 对按钮设置监听create并present modal

  • 实例代码

    • more.html
    <ion-header>
  <ion-navbar>
    <ion-title>More</ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
  <ion-card>
    <ion-card-header text-center>
      Log in 'Free Skin' and experience more features...
    </ion-card-header>
    <ion-card-content text-center>
      <button ion-button outline (click)="presentLoginModal()"> Sign in / Sign up </button>
    </ion-card-content>
  </ion-card>
</ion-content>
    • more.ts
    import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ModalController } from 'ionic-angular';
import { LoginComponent } from '../../components/login/login';

@Component({
  selector: 'page-more',
  templateUrl: 'more.html',
})
export class MorePage {
  constructor(public navCtrl: NavController, public navParams: NavParams,public modalCtrl: ModalController) {
  }
  presentLoginModal() {
    const modal = this.modalCtrl.create(LoginComponent);
    modal.present();
  }
}

    • login.html

      • showWhen属性：什么设备显示就添加什么设备的字段

        <span ion-text color="primary" showWhen="ios">取消</span>
<ion-icon name="md-close" showWhen="android"></ion-icon>

      • 实例代码

        <ion-header>
  <ion-navbar>
    <ion-title>
        Login
    </ion-title>
    <ion-buttons>
      <button ion-button>
          <span ion-text color="primary" showWhen="ios">Cancel</span>
          <ion-icon name="md-close" showWhen="android"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <ion-list>
    <ion-item>
      <ion-label stacked>Username</ion-label>
      <ion-input type="text"></ion-input>
    </ion-item>
    <ion-item>
        <ion-label stacked>Password</ion-label>
        <ion-input type="password"></ion-input>
      </ion-item>
  </ion-list>
  <div padding>
    <button ion-button color="primary" block>Login</button>
  </div>
  <div text-center>
    <button ion-button color="primary" outline>Sign up</button>
  </div>
</ion-content>
2.需求二：对按钮添加取消的监听事件

  • 给按钮的button添加取消的监听事件dismiss()[使用ViewController]

  • 给username和password进行双向绑定，并给登录添加监听事件login()

  • 声明baseUI.ts文件用于声明基础组件，方便代码的复用

  • 实例代码

    • baseUI.ts

      import { Loading, LoadingController } from "ionic-angular";

export abstract class BaseUI {
    constructor(){}

    showLoading(loadingCtrl:LoadingController,message:string):Loading{
        let loader = loadingCtrl.create({
            content:message,
            dismissOnPageChange:true
        })
        loader.present();
        return loader;
    }
}

    • login.html

      <ion-header>
  <ion-navbar>
    <ion-title>
        Login
    </ion-title>
    <ion-buttons>
      <button ion-button (click)="dismiss()">
          <span ion-text color="primary" showWhen="ios">Cancel</span>
          <ion-icon name="md-close" showWhen="android"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <ion-list>
    <ion-item>
      <ion-label stacked>Username</ion-label>
      <ion-input type="text" [(ngModel)]="username"></ion-input>
    </ion-item>
    <ion-item>
        <ion-label stacked>Password</ion-label>
        <ion-input type="password" [(ngModel)]="password"></ion-input>
      </ion-item>
  </ion-list>
  <div padding>
    <button ion-button color="primary" block (click)="login()">Login</button>
  </div>
  <div text-center>
    <button ion-button color="primary" outline>Sign up</button>
  </div>
</ion-content>

    • login.ts

      import { Component } from '@angular/core';
import { NavController, NavParams, ViewController, LoadingController } from 'ionic-angular';
import { BaseUI } from '../../common/baseUI';

/**
 * Generated class for the LoginPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage extends BaseUI {

  username:string = '';
  password:string = '';

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    public viewController:ViewController,
    public loadingController:LoadingController) {
      super();
  }

  dismiss() {
    this.viewController.dismiss();
  }

  login() {
    var loading = super.showLoading(this.loadingController,"Loading...");
    //调用API
  }

}
3.需求三：模拟发送请求实现Toast

  • 给Baseui.ts添加显示toast功能

  • 通过setTimeout模拟延时登录

  • 实例代码

    • Baseui.ts

      import { Loading, LoadingController, ToastController } from "ionic-angular";

export abstract class BaseUI {
    constructor(){}

    showLoading(loadingCtrl:LoadingController,message:string):Loading{
        let loader = loadingCtrl.create({
            content:message,
            dismissOnPageChange:true
        })
        loader.present();
        return loader;
    }

    showToast(toastCtrl:ToastController,message:string){
        let toast = toastCtrl.create({
            message:message,
            duration:3000
        });
        toast.present();
        return toast;
    }
}

    • login.html

      <ion-header>
  <ion-navbar>
    <ion-title>
        Login
    </ion-title>
    <ion-buttons>
      <button ion-button (click)="dismiss()">
          <span ion-text color="primary" showWhen="ios">Cancel</span>
          <ion-icon name="md-close" showWhen="android"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <ion-list>
    <ion-item>
      <ion-label stacked>Username</ion-label>
      <ion-input type="text" [(ngModel)]="username"></ion-input>
    </ion-item>
    <ion-item>
        <ion-label stacked>Password</ion-label>
        <ion-input type="password" [(ngModel)]="password"></ion-input>
      </ion-item>
  </ion-list>
  <div padding>
    <button ion-button color="primary" block (click)="login()">Login</button>
  </div>
  <div text-center>
    <button ion-button color="primary" outline>Sign up</button>
  </div>
</ion-content>

    • login.ts

      import { Component } from '@angular/core';
import { NavController, NavParams, ViewController, LoadingController, ToastController } from 'ionic-angular';
import { BaseUI } from '../../common/baseUI';

@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage extends BaseUI {

  username:string = '';
  password:string = '';

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    public viewController:ViewController,
    public loadingController:LoadingController,
    public toastController:ToastController) {
      super();
  }

  dismiss() {
    this.viewController.dismiss();
  }

  login() {
    let loading = super.showLoading(this.loadingController,"Loading...");
    //调用API
    setTimeout(()=>{
      loading.dismiss();
      if(Math.random()*100>50){
        //视作登录成功
        
      }else{
        //视作登录失败
        let toast = super.showToast(this.toastController,"Your username or password is wrong!");
      }
    },2000);
  }
}
4.需求四：开发登录成功后的页面

  • 使用storage实现页面信息存储

    • 安装storage：npm install --save @ionic/storage
    • 需要storage的地方引入：import { Storage } from '@ionic/storage';
    • storage设置值：storage.set('键','值')
    • storage获取值：storage.get('键').then((val)=>{处理逻辑})
    • 在app.modules.ts中引入IonicStorageModule：import {IonicStorageModule} from '@ionic/storage';且IonicStorageModule.forRoot()

  • 实例代码

    • more.ts

      import { Component } from '@angular/core';
import { NavController, NavParams, ModalController } from 'ionic-angular';
import { LoginPage } from '../login/login';
import { Storage } from '@ionic/storage';

@Component({
  selector: 'page-more',
  templateUrl: 'more.html',
})
export class MorePage {

  //判断是否登录
  isLogined:boolean = false;

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    public modalCtrl: ModalController,
    public storage: Storage) {
  }

  presentLoginModal() {
    const modal = this.modalCtrl.create(LoginPage);
    modal.present();
  }

  //ionic生命周期方法：当页面进入完成后调用
  ionViewDidEnter() {
    this.loadUserPage();
  }

  //加载用户信息
  loadUserPage() {
    this.storage.get('token').then((val)=>{
      if(val!=null){
        this.isLogined = true;
      }else{
        this.isLogined = false;
      }
    })
  }
}

    • more.html

      <ion-header>
  <ion-navbar>
    <ion-title>More</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <div *ngIf="!isLogined">
    <ion-card>
      <ion-card-header text-center>
        Log in 'Free Skin' and experience more features...
      </ion-card-header>
      <ion-card-content text-center>
        <button ion-button outline (click)="presentLoginModal()"> Sign in / Sign up </button>
      </ion-card-content>
    </ion-card>
  </div>
  <div *ngIf="isLogined">
    <ion-card>
      <ion-card-header text-center>
        Log in success.
      </ion-card-header>
    </ion-card>
  </div>
</ion-content>

    • login.ts

      import { Component } from '@angular/core';
import { NavController, NavParams, ViewController, LoadingController, ToastController } from 'ionic-angular';
import { BaseUI } from '../../common/baseUI';
import { Storage } from '@ionic/storage';

@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage extends BaseUI {

  username:string = '';
  password:string = '';

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    public viewController:ViewController,
    public loadingController:LoadingController,
    public toastController:ToastController,
    public storage:Storage) {
      super();
  }

  dismiss() {
    this.viewController.dismiss();
  }

  login() {
    let loading = super.showLoading(this.loadingController,"Loading...");
    //调用API
    setTimeout(()=>{
      //关闭loading
      loading.dismiss();
      if(Math.random()*100>50){
        //视作登录成功
        //存储token
        this.storage.set('token','abcdefg');
        //关闭当前modal
        this.dismiss();
      }else{
        //视作登录失败
        let toast = super.showToast(this.toastController,"Your username or password is wrong!");
      }
    },2000);
  }
}
汪喆_Jack
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ionic5学习-------制作一个简单的登录界面
qq_44323069的博客
10-13 772
ionic5学习------制作一个简单的登陆界面 一. 基本 1.创建底部菜单形式： ionic start 项目名 tabs 2.创建空项目： ionic start 项目名 blank 3.创建列表形式： ionic start 项目名 sidemenu 二. 创建一个home页面 1.创建一个新的page： ng generate page 文件名 2.在app.components添加头依赖： Import {Router} from '@angular/router' 在下方constucto
ionic3组件通信多重应用
11-10
总之，掌握Ionic 3中的组件通信技术对于开发高效、可复用的移动应用至关重要。通过结合使用属性绑定、事件绑定、服务和注入器，我们可以创建出灵活且高度互动的应用，满足各种复杂的业务需求。在实践过程中，不断...
ionic入门之多组件开发模式
InforStack
05-06 543
在实战中建议是用多组件开发模式，高耦合低内聚。 文件名和组件名遵循风格指南中的标准方式。 组件的类名应该是大驼峰形式，并且以Component结尾。 因此英雄详情组件的类名是HeroDetailComponent。 组件的文件名应该是小写中线形式，每个单词之间用中线分隔，并且以.component.ts结尾。 因此HeroDetailComponent类应该放在hero-detail.c
ionic登录
qq_30848071的博客
07-19 418
在index.html文件里的内容是 [html] view plain copy >  html>    head>      meta charset="utf-8">      meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">     
自定义控件之－一个简单的用户登录控件
高山流水
03-14 2450
控件的代码如下：using System;using System.Collections.Generic;using System.Text;using System.ComponentModel;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;namespace MyLabel...{    /*
前端（Vue）-用户登录组件
YoungProMaker的博客
09-13 925
页面 先做两个输入框和一个按钮 username: <input type="text"><br> password: <input type="text"><br> <input type="button" value="登录"> 对应的js内容 需要为当前组件取个名，name：‘Login’ 这里的内容基本都是面向数据编程的思想，想要将html获取js里的操作离不开data，但是在此处，data是一个方法 name: '
ionic基础组件使用案例
08-12
作为JavaScript开发的一个分支，理解并熟练运用Ionic的基础组件对于开发者来说至关重要。 1. **App容器组件**： - `ion-app` 是每个Ionic应用的核心组件，它是所有其他组件的父容器。它定义了应用的可视区域和交互...
配置ionic开发环境.docx
04-08
"Ionic 开发环境配置指南" Ionic 是一个基于 ...配置 Ionic 开发环境需要安装 Node.js、JDK、Ionic、Android SDK 等组件，并配置相关环境变量和 Path 变量。只有配置了合适的开发环境，才能快速开始 Ionic 开发。
ionic-login-component：Premium Ionic登录组件的免费样本
02-05
本资源“ionic-login-component”提供了一个高级的登录组件免费样本，专为使用Ionic框架构建应用程序的开发者设计。这个组件集成了多种功能，包括用户验证、响应式布局、过滤器以及错误处理等，旨在提升用户体验并...
ionic实现带字的toggle滑动组件
09-01
在本文中，我们将深入探讨如何使用Ionic框架来...这个过程不仅锻炼了我们的前端开发能力，还展示了如何在Ionic框架中进行自定义组件设计。最后，记得在实际应用中测试组件在不同设备上的表现，确保其兼容性和用户体验。
ionic3+angular4制作的登录注销页
10-14
本案例是结合ionic3与angular4来开发的移动端登录注销页的实现，其中包含了对应功能效果的实现以及对tabs栏的显示与否一些处理介绍。
ionic4和ionic5创建login跳转到tabs
07-22
在网上找了很长时间，但找到的ionic登陆页login跳转到tabs的方法在ionic4上基本都无效，后来终于找到了解决这个问题的办法，简单易行，前两天发表了一篇ionic4和ionic5创建login登陆页跳转到tabs方法的博客，现在写了一个小DEMO，希望能帮助到需要的朋友，解决大家在这个问题上遇到的烦恼。
ionic1开发app 之微信登录之详细
weixin_34472623的博客
06-26 1417
有问题加qq咨询124617166
进入组件前用户登录验证
qq_42894622的博客
05-14 248
路由钩子函数 //main.js router.beforeEach((to, from, next) => { if (to.meta.Auth) {//需要登录 if (store.state.islogin) { next(); } else { router.push({ name: 'login' }) } } else {/...
视频聊天系统开发，利用Ionic框架实现注册与登录功能
m0_58374018的博客
07-19 281
由于视频聊天系统开发是前后端分离式的，所以移动端使用ionic框架，ionic框架实现注册与登录其实就是调用后端API接口对数据进行处理。视频聊天系统开发移动端主要负责界面的设计和接口的调用。 一、代码部分 1、创建模型类 根据数据库的字段进行建模，在model文件夹下创建一个Typescript文件，命名为Users。代码如下： export class Users{ usersid:string; pass:string; roleid:string; username:
ionic学习（七）：问答社区03：登录功能实现 总结篇
七刀的专栏
06-30 390
登录功能整整搞了一天，期间各种错误不断，刚接触ionic，对Angular也不太熟悉，没正规的学过html,css，js等前端知识。整理一下流程：1.制作登录页面2.构造登录等待遮罩层和登录错误遮罩层3.通过storge保存登录的信息4.通过判断是否登录，并显示相应页面备注：1.视频给的接口地址不能访问，所以按照他写了半天，发现不能用，坑死人，只能写死帐号密码2.不懂接口什么的，json等什么鬼，...
带着实例继续学习(1):组件式登录页面-点击事件、组件通讯
10-18 1481
本节课要点我们利用之前学到的知识点做一个用户登录框，其中 1.为了界面不至于太恶心，我们引入bootstrap样式 2.我们故意把登录界面要素比如用户名、密码和提交按钮分成3个组件（仅仅是为了学习，增加难度）一、引入bootstrap 新建目录css和fonts，放入对应的文件。安装相应的webpack插件为了正确的加载bootstrap中的样式和字体，我们需要安装 npm install
ionic3（二）登录页制作
chelen_jak的专栏
08-01 555
原文出处：https://blog.csdn.net/pandade520/article/details/76422826 另外两篇更好的文章： 1. LocalStorage的使用—以登录和注销为例 (偏理论，必读） 2. LocalStorage的使用—以登录和注销为例（重实践） 做一个登录页面:    1.修改 Tabs，让目录结构清晰 打开 Tabs.html，修改为如下代码： ...
学习ionic(一）涉及登录界面的小结
sweety815的博客
05-04 577
这两天学习了ionic的有关css布局，涉及到了登录框的写法，总结如下： 1.大致分为三个部分： 基本布局：标题/header，内容/content和页脚/footer .bar位置和颜色详解 2.有关tabs的应用 tabs样式声明选项卡，用tab-item声明成员 1. 同级样式 - 同级样式与.tabs应用在同一元素上，声明选项卡的位置、配色等。 2. 下级样式 - 下
ionic react
最新发布
08-30
总的来说，Ionic React是一个基于React的框架，允许我们使用React来构建移动应用程序，并且提供了一些可重用的UI组件来加速开发过程。<span class="em">1</span><span class="em">2</span><span class="em">3 #### ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值