angular开发中对请求数据层的封装

代码地址如下：
http://www.demodashi.com/demo/11481.html

一、本章节仅仅是对`angular4`项目开发中数据请求封装到`model`中

仅仅是在项目angular4项目部署结构的基础上扩展了,根据javaweb项目开发分层来说命名service可能会好点,但是为了不与angular4中本身就有的服务想冲突,本人取名为model与数据层打交道的

二、项目结构

三、本章节使用到的技术点

1、封装了带头部信息的(可能出于安全考虑CSRF攻击类的,或者python-web开发就必须要带tockend头信息)
2、简单的封装了get和post请求的基础模型
3、把基础模型的类注入到项目开发中的接口模型中
4、form表单提交数据仅仅是利用的模板局部变量的方式获取输入框的值
5、使用代理解决开发过程中跨域的问题
6、使用express搭建一个后端服务器
7、node服务器对mySQL数据库的查询与增加数据

四、重要代码描述

1、基础模型代码的封装

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/Rx';@Injectable()
export class ServiceBaseService {constructor(private http: Http) { }/*** @param {string} url地址* @param {any} [options]可选提交的参数* @param {any} [header]可选设置的头信息* @memberof ServiceBaseService* @title: 封装一个get请求的基础类*/getData(url: string, options?: any, myheaders?: any): Observable<any> {// 配置请求头const myHeaders: Headers = new Headers();// tslint:disable-next-line:forinfor (const key in myheaders) {myHeaders.append(key, myheaders[key]);};url += (url.indexOf('?') < 0 ? '?' : '&') + this.param(options);return this.http.get(url, { headers: myHeaders }).map(res => res.json());}/*** @param url地址* @param options提交的数据* @param myheaders可选参数设置头* @title:封装一个post请求数据的*/postData(url: string, options: any, myheaders?: any): Observable<any> {const myHeaders: Headers = new Headers();myHeaders.append('Content-Type', 'application/json');// tslint:disable-next-line:forinfor (const key in myheaders) {myHeaders.append(key, myheaders[key]);};return this.http.post(url, options, { headers: myHeaders });}/*** @param {any} data* @returns* @memberof ServiceBaseService* @title:封装一个序列化get请求的参数的方法*/param(data): string {let url = '';// tslint:disable-next-line:forinfor (const k in data) {const value = data[k] !== undefined ? data[k] : '';url += `&${k}=${encodeURIComponent(value)}`;}return url ? url.substring(1) : '';}
}

2、项目的根目录中创建proxy.conf.json解决跨域问题

{"/wiseoper/**": {"target": "http://localhost:3000","secure": false}
}

3、关于代理解决跨域的注意点请参考

4、关于get请求获取数据的模型

import { Injectable } from '@angular/core';
import { ServiceBaseService } from 'app/model/service-base.service';@Injectable()
export class GetServiceService {constructor(private serviceBase: ServiceBaseService) { }// 获取数据  getData() {const url = '/wiseoper/';return this.serviceBase.getData(url, {name: 'hello', age: 20}, {QQ: '332904234'});}
}

5、在组件的component.ts中直接调用模型中的方法就可以

// 直接调用get请求数据的方法
getDate(): void {this.getService.getData().subscribe(data => {console.log(data);});
}

6、可以从控制台上查看给请求头添加的内容

五、关于`post`请问的封装

1、服务器代码

router.post("/wiseoper/register",(req,res)=>{//如果是post提交数据就用req.body接收  console.log(req.body);db("insert into cms_user(username,password) values(?,?)",[req.body.username,req.body.password],(err,data)=>{console.log(err);if (err){res.json({code:0,info:"注册失败"});}console.log(data);if (data){res.json({code:1,info:"注册成功"});}})
});

2、angular4中对post请求的封装

/*** @param url地址* @param options提交的数据* @param myheaders可选参数设置头* @title:封装一个post请求数据的*/
postData(url: string, options: any, myheaders?: any): Observable<any> {const myHeaders: Headers = new Headers();myHeaders.append('Content-Type', 'application/json');// tslint:disable-next-line:forinfor (const key in myheaders) {myHeaders.append(key, myheaders[key]);};return this.http.post(url, options, { headers: myHeaders });
}

angular开发中对请求数据层的封装

代码地址如下：
http://www.demodashi.com/demo/11481.html

注：本文著作权归作者，由demo大师发表，拒绝转载，转载需要作者授权

angular开发中对请求数据层的封装相关推荐

php利用文件做数据储存,PHP_PHP文件读写操作之文件写入代码，在PHP网站开发中，存储数据通 - phpStudy...
PHP文件读写操作之文件写入代码在PHP网站开发中,存储数据通常有两种方式,一种以文本文件方式存储,比如txt文件,一种是以数据库方式存储,比如Mysql,相对于数据库存储,文件存储并没有什么优势, ...
python web开发-flask访问请求数据request
Request对象在web应用的开发中是一个非常重要的对象,主要用来获取用户发来的请求数据. 常用属性参考:http://docs.jinkan.org/docs/flask/api.html#fla ...
python示波器波形数据_Python在嵌入式开发中的应用——数据示波器
Python在嵌入式开发中的应用引言在嵌入式开发中我们常常要进行数据分析.算法设计.原型验证.自动化测试.辅助工具设计,每个环节的工作效率对整体的开发都非常重要.选用一个好的辅助开发工具是非常必要 ...
Android开发中使用Bundle数据传值
Bundle是Android开发中的一个类,用于Activity之间传输数据用,Bundle就是一个专门用于导入Intent传值的包. 1.MainActivity.xml 传输数据(4步) //设置 ...
native数据类型 react_react-native中的请求数据
很多移动应用都需要从远程地址中获取数据或资源.你可能需要给某个 REST API 发起 POST 请求以提交用户数据,又或者可能仅仅需要从某个服务器上获取一些静态内容. 使用 Fetch React ...
Angular 开发中的 Source Map
SourceMaps Demystified (.js.map) 当我们构建 Angular 应用程序时,会创建 js 文件和 .js.map(源映射文件)文件. 从本质上讲,源映射是一个 JSON ...
java开发中jdbc连接数据库的操作代码
2019独角兽企业重金招聘Python工程师标准>>> JDBC连接数据库 •创建一个以JDBC连接数据库的程序,包含7个步骤: 1.加载JDBC驱动程序: 在连接数据库之前,首先要 ...
前端开发中处理csv数据，也许你可以试试这个方法
前言在前端开发过程中,经常会用到一些静态的csv数据,最普通的处理方式就是把数据包含在自己的项目中,跟随项目统一部署到服务器,使用时直接去请求服务器的csv数据.但是这样处理有几个劣势: 前端拿到的 ...
vue异步数据报错_vue中异步请求数据，异步请求还没完成，文件就执行了就会报错，怎么解决？...
vue中,axios异步加载数据,但是有的文件里面需要用到异步拿到的数据,数据还没拿到,文件已经执行了,这时候数据就是空,就会报错,这个问题怎么解决? 具体表现: 我这边vue项目是进入页面的时候会调 ...

angular开发中对请求数据层的封装

一、本章节仅仅是对`angular4`项目开发中数据请求封装到`model`中

二、项目结构

三、本章节使用到的技术点

四、重要代码描述

五、关于`post`请问的封装

angular开发中对请求数据层的封装相关推荐

最新文章

热门文章

angular开发中对请求数据层的封装

一、本章节仅仅是对angular4项目开发中数据请求封装到model中

二、项目结构

三、本章节使用到的技术点

四、重要代码描述

五、关于post请问的封装

angular开发中对请求数据层的封装相关推荐

最新文章

热门文章

一、本章节仅仅是对`angular4`项目开发中数据请求封装到`model`中

五、关于`post`请问的封装