Angular对接Spring Get、Put、Post、Delete请求

前言

随着教程的进行，除了感觉一些单元测试和涉及到一些验证方面的代码有点难搞，发现其他的功能代码都还是挺好弄明白的，之前教程上的文件都不是道去哪找，现在看见代码就知道它大概在哪个文件，相信再过不久，单元测试也能像之前的代码那样信手拈来。

问题

之前也算搞明白了前后台对接的方式，无非就是前台发送请求，后台接收请求，返回想要的值，当然前提是前台要订阅，否则不发送请求，下面以学生的新增方法为例
Student.service.ts

public save(student: Student): Observable<Student> {  
  const url = 'http://localhost:8080/Student';  
 return this.httpClient.post<Student>(url, student);  
  
}

student/add.component.ts

onSubmit(): void {  
  console.log(this.formGroup.value);  
  console.log(this.klass);  
 this.student = this.formGroup.value;  
 this.student.klass = this.klass;  
  console.log(this.student);  
 this.studentService.save(this.student).subscribe((student:Student) =>{  
    console.log(student);  
 this.linkToIndex.nativeElement.click();  
  })  
}

StudentController.java

 @PostMapping  
 @ResponseStatus(HttpStatus.CREATED)  
public Student save(@RequestBody Student student){    
  return studentService.save(student);  
}

StudentServiceImpl.java

@Override  
public Student save(Student student) {  
    this.studentRepository.save(student);  
 return student;    
}

相对于新增数据使用的Post请求、更新数据使用的Put请求以及删除使用的Delete请求来说，查询数据使用的Get方法使用的十分广泛，甚至在一个实体类内要使用多次，为了区分，他们会加上一些参数，还可能是一些路径，但是，我们没有声明前台的请求就对应后台的某个方法，举个例子吧：

@PostMapping("login")  
public boolean login(@RequestBody Teacher teacher){  
    return this.teacherService.login(teacher.getUsername(), teacher.getPassword());  
}

昨天遇到这段代码确实迷茫了，像之前的代码，里面放的都是参数，就像下面这样，里面放置了“id”这个参数，但是上面的是啥，一开始也以为是参数，但是仔细看了前台发现并没有给它定义，这是凭空出现的一个“参数”，然后就蒙圈了，后来晚上请教了一下潘老师，发现这是个路径，也就是说前台必须访问“http://localhost:8080/Teacher/login”才能和后台完成数据的交互，而有“{}”的才是参数。

@DeleteMapping("{id}")  
public void delete(@PathVariable Long id)  
{  
    String sql = String.format("delete from teacher where id = %s" ,id);  
 this.jdbcTemplate.update(sql);  
}

那么问题来了，对于前面的add,edit以及delete方法来说，我没有指定路由，但是它怎么实现对接的呢。

实践

有疑惑只靠想只不能解决问题的，就算真的猜明白了，自己也会保留怀疑的态度，只有亲手实践了，才会信服
由于代码出现了一些问题，没有办法运行测试了，只能看代码去理解了：

public onSubmit(): void {  
    const url = 'http://localhost:8080/Teacher';  
 const teacher = {  
      name: this.name,  
  username: this.username,  
  email: this.email,  
  sex: this.sex  
  };  
console.log(teacher);  
this.httpClient.post(url,teacher)  
  .subscribe(() =>{  
    console.log('添加成功');  
 this.appComponent.ngOnInit();  
 this.router.navigate(\['./../'\],{relativeTo:this.route});  
  
  },(response)=>{  
    this.showMessage('请求发生错误');  
  console.log('请求发生错误',response);  
  });  
  }

以上对应的是教师的新增方法，有参数的直接传参数，没参数的就是原路径，之所以访问index、add、edit、delele才会实现对接，是因为前台的设置，当点击按钮时跳转到对应的路由时，才会执行对应的方法，而登录则是直接访问

login(username: string, password: string): Observable<boolean\>{  
  const url = 'http://localhost:8080/Teacher/login';  
 return this.httpClient.post<boolean\>(url,{username,password});  
}

结论

实现访问的方法真的挺灵活的，就像上一次博客写的新增成功后跳转到首页的方法，可以直接定义路由跳转，也可以写一个隐藏按钮，模拟点击跳转，真的挺灵活的，自己的思维还是需要提升。

完结

上周的浏览器大小写区分问题总算得到了解决，本来想搜英文，奈何自己的英语都还给了高中老师，找来找去在知乎上找到了一篇像样的文章，也算找到了合理的解释吧

• 协议：最常见的就是HTTP跟HTTPS，除了这个还有FTP文件传输协议等，这里是不区分大小写的
• 域名：域名(Domain Name)是需要通过域名系统(DNS)成功解析才能够正常访问到对应的IP地址，域名的命名规则之一就是：在域名中不区分大小写
• 路径：路径部分是否区分大小写，则要看该网址对应的后台是如何实现的

你在意过每天输入的网址是否区分大小写么？ 张业生