1天搞定SpringBoot+Vue全栈开发 (7)Axios网络请求

简介: 1天搞定SpringBoot+Vue全栈开发 (7)Axios网络请求

1.Axios的使用

5f94f865dc264dfa912be0d338bd1c73.jpg

https://www.axios-http.cn/

c7d9dc4fa0e74b23857168206aa85316.jpg

33cd3a376f9048618e4b9034905e512e.jpg

ff26518b59884eaf9caac6ab34c9aeb8.jpg

08319e8ce35644d98d741e83787e89ac.jpg

2.与vue整合

095099a90d6c4ebb9c381459dcdf2378.jpg

App.vue:

<template>
  <div id="app">
    <Movie
      v-for="movie in movies"
      :key="movie.id"
      :title="movie.title"
      :rating="movie.rating"
    ></Movie>
    <Hello></Hello>
  </div>
</template>
 
<script>
import Movie from "./components/Movie.vue";
import Hello from "./components/Hello.vue";
import axios from "axios";
 
export default {
  name: "App",
  data: function () {
    return {
      movies: [
        { id: 1, title: "金刚狼1", rating: 9.1 },
        { id: 2, title: "金刚狼2", rating: 9.2 },
        { id: 3, title: "金刚狼3", rating: 9.3 },
      ],
    };
  },
  created: function () {
    axios.get("http://localhost:8088/user/findAll").then((res) => {
      console.log(res.data);
    });
  },
  mounted: function () {
    console.log("App被挂载完毕");
  },
  components: {
    Movie,
    Hello,
  },
};
</script>
 
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>


Movie.vue:

<template>
  <div>
    <h1>{{ title }}</h1>
    <span>{{ rating }}</span>
    <button @click="funSc">点击收藏</button>
  </div>
</template>
<script>
export default {
  name: "Movie",
  props: ["title", "rating"],
  data: function () {
    return {};
  },
  created: function () {
    console.log("Movie组件被创建了");
  },
  methods: {
    funSc() {
      alert("收藏成功");
    },
  },
};
</script>


测试:

84b2ee9de6064ddaa786cd9feb60795e.jpg

发送网络请求:

打开idea中的mpdemo,并把后端端口改为8088(因为前端已经占用了8080端口)

server.port=8088

启动idea项目:

61c8caa0f2c644dfac1e1b5f24e1f4e7.jpg

此时,一个是8080端口,一个是8088端口,会出现跨域问题


3.跨域

35d7b3f5379a4d91a5700034f35f3751.jpg

eeecb6f1161a475a864d4e9e7ff9b83a.jpg

555c02403fe7445790dfb5cc46f997aa.jpg

03349c32dd1a43ab973cbe731d65af69.jpg

d20d4b3707c641a39ab21a17ad7484b9.jpg

231f6994a4d84a7e96633fb7de3acc71.jpg

4bda4f6725134f2892b953584e48f788.jpg

86517bba0350454cbee886b491b83912.jpg

在8080端口就可以接收到后端的信息

在UserController中加入@CrossOrigin

测试:此时在8080端口就可以接收到后端的信息了

e16e60aed77d45f2bfafc49f66c27abf.jpg

拿到后端的数据并显示在前端

Hello.vue:

<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      :row-class-name="tableRowClassName"
    >
      <!-- 第一列 -->
      <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="birthday" label="生日"> </el-table-column>
    </el-table>
    <i class="fa fa-camera-retro"></i>
    <el-date-picker v-model="value1" type="birthday" placeholder="选择日期">
    </el-date-picker>
  </div>
</template>
 
<script>
import axios from "axios";
export default {
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
  },
  // 组件被创建的时候,该函数自动调用
  created: function () {
    axios.get("http://localhost:8088/user/findAll").then((response) => {
      this.tableData = response.data;
    });
  },
  data() {
    return {
      tableData: [],
      value1: "",
    };
  },
};
</script>
 
<style>
.el-table .warning-row {
  background: oldlace;
}
 
.el-table .success-row {
  background: #f0f9eb;
}
</style>


App.vue:

<template>
  <div id="app">
    <Movie
      v-for="movie in movies"
      :key="movie.id"
      :title="movie.title"
      :rating="movie.rating"
    ></Movie>
    <Hello></Hello>
  </div>
</template>
 
<script>
import Movie from "./components/Movie.vue";
import Hello from "./components/Hello.vue";
import axios from "axios";
 
export default {
  name: "App",
  data: function () {
    return {
      movies: [
        { id: 1, title: "金刚狼1", rating: 9.1 },
        { id: 2, title: "金刚狼2", rating: 9.2 },
        { id: 3, title: "金刚狼3", rating: 9.3 },
      ],
    };
  },
  created: function () {},
  mounted: function () {
    console.log("App被挂载完毕");
  },
  components: {
    Movie,
    Hello,
  },
};
</script>
 
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
 


测试:此时可以拿到后端的数据并显示在前端了

720af9b928f24a25a29e885989b10661.jpg

相关文章
|
6天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
|
6天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的武汉市公交路线查询系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的武汉市公交路线查询系统的详细设计和实现(源码+lw+部署文档+讲解等)
|
6天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的旅游攻略系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的旅游攻略系统的详细设计和实现(源码+lw+部署文档+讲解等)
|
6天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue个人博客系统设计和实现(源码+LW+部署讲解)
基于SpringBoot+Vue个人博客系统设计和实现(源码+LW+部署讲解)
23 7
|
6天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的成人教育APP的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的成人教育APP的详细设计和实现(源码+lw+部署文档+讲解等)
|
6天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue个人健康管理网站设计和实现(源码+LW+部署讲解)
基于SpringBoot+Vue个人健康管理网站设计和实现(源码+LW+部署讲解)
22 7
|
6天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的大学生勤工助学管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的大学生勤工助学管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
|
6天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
21 7
|
6天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的多功能智能手机阅读APP的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的多功能智能手机阅读APP的详细设计和实现(源码+lw+部署文档+讲解等)
|
6天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的在线招聘平台的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的在线招聘平台的详细设计和实现(源码+lw+部署文档+讲解等)