SpringBoot快速入门笔记（6）

文章目录

Axios网络请求

Axios网络请求

1、简介

项目开发中，前端页面需要的数据往往要从服务器端获取，这必然涉及到和服务器的通信

Axios基于promise网络请求库，作用于node.js和浏览器中；在浏览器端使用XMLHttpRequests发送网络请求，并能自动完成JSON数据的转换

安装：npm install axios

2、导入

在终端下载

可以选择在特定组件导入，也可以全局导入，在main.js中

javascript 复制代码

import axios from 'axios'

3、网络请求

可以在官方文档查看使用案例

这里使用我们之前写好的UserController的后端，用浏览器测试下localhost/user/findAll接口😀{后端端口我定义的是80}

可以看到还是正常拿到了数据，我们其实是通过浏览器输入发送的请求，这里采用axios帮我们发送网络请求，例如在App.vue组件中我们让其在创建时就发送请求并打印

可以F12看到findAll爆红了，请求不到，这是由于我们没有说明这个端口，准确的来说应该是http://localhost:80/user/findAll🤓

修改后刷新继续查看，发现还是爆红，打开控制台看报错原因

javascript 复制代码

created:function(){
    axios.get("http://localhost:80/user/findAll").then(function(response){
      console.log(response)
    })			 }

4、跨域问题

上面的报错其实是跨域问题

为了保证浏览器的安全，不同源的客户端脚本在没有明确授权下，不能读写对方资源，称为同源策略（Sameoriginpolicy）

同源：两个页面具有相同的协议，主机和端口号

所以我们要解决这个问题，就是授权即可😮

CORS（Cross-Origin Resource Sharing）由W3C指定的一种跨域资源共享技术标准，目的就是为了解决前端的跨域请求==>让后端实现CORS接口

在Spring Boot中配置CORS：

①全局配置：可以添加配置类CorsConfig 实现 WebMvcConfigurer接口

②局部配置：在控制器前添加@CrossOrigin

由于我们这里只是测试UserController，所以单独注解即可

重启项目，可以发现这次访问到数据了 😎

5、数据渲染

我们拿到数据后，可以把数据渲染到页面上

这里新建AxiosTest.vue组件，从elementUI官网拉一个表格过来使用，删掉tableData的东西

javascript 复制代码

<template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </template>

  <script>
    export default {
      data() {
        return {
          tableData: []
        }
      }
    }
  </script>

为了避免多次导入，我们这里还是在全局配置main.js中加上import axios from 'axios'

在新组建里重新编写，并将数据赋值：

发现还是报错了，这里涉及到js作用域的问题，只需要使用箭头函数就行：

可以发现这一次没有报错，注意我们的数据参数是id,username,password,birthday，将AxiosTest组件的表格参数变一下

javascript 复制代码

<template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="username"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="password"
        label="密码">
      </el-table-column>
      <el-table-column
        prop="birthday"
        label="生日">
    </el-table>
  </template>

浏览器运行发现数据已经渲染到页面表格中了😜

6、全局配置

每个组件都要导入axios所以我们在main.js中导入，这串http字符串其实也可以简化，在main.js中：

javascript 复制代码

import axios from 'axios'
axios.defaults.baseURL="http://localhost:80"
Vue.prototype.$http = axios

再对应修改AxiosTest组件里的东西，用$http指代axios，依旧正常渲染数据🤓