一、前端环境
前端使用的所有插件及软件版本相关信息
"dependencies": {
"axios": "^1.7.5",
"core-js": "^3.8.3",
"vue": "^3.2.13",
"vue-router": "^4.0.3",
"vuex": "^4.0.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-router": "~5.0.0",
"@vue/cli-plugin-vuex": "~5.0.0",
"@vue/cli-service": "~5.0.0"
},
"system": {
"nodejs": "^16.20.2",
"npm": "^8.19.4"
}
1、创建前端项目
使用Web Storm创建vue项目
使用方向键选择第三个,所有需要的功能自行选择,选择完毕敲击回车
使用空格键在需要的功能前打上*
号,选择完毕敲击回车
选择vue版本
根据自己的需求选择接下来的几个选项
完成后等待相关依赖下载完毕,项目创建成功,下图为项目创建成功目录
yarn.lock
文件为全局安装yarn命令生成,可以根据自己需求自行安装
2、安装axios
# NPM
npm install axios
# Yarn
yarn add axios
# pnpm
pnpm install axios
3、在src目录下创建utils
文件夹,并创建自己的工具类文件,此处创建的为dongxueUtils.js
//dongxueUtils.js
/**
* GET请求参数处理
* @param {*} params 参数
*/
export function tansParams(params) {
let result = ''
for (const propName of Object.keys(params)) {
const value = params[propName];
var part = encodeURIComponent(propName) + "=";
if (value !== null && typeof (value) !== "undefined") {
if (typeof value === 'object') {
for (const key of Object.keys(value)) {
if (value[key] !== null && typeof (value[key]) !== 'undefined') {
let params = propName + '[' + key + ']';
var subPart = encodeURIComponent(params) + "=";
result += subPart + encodeURIComponent(value[key]) + "&";
}
}
} else {
result += part + encodeURIComponent(value) + "&";
}
}
}
return result
}
4、在src目录下创建config
文件夹,并创建axios.js
文件
//axios.js
import axios from 'axios';
// 此处引入上面创建的工具类中的tansParams方法
import { tansParams } from "@/utils/dongxueUtils";
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 创建axios实例
const myAxios = axios.create({
timeout: 5000 // 请求超时时间
});
// request拦截器
myAxios.interceptors.request.use(config => {
// get、delete请求映射params参数
if (config.method === 'GET' || config.method === 'DELETE') {
let url = config.url + '?' + tansParams(config.params);
url = url.slice(0, -1);
config.params = {};
config.url = url;
}
// post、put请求参数处理
if (config.method === 'POST' || config.method === 'PUT') {
url: config.url;
data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data;
}
// 更多配置...
return config;
},
error => {
// 请求错误处理
console.error('Request error:', error);
return Promise.reject(error);
}
);
// response 拦截器
myAxios.interceptors.response.use(
response => {
const res = response.data;
// 可以在这里根据返回的数据进行一些处理
// 比如根据状态码具体处理
return res;
},
error => {
console.error('Response error:', error);
return Promise.reject(error);
}
);
export default myAxios;
5、在src目录下创建api
文件夹,并创建temp.js
文件对请求方法进行封装
//temp.js
import myAxios from "@/config/axios";
// 测试查询
export function tempTest(query) {
return myAxios({
url: '/api/test',
method: 'get',
params: query
})
}
6、在vue.config.js文件中配置后端服务器信息
//vue.config.js
const {defineConfig} = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
// 开发服务器配置
devServer: {
// 自动打开浏览器
open: true,
// 用于配置开发服务器的代理,以解决开发过程中的跨域问题。
proxy: {
'/api': {
// 目标服务器的地址。这里设置为你的后端 API 服务器地址。
target: 'http://localhost:8080',
// 设置为true表示允许跨域。它会将请求头中的Host和Origin字段设置为目标服务器的地址,使得目标服务器认为请求来自它自己的域名。
changeOrigin: true,
// 用于重写请求路径。例如,当请求路径为/api/some-endpoint时,通过pathRewrite将其重写为/some-endpoint,然后发送到目标服务器。
pathRewrite: {
'^/api': ''
}
}
}
}
})
7、修改AboutView.vue
文件测试是否成功
//AboutView.vue
<template>
<div class="about">
<h1>This is an about page</h1>
<button @click="myTest">跳转页面</button>
<h1>前端获取到的数据 --- {{ tempData }}</h1>
</div>
</template>
<script>
import {tempTest} from "@/api/temp";
import {ref} from "vue";
export default {
setup() {
let tempData = ref();
function myTest() {
tempTest().then((data) => {
this.tempData = data;
console.log(data)
console.log("-----------------------")
console.log("测试完成")
}
)
}
return {myTest, tempData};
}
};
</script>
二、后端环境
1、创建后端项目
使用IntelliJ IDEA创建后端SpringBoot项目
选择需要的依赖
等待加载完成,项目创建成功,下图为项目创建成功目录
2、在公司域名包下创建controller文件及TestController类文件,修改配置文件后缀,删除无用文件夹及文件
3、修改application.yml
配置文件及TestController
类文件内容
//application.yml
server:
port: 8080
//TestController.java
package com.dongxue.controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
/**
* @author dongxue
* @date 2024/8/30
*/
@RestController
@RequestMapping
public class TestController {
@GetMapping("/test")
public String test(){
System.out.println("已接收到前端请求");
return "后端接收到前端数据";
}
}