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

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

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

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



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://ybzwz.com/article/pooejd.html