使用vite创建vue3脚手架和element plus组件使用axios向后端发送请求获取数据，后端使用Spring boot

使用vite创建vue3脚手架和element plus组件使用axios向后端发送请求获取数据，后端使用Spring boot

1.使用vite创建脚手架

npm init vite-app project-name

2.下载与运行

npm install
npm run dev

3.安装element

npm install element-plus --save

4.完整引入element plus，此段代码写在main.js中

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

5.引入axios

安装axios
npm install axios

//下面这些代码写在main.js中
import axios from "axios"
//全局注册，之后可在其他组件中发送数据，跨域访问
axios.defaults.baseURL = 'http://localhost:8080' 
//axios挂载到vue实例
app.config.globalProperties.$axios = axios

6.此段代码为发送例子

  axios
    .post("/login", { username: username.value, password: password.value }//发送的json数据)
    .then((res) => {
      if (res.data.msgId == "A001") {
        ElMessage.error("用户名不存在");
      } else if (res.data.msgId == "A002") {
        ElMessage.error("密码错误");
      } else {
        ElMessage.success({
          message: "登录成功",
          type: "success",
        });
      }
    })
    .catch((error) => {
      ElMessage.error("查询失败");
    });

7.后端解决跨域，新建一个配置类

   @Configuration
public class WebConfig implements WebMvcConfigurer{

 @Override
 public void addCorsMappings(CorsRegistry registry) {
 	registry.addMapping("/**")
 			.allowedOriginPatterns("*")
 			.allowCredentials(true)
 			.allowedMethods("GET", "POST", "DELETE", "PUT")
 			.maxAge(3600);
 }
}