Angular4+NodeJs+MySQL 入門-05 接口調用

時間 2019-11-11

標籤 angular4+nodejs+mysql angular nodejs mysql 入門接口調用欄目 AngularJS 简体版

原文原文鏈接

接口調用

今天講一下，若是在前端頁面上經過調用後臺接口，返回來的數據。把前面的幾章結合起來。
這裏全部用的代碼在 https://github.com/xiaotuni/angular-map-http2。css

簡單介紹一下 https://github.com/xiaotuni/angular-map-http2 這個項目吧html

分前端用的是Angular4寫的: 前端分兩部分一部分是WebApp移動端，一部分是接口管理能夠算是PC端；前端
後臺管理接口部分用得是NodeJs寫的：主要核心功能就是規則解析，全部每個接口的規則信息都保存到sys_rule這張表的content裏了，裏面以是JSON格式存放的規則信息。前端要添加什麼接口，PC端添加接口規則就能夠了，而後前端就能夠進行調用了。目前簡單的增、刪、改、查及條件判斷基本上沒有什麼問題。接口管理界面大概就是這個樣子，界面很醜，哈哈~java

好了如今開始正式來調用了。以用戶登陸來說吧，git

首先是畫一個登陸界面

html ->login.html內容

<xtn-navbar [(Title)]="__Title"></xtn-navbar>
<div class="loginCss">
  <div class="top"></div>
  <div class="ctrl">
    <div class="username">
      <input type="text" placeholder="Enter username" required [(ngModel)]="UserInfo.username">
    </div>
    <div class="password">
      <input type="password" placeholder="Enter password" required [(ngModel)]="UserInfo.password">
    </div>
  </div>
  <div class="operator">
    <div class="btn" (click)="submit()">
      <div class="login">
        login
      </div>
    </div>
    <div class="btn">
      <div class="forget" (click)="forgetPassword()">
        forget
      </div>
    </div>
  </div>
</div>

Css –>login.scss 內容

.loginCss {
  padding: 10px;

  .ctrl {
    margin-top: 20vh;
    position: relative;

    .username {
      position: relative;
      display: flex;

      input {
        border: 1px solid #f5f5f5;
        padding: 5px 10px;
        border-radius: 5px;
        flex: 1;
        font-size: 1rem;
      }
    }

    .password {
      @extend .username;
      margin-top: 2rem;
    }
  }

  .operator {
    display: flex;

    padding: 2rem;

    .btn {
      margin: 5px;
      flex: 1;
      text-align: center;
      padding: 5px 10px;

      > div {
        padding: 5px 10px;
        border: 1px solid #999;

        &:hover {
          border: 1px solid blue;
        }
      }
    }
  }
}

最後就是typescript了–>login.ts內容

import { Component, OnInit, Output, Input } from '@angular/core';
import { Utility, ServiceHelper, routeAnimation, BaseComponent } from '../Core';
import * as CryptoJS from 'crypto-js';

@Component({
  selector: 'xtn-manage-login',
  templateUrl: './login.html',
  styleUrls: ['./login.scss'],
  animations: [routeAnimation],   // 頁面切換動畫
  providers: [ServiceHelper]      // 注入一個service
})
export class Login extends BaseComponent implements OnInit {
  public UserInfo: any;

  /** * Creates an instance of Login. * @param {ServiceHelper} sHelper service用於接口調用等 * @memberof Login */
  constructor(private sHelper: ServiceHelper) {
    super();
    this.UserInfo = { username: 'admin', password: 'admin@163.com' };
  }

  ngOnInit() {
  }

  /** * 點擊登陸按鈕 * * @memberof Login */
  submit() {
    const data = Object.assign({}, this.UserInfo);
    data.password = CryptoJS.MD5(data.password).toString();
    this.sHelper.UserInfo.Login(data).then(() => {
      const { Params } = Utility.$GetContent(Utility.$ConstItem.UrlPathInfo) || { Params: {} };
      const { IsGoBack } = Params || { IsGoBack: 0 };
      if (!!Number(IsGoBack)) {
        Utility.$GoBack();
      } else {
        Utility.$ToPage(Utility.$ConstItem.UrlItem.ManagerDashboard, {});
      }
    }, () => { });
  }

  forgetPassword() {
    console.log('forgetPassword');
  }
}

Utility–>經常使用的一些方法都在這裏,
ServiceHelper–>全部Service都在這裏能夠找到,
routeAnimation,–>WebApp在路由切換頁面過濾效果
BaseComponent –> 主要是實現路由切換的時候，要實現一個鉤子動做，因此添加了這個，其它頁面只要繼承它就能夠了，就不用每一個界面都去實現鉤子動做了。

ServiceHelper 裏的代碼

這個裏面的代碼其實很簡單的，就是一個入口，有的時候一個組件要引用好多service，在構造函數裏要好多 constructor(private service1: Service1,…) {}。我就把這些都放到一個裏去。裏面的代碼如：github

import { Injectable } from '@angular/core';
import { Client } from './Core';
import { ApiManagerService } from './ApiManager';
import { UserInfoService } from './UserInfo';

@Injectable()
export class ServiceHelper {
  public ApiManager: ApiManagerService;
  public UserInfo: UserInfoService;
  constructor() {
    this.ApiManager = new ApiManagerService(Client);
    this.UserInfo = new UserInfoService(Client);
  }
}

因爲是用戶登陸，因此用到了UserInfoService這個類。typescript

UserInfoService.ts，用戶登陸，註冊，用戶詳情等接口調用及數據處理類

import { Utility } from './Core';

export class UserInfoService {
  public UserInfo: any;
  public Users: any[];

  constructor(private Client) {
  }

  /** * 用戶登陸 * * @param {*} obj * @returns {Promise<any>} * @memberof UserInfoService */
  Login(obj: any): Promise<any> {
    const __List = { actions: { list: [], loading: 'Load', fail: 'Fail', complete: 'Complete' } };
    __List.actions.list.push({
      StateName: 'StateName', Condition: obj,
      promise: (client) => client.post(client.API.UserInfo.Login, { data: obj }),
    });
    const __self = this;
    return this.Client(__List).then((result) => {
      __self.UserInfo = result && result[0] ? result[0] : [];
      // 將token保存下來。
      Utility.$SetContent(Utility.$ConstItem.UserInfo, __self.UserInfo, true);
      return result;
    });
  }
}