这是关于使用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构建的命令，观看视频教程，您将了解更多。
$
cordova
添加
平台
ios
$
ionic
build
ios
构建Android应用程序
使用Android SDK打开Android构建>
$
cordova
添加
平台
android
$
ionic
build
android
