Angular4+NodeJs+MySQL 入门-05 接口调用

前端之家收集整理的这篇文章主要介绍了Angular4+NodeJs+MySQL 入门-05 接口调用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

接口调用

今天讲一下,如果在前端页面上通过调用后台接口,返回来的数据。把前面的几章结合起来。 @H_404_3@ 这里所有用的代码https://github.com/xiaotuni/angular-map-http2

简单介绍一下 https://github.com/xiaotuni/angular-map-http2 这个项目吧

  • 分前端用的是Angular4写的: 前端分两部分一部分是WebApp移动端,一部分是接口管理可以算是PC端;

  • 后台管理接口部分用得是NodeJs写的:主要核心功能就是规则解析,所有每一个接口的规则信息都保存到sys_rule这张表的content里了,里面以是JSON格式存放的规则信息。前端要添加什么接口,PC端添加接口规则就可以了,然后前端就可以进行调用了。目前简单的增、删、改、查及条件判断基本上没有什么问题。接口管理界面大概就是这个样子,界面很丑,哈哈~

好了现在开始正式来调用了。以用户登录来讲吧,

首先是画一个登录界面

html ->login.html内容

  1. <xtn-navbar [(Title)]="__Title"></xtn-navbar>
  2. <div class="loginCss">
  3. <div class="top"></div>
  4. <div class="ctrl">
  5. <div class="username">
  6. <input type="text" placeholder="Enter username" required [(ngModel)]="UserInfo.username">
  7. </div>
  8. <div class="password">
  9. <input type="password" placeholder="Enter password" required [(ngModel)]="UserInfo.password">
  10. </div>
  11. </div>
  12. <div class="operator">
  13. <div class="btn" (click)="submit()">
  14. <div class="login">
  15. login
  16. </div>
  17. </div>
  18. <div class="btn">
  19. <div class="forget" (click)="forgetPassword()">
  20. forget
  21. </div>
  22. </div>
  23. </div>
  24. </div>

Css –>login.scss 内容

  1. .loginCss {
  2. padding: 10px;
  3.  
  4. .ctrl {
  5. margin-top: 20vh;
  6. position: relative;
  7.  
  8. .username {
  9. position: relative;
  10. display: flex;
  11.  
  12. input {
  13. border: 1px solid #f5f5f5;
  14. padding: 5px 10px;
  15. border-radius: 5px;
  16. flex: 1;
  17. font-size: 1rem;
  18. }
  19. }
  20.  
  21. .password {
  22. @extend .username;
  23. margin-top: 2rem;
  24. }
  25. }
  26.  
  27. .operator {
  28. display: flex;
  29.  
  30. padding: 2rem;
  31.  
  32. .btn {
  33. margin: 5px;
  34. flex: 1;
  35. text-align: center;
  36. padding: 5px 10px;
  37.  
  38. > div {
  39. padding: 5px 10px;
  40. border: 1px solid #999;
  41.  
  42. &:hover {
  43. border: 1px solid blue;
  44. }
  45. }
  46. }
  47. }
  48. }

最后就是typescript了–>login.ts内容

  1. import { Component,OnInit,Output,Input } from '@angular/core';
  2. import { Utility,ServiceHelper,routeAnimation,BaseComponent } from '../Core';
  3. import * as CryptoJS from 'crypto-js';
  4.  
  5. @Component({
  6. selector: 'xtn-manage-login',templateUrl: './login.html',styleUrls: ['./login.scss'],animations: [routeAnimation],// 页面切换动画
  7. providers: [ServiceHelper] // 注入一个service
  8. })
  9. export class @H_356_301@Login extends @H_356_301@BaseComponent @H_356_301@implements @H_356_301@OnInit {
  10. public UserInfo: any;
  11.  
  12. /** * Creates an instance of Login. * @param {ServiceHelper} sHelper service用于接口调用等 * @memberof Login */
  13. constructor(private sHelper: ServiceHelper) {
  14. super();
  15. this.UserInfo = { username: 'admin',password: 'admin@163.com' };
  16. }
  17.  
  18. ngOnInit() {
  19. }
  20.  
  21. /** * 点击登录按钮 * * @memberof Login */
  22. submit() {
  23. const data = Object.assign({},this.UserInfo);
  24. data.password = CryptoJS.MD5(data.password).toString();
  25. this.sHelper.UserInfo.Login(data).then(() => {
  26. const { Params } = Utility.$GetContent(Utility.$ConstItem.UrlPathInfo) || { Params: {} };
  27. const { IsGoBack } = Params || { IsGoBack: 0 };
  28. if (!!Number(IsGoBack)) {
  29. Utility.$GoBack();
  30. } else {
  31. Utility.$ToPage(Utility.$ConstItem.UrlItem.ManagerDashboard,{});
  32. }
  33. },() => { });
  34. }
  35.  
  36. forgetPassword() {
  37. console.log('forgetPassword');
  38. }
  39. }
  • Utility–>常用的一些方法都在这里,
  • ServiceHelper–>所有Service都在这里可以找到,
  • routeAnimation,–>WebApp在路由切换页面过滤效果
  • BaseComponent –> 主要是实现路由切换的时候,要实现一个钩子动作,所以添加了这个,其它页面只要继承它就可以了,就不用每个界面都去实现钩子动作了。

ServiceHelper 里的代码

这个里面的代码其实很简单的,就是一个入口,有的时候一个组件要引用好多service,在构造函数里要好多 constructor(private service1: Service1,…) {}。我就把这些都放到一个里去。里面的代码如:

  1. import { Injectable } from '@angular/core';
  2. import { Client } from './Core';
  3. import { ApiManagerService } from './ApiManager';
  4. import { UserInfoService } from './UserInfo';
  5.  
  6. @Injectable()
  7. export class ServiceHelper {
  8. public ApiManager: ApiManagerService;
  9. public UserInfo: UserInfoService;
  10. constructor() {
  11. this.ApiManager = new ApiManagerService(Client);
  12. this.UserInfo = new UserInfoService(Client);
  13. }
  14. }

由于是用户登录,所以用到了UserInfoService这个类。

UserInfoService.ts,用户登录注册用户详情等接口调用及数据处理类

  1. import { Utility } from './Core';
  2.  
  3. export class UserInfoService {
  4. public UserInfo: any;
  5. public Users: any[];
  6.  
  7. constructor(private Client) {
  8. }
  9.  
  10. /** * 用户登录 * * @param {*} obj * @returns {Promise<any>} * @memberof UserInfoService */
  11. Login(obj: any): Promise<any> {
  12. const __List = { actions: { list: [],loading: 'Load',fail: 'Fail',complete: 'Complete' } };
  13. __List.actions.list.push({
  14. StateName: 'StateName',Condition: obj,promise: (client) => client.post(client.API.UserInfo.Login,{ data: obj }),});
  15. const __self = this;
  16. return this.Client(__List).then((result) => {
  17. __self.UserInfo = result && result[0] ? result[0] : [];
  18. // 将token保存下来。
  19. Utility.$SetContent(Utility.$ConstItem.UserInfo,__self.UserInfo,true);
  20. return result;
  21. });
  22. }
  23. }

接口调用的地址在哪里呢?是: (client) => client.post(client.API.UserInfo.Login,{ data: obj }),而这个又在哪里西的呢,在ApiClient.ts文件里。之前的篇幅说到了,怎么配置。点击登录时,错误密码时出错。 @H_404_3@

后台接口配置下一篇再说了,只需要添加一条规则文件记录就可以了。

猜你在找的Angularjs相关文章