移动端开发：ionic如何与服务端进行数据交互

一、查看数据库表内容（以新闻表为例）

image

二、使用postman检查服务端接口是否可以正常获取数据

1、getNewsList方法用于新闻表多个数据查询

image

2、getSingleNewsById方法用于新闻表单个个数据查询

image

三、编写移动端代码

1、建立模型类News

新建model包用于存放模型类，再新建News.ts文件，根据数据库的字段添加成员变量。

export class News{
    newsid:string;  //每条新闻对应的ID
    title1:string;  //新闻的标题1
    title2:string;  //新闻的标题2
    author:string;  //新闻的作者
    pbdate:number;  //发布新闻的时间
    content:string; //新闻的内容
}

2、建立service

(1)、新建config.service用来获取服务端主机头

• 新建命令：ionic g service service/config

import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root'
})
export class ConfigService {
  constructor() { }
    public HOST="https://blog.mzwhzy.com"; //服务端主机头
}

(2)、新建news.service用来获取服务端getNewsList方法和getSingleNewsById方法的请求路径

• 新建命令：ionic g service service/news
• 在app.module.ts的imports里面加入,HttpClientModule

import { Injectable } from '@angular/core';
import {ConfigService} from './config.service';
import {HttpClient} from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class NewsService {
   //构造方法引入ConfigService和HttpClient
  constructor(private config:ConfigService,
              private http:HttpClient) { }
    
    private getNewsListUrl=this.config.HOST+"/public/getNewsList";
    getNewsList(){
        return this.http.get(this.getNewsListUrl).toPromise();
    }

    private getSingleNewsUrl=this.config.HOST+"/public/getSingleNewsById";
    getSingleNews(id:string){
        let parm={
            "newsid":id
        }
        return this.http.post(this.getSingleNewsUrl,parm).toPromise();
    }
}

3、在显示组件中绑定

(1)、逻辑部分(ts文件)

import { Component } from '@angular/core';
import {NewsService} from '../service/news.service';
import {News} from '../model/News';
import {Router} from '@angular/router';

@Component({
  selector: 'app-tab2',
  templateUrl: 'tab2.page.html',
  styleUrls: ['tab2.page.scss']
})
export class Tab2Page {
    newslist:Array<News>
    constructor(private newsservice:NewsService
        ,private router:Router) {
        this.newslist=new Array();
    }
//在页面组件没有加载前调用
    ionViewWillEnter(){
        this.loadNewsList();
    }

    loadNewsList(){
        this.newsservice.getNewsList()
            .then((data:any)=>{
                this.newslist=new Array();
                this.newslist=data;
            })
    }

    //这个用来单个查询
    goTonewsDetail(id:string){
        this.router.navigate(['newsdetail',{"id":id}])
    }

}

(2)、html部分

<ion-content >
  <ion-list>
                             <!--点击新闻触发(click)事件，跳转到新闻详情页面-->
    <ion-item *ngFor="let n of newslist" (click)="goTonewsDetail(n.newsid)">
      <ion-label>{{n.title1}}</ion-label>
      <ion-text>{{n.pbdate |date:'yyyy-MM-dd'}}</ion-text>
    </ion-item>
  </ion-list>
</ion-content>

现在可以测试，新闻表已经可以显示在页面上了。

4、显示新闻详情页面

(1)、新建一个页面用来显示新闻详情页

新建页面命令：ionic g page page/newsdetail

(2)、新闻详情页逻辑部分代码

import { Component, OnInit } from '@angular/core';
import {News} from "../../model/News";
import {ActivatedRoute} from "@angular/router";
import {NewsService} from "../../service/news.service";

@Component({
  selector: 'app-newsdetail',
  templateUrl: './newsdetail.page.html',
  styleUrls: ['./newsdetail.page.scss'],
})
export class NewsdetailPage implements OnInit {

    id:string;
    news:News
    constructor(private parm:ActivatedRoute,
                private newsservice:NewsService) {
        this.news=new News();
        //接收URL参数
        this.id=this.parm.snapshot.paramMap.get("id");
    }

    ngOnInit() {
    }
    //当页面加载时运行
    ionViewWillEnter(){
        this.loadSingelNewsById();
    }
    
    //从服务器端获取单个新闻对象数据
    loadSingelNewsById(){
        this.newsservice.getSingleNews(this.id)
            .then((data:any)=>{
                this.news=new News();
                this.news=data;
            })
    }

}

(3)、新闻详情页html部分代码

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>{{news.title2}}</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>

  <ion-item >
    <ion-badge>作者：{{news.author}}</ion-badge>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <ion-badge>发布时间：{{news.pbdate |date:'yyyy-MM-dd'}}</ion-badge>
  </ion-item>
  {{news.content}}
</ion-content>

由于没有加入HTML管道，在显示新闻内容是会显示对应的html标记

四、效果演示

image