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

视频课程地址: Spring Boot 整合 Angular 应用

• 创建 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:[e-mail]">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后台数据交互服务

/**
 * 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);
  }

}

此时运行服务打开浏览器查看控制台即可看到从后台获取的数据