前后端交互的问题

1.跨域问题

在测试前后端交互的过程中发现了一个小细节，就是在未启动服务器时先运行vue项目的话，即便后面重开服务器也是不能解决跨域问题的。因为运行vue项目后会发现vue前端的端口是8080，但是服务器的端口定义的是8080，也就是说前端的端口被后端占用了。

服务器设置的端口

运行vue项目的的端口

 这时候如果点击登录进行前后端交互就会发现报跨域的错误。

跨域报错

 解决方案：这时候重启vue项目是没用的，因为服务器仍然不是8080端口，所以两个都要终止并且先启动服务器，再运行vue项目。

这时候会看到vue项目变成8081

 这时候输入正确的账户和密码就可以登录进去。

登录成功

2.出现500

500是内部服务器错误，一般都是后端程序出现问题。在后端对应的try打断点查看进行调试查看是哪一步出现了问题。如果中间有涉及到方法就可以进入方法体内查看问题。一直检查到哪一步跳到异常为止。

3.出现404

404意味着请求发送出去了，但是目的地址或者接口可能不存在，所以一般都是路径错误，出现这种情况就要检查路径是否正确。

3.没有实现功能

首先要确定请求是否已经成功发送，可以通过检查-->网络查看状态，不论是200还是500，都证明请求是发送过去了。如果请求没有发送过去，就检查前端发送请求的代码。

确定请求发送过去仍没有实现功能，就查看响应。可以在检查-->网络-->响应查看是否返回数据，

如果没有可用的响应的数据或者显示的null，就证明后端没有响应成功，就检查后端响应的代码。

如果确定响应过来了，那就是没有接收到。就检查前端接收响应的代码。有两种情况：一种是接收该数据的变量名或者其他方面写错，导致没有接收到数据。一种是绑定或者其他格式写错，和接收部分没有绑定成功。 总而言之就是接收响应的代码可能写错了。

4.检查后端

在可能出现问题的地方打上断点，然后进行调试。检查步骤和出现500一样，这里要做强调的是前端有多个get请求的时候，每次出现一个，点击Resume Program按钮会显示下一个get请求。

比如做的管理系统，新增功能的对话框的专业选择框也需要一个mark对应的字符串，

 现在显示的就是新增的，然后点击前面所述的按钮，可以看到变成了list的请求

 至于为什么先是majorlist，是根据检查-->网络的请求顺序来的，点击学生管理时可以看到先是majorlist，再是list