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

cenfeng發表於2019-07-09
AngularRESTAPI

這是關於使用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


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69933200/viewspace-2650020/，如需轉載，請註明出處，否則將追究法律責任。

相關文章