vue/配置axios(前后端数据连通/api接口的调用)

1.创建apis文件

2.写入调用的api地址且暴露出去。

javascript 复制代码
import httpInstance from '@/utils/http';

export  function getHomeNav() {
  return httpInstance({
    url: 'http://10.0.11.91:91/dailyreport/getdailyreportall',
  })
}

3.创建文件编写拦截器

代码部分

javascript 复制代码
//axios基础封装
import axios from 'axios';
import { ElMessage } from 'element-plus';

// 创建axios实例,可以发起请求获得响应的实例。
const httpInstance = axios.create({
  //baseURL: 'http://localhost:8080', // 请求的基础路径
  timeout: 5000 // 请求超时时间
});

// 请求拦截器
httpInstance.interceptors.request.use(
  config => {
    // 在发送请求之前做一些处理
    return config;
  }, e => Promise.reject(e)
    // 请求错误时做一些处理
);  
// 响应拦截器
httpInstance.interceptors.response.use(res => res.data, e => {
        if(e.response.status === 401){
            ElMessage.error('请先登录')
            //跳转登录页面
        }else{
            ElMessage({type:'error',message:'请重新登录'+e})
        }
            return Promise.reject(e)
        })
export default httpInstance;
//用于在其他位置调用

4.写验证函数

javascript 复制代码
import './assets/main.css'

import { createApp } from 'vue'
//路由工具
import router from './router'
// import ElementPlus from 'element-plus'
// import 'element-plus/dist/index.css'
import App from './App.vue'

//测试接口函数
// @ts-ignore
import {getHomeNav} from '@/apis/testAPI'


getHomeNav().then((res: any) => {
  console.log(res)
})


const app = createApp(App)
app.use(router)
// app.use(ElementPlus)
app.mount('#app')

5.打开服务器端添加一个注解允许进行跨域访问

复制代码
@CrossOrigin

接口部分代码

java 复制代码
package com.log.controller;

import com.log.entites.DailyReport;
import com.log.entites.Result;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.client.RestTemplate;

import java.util.ArrayList;

@RestController
@CrossOrigin
@RequestMapping("dailyreport")
public class Daily_reportController_Consumer {

    public static final String REST_URL_PREFIX = "http://127.0.0.1:9001";

    @Autowired//装配
    private RestTemplate restTemplate;//与提供者传递数据的工具

    @GetMapping("getdailyreportall")
    public Result getUserinfoall(){
        return restTemplate.getForObject(REST_URL_PREFIX+"/dailyreport/getdailyreportall",Result.class);
    }


    @GetMapping("getdailyreportbyid")
    public Result getDailyReportByid(Integer id){
        return restTemplate.getForObject(REST_URL_PREFIX+"/dailyreport/getdailyreportbyid?id="+id,Result.class);
    }

    @GetMapping("getdailyreportusid")
    public Result selectDailyReportidUsid(Integer id){
        System.out.println(id);
        return restTemplate.getForObject(REST_URL_PREFIX+"/dailyreport/getdailyreportusid?id="+id,Result.class);
    }

    @GetMapping("getdailyreportdate")
    public Result<ArrayList<DailyReport>> selectDailyReportDate(String date){
        return restTemplate.getForObject(REST_URL_PREFIX+"/dailyreport/getdailyreportdate?date="+date,Result.class);
    }

    @GetMapping("getdailyreportdateup")
    public Result<ArrayList<DailyReport>> selectDailyReportDateUp(){
        return restTemplate.getForObject(REST_URL_PREFIX+"/dailyreport/getdailyreportdateup",Result.class);
    }

    @GetMapping("getdailyreportdatedown")
    public Result<ArrayList<DailyReport>> selectDailyReportDateDown(){
        return restTemplate.getForObject(REST_URL_PREFIX+"/dailyreport/getdailyreportdatedown",Result.class);
    }
    @GetMapping("getdailyreportdatstatus")
    public Result<ArrayList<DailyReport>> selectDailyReportStatus(String status){
        return restTemplate.getForObject(REST_URL_PREFIX+"/dailyreport/getdailyreportdatstatus?status="+status,Result.class);
    }
    //添加
    @PostMapping("setdailyreport")
    public Result<DailyReport> insertDaolyReport(@RequestBody DailyReport dailyreport){

        return restTemplate.postForObject(REST_URL_PREFIX+"/dailyreport/setdailyreport",dailyreport,Result.class);
    }
    //修改
    @PostMapping("updailyreportbyid")
    public Result<DailyReport> updateDaolyReportByid(@RequestBody DailyReport dailyreport) {
        return restTemplate.postForObject(REST_URL_PREFIX + "/dailyreport/updailyreportbyid",dailyreport, Result.class);
    }

    @GetMapping("deletdailyreportbyid")
    public Result<DailyReport> deleteDaolyReport(Integer id){
        return restTemplate.getForObject(REST_URL_PREFIX+"/dailyreport/deletdailyreportbyid?id="+id,Result.class);
    }

    @GetMapping("deletdailyreportall")
    public Result<DailyReport>deleteDaolyReportusAll(Integer id){
        return restTemplate.getForObject(REST_URL_PREFIX+"/dailyreport/deletdailyreportall?id="+id,Result.class);
    }
    @PostMapping("upevaluatio")
    public Result<DailyReport>updateDaolyReportevaluation(@RequestBody DailyReport dailyreport){
        return restTemplate.postForObject(REST_URL_PREFIX+"/dailyreport/upevaluatio",dailyreport,Result.class);
    }
}

6.启动服务测试

启动后端服务和前端服务访问网址,打开网页控制台出现数据库传来的数据。

api接口调用成功。

相关推荐
白萝卜弟弟4 分钟前
【MySQL】MySQL中的函数之JSON_ARRAY_APPEND
数据库·mysql·json
尘浮生16 分钟前
Java项目实战II基于SpringBoot的客户关系管理系统(开发文档+数据库+源码)
java·开发语言·数据库·spring boot·后端·微信小程序·小程序
2401_8576100318 分钟前
企业OA系统:Spring Boot技术实现与管理
java·spring boot·后端
飞滕人生TYF20 分钟前
java 集合 菱形内定义封装类 而非基本数据类型 原因解释 详解
java
繁依Fanyi23 分钟前
在 Spring Boot 中实现多种方式登录(用户名、手机号、邮箱等)的不正经指南
java·spring boot·后端
Dragon Wu23 分钟前
前端框架 react 性能优化
前端·javascript·react.js·性能优化·前端框架·react
夕阳产业——JAVA,入坑=失业25 分钟前
泛型擦除是什么?
java·开发语言
Gungnirss1 小时前
前后端分离,后端拦截器无法获得前端请求的token
java·前端·token
codeMaster__hyd1 小时前
使用IDEA构建springboot项目+整合Mybatis
java·linux·centos·intellij-idea·intellij idea·1024程序员节
l138494274511 小时前
Java综合练习
java·开发语言·算法