个人技术总结-Ajax实现前后端交互

[222000120_林奕鑫]

这个作业属于哪个课程	软件工程-23年春季学期
这个作业要求在哪里	软件工程实践总结&个人技术总结
这个作业的目标	<个人技术总结>
其他参考文献	《构建之法》

一、技术概述

运用vue.js Ajax实现前后端交互。我们小组是采用的vue技术来实现前端，其中前后端交互的部分，我们选择使用Ajax技术来向后端发送post和get请求。

二、技术详述

1.发送post请求附带参数

发送Post请求时，参数可直接赋在请求中

this.$axios.post('http://124.71.33.160:8000/reward/getRewardDetail', {
      r_id: this.r_id,
    })
       
    var socket = new SockJS('http://124.71.33.160:8000/ws');
    this.stompClient = Stomp.over(socket);
    this.stompClient.connect({}, this.onConnected, this.onError);
  },

2.发送Get请求附带参数

发送Post请求时，参数需用params打包

this.$axios.get('http://124.71.33.160:8000/Worker/getApplyReward', {
            params: {
              u_id: this.user.u_id
            }
          })
             
        },

3.获取返回值

用'.then(response=>{}'指向返回值

 .then(response => {
                // console.log(response.data[0])
                // 处理响应数据

                this.Tasks = response.data.data;
                console.log(response.data);
              })
              .catch(error => {
                // 处理错误
                console.log(error);
              });

三、技术使用中遇到的问题和解决过程

1.后端需要添加前缀允许前段访问

2.使用不同的请求传递参数时，要用不同的传参方法

四、总结

使用Vue写前端时，对复用性较高的部分一定要留足修改空间，各个部件之间也要协调好前端格式。Ajax技术使用时要注意请求方法的不同