ionic mysql读取数据库_移动端开发：ionic如何与服务端进行数据交互

1、查看数据库表内容(以新闻表为例)

2、使用postman检查服务端接口是否能够正常获取数据

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

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

3、编写移动端代码

一、创建模型类News

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

export class News{

newsid:string; //每条新闻对应的ID

title1:string; //新闻的标题1

title2:string; //新闻的标题2

author:string; //新闻的做者

pbdate:number; //发布新闻的时间

content:string; //新闻的内容

}

二、创建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();

}

}

三、在显示组件中绑定

(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

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部分

{{n.title1}}

{{n.pbdate |date:'yyyy-MM-dd'}}

如今能够测试，新闻表已经能够显示在页面上了。css

四、显示新闻详情页面

(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部分代码

{{news.title2}}

做者：{{news.author}}        

发布时间：{{news.pbdate |date:'yyyy-MM-dd'}}

{{news.content}}

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

4、效果演示