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

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

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

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))
   });

 }
}

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

(0)

相关推荐

  • AngularJS实现与后台服务器进行交互的示例讲解

    AngularJS作为一个非常实用的前端框架,我们知道在AngularJS中有自己的Model和Controler. angularJS中所有的请求都是通过js定义的Controler来完成的,也就是我们完全脱离了后台, 将整个应用程序的压力交给了客户端来完成.但是在实际开发的时候我们难免需要访问后台或者 与数据库进行交互,这个时候我们就需要一个类似于JQAJAX的方法来进行数据访问. 在angularJS中提供了一种与远程Http服务器交互的服务,$http $http是angularJS中的

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

    1.描述 无论是使用angularjs做前端或是结合ionic混合开发移动端开发app都需要与后台进行交互,而angular给我提供了httpModule模块供我们使用.今天就展现一个http的封装和使用的一个具体流程. 2. HttpModule引入 找到app.module.ts文件 import { NgModule, ErrorHandler } from '@angular/core'; import { BrowserModule } from '@angular/platform-

  • web中拖拽排序和java后台交互实现方法示例

    一.业务需求 1,在后台的管理界面通过排序功能直接进入排序界面 2,在排序界面能够人工的手动拖动需要排序的标题,完成对应的排序之后提交 3,在app或者是前端就有对应的排序实现了 本文将详细介绍web拖拽排序和java后台交互的相关内容,下面话不多说了,来一起看看详细的介绍吧 二.页面展示 将整体页面效果展示出来之后如图所示(页面点击确定之后的效果是与java后台进行交互的): 三.设计思路: 后台:如果需要将排序的结果保存到数据库,那么必须要修改数据库中对应的起码一个字段(排序的序号sort)

  • 微信小程序以ssm做后台开发的实现示例

    微信小程序任何的语言都可以做后台,现在微信小程序推出云函数,做后台也可以.但是自己感觉想要完整的后台,做后台用java和php更好点.下面以典型的例证给大家做一下讲解,注册. 1.wmxl 微信小程序的前段代码(提交数据主要以from表单实现的) <view class="btn-submit"> <button formType="reset">请完善注册信息</button> </view> <form ca

  • react后台系统最佳实践示例详解

    目录 一.中后台系统的技术栈选型 1. 要做什么 2. 要求 3. 技术栈怎么选 二.hooks时代状态管理库的选型 context redux recoil zustand MobX 三.hooks的使用问题与解决方案 总结 一.中后台系统的技术栈选型 本文主要讲三块内容:中后台系统的技术栈选型.hooks时代状态管理库的选型以及hooks的使用问题与解决方案. 1. 要做什么 我们的目标是搭建一个适用于公司内部中后台系统的前端项目最佳实践. 2. 要求 由于业务需求比较多,一名开发人员需要负

  • 详解基于Vue-cli搭建的项目如何和后台交互

    这段时间在折腾有vue做开发,之前也用过,但是大部分都是用一些简单的数据绑定.踏了很多坑,总结了一下,希望对刚刚开始折腾的小伙伴有帮助. 常见问题一:用vue-cli搭好环境以后,本地域名和测试环境的域名不一致,怎么跨域访问后台接口? 在config目录下找到index.js,在dev下添加如下: proxyTable: { '/api':{//指定以/api开头的接口都走代理 target:'https://yhhdtest.moguyun.com',//需要连接后台接口的域名 changeO

  • 复选框和Struts2后台交互代码详解

    本文研究的主要是Struts框架中复选框的相关内容.复选框在web开发中用的非常广泛,具体介绍如下. 案例 如下图,当前为用户选中的水果为"香蕉",点击按钮,跳转到修改界面进行修改. 跳转到修改界面后要回显用户的选择(香蕉),然后由用户再次进行勾选,如图: 前台界面: <body> <form action="checBoxAction_test.action" method="post"> 请选择您喜欢的水果:<b

  • angularjs 动态从后台获取下拉框的值方法

    angularjs 动态从后台获取下拉框的值,只要是使用repeat指令,后台提供的是一个list的对象,里面包含value和显示的值,如下: js文件: //职务等级和档次/军衔等级和档次,需要从后台获取:poslist,type:2/3/4/5 $scope.getDyActivityInforItems=function(){ serviceData.getData('inforinput/getAllSelectValueByType','POST',{ type:2 }).then(f

  • layui之数据表格--与后台交互获取数据的方法

    jsp或html <table id="userList" lay-filter="userList"></table> js //用户列表 var tableIns = table.render({ elem: '#userList', url : 'userAction_findAll.action', cellMinWidth : 95, page : true, height : "full-125", limit

  • python编写第一个交互程序步骤示例教程

    Input()函数编写 1.编写一个稍微复杂一点的程序.使用Input()函数编写一个请用户输入名字的程序. (1)打开IDLE开发环境,然后选择“File”菜单下面的“New File”命令,新建一个新的编辑文件. 新建的编辑文件. (2)保存文件,选择“File”菜单下的“Save As”命令. 提示:编程过程中,要养成及时保存文件的习惯. (3)在打开的对话框中选择文件保存的位置,并在“文件名”栏中输入文件的名字,最后单击“保存”按钮. (4)在刚才保存的文件脚本里输入如下图所示的内容.

随机推荐