angular開發中對請求數據層的封裝

時間 2019-12-20

標籤 angular 開發請求數據封裝欄目 AngularJS 简体版

原文原文鏈接

代碼地址以下：
http://www.demodashi.com/demo/11481.htmljavascript

1、本章節僅僅是對`angular4`項目開發中數據請求封裝到`model`中

僅僅是在項目angular4項目部署結構的基礎上擴展了,根據javaweb項目開發分層來講命名service可能會好點,可是爲了避免與angular4中自己就有的服務想衝突,本人取名爲model與數據層打交道的html

2、項目結構

3、本章節使用到的技術點

一、封裝了帶頭部信息的(可能出於安全考慮CSRF攻擊類的,或者python-web開發就必需要帶tockend頭信息)
二、簡單的封裝了get和post請求的基礎模型
三、把基礎模型的類注入到項目開發中的接口模型中
四、form表單提交數據僅僅是利用的模板局部變量的方式獲取輸入框的值
五、使用代理解決開發過程當中跨域的問題
六、使用express搭建一個後端服務器
七、node服務器對mySQL數據庫的查詢與增長數據

4、重要代碼描述

一、基礎模型代碼的封裝java

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

二、項目的根目錄中建立proxy.conf.json解決跨域問題node

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

三、關於代理解決跨域的注意點請參考

四、關於get請求獲取數據的模型python

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

五、在組件的component.ts中直接調用模型中的方法就能夠git

// 直接調用get請求數據的方法
getDate(): void {
    this.getService.getData().subscribe(data => {
        console.log(data);
    });
}

六、能夠從控制檯上查看給請求頭添加的內容github

5、關於`post`請問的封裝

一、服務器代碼web

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:"註冊成功"
            });
        }
    })
});

二、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開發中對請求數據層的封裝express