网站首页
手机版

创建provider、http请求、图文列表、滑动列表

更新时间:2024-06-11 05:59作者:小乐

1. 创建提供者

1.ionic g provider storage在src/providers中创建一个名为storage的服务;它将自动添加到app.module.ts 中。

2、我们先丰富一下这个服务。

//存储.ts

从'@angular/core' 导入{ Injectable } ;

@Injectable()

导出类StorageProvider {

构造函数(){

console.log('你好,StorageProvider 提供者');

}

公共setItem(键,值){

localStorage.setItem(key,JSON.stringify(value))

}

公共getItem(键){

返回JSON.parse(localStorage.getItem(key))

}

公共删除项目(键){

localStorage.removeItem(key)

}

}

123456789101112131415161718193,接下来我们开始使用

//home.html

{{消息}}

前往登录页面

登出

//html.ts

从'@angular/core' 导入{ Component } ;

从'ionic-angle' 导入{ NavController };

import { LoginPage } from \'./login/login\';//介绍页面

import { StorageProvider } from \'././providers/storage/storage\';//引入服务

@成分({

selecter: '页面主页',

templateUrl: 'home.html'

})

导出类主页{

msg:string;//提示信息

isLogin:boolean=false;//是否登录

构造函数(

公共navCtrl: 导航控制器,

公共存储:StorageProvider,

){

this.init();

}

在里面(){

//判断是否登录

this.isLogin=this.storage.getItem('isLogin');

让account=this.storage.getItem('account');

如果(帐户){

this.msg=`欢迎,${account}`;

}别的{

this.msg=`尚未登录,兄弟。 `;

}

}

登录页面(){

this.navCtrl.push(LoginPage);//路由向前跳转

}

登出(){

//删除localStorage中的登录信息

this.storage.removeItem('isLogin');

this.storage.removeItem('帐户');

this.init();

}

}

//登录.ts

从'@angular/core' 导入{ Component } ;

从'ionic-Angular' 导入{ IonicPage, NavController, NavParams };

从\'./tabs/tabs\' 导入{ TabsPage };

从\'././providers/storage/storage\' 导入{ StorageProvider }

//定义接口格式

界面用户{

account: 字符串;

密码:字符串;

}

@IonicPage()

@成分({

selector: '页面登录',

templateUrl: '登录.html',

})

导出类登录页面{

user:用户={

account:'admin',

密码:未定义,

}

构造函数(

公共navCtrl: 导航控制器,

公共navParams: NavParams,

公共存储:StorageProvider

){

}

登录(){

//设置登录状态为已登录

this.storage.setItem('isLogin',true);

this.storage.setItem('帐户',this.user.account);

//设置一个页面作为应用的路由根页面。从现在起,您将无法再返回该页面。

//左上角的返回按钮没有了,连手机上返回都不起作用。

this.navCtrl.setRoot(TabsPage);

}

回去(){

this.navCtrl.pop();//路由回跳

}

}

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465 66676869707172737475767778798081828384858687888990919293结果如图:

4.点击登录,结果如下图:

5、点击退出,返回第一张图片。

2.http请求、图文列表

src/providers/api 中的ionic g 提供者api 在api.ts 中写入get 和post 请求import { Http, Headers, Response } from '@angular/http';

从'@angular/core' 导入{ Injectable } ;

@Injectable()

导出类ApiProvider {

//定义post请求所需的header

公共标头=新标头({'Content-Type':'application/json'});

构造函数(公共http: Http){

console.log('Hello ApiProvider 提供者');

}

//实例获取请求

公共getList(){

返回新的Promise((解决, 拒绝)={

this.http.get('https://jsonplaceholder.typicode.com/albums/1/photos')

.subscribe((res:Response)={

解析(res.json())

},错误={

控制台.dir(错误)

拒绝()

});

});

}

//实例post请求

公共帖子数据(数据){

返回新的Promise((解决, 拒绝)={

this.http.post('https://jsonplaceholder.typicode.com/posts',data,{headers:this.headers})

.subscribe((res:Response)={

解析(res.json())

},错误={

控制台.dir(错误)

拒绝()

});

});

}

}

1234567891011121314151617181920212223242526272829303132333435363.在home.ts中引入api服务并调用get和post请求

从'@angular/core' 导入{ Component } ;

从'ionic-angle' 导入{ NavController };

import { LoginPage } from \'./login/login\';//介绍页面

import { StorageProvider } from \'././providers/storage/storage\';//引入服务

import { ApiProvider } from \'././providers/api/api\';//引入服务

//定义图片格式接口

界面照片{

albumId: 号;

id:号码;

title:字符串;

url:字符串;

缩略图Url:字符串;

}

@成分({

selecter: '页面主页',

templateUrl: 'home.html'

})

导出类主页{

msg:string;//提示信息

isLogin:boolean=false;//是否登录

list:Array=[];

构造函数(

公共navCtrl: 导航控制器,

公共存储:StorageProvider,

公共api:ApiProvider

){

this.init();

}

在里面(){

//判断是否登录

this.isLogin=this.storage.getItem('isLogin');

让account=this.storage.getItem('account');

如果(帐户){

this.msg=`欢迎,${account}`;

this.getList();

}别的{

this.msg=`尚未登录,兄弟。 `;

}

}

获取列表(){

//获取显示列表

this.api.getList().then(数据={

控制台.dir(数据);

this.list=数据;

});

//测试post请求

让数据=JSON.stringify({

title: '富',

body: '酒吧',

用户ID: 1

});

this.api.postData(data).then(data={

控制台.dir(数据);

});

}

登录页面(){

this.navCtrl.push(LoginPage);//路由向前跳转

}

登出(){

//删除localStorage中的登录信息

this.storage.removeItem('isLogin');

this.storage.removeItem('帐户');

this.init();

}

}

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465 664、在home.html中以图文列表形式显示

{{消息}}

前往登录页面

登出

{{项目.标题}}

{{项目.url}}

检查详细信息

1234567891011121314151617181920215。结果如图:

3. 滑动列表

1.修改contact.ts和contact.html

//联系.ts

从'@angular/core' 导入{ Component } ;

从'ionic-angle' 导入{ NavController };

//定义学生格式接口

界面学生{

id: 号码;

名称:字符串;

描述:字符串;

src:字符串;

}

@成分({

selecter: '页面联系人',

templateUrl: 'contact.html'

})

导出类ContactPage {

公共类List:Array=[

{id:1,name:'aaa',describe:'aaaaaa',src:'assets/imgs/a1.jpg'},

{id:2,name:'bbb',describe:'bbbbbb',src:'assets/imgs/a2.jpg'},

{id:3,name:'ccc',describe:'cccccc',src:'assets/imgs/a3.jpg'},

{id:4,name:'ddd',describe:'dddddd',src:'assets/imgs/a4.jpg'},

{id:5,name:'eee',describe:'eeeeee',src:'assets/imgs/a5.jpg'},

];

构造函数(公共navCtrl: NavController){

}

}

//联系.html

接触

{{项目名}}

{{项目.描述}}

文本

称呼

电子邮件

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465 66672.效果如图

ps:有什么问题请指正。我花了很长时间才写。请给我点个赞=_=!

为您推荐

关于“天眼查”网站侵权事项的声明

近期,天眼查官网(https://www.tianyancha.com/)未经许可擅自转载《经济观察报》原创文章共38篇,该行为已构成严重侵权。为维护合法权益,我司已向天眼查所属公司北京金堤科技有限公司发出《关于立即停止侵权行为的函》,要求

2024-06-11 06:01

2018网络安全周腾讯安全生态舰队再起航 呼吁“联防共治”

中新网9月17日电 今日,2018国家网络安全宣传周暨网络安全博览会在成都开幕。 连续五年参展的腾讯安全再度携手知道创宇、GeekPwn极棒组成“最强安全生态舰队”,向社会各界展示涵盖助力政府机构、企业以及普通用户的全领域网络安全解决方案,

2024-06-11 06:00

2021将半,哪些IT产业事件对你影响最大?丨内含福利

来源:计算机世界日子即将进入6月下旬,端午已过、父亲节不远、毕业季正当时……又双叒叕到了该做年中盘点的时刻,距离2021年结束还有196天了,大家在年初时立下的flag已经实现多少啦?这半年,IT产业依旧热闹非凡、精彩纷呈,下面先看看小编为

2024-06-11 06:00

揪心!5人遇难,3人失联 5人遇害

近日,南方多地出现强降雨天气,部分地区强降雨引发险情,导致有人员遇难、失联。云南丘北:暴雨灾害已造成5人死亡3人失联5月26日17时至27日6时,云南丘北县出现了持续强降雨天气。据气象部门统计,在26日17时至27日14时的21小时内,丘北

2024-06-11 05:59

[安全在线]娄底市督查组到娄星区督查开园前校车安全情况,娄底市督查办的电话

红网时刻4月26日讯(通讯员 张杰 吴佩)4月22日,娄底市交通问题顽瘴痼疾整治工作督查组到娄星区督查幼儿园开园前校车安全情况。督查组一行先后到大风车馨德、菲米力等幼儿园,现场察看了校车封存情况,仔细查阅校车运行台账、校车资质、安全性能、驾

2024-06-11 05:58

JavaScript Magic Tricks: Invalid breakpoint

Under normal conditions, JavaScript code can be breakpointed in a runtime environment, for example:But do you know that

2024-06-11 05:58

加载中...