组合式api的全局挂载与使用，对接口

src/components/App.vue

@@ -8,6 +8,8 @@
 	<Methods></Methods>
 	<Separator></Separator>
 	<ModularApi></ModularApi>
+	<Separator></Separator>
+	<Send></Send>
 </template>
 
 <script>
@@ -17,6 +19,7 @@
 	import Data from './Data.vue';
 	import Methods from './Methods.vue';
 	import ModularApi from './ModularApi.vue';
+	import Send from './SendRequest.vue';
 
 	// 组件就是一个普通的js对象
 	export default{
@@ -31,6 +34,7 @@
 			Data,
 			Methods,
 			ModularApi,
+			Send,
 		},
 	};
 </script>

src/components/Data.vue

@@ -30,7 +30,7 @@ export default {
         getData() {
             let id =Math.random()*10;
             //2.使用axios 进行post请求
-            this.$request.post("TestController/testParams", {
+            this.$request.post("/TestController/testParams", {
                 id
             }).then((res) => {
                 //请求成功的回调函数

src/components/Methods.vue

@@ -51,7 +51,7 @@ export default {
             // console.log('globalToken :>> ', this.$global.jwtToken);
 
             // // 成功请求接口并拿到数据 :D
-            // this.$request.post("Reserve/HistoryRecord", {})
+            // this.$request.post("/Reserve/HistoryRecord", {})
             // .then((res)=>{
             //     console.log(res);
             //     this.historyArray = res.data;

src/components/ModularApi.vue

@@ -1,5 +1,5 @@
 <template>
-    <h1>组合式Api</h1>
+    <h3>组合式Api</h3>
     <div>{{ s }}</div>
     <div>{{ person}}</div>
     <button @click="setAge">改变年龄</button>

src/components/SendRequest.vue

@@ -0,0 +1,35 @@
+<template>
+    <h3>请求展示</h3>
+    <button @click="AvailableRoom">查看可用琴房</button>
+    <br>
+    <button @click="CreateReserve">预约</button>
+</template>
+
+<script setup>
+    import { inject, onMounted } from "vue";
+    const request = inject('$request');
+
+    function AvailableRoom() {
+        request.post('/ReserveController/availableRoom', {
+            StartTime: '2021-10-01 08:00:00',
+            EndTime: '2021-10-01 09:00:00',
+        }).then((res) => {
+            console.log(res);
+        }).catch((err) => {
+            console.log(err);
+        });
+    }
+
+    function CreateReserve() {
+        request.post('/ReserveController/createReserve', {
+            StartTime:'2021-10-01 08:00:00',
+            EndTime:'2021-10-01 09:00:00',
+            StudentId:1,
+            RoomId:1,
+        }).then((res)=>{
+            console.log(res);
+        }).catch((err)=>{
+            console.log(err);
+        })
+    }
+</script>

src/config/axiosConfig.js

@@ -2,9 +2,9 @@ import axios from 'axios'
 import global from '../common/global.js';
 
 // java项目路径
-// axios.defaults.baseURL = 'http://localhost:8080/api/'
+axios.defaults.baseURL = 'http://localhost:8080/api'
 // c#项目路径
-axios.defaults.baseURL = 'https://localhost:7082/api/'
+// axios.defaults.baseURL = 'https://localhost:7082/api'
 // 携带 cookie，对目前的项目没有什么作用，因为我们是 token 鉴权
 axios.defaults.withCredentials = false
 // 请求头，headers 信息

src/main.js

@@ -9,8 +9,8 @@ import global from './common/global.js'
 const app = createApp(App);
 // 将 axios 挂载为 app 的全局自定义属性
 // 每个组件可以通过 this 直接访问到全局挂载的自定义属性
-app.config.globalProperties.$request = axios;
-app.config.globalProperties.$global = global;
+app.provide('$request',axios);
+app.provide('$global',global);
 window.vm = app.mount('#app');