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运行耗时操作的延时显示方法
Nov 19 Javascript
TimergliderJS 一个基于jQuery的时间轴插件
Dec 07 Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
Sep 14 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
Apr 02 Javascript
深入理解JavaScript中的浮点数
May 18 Javascript
详解vuex 中的 state 在组件中如何监听
May 23 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
Mar 06 Javascript
Vuex的actions属性的具体使用
Apr 14 Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
Mar 31 Javascript
jquery简易手风琴插件的封装
Oct 13 jQuery
基于element-ui封装表单金额输入框的方法示例
Jan 06 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
百事可乐也出咖啡了 双倍咖啡因双倍快乐
2021/03/03 咖啡文化
php中批量修改文件后缀名的函数代码
2011/10/23 PHP
win7下memCache的安装过程(具体操作步骤)
2013/06/28 PHP
用PHP来计算某个目录大小的方法
2014/04/01 PHP
thinkPHP+phpexcel实现excel报表输出功能示例
2017/06/06 PHP
jquery使用淘宝接口跨域查询手机号码归属地实例
2013/11/28 Javascript
js使用eval解析json实例与注意事项分享
2014/01/18 Javascript
Javascript中replace()小结
2015/09/30 Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
2015/11/16 Javascript
Bootstrap Paginator分页插件使用方法详解
2016/05/30 Javascript
JavaScript使用ZeroClipboard操作剪切板
2017/05/10 Javascript
解决Vue打包之后文件路径出错的问题
2018/03/06 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
2019/09/14 Javascript
Vue实现input宽度随文字长度自适应操作
2020/07/29 Javascript
原生js实现购物车功能
2020/09/23 Javascript
jQuery实现手风琴特效
2021/01/11 jQuery
JavaScript实现点击出现子菜单效果
2021/02/08 Javascript
[48:02]Ti4循环赛第三日 VG vs Liquid和NEWBEE vs DK
2014/07/12 DOTA
朴素贝叶斯算法的python实现方法
2014/11/18 Python
python实现发送和获取手机短信验证码
2016/01/15 Python
Python制作爬虫抓取美女图
2016/01/20 Python
Python按行读取文件的实现方法【小文件和大文件读取】
2016/09/19 Python
python实现共轭梯度法
2019/07/03 Python
Python Web框架之Django框架cookie和session用法分析
2019/08/16 Python
Pycharm如何导入python文件及解决报错问题
2020/05/10 Python
利于python脚本编写可视化nmap和masscan的方法
2020/12/29 Python
美特斯邦威官方商城:邦购网
2016/10/13 全球购物
优秀员工自荐书
2013/12/19 职场文书
高中生家长寄语大全
2014/04/03 职场文书
2014年药店店长工作总结
2014/11/17 职场文书
2015年党员个人工作总结
2015/05/13 职场文书
2015年统战工作总结
2015/05/19 职场文书
高中团支书竞选稿
2015/11/21 职场文书
2019消防宣传标语!
2019/07/10 职场文书
考教师资格证不要错过的4个最佳时机
2019/07/17 职场文书
人生感悟经典句子
2019/08/20 职场文书