Ionic3和Angular4：使用基于令牌的RestfulAPI插入和删除

盐津网站制作公司哪家好，找创新互联公司！从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设公司等网站项目制作，到程序开发，运营维护。创新互联公司自2013年起到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联公司。

这是关于使用Ionic和Angular JS开发移动应用程序的一系列文章。这篇文章涉及更新和删除应用程序上的任何帖子。这也解释了如何通过进行Ajax调用来显示加载图像。在删除帖子时，它会显示一条警告消息，以确认是否删除。这篇文章就是这个。希望你们都能利用Ionic和Angular上的这一系列文章来构建自己的移动应用程序。

Ionic 3和Angular 4：使用基于令牌的Restful API插入和删除

数据库设计
要构建用户订阅源系统，您必须创建两个表，例如Users和Feed。您可以查看我之前的教程，了解如何创建基于令牌的API系统。

用户
用户表包含所有用户注册详细信息。

CREATE TABLE 用户（
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
）;

下载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（）。'}}';
}

}
？>

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警报控制器实现的删除功能。

创建预加载提供
程序使用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。解雇（）; } }

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 {}

构建iOS应用程序
按照执行Xcode构建的命令，观看视频教程，您将了解更多。

$ cordova 添加平台 ios
$ ionic build ios

构建Android应用程序
使用Android SDK打开Android构建>

$ cordova 添加平台 android
$ ionic build android

分享名称：Ionic3和Angular4：使用基于令牌的RestfulAPI插入和删除
文章起源：http://cqcxhl.com/article/pooejd.html

重庆分公司，新征程启航

Ionic3和Angular4：使用基于令牌的RestfulAPI插入和删除

其他资讯