Ionic3和Angular4:使用基于令牌的RestfulAPI插入和删除
盐津网站制作公司哪家好,找创新互联公司!从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设公司等网站项目制作,到程序开发,运营维护。创新互联公司自2013年起到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选创新互联公司。
这是关于使用Ionic和Angular JS开发移动应用程序的一系列文章。这篇文章涉及更新和删除应用程序上的任何帖子。这也解释了如何通过进行Ajax调用来显示加载图像。在删除帖子时,它会显示一条警告消息,以确认是否删除。这篇文章就是这个。希望你们都能利用Ionic和Angular上的这一系列文章来构建自己的移动应用程序。
数据库设计
要构建用户订阅源系统,您必须创建两个表,例如Users和Feed。 您可以查看我之前的教程,了解如何 创建基于令牌的API系统 。
用户
用户表包含所有用户注册详细信息。
CREATE TABLE
用户
(
user_id int AUTO_INCREMENT PRIMARY KEY ,
用户名 varchar (50),
密码 varchar (300),
名称 varchar (200),
电子邮件 varchar (300));
user_id int AUTO_INCREMENT PRIMARY KEY ,
用户名 varchar (50),
密码 varchar (300),
名称 varchar (200),
电子邮件 varchar (300));
Feed
此表包含用户每日更新。
CREATE TABLE
feed
(
feed_id int PRIMARY KEY AUTO_INCREMENT ,
feed text ,
user_id_fk int ,
created int
);
feed_id int PRIMARY KEY AUTO_INCREMENT ,
feed text ,
user_id_fk int ,
created int
);
下载PHP Restul项目
$ git clone
https://github.com/srinivastamada/PHP-Slim-Restful.git
PHP Restful
在Github上下载这个项目
PHP RestFul
代码使用Slim框架的简单PHP代码,包括 用于用户插入和删除操作的 新函数 feedUpdate 和 feedDelete 。
<?PHP的
要求 '的config.php';
要求 'Slim / Slim.php';
\ Slim \ Slim :: registerAutoloader ();
$ app = new \ Slim \ Slim();
$ app-> post ('/ login',' login '); / *用户登录* /
$ app-> post ('/ signup',' signup '); / *用户注册* /
$ app-> post ('/ feed',' feed '); / * User Feeds * /
$ app-> post ('/ feedUpdate',' feedUpdate '); / *用户Feed更新* /
$ app-> post ('/ feedDelete',' feedDelete '); / *用户Feed删除* / $ app-> 运行 ();
//其他函数
函数 feedUpdate (){
$ request = \ Slim \ Slim :: getInstance () - > request ();
$ data = json_decode($ request-> getBody());
$ user_id = $ data-> user_id ;
$ token = $ data-> token ;
$ feed = $ data-> feed ;
$ systemToken = apiToken($ USER_ID);
try {
if($ systemToken == $ token){
$ feedData ='';
$ db = getDB();
$ sql =“ INSERT INTO feed(feed,created,user_id_fk)VALUES
( :feed , :created , :user_id ) “;
$ stmt = $ db-> prepare ($ sql);
$ stmt-> bindParam (”feed“,$ feed, PDO :: PARAM_STR );
$ stmt-> bindParam (”user_id“, $ user_id, PDO :: PARAM_INT );
$ created = time ();
$ stmt-> bindParam(“created”,$ created, PDO :: PARAM_INT );
$ stmt-> execute();
$ sql1 =“ SELECT * FROM feed WHERE user_id_fk = :user_id ORDER BY
feed_id DESC LIMIT 1 “;
$ stmt1 = $ db-> prepare ($ sql1);
$ stmt1-> bindParam (“user_id”,$ user_id, PDO :: PARAM_INT );
$ stmt1-> execute ();
$ feedData = $ stmt1-> fetch (PDO :: FETCH_OBJ);
$ db = null;
echo'{“feedData”:'。 json_encode ($ feedData)。 '}';
} else {
echo'{“error”:{“text”:“No access”}}';
}
} 赶上 (PDOException $ E){
回声'{ “错误”:{ “文”:'。 $ e-> getMessage()。' }}';
}
}
功能 feedDelete (){
$ request = \ Slim \ Slim :: getInstance () - > request ();
$ data = json_decode($ request-> getBody());
$ user_id = $ data-> user_id ;
$ token = $ data-> token ;
$ feed_id = $ data-> feed_id ;
$ systemToken = apiToken($ USER_ID);
try {
if($ systemToken == $ token){
$ feedData ='';
$ db = getDB ();
$ sql =“ DELETE FROM feed WHERE user_id_fk = :user_id AND
feed_id = :feed_id ”;
$ stmt = $ db-> prepare ($ sql);
$ stmt-> bindParam (“user_id”,$ user_id, PDO :: PARAM_INT );
$ stmt-> bindParam (“feed_id”,$ feed_id, PDO :: PARAM_INT );
$ stmt-> execute ();
$ db = null;
echo '{“success”:{“text”:“Feed deleted”}}';
} else {
echo '{“error”:{“text”:“No access”}}';
}
} 赶上 (PDOException $ E){
回声 '{ “错误”:{ “文”:'。 $ E-> getMessage()。'}}';
}
}
?>
要求 '的config.php';
要求 'Slim / Slim.php';
\ Slim \ Slim :: registerAutoloader ();
$ app = new \ Slim \ Slim();
$ app-> post ('/ login',' login '); / *用户登录* /
$ app-> post ('/ signup',' signup '); / *用户注册* /
$ app-> post ('/ feed',' feed '); / * User Feeds * /
$ app-> post ('/ feedUpdate',' feedUpdate '); / *用户Feed更新* /
$ app-> post ('/ feedDelete',' feedDelete '); / *用户Feed删除* / $ app-> 运行 ();
//其他函数
函数 feedUpdate (){
$ request = \ Slim \ Slim :: getInstance () - > request ();
$ data = json_decode($ request-> getBody());
$ user_id = $ data-> user_id ;
$ token = $ data-> token ;
$ feed = $ data-> feed ;
$ systemToken = apiToken($ USER_ID);
try {
if($ systemToken == $ token){
$ feedData ='';
$ db = getDB();
$ sql =“ INSERT INTO feed(feed,created,user_id_fk)VALUES
( :feed , :created , :user_id ) “;
$ stmt = $ db-> prepare ($ sql);
$ stmt-> bindParam (”feed“,$ feed, PDO :: PARAM_STR );
$ stmt-> bindParam (”user_id“, $ user_id, PDO :: PARAM_INT );
$ created = time ();
$ stmt-> bindParam(“created”,$ created, PDO :: PARAM_INT );
$ stmt-> execute();
$ sql1 =“ SELECT * FROM feed WHERE user_id_fk = :user_id ORDER BY
feed_id DESC LIMIT 1 “;
$ stmt1 = $ db-> prepare ($ sql1);
$ stmt1-> bindParam (“user_id”,$ user_id, PDO :: PARAM_INT );
$ stmt1-> execute ();
$ feedData = $ stmt1-> fetch (PDO :: FETCH_OBJ);
$ db = null;
echo'{“feedData”:'。 json_encode ($ feedData)。 '}';
} else {
echo'{“error”:{“text”:“No access”}}';
}
} 赶上 (PDOException $ E){
回声'{ “错误”:{ “文”:'。 $ e-> getMessage()。' }}';
}
}
功能 feedDelete (){
$ request = \ Slim \ Slim :: getInstance () - > request ();
$ data = json_decode($ request-> getBody());
$ user_id = $ data-> user_id ;
$ token = $ data-> token ;
$ feed_id = $ data-> feed_id ;
$ systemToken = apiToken($ USER_ID);
try {
if($ systemToken == $ token){
$ feedData ='';
$ db = getDB ();
$ sql =“ DELETE FROM feed WHERE user_id_fk = :user_id AND
feed_id = :feed_id ”;
$ stmt = $ db-> prepare ($ sql);
$ stmt-> bindParam (“user_id”,$ user_id, PDO :: PARAM_INT );
$ stmt-> bindParam (“feed_id”,$ feed_id, PDO :: PARAM_INT );
$ stmt-> execute ();
$ db = null;
echo '{“success”:{“text”:“Feed deleted”}}';
} else {
echo '{“error”:{“text”:“No access”}}';
}
} 赶上 (PDOException $ E){
回声 '{ “错误”:{ “文”:'。 $ E-> getMessage()。'}}';
}
}
?>
home.ts
转到主页组件并包含 feedUpdate 和 feedDelete 函数。 这些功能与源更新和删除API连接以进行数据库更改。 使用 unshift javascript内置函数将feedUpdate结果推送到dataSet feed对象。
从
'
@ angular / core
'
导入
{Component}
;
从
'
ionic-angular
'
导入 {NavController,App, AlertController } ; 从 “ ../../providers/auth-service ” 导入 {AuthService} ; 从 “ ../../providers/common ” 导入 {Common} ; @ Component ({selector:' page-home ',templateUrl:' home.html '}) export class HomePage { public userDetails:any; 上市
resposeData:any;
公共数据集 :任何;
userPostData = {
“user_id”:“”,
“token”:“”,
“feed”:“”,
“feed_id”:“”
};
构造函数 ( public common:Common, public alertCtrl:AlertController, public navCtrl:NavController, public app:App, public authService:AuthService){
const data = JSON 。 解析 ( localStorage的 。 的getItem ( '用户数据'));
this.userDetails = data.userData;
this.userPostData.user_id = this.userDetails.user_id;
this.userPostData.token = this.userDetails.token;
这个。 getFeed ();
}
getFeed (){
// feed details function
}
feedUpdate (){
if(this.userPostData.feed){
this.common。 presentLoading ();
this.authService。 POSTDATA (this.userPostData “ feedUpdate ”)
。 然后((结果)=> {
this.resposeData =结果;
如果(this.resposeData.feedData){
。this.common closeLoading ();
this.dataSet。 unshift (this.resposeData.feedData);
this.userPostData.feed =“”;
} else {
console 。 log (“无访问权限”);
}
,(err)=> {
//连接失败消息
});
}
}
feedDelete (FEED_ID,msgIndex){
如果(FEED_ID> 0){
让警报= this.alertCtrl。 创建 ({
title:'删除Feed',
消息:' 你想买这个Feed? ',
按钮:[
{
text:' 取消 ',
role:'cancel',
handler :()=> {
console 。 log ('Cancel clicked');
}
,{
text:' Delete ',
handler:()=> {
this.userPostData.feed_id = feed_id;
this.authService。 POSTDATA (this.userPostData “ feedDelete ”)
。 然后((结果)=> {
this.resposeData =结果;
如果(this.resposeData.success){
。this.dataSet 拼接 (msgIndex,1);
} else {
console 。 log (“无访问权限”);
}
,(err)=> {
//连接失败消息
});
}
}
]
});
alert.present();
}
}
}
对于使用Ionic警报控制器实现的删除功能。导入 {NavController,App, AlertController } ; 从 “ ../../providers/auth-service ” 导入 {AuthService} ; 从 “ ../../providers/common ” 导入 {Common} ; @ Component ({selector:' page-home ',templateUrl:' home.html '}) export class HomePage { public userDetails:any; 上市
resposeData:any;
公共数据集 :任何;
userPostData = {
“user_id”:“”,
“token”:“”,
“feed”:“”,
“feed_id”:“”
};
构造函数 ( public common:Common, public alertCtrl:AlertController, public navCtrl:NavController, public app:App, public authService:AuthService){
const data = JSON 。 解析 ( localStorage的 。 的getItem ( '用户数据'));
this.userDetails = data.userData;
this.userPostData.user_id = this.userDetails.user_id;
this.userPostData.token = this.userDetails.token;
这个。 getFeed ();
}
getFeed (){
// feed details function
}
feedUpdate (){
if(this.userPostData.feed){
this.common。 presentLoading ();
this.authService。 POSTDATA (this.userPostData “ feedUpdate ”)
。 然后((结果)=> {
this.resposeData =结果;
如果(this.resposeData.feedData){
。this.common closeLoading ();
this.dataSet。 unshift (this.resposeData.feedData);
this.userPostData.feed =“”;
} else {
console 。 log (“无访问权限”);
}
,(err)=> {
//连接失败消息
});
}
}
feedDelete (FEED_ID,msgIndex){
如果(FEED_ID> 0){
让警报= this.alertCtrl。 创建 ({
title:'删除Feed',
消息:' 你想买这个Feed? ',
按钮:[
{
text:' 取消 ',
role:'cancel',
handler :()=> {
console 。 log ('Cancel clicked');
}
,{
text:' Delete ',
handler:()=> {
this.userPostData.feed_id = feed_id;
this.authService。 POSTDATA (this.userPostData “ feedDelete ”)
。 然后((结果)=> {
this.resposeData =结果;
如果(this.resposeData.success){
。this.dataSet 拼接 (msgIndex,1);
} else {
console 。 log (“无访问权限”);
}
,(err)=> {
//连接失败消息
});
}
}
]
});
alert.present();
}
}
}
创建预加载提供
程序使用Ionic generate命令创建新提供程序。 如果这不起作用,请按照我以前的文章。
$
ionic
生成
提供者
常见
commont.ts
导入的离子加载控制器,用于实现API调用的预加载功能。 这是最常用的,因此我们将其作为可注射的提供者创建。
从
'
@ angular / core
'
导入
{Injectable}
;
从
'
ionic-angular
'
导入 {LoadingController} ; @ 注射 () 出口 类 常见 { 公共 装载机:任; 构造函数 ( public loadingCtrl:LoadingController){ console 。 log ('Hello Common Provider'); } presentLoading (){ this.loader = this.loadingCtrl。 create ({content:“Please wait ...”})
this.loader.present();
} closeLoading (){ this.loader。 解雇 (); } }
导入 {LoadingController} ; @ 注射 () 出口 类 常见 { 公共 装载机:任; 构造函数 ( public loadingCtrl:LoadingController){ console 。 log ('Hello Common Provider'); } presentLoading (){ this.loader = this.loadingCtrl。 create ({content:“Please wait ...”})
this.loader.present();
} closeLoading (){ this.loader。 解雇 (); } }
app.module.ts
在应用程序模块中导入新插件。 现在转到 src / app / app.module.ts 并导入 Common for API预加载。
从
'
@ angular / core
'
导入
{NgModule,ErrorHandler}
;
从
'
@ angular / platform-browser
'
导入 {BrowserModule} ; 从 ' @ angular / http ' 导入 {HttpModule} ; 从 ' ionic-angular ' 导入 {IonicApp,IonicModule,IonicErrorHandler} ; 从 ' ./app.component ' 导入 {MyApp} ; 从 ' ../providers/auth-service ' 导入 {AuthService} ; 从中 导入 {SplitPane}
' ../providers/split-pane '; 从 ' ../providers/common '
导入 {Common} ; 从 ' ../pages/welcome/welcome '
导入 {Welcome} ; 从 ' ../pages/login/login '
导入 {登录} ; 从 ' ../pages/signup/signup '
导入 {注册} ; 从 ' ../pages/about/about '
导入 {AboutPage} ; 从 ' ../pages/contact/contact ' 导入 {ContactPage} ; 进口
{HomePage} 来自 ' ../pages/home/home '; 从 ' ../pages/tabs/tabs '
导入 {TabsPage} ; 从 ' @ ionic-native / status-bar ' 导入 {StatusBar} ; 从 ' @ ionic-native / splash-screen ' 导入 {SplashScreen} ; 从 ' angular-linky ' 导入 {LinkyModule} ; 从 ' angular2-moment ' 导入 {MomentModule} ; @NgModule ({ 声明:[ MyApp,
AboutPage,
ContactPage,
HomePage,
Welcome,
Login,
Signup,
TabsPage
],
import :[
BrowserModule,HttpModule,LinkyModule,MomentModule,
IonicModule.forRoot(MyApp)
],
bootstrap :[IonicApp],
entryComponents :[
MyApp,
AboutPage,
ContactPage,
HomePage ,
欢迎,
登录,
注册,
TabsPage
],
提供商 :[
StatusBar,
SplashScreen,AuthService,SplitPane, Common ,
{provide:ErrorHandler,useClass:IonicErrorHandler}
]
})
export class AppModule {}
导入 {BrowserModule} ; 从 ' @ angular / http ' 导入 {HttpModule} ; 从 ' ionic-angular ' 导入 {IonicApp,IonicModule,IonicErrorHandler} ; 从 ' ./app.component ' 导入 {MyApp} ; 从 ' ../providers/auth-service ' 导入 {AuthService} ; 从中 导入 {SplitPane}
' ../providers/split-pane '; 从 ' ../providers/common '
导入 {Common} ; 从 ' ../pages/welcome/welcome '
导入 {Welcome} ; 从 ' ../pages/login/login '
导入 {登录} ; 从 ' ../pages/signup/signup '
导入 {注册} ; 从 ' ../pages/about/about '
导入 {AboutPage} ; 从 ' ../pages/contact/contact ' 导入 {ContactPage} ; 进口
{HomePage} 来自 ' ../pages/home/home '; 从 ' ../pages/tabs/tabs '
导入 {TabsPage} ; 从 ' @ ionic-native / status-bar ' 导入 {StatusBar} ; 从 ' @ ionic-native / splash-screen ' 导入 {SplashScreen} ; 从 ' angular-linky ' 导入 {LinkyModule} ; 从 ' angular2-moment ' 导入 {MomentModule} ; @NgModule ({ 声明:[ MyApp,
AboutPage,
ContactPage,
HomePage,
Welcome,
Login,
Signup,
TabsPage
],
import :[
BrowserModule,HttpModule,LinkyModule,MomentModule,
IonicModule.forRoot(MyApp)
],
bootstrap :[IonicApp],
entryComponents :[
MyApp,
AboutPage,
ContactPage,
HomePage ,
欢迎,
登录,
注册,
TabsPage
],
提供商 :[
StatusBar,
SplashScreen,AuthService,SplitPane, Common ,
{provide:ErrorHandler,useClass:IonicErrorHandler}
]
})
export class AppModule {}
构建iOS应用程序
按照执行Xcode构建的命令,观看视频教程,您将了解更多。
$
cordova
添加
平台
ios
$ ionic build ios
$ ionic build ios
构建Android应用程序
使用Android SDK打开Android构建>
$
cordova
添加
平台
android
$ ionic build android
$ ionic build android
分享题目:Ionic3和Angular4:使用基于令牌的RestfulAPI插入和删除
链接URL:http://scyanting.com/article/pooejd.html