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

这是和和删关于使用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））; 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