angularjs http与后台交互的实现示例


Posted in Javascript onDecember 21, 2018

1.描述

无论是使用angularjs做前端或是结合ionic混合开发移动端开发app都需要与后台进行交互,而angular给我提供了httpModule模块供我们使用。今天就展现一个http的封装和使用的一个具体流程。

2. HttpModule引入

找到app.module.ts文件

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';


import { LoginPage } from "../pages/login/login";
/**
引入HttpClientModule模块
*/
import { HttpClientModule } from "@angular/common/http";

import { RequestServiceProvider } from "../providers/request-service/request-service";
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
 declarations: [
  MyApp,
  
  LoginPage,
  
 ],
 imports: [
  BrowserModule,
   /**
   导入模块
   */
  HttpClientModule,
  
  IonicModule.forRoot(MyApp,{
   tabsHideOnSubPages:'true',
   backButtonText:''
  })
 ],
 bootstrap: [IonicApp],
 entryComponents: [
  MyApp,
  
  LoginPage,
  
 ],
 providers: [
  StatusBar,
  SplashScreen,
  {provide: ErrorHandler, useClass: IonicErrorHandler},
  RequestServiceProvider,
  
 ]
})
export class AppModule {}

按照自己的项目导入HttpClientModule模块即可,我导入其他组件,不用考虑。

3.创建服务

ionic g provider RequestService

执行完成后则会出现如下文件

angularjs http与后台交互的实现示例

4.封装服务

/**
导入http相关
*/
import { HttpClient,HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import {Observable} from "rxjs";

/*
 Generated class for the RequestServiceProvider provider.

 See https://angular.io/guide/dependency-injection for more info on providers
 and Angular DI.
*/
@Injectable()
export class RequestServiceProvider {

  /**
  讲基础路径提取说出来,配置ip和端口时只需要在这修改
  */
 //basePath:string='http://10.4.0.205:8081'
 reserveBasePath:string='http://10.6.254.110:8081'
 basePath=this.reserveBasePath;
  /**
  封装固定的消息头相关
  */
 private headers = new HttpHeaders({'Content-Type': 'application/json'})
 // private headers = new HttpHeaders({'Access-Control-Allow-Origin':'*'});

/**
初始化http变量
*/
 constructor(public http: HttpClient) {
  console.log('Hello RequestServiceProvider Provider');
 }

  /**
  给外界提供了四个基础的方法只需要传入uri和data即可
  */
 get(req:any):Observable<any> {
  return this.http.get(this.basePath+req.uri,{headers:this.headers});
 }

 post(req:any):Observable<any>{
  return this.http.post(this.basePath+req.uri,req.data,{headers:this.headers});
 }
 put(req:any):Observable<any>{
  return this.http.put(this.basePath+req.uri,req.data,{headers:this.headers});
 }
 delete(req:any):Observable<any>{
  return this.http.delete(this.basePath+req.uri,{headers:this.headers});
 }

}

5.导入声明封装服务

找到app.module.ts文件和第一部类似

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';


import { LoginPage } from "../pages/login/login";
/**
引入HttpClientModule模块
*/
import { HttpClientModule } from "@angular/common/http";

/**
导入自定的服务
*/
import { RequestServiceProvider } from "../providers/request-service/request-service";
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
 declarations: [
  MyApp,
  
  LoginPage,
  
 ],
 imports: [
  BrowserModule,
   /**
   导入模块
   */
  HttpClientModule,
  
  IonicModule.forRoot(MyApp,{
   tabsHideOnSubPages:'true',
   backButtonText:''
  })
 ],
 bootstrap: [IonicApp],
 entryComponents: [
  MyApp,
  
  LoginPage,
  
 ],
 providers: [
  StatusBar,
  SplashScreen,
  {provide: ErrorHandler, useClass: IonicErrorHandler},
  /**
  声明服务
  */
  RequestServiceProvider,
  
 ]
})
export class AppModule {}

6.使用服务

找到自己的页面所对应的ts文件如下面代码一样

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
/**
导入声明
*/
import {RequestServiceProvider} from "../../providers/request-service/request-service";

/**
 * Generated class for the LoginPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
 selector: 'page-login',
 templateUrl: 'login.html',
})
export class LoginPage {
 title:string = '登录'
 promptMessage:string = ''

 user={
  username:'',
  password:''
 }
 req={
  login:{
   uri:'/user/login'
  }

 }

 constructor(public navCtrl: NavController, public navParams: NavParams,
        /**
        初始化服务对象
        */
       private requestService:RequestServiceProvider) {

 }
 
 ionViewDidLoad() {
  console.log('ionViewDidLoad LoginPage');
 }
 login(){
 
   /**
   调用post方法,subscribe()方法可以出发请求,调用一次发送一次,调用多次发多次
   */
  this.requestService.post({uri:this.req.login.uri,data:user}).subscribe((res:any)=>{
   console.log(res);
   if (res.code == 0){
    this.promptMessage = res.message;
   } else {   
    this.promptMessage = res.message;
   }

  },
   error1 => {
   alert(JSON.stringify(error1))
   });

 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js函数setTimeout延迟执行的简单介绍
Jul 17 Javascript
Javascript中各种trim的实现详细解析
Dec 10 Javascript
Array 重排序方法和操作方法的简单实例
Jan 24 Javascript
IE10中flexigrid无法显示数据的解决方法
Jul 26 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件包装
Nov 20 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
Jun 22 Javascript
js事件源window.event.srcElement兼容性写法(详解)
Nov 25 Javascript
js仿QQ邮箱收件人选择与搜索功能
Feb 10 Javascript
从零开始封装自己的自定义Vue组件
Oct 09 Javascript
PostgreSQL Node.js实现函数计算方法示例
Feb 12 Javascript
微信小程序自定义模态弹窗组件详解
Dec 24 Javascript
vue组件中节流函数的失效的原因和解决方法
Dec 02 Vue.js
JS执行控制之节流模式实例分析
Dec 21 #Javascript
vue favicon设置以及动态修改favicon的方法
Dec 21 #Javascript
微信小程序自定义键盘 内部虚拟支付
Dec 20 #Javascript
微信小程序实现随机验证码功能
Dec 20 #Javascript
微信小程序实现发送验证码按钮效果
Dec 20 #Javascript
使用puppeteer爬取网站并抓出404无效链接
Dec 20 #Javascript
详解如何使用node.js的开发框架express创建一个web应用
Dec 20 #Javascript
You might like
PHP编码规范的深入探讨
2013/06/06 PHP
如何判断php mysqli扩展类是否开启
2016/12/24 PHP
Opacity.js
2007/01/22 Javascript
图片自动缩小 点击放大
2008/07/07 Javascript
为超链接加上disabled后的故事
2010/12/10 Javascript
原生js事件的添加和删除的封装
2014/07/01 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
2014/10/17 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
2014/12/08 Javascript
JavaScript Array对象详解
2016/03/01 Javascript
JavaScript的instanceof运算符学习教程
2016/06/08 Javascript
VC调用javascript的几种方法(推荐)
2016/08/09 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
2017/12/01 Javascript
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
2018/03/06 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
2018/09/04 Javascript
nodejs基础之buffer缓冲区用法分析
2018/12/26 NodeJs
微信小程序实现Session功能及无法获取session问题的解决方法
2019/05/07 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
2019/11/06 Javascript
[02:54]DOTA2英雄基础教程 撼地者
2014/01/14 DOTA
[01:15:29]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第三局
2016/03/04 DOTA
[01:16:28]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第二场 2月23日
2021/03/11 DOTA
python缩进区别分析
2014/02/15 Python
编写Python小程序来统计测试脚本的关键字
2016/03/12 Python
使用 Python 实现简单的 switch/case 语句的方法
2018/09/17 Python
想学python 这5本书籍你必看!
2018/12/11 Python
三步实现Django Paginator分页的方法
2019/06/11 Python
Python+pyftpdlib实现局域网文件互传
2020/08/24 Python
如何用Python 实现全连接神经网络(Multi-layer Perceptron)
2020/10/15 Python
Shopee菲律宾:在线购买和出售
2019/11/25 全球购物
TCP/IP模型的分界线
2012/12/01 面试题
优秀应届毕业生推荐信
2014/02/18 职场文书
歌颂祖国的演讲稿
2014/05/04 职场文书
总经理岗位职责说明书
2014/07/30 职场文书
幼儿园小班开学寄语
2015/05/27 职场文书
学校学习型党组织建设心得体会
2019/06/21 职场文书
深入解析Apache Hudi内核文件标记机制
2022/03/31 Servers
Nginx配置之禁止指定IP访问
2022/05/02 Servers