溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時間：2020-08-14 13:39:05 來源：ITPUB博客 閱讀：127 作者：cenfeng 欄目：編程語言

這是關(guān)于使用Ionic和Angular JS開發(fā)移動應(yīng)用程序的一系列文章。這篇文章涉及更新和刪除應(yīng)用程序上的任何帖子。這也解釋了如何通過進行Ajax調(diào)用來顯示加載圖像。在刪除帖子時，它會顯示一條警告消息，以確認是否刪除。這篇文章就是這個。希望你們都能利用Ionic和Angular上的這一系列文章來構(gòu)建自己的移動應(yīng)用程序。

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



Ionic 3和Angular 4：使用基于令牌的Restful API插入和刪除
數(shù)據(jù)庫設(shè)計
要構(gòu)建用戶訂閱源系統(tǒng)，您必須創(chuàng)建兩個表，例如Users和Feed。 您可以查看我之前的教程，了解如何 創(chuàng)建基于令牌的API系統(tǒng) 。

用戶
用戶表包含所有用戶注冊詳細信息。
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代碼，包括 用于用戶插入和刪除操作的 新函數(shù) 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-> 運行 （）; 

//其他函數(shù)

函數(shù)   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
轉(zhuǎn)到主頁組件并包含 feedUpdate 和 feedDelete 函數(shù)。 這些功能與源更新和刪除API連接以進行數(shù)據(jù)庫更改。 使用 unshift  javascript內(nèi)置函數(shù)將feedUpdate結(jié)果推送到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; 
   公共數(shù)據(jù)集   ：任何; 
  userPostData = { 
    “user_id”：“”，
    “token”：“”，
    “feed”：“”，
    “feed_id”：“” 
  }; 

   構(gòu)造函數(shù) （ public   common：Common，   public   alertCtrl：AlertController，   public  navCtrl：NavController，   public   app：App，   public   authService：AuthService）{ 
     const  data =  JSON 。 解析 （ localStorage的 。 的getItem （ '用戶數(shù)據(jù)'））; 
    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  ”） 
        。 然后（（結(jié)果）=> { 
          this.resposeData =結(jié)果; 
          如果（this.resposeData.feedData）{ 
            。this.common  closeLoading （）;
            this.dataSet。 unshift （this.resposeData.feedData）; 
            this.userPostData.feed =“”; 
          } else { 
             console 。 log （“無訪問權(quán)限”）; 
          } 

        ，（err）=> { 
          //連接失敗消息
        }）; 
    } 

  } 

   feedDelete （FEED_ID，msgIndex）{ 
    如果（FEED_ID> 0）{ 
      讓警報= this.alertCtrl。 創(chuàng)建 （{ 
          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  ”） 
                  。 然后（（結(jié)果）=> { 
                    this.resposeData =結(jié)果; 
                    如果（this.resposeData.success）{ 
                      。this.dataSet  拼接 （msgIndex，1）;
                    } else { 
                       console 。 log （“無訪問權(quán)限”）; 
                    } 
                  ，（err）=> { 
                    //連接失敗消息
                  }）; 
              } 
            } 
          ] 
        }）; 
      alert.present（）; 
    } 
  } 

}
對于使用Ionic警報控制器實現(xiàn)的刪除功能。

創(chuàng)建預加載提供
程序使用Ionic generate命令創(chuàng)建新提供程序。 如果這不起作用，請按照我以前的文章。
$  ionic  生成 提供者 常見

commont.ts
導入的離子加載控制器，用于實現(xiàn)API調(diào)用的預加載功能。 這是最常用的，因此我們將其作為可注射的提供者創(chuàng)建。
從  '  @ angular / core  '  導入   {Injectable}  ;  從   '  ionic-angular  ' 
導入   {LoadingController}   ;  @  注射 （） 出口 類 常見  {        公共 裝載機：任;        構(gòu)造函數(shù) （ 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
在應(yīng)用程序模塊中導入新插件。 現(xiàn)在轉(zhuǎn)到 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  {}

構(gòu)建iOS應(yīng)用程序
按照執(zhí)行Xcode構(gòu)建的命令，觀看視頻教程，您將了解更多。
$  cordova 添加 平臺   ios
$  ionic  build  ios

構(gòu)建Android應(yīng)用程序
使用Android SDK打開Android構(gòu)建>
$   cordova   添加   平臺   android
$   ionic   build  android


向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手