Ionic 3和Angular 4：使用基于令牌的Restful API插入和删除-IT技术-益华网络-网站建设_小程序开发|网页设计

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

发布时间：2025-08-31 20:13:05 作者：益华网络来源：undefined 浏览量（0）点赞（0）

摘要：这是关于使用Ionic和Angular JS开发移动应用程序的一系列文章。这篇文章涉及更新和删除应用程序上的任何帖子。这也解释了如何通过进行Ajax调用来显示加载图

这是关于使用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构建的命令，观看视频教程，您将了解更多。