Ionic 3和Angular 4：使用基于令牌的Restful API插入和删除
这是关于使用Ionic和Angular JS开发移动应用程序的一系列文章。这篇文章涉及更新和删除应用程序上的任何帖子。这也解释了如何通过进行Ajax调用来显示加载图像。在删除帖子时，它会显示一条警告消息，以确认是否删除。这篇文章就是这个。希望你们都能利用Ionic和Angular上的这一系列文章来构建自己的移动应用程序。
数据库设计
要构建用户订阅源系统，您必须创建两个表，例如Users和Feed。您可以查看我之前的教程，了解如何创建基于令牌的API系统。
用户
用户表包含所有用户注册详细信息。
CREATE TABLE用户（
user_idintAUTO_INCREMENTPRIMARY KEY，
用户名varchar（50），
密码varchar（300），
名称varchar（200），
电子邮件varchar（300））;
Feed
此表包含用户每日更新。
CREATE TABLEfeed（
feed_idintPRIMARY KEYAUTO_INCREMENT，
feedtext，
user_id_fkint，
createdint
）;
下载PHP Restul项目
$ git clonehttps://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_idORDER 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_idAND
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连接以进行数据库更改。使用unshiftjavascript内置函数将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'}）exportclassHomePage{publicuserDetails：any;上市
resposeData：any;
公共数据集：任何;
userPostData = {
“user_id”：“”，
“token”：“”，
“feed”：“”，
“feed_id”：“”
};
构造函数（publiccommon：Common，publicalertCtrl：AlertController，publicnavCtrl：NavController，publicapp：App，publicauthService：AuthService）{
constdata =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.commoncloseLoading（）;
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};@注射（）出口类常见{ 公共装载机：任; 构造函数（publicloadingCtrl：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并导入Commonfor 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}
]
}）
exportclassAppModule{}
构建iOS应用程序
按照执行Xcode构建的命令，观看视频教程，您将了解更多。
$cordova添加平台ios
$ionicbuildios
构建Android应用程序
使用Android SDK打开Android构建>
$cordova添加平台android
$ionicbuildandroid
声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。
