SpringBoot整合Angular应用第三弹-渲染RestAPI数据

上篇文章我们讲解了Angular去和SpringBoot进行整合操作.这篇文章我们主要讲解使用整合后的Angular去解析SpringBoot返回的RestAPI数据到页面.

• 创建UserController数据接口用于生产模拟测试数据

/**
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 * <p>
 * http://www.apache.org/licenses/LICENSE-2.0
 * <p>
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
package com.edurt;
 
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
 
import java.util.concurrent.ConcurrentHashMap;
 
/**
 * UserController <br/>
 * 描述 : UserController <br/>
 * 作者 : qianmoQ <br/>
 * 版本 : 1.0 <br/>
 * 创建时间 : 2018-03-13 下午2:29 <br/>
 * 联系作者 : <a href="mailTo:shichengoooo@163.com">qianmoQ</a>
 */
@RestController
@RequestMapping(value = {"user"})
public class UserController {
 
    /**
     * 获取用户集合
     *
     * @return 用户集合数据
     */
    @RequestMapping(value = "list")
    ConcurrentHashMap<String, String> getUserList() {
        ConcurrentHashMap<String, String> userMap = new ConcurrentHashMap<String, String>();
        userMap.put("user1", "user1");
        userMap.put("user2", "user2");
        userMap.put("user3", "user3");
        userMap.put("user4", "user4");
        return userMap;
    }
 
}
复制代码

• 添加angular后台数据交互服务AppService文件

/**
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 * <p>
 * http://www.apache.org/licenses/LICENSE-2.0
 * <p>
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import {Injectable} from '@angular/core';
import {Http} from '@angular/http';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
 
/**
 * 用户服务
 */
@Injectable()
export class AppService {
 
  constructor(private http: Http) {
  }
 
  getUserList(): Promise<any> {
    const url = '/user/list';
    return this.http.get(url)
      .toPromise()
      .then(response => response.json())
      .catch(this.handleError);
  }
 
  private handleError(error: Response | any) {
    let errMsg: string;
    console.error(errMsg);
    return Promise.reject(errMsg);
  }
 
}
复制代码

• 修改appmodule引入数据服务和httpmodule

import {AppService} from "./app.service";
import {HttpModule} from "@angular/http";
 
@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ..
    HttpModule
  ],
  providers: [
    AppService
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}
复制代码

• 修改app组件文件进行数据渲染

import {Component} from '@angular/core';
import {AppService} from "./app.service";
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
 
  public userList;
 
  constructor(private appService: AppService) {
    this.userList = this.appService.getUserList();
    console.log(this.userList);
  }
 
}
复制代码

由于我们直接打印到了控制台所以运行服务打开浏览器查看控制台即可看到从后台获取的数据.