這是關于使用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
