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 相关文章推荐
Javascript 各浏览器的 Javascript 效率对比
Jan 23 Javascript
javascript 实现子父窗体互相传值的简单实例
Feb 17 Javascript
JS对文本框值的判断示例
Mar 10 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
Jun 04 Javascript
JS随机洗牌算法之数组随机排序
Mar 23 Javascript
JS使用cookie设置样式的方法
Jun 30 Javascript
详解vue.js移动端导航navigationbar的封装
Jul 05 Javascript
使用Vue写一个datepicker的示例
Jan 27 Javascript
BootStrap table实现表格行拖拽效果
Dec 01 Javascript
JS中的函数与对象的创建方式
May 12 Javascript
浅谈JS的原型和原型链
Jun 04 Javascript
React如何使用axios请求数据并把数据渲染到组件
Aug 05 Javascript
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 5.5 创建和验证哈希最简单的方法详解
2013/11/07 PHP
Win7下手动安装apache2.2、php5.4笔记
2015/04/03 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
javascript appendChild,innerHTML,join性能比较代码
2009/08/29 Javascript
jQuery之浮动窗口实现代码(两种方法)
2010/09/08 Javascript
基于jquery封装的一个js分页
2011/11/15 Javascript
jQuery-Tools-overlay 使用介绍
2012/07/14 Javascript
基于jquery实现一张图片点击鼠标放大再点缩小
2013/09/29 Javascript
Javascript实现页面跳转的几种方式分享
2013/10/26 Javascript
让IE8浏览器支持function.bind()方法
2014/10/16 Javascript
DOM基础教程之使用DOM设置文本框
2015/01/20 Javascript
js图片模糊切换显示特效的方法
2015/02/17 Javascript
require.js的用法详解
2015/10/20 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
2016/11/09 Javascript
js+div+css下拉导航菜单完整代码分享
2016/12/28 Javascript
微信小程序本作用域下调用全局JS详解及实例
2017/02/22 Javascript
Webpack框架核心概念(知识点整理)
2017/12/22 Javascript
js中el表达式的使用和非空判断方法
2018/03/28 Javascript
QML实现圆环颜色选择器
2019/09/25 Javascript
原生js 实现表单验证功能
2021/02/08 Javascript
js实现简单图片拖拽效果
2021/02/22 Javascript
新手该如何学python怎么学好python?
2008/10/07 Python
一个检测OpenSSL心脏出血漏洞的Python脚本分享
2014/04/10 Python
python钉钉机器人运维脚本监控实例
2019/02/20 Python
django ajax发送post请求的两种方法
2020/01/05 Python
Python collections.defaultdict模块用法详解
2020/06/18 Python
Python+logging输出到屏幕将log日志写入文件
2020/11/11 Python
Python实现小黑屋游戏的完整实例
2021/01/06 Python
蔻驰英国官网:COACH英国
2020/07/19 全球购物
英国领先的高级美容和在线皮肤诊所:Face the Future
2020/06/17 全球购物
优秀导游先进事迹材料
2014/01/25 职场文书
小学五年级语文上册教学计划
2015/01/22 职场文书
责任书格式
2015/01/29 职场文书
教师个人学习总结
2015/02/11 职场文书
2015教师节师德演讲稿
2015/03/19 职场文书
2019朋友新婚祝福语精选
2019/10/10 职场文书