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接口调用成功。