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实现动态侧边栏代码
Feb 19 Javascript
对jQuary选择器的全面总结
Jun 20 Javascript
jquery层级选择器的实现(匹配后代元素div)
Sep 05 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
Dec 02 Javascript
angular动态表单制作
Feb 23 Javascript
mpvue+vant app搭建微信小程序的方法步骤
Feb 11 Javascript
JavaScript常用工具方法封装
Feb 12 Javascript
javascript中如何判断类型汇总
May 14 Javascript
vue项目打包后怎样优雅的解决跨域
May 26 Javascript
js实现自定义右键菜单
May 18 Javascript
react结合bootstrap实现评论功能
May 30 Javascript
vue实现列表拖拽排序的功能
Nov 02 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
理解PHP5中static和const关键字的区别
2007/03/19 PHP
PHP及Zend Engine的线程安全模型分析
2011/11/10 PHP
最准确的php截取字符串长度函数
2015/10/29 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
laravel 自定义常量的两种方案
2019/10/14 PHP
js常见表单应用技巧
2008/01/09 Javascript
动态表格Table类的实现
2009/08/26 Javascript
JQuery 将元素显示在屏幕的中央的代码
2010/02/27 Javascript
javascript:;与javascript:void(0)使用介绍
2013/06/05 Javascript
JS循环遍历JSON数据的方法
2014/07/08 Javascript
浅谈jQuery中replace()方法
2015/05/13 Javascript
jQuery链式调用与show知识浅析
2016/05/11 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
2016/06/01 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
2017/02/08 Javascript
Angularjs单选改为多选的开发过程及问题解析
2017/02/17 Javascript
xmlplus组件设计系列之树(Tree)(9)
2017/05/02 Javascript
AngularJs 禁止模板缓存的方法
2017/11/28 Javascript
Vue中自定义全局组件的实现方法
2017/12/08 Javascript
JavaScript调用模式与this关键字绑定的关系
2018/04/21 Javascript
Bootstrap模态对话框中显示动态内容的方法
2018/08/10 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
2020/02/06 Javascript
利用Python代码实现数据可视化的5种方法详解
2018/03/25 Python
Python实现一个带权无回置随机抽选函数的方法
2019/07/24 Python
python中sort和sorted排序的实例方法
2019/08/26 Python
Pytorch之view及view_as使用详解
2019/12/31 Python
使用pytorch和torchtext进行文本分类的实例
2020/01/08 Python
Python编写单元测试代码实例
2020/09/10 Python
记一次python 爬虫爬取深圳租房信息的过程及遇到的问题
2020/11/24 Python
加拿大约会网站:EliteSingles.ca
2018/01/12 全球购物
美国最大的无人机经销商:DroneNerds
2018/03/20 全球购物
计算机应用专业应届毕业生中文求职信范文
2013/11/29 职场文书
小组合作学习反思
2014/02/18 职场文书
财产公证书格式
2014/04/10 职场文书
教师节随笔
2015/08/15 职场文书
2016年党员岗位承诺书
2016/03/24 职场文书
A22国内电台短波广播频率表
2022/05/10 无线电