Angular前端与springBoot后端的http请求交互

红太狼 2022-05-16 05:05 391阅读 0赞

# 前言： #

开发模式采用前后端分离，前端用angular(这里指的是angular2,不要和angularjs混淆了),后端采用springBoot,主要介绍下angular与后端接口调用问题。

# 思路： #

其实官网都有调用，只是一些地方要注意到，而往往就是一些小细节或者小问题卡你半天，因此技术点无大小。

# 正题： #

前端angular定义了一个服务文件，专门放置与后端接口交互的方法接口，方法接口中采用的是angular的  HttpClient 的get，put,post,delete方法 参数各异，但大多数第一个参数就是后端url，第二个参数视情况而定，详细的可以去angular的官网文档中去查看阅读，后面针对增、删、改、查会给出具体代码；

angular HttpClient官方参考API：[Angular HttpClient API][]

后端采用springboot，搞技术的人都不陌生，唯一强调一点，也是困扰我半天的地方，就是因为前段会存在跨域问题，所以在后端的接口定义上要加上几个配置注释，此外接收参数时，参数上要加上@RequestBody 配置说明，否则参数实体对象接收为空

# 具体代码如下： #

## 前段代码： ##

### 一，定义前段对象实体 ###

export class UserInfo {
      id: number;
      userName: string;
      password: string;
    
      // public constructor(
      //   fields?: {
      //     id: number,
      //     userName: string,
      //     password: string
      //   }) {
      //   // tslint:disable-next-line:curly
      //   if (fields) Object.assign(this, fields);
      // }
    
      // public constructor(name: string) {
      //   this.userName = name;
      // }
    
    
      getFullName(): string {
        return this.id + ' ' + this.userName;
      }
    }

### 二：定义前段接口调用类service.service.ts(为服务类，可用angular命令生成) ###

ng generate service service

然后填充service代码如下：

import {Injectable} from '@angular/core';
    import {HttpClient, HttpHeaders, HttpParams} from '@angular/common/http';
    import {Observable, of} from 'rxjs';
    import {UserInfo} from './userInfo';
    import {logger} from 'codelyzer/util/logger';
    import {log} from 'util';
    import {catchError} from 'rxjs/operators';
    import {callHooks} from '@angular/core/src/render3/hooks';
    
    const httpOptions = {
      headers: new HttpHeaders({'content-Type': 'application/json'})
    };
    
    @Injectable({
      providedIn: 'root'
    })
    export class ServiceService {
      // private static METHOD_DELTE = 'DELETE';
      // private static METHOD_POST = 'POST';
      // private static METHOD_GET = 'GET';
      // private static METHOD_PUT = 'PUT';
    
      private serviceUrl = 'http://127.0.0.1:8080';
    
    
      constructor(private httpClient: HttpClient) {
      }
    
      // 获取列表数据
      getUserList(): Observable<UserInfo[]> {
        return this.httpClient.get<UserInfo[]>(this.serviceUrl + '/findUserList');
      }
    
      // 获取单个数据
      getOneUser(id: number): Observable<UserInfo> {
        const params = new HttpParams({
          fromString: 'id=' + id
        });
        const findhttpOptions = {
          headers: new HttpHeaders({'content-Type': 'application/json'}),
          params: params
        };
        return this.httpClient.get<UserInfo>(this.serviceUrl + '/findOneUser', findhttpOptions)
          .pipe(catchError(this.handleError<UserInfo>('getOneUser id' + id)));
      }
    
      // 添加一个新用户
      addUser(user: UserInfo): Observable<UserInfo> {
        return this.httpClient.post<UserInfo>(this.serviceUrl + '/save', user, httpOptions)
          .pipe(catchError(this.handleError<UserInfo>('addUser')));
      }
    
      // 删除一个用户
      deleteUser(user: UserInfo | number): Observable<UserInfo> {
        const id = typeof user === 'number' ? user : user.id;
        const url = `${this.serviceUrl}/${id}`;
        const delhttpOptions = {
          headers: new HttpHeaders({'content-Type': 'application/json'}),
          body: user
        };
        return this.httpClient.delete<UserInfo>(url, delhttpOptions)
          .pipe(catchError(this.handleError<UserInfo>('deleteUser')));
      }
    
      // 更新数据
      updateUser(user: UserInfo): Observable<any> {
        return this.httpClient.put(this.serviceUrl + '/update', user, httpOptions)
          .pipe(catchError(this.handleError('updateUser id=' + user.id)));
      }
    
      /**
       * Handle Http operation that failed.
       * Let the app continue.
       * @param operation - name of the operation that failed
       * @param result - optional value to return as the observable result
       */
      private handleError<T>(operation = 'operation', result?: T) {
        return (error: any): Observable<T> => {
    
          // TODO: send the error to remote logging infrastructure
          console.error(error); // log to console instead
    
          // TODO: better job of transforming error for user consumption
          log(`${operation} failed: ${error.message}`);
    
          // Let the app keep running by returning an empty result.
          return of(result as T);
        };
      }
    }

### 三： 当然要用httClient,就必须在跟组件app.module.ts下导入： ###

import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    
    import { AppComponent } from './app.component';
    import {HttpClientModule} from '@angular/common/http';
    import { UserInfoComponent } from './user-info/user-info.component';
    import { AppRoutingModule } from './/app-routing.module';
    import { UserInfoDetailComponent } from './user-info-detail/user-info-detail.component';
    import {FormsModule} from '@angular/forms';
    
    @NgModule({
      declarations: [
        AppComponent,
        UserInfoComponent,
        UserInfoDetailComponent
      ],
      imports: [
        BrowserModule,
        HttpClientModule,
        AppRoutingModule,
        FormsModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

### 四：在使用组件中调用service中的各方法: ###

我的应用组件为user-info.component.ts

import {Component, OnInit} from '@angular/core';
    import {UserInfo} from '../userInfo';
    import {ServiceService} from '../service.service';
    
    @Component({
      selector: 'app-user-info',
      templateUrl: './user-info.component.html',
      styleUrls: ['./user-info.component.css']
    })
    export class UserInfoComponent implements OnInit {
      results: string[]; // 返回结果 字符串数组
      myUserList: UserInfo[]; // 人员列表
      oneUser: UserInfo; // 单用户对象
      rest: string; // 返回结果 字符串格式
      constructor(private service: ServiceService) {
      }
    
      ngOnInit() {
        this.findUserList();
      }
    
      // 查询用户列表
      findUserList(): void {
        this.service.getUserList().subscribe(data => this.myUserList = data);
      }
    
      // 增加用户
      add(userName: string): void {
        userName = userName.trim();
        if (!userName) {
          return;
        }
        this.service.addUser({userName} as UserInfo)
          .subscribe(user => {
            this.myUserList.push(user);
          });
      }
    
      // 删除用户
      delete(user: UserInfo): void {
        this.myUserList = this.myUserList.filter(h => h !== user);
        this.service.deleteUser(user).subscribe();
      }
    
    }

至此，前段代码基本完毕：

### 五：后端spring代码： ###

定义 UserInfo 实体对象

package com.sxsj.demo.baseInfo.entity;
    
    import javax.persistence.Entity;
    import javax.persistence.GeneratedValue;
    import javax.persistence.Id;
    
    @Entity
    public class UserInfo {
        public UserInfo(String userName, String password) {
            this.userName = userName;
            this.password = password;
        }
    
        public UserInfo() {
        }
    
        @Id
        @GeneratedValue
        private Integer id;
    
        private String userName;
    
        private String  password;
    
        public Integer getId() {
            return id;
        }
    
        public void setId(Integer id) {
            this.id = id;
        }
    
        public String getUserName() {
            return userName;
        }
    
        public void setUserName(String userName) {
            this.userName = userName;
        }
    
        public String getPassword() {
            return password;
        }
    
        public void setPassword(String password) {
            this.password = password;
        }
    }

###  六，为解决跨域问题，添加CorsConfig.java类 ###

package com.sxsj.demo;
    
    
    import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
    import org.springframework.web.filter.CorsFilter;
    import org.springframework.web.servlet.config.annotation.CorsRegistry;
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
    
    /**
     * 对系统后台进行跨域访问进行配置
     */
    @Configuration
    public class CorsConfig extends WebMvcConfigurerAdapter {
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/**")
                    .allowedOrigins("*")// 1 设置访问源地址
                    .allowCredentials(true)// 2 设置访问源请求头
                    .allowedMethods("GET", "POST", "DELETE", "PUT") // 3 设置访问源请求方法
                    .maxAge(3600);
        }
    //    @Bean
    //    public CorsFilter corsFilter() {
    //        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    //        source.registerCorsConfiguration("/**", buildConfig()); // 4 对接口配置跨域设置
    //        return new CorsFilter(source);
    //    }
    
    }

### 七：定义controller接口类 UserInfoController.java类 ###

package com.sxsj.demo.baseInfo.controller;
    
    import com.sxsj.demo.baseInfo.dto.UserInfoDto;
    import com.sxsj.demo.baseInfo.entity.UserInfo;
    import com.sxsj.demo.baseInfo.service.UserInfoService;
    import org.springframework.beans.BeanUtils;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.web.bind.annotation.*;
    import org.springframework.web.servlet.ModelAndView;
    
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.util.ArrayList;
    import java.util.Date;
    import java.util.List;
    import java.util.Map;
    //@CrossOrigin(origins = "http://localhost:4200", maxAge = 3600)
    @RestController
    public class UserInfoController {
        @Autowired
        private UserInfoService userInfoService;
    
        @GetMapping(value="/list")
        public ModelAndView list(Map<String,Object> map){
            List<UserInfo> list = this.userInfoService.findAlls();
            map.put("userinfos",list);
            return new ModelAndView("baseinfo/userInfo",map);
        }
        @GetMapping(value="/findOneUser")
        public Object  findOneUser(HttpServletRequest request,HttpServletResponse response){
            String id = (String) request.getParameter("id");
            UserInfo userInfo = this.userInfoService.findById(Integer.parseInt(id));
            if(null != userInfo ){
                return userInfo;
            }
            return null;
        }
        @CrossOrigin
        @GetMapping(value="/findUserList")
        public Object  findUserList(HttpServletRequest request,HttpServletResponse response){
            String name = (String)request.getParameter("_page");
            System.out.println(">>>>>>>>>>>>>>>>>>"+name);
    //        response.setHeader("Access-Control-Allow-Origin","*");
            List<UserInfo> list = this.userInfoService.findAlls();
            return list;
        }
    //    @CrossOrigin
        @ResponseBody
        @PostMapping(value="/save")
        public UserInfo save(HttpServletResponse response, @RequestBody  UserInfo userInfo){
    //        response.setHeader("Access-Control-Allow-Origin","*");
            return this.userInfoService.save(userInfo);
        }
        //    @CrossOrigin
        @ResponseBody
        @PutMapping(value="/update")
        public UserInfo update(HttpServletResponse response, @RequestBody  UserInfo userInfo){
    //        response.setHeader("Access-Control-Allow-Origin","*");
            return this.userInfoService.save(userInfo);
        }
        @ResponseBody
        @DeleteMapping
        public void delete(HttpServletResponse response, @RequestBody  UserInfo userInfo){
            if(null == userInfo) return;
            this.userInfoService.deleteById(userInfo.getId());
        }
    }

ok，后端后面的service接口就是基本的springboot Service层接口定义了，这里就不贴了。

以上就是angular和后端springboot 通过http请求的交互。

[Angular HttpClient API]: https://angular.cn/api/common/http/HttpClient