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 相关文章推荐
Array.prototype.slice.apply的使用方法
Mar 17 Javascript
javascript通过navigator.userAgent识别各种浏览器
Oct 25 Javascript
JavaScript 语言基础知识点总结(思维导图)
Nov 10 Javascript
javascript 函数及作用域总结介绍
Nov 12 Javascript
js实现获取div坐标的方法
Nov 16 Javascript
javascript实现Email邮件显示与删除功能
Nov 21 Javascript
使用jQuery UI库开发Web界面的简单入门指引
Apr 22 Javascript
JS扩展类,克隆对象与混合类实例分析
Nov 26 Javascript
Angularjs Promise实例详解
Mar 15 Javascript
vue数据初始化initState的实例详解
Apr 11 Javascript
vue实现滑动到底部加载更多效果
Oct 27 Javascript
webpack4 optimization使用总结
Nov 10 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字符串word末字符实现大小写互换的方法
2014/11/10 PHP
laravel 5.3中自定义加密服务的方案详解
2017/05/09 PHP
PHP以json或xml格式返回请求数据的方法
2018/05/31 PHP
jQuery生成asp.net服务器控件的代码
2010/02/04 Javascript
如何使用jquery动态加载js,css文件实现代码
2013/04/03 Javascript
web网页按比例显示图片实现原理及js代码
2013/08/09 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
2014/08/15 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
2014/10/30 Javascript
js实现获取当前时间是本月第几周的方法
2015/08/11 Javascript
jquery实现的Accordion折叠面板效果代码
2015/09/02 Javascript
jquery分隔Url的param方法(推荐)
2016/05/25 Javascript
javascript实现抽奖程序的简单实例
2016/06/07 Javascript
浅谈js里面的InttoStr和StrtoInt
2016/06/14 Javascript
[原创]jQuery常用的4种加载方式分析
2016/07/25 Javascript
Google 地图类型详解及示例代码
2016/08/06 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
2016/08/24 Javascript
jquery实现的table排序功能示例
2017/03/10 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
2017/09/20 Javascript
详解基于vue-cli配置移动端自适应
2018/01/13 Javascript
Vue引入jquery实现平滑滚动到指定位置
2018/05/09 jQuery
vue2.0项目集成Cesium的实现方法
2019/07/30 Javascript
JS数组方法slice()用法实例分析
2020/01/18 Javascript
记录Django开发心得
2014/07/16 Python
python生成日历实例解析
2014/08/21 Python
Python连接mssql数据库编码问题解决方法
2015/01/01 Python
Python科学计算之NumPy入门教程
2017/01/15 Python
Python排序搜索基本算法之希尔排序实例分析
2017/12/09 Python
对python 中class与变量的使用方法详解
2019/06/26 Python
对python中的os.getpid()和os.fork()函数详解
2019/08/08 Python
Beauty Expert美国/加拿大:购买奢侈美容产品
2018/12/05 全球购物
XML文档定义有几种形式?它们之间有何本质区别?解析XML文档有哪几种方式?
2016/01/12 面试题
幼师求职自荐信范文
2014/01/26 职场文书
内衣营销方案
2014/03/15 职场文书
大专生自荐书范文
2014/06/22 职场文书
关于EntityWrapper的in用法
2022/03/22 Java/Android
微信小程序纯CSS实现无限弹幕滚动效果
2022/09/23 HTML / CSS