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

一、本章节仅仅是对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:forin
        for (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:forin
        for (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:forin
        for (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:forin
    for (const key in myheaders) {
        myHeaders.append(key, myheaders[key]);
    };
    return this.http.post(url, options, { headers: myHeaders });
}

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