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: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开发中对请求数据层的封装

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

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