spring boot + vue3+element plus 项目搭建

news2025/4/16 21:19:10

一、vue 项目搭建

1、创建 vue 项目

vue create vue-element

说明：创建过程中可以选择路由，也可也可以不选择，可以通过 npm install 安装

vue 项目目录结构
在这里插入图片描述
说明：api 为自己创建的文件夹，router 选择路由模块会自动创建

router下的index.js文件（配置路由的文件）

import { createRouter, createWebHashHistory } from 'vue-router'

const routes = [
  {
    path: '/', //路由路径
    name: 'login',
    component: () => import(/* webpackChunkName: "about" */ '@/views/login.vue')//访问的页面
  },
]
// 创建路由
const router = createRouter({
  history: createWebHashHistory(),
  routes
})
// 导出路由
export default router

views下的 login.vue

<template>
  <div class="content">
    <div class="login">
      <span class="font">智慧车库管理</span>
      <div>
        账 号：<el-input
          v-model="user.account"
          style="width: 240px"
          placeholder="请输入账号"
        />
      </div>
      <div style="margin-top: 20px">
        密 码：<el-input
          v-model="user.password"
          style="width: 240px"
          placeholder="请输入密码"
          type="password"
          show-password
        />
      </div>

      <div class="register">
        <div>
          <span>注册账号</span>
        </div>
        <div>
          <span>验证码登录</span>
        </div>
      </div>

      <div @click="login">
        <el-button type="success" round size="large" class="loginbut">登录</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive , getCurrentInstance} from "vue";

const user = reactive({ account: "", password: "" });

const {proxy} = getCurrentInstance()

const login = async() => {
  console.log(proxy.$urls.m().login);
  const obj = {account:user.account,password:user.password}
  const res = await new proxy.$request(proxy.$urls.m().login,obj).modepost()


};
</script>

<style scoped>
.content {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: aliceblue;
}
.login {
  display: flex;
  background-color: #ffffff;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  transition: transform 0.3s ease;
  width: 600px;
  height: 400px;
  flex-direction: column;
  align-items: center;
}
.login:hover {
  transform: translateY(-10px); /* 鼠标滑过时向上浮动10px */
}
.font {
  font-size: 24px;
  font-family: Arial, Helvetica, sans-serif;
  margin-bottom: 50px;
  margin-top: 30px;
}
.register {
  width: 50%;
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}
.loginbut {
  width: 200px;
  margin-top: 40px;
}
</style>

main.js 中全局引入路由

import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // 引入路由
import ElementPlus from 'element-plus' // 引入element，引入之前需要安装 参考element官方网站 （npm 等方式安装即可）
import 'element-plus/dist/index.css'  // 引入element
import zhCn from 'element-plus/es/locale/lang/zh-cn' // element 国际化


const app = createApp(App);
app.use(router); // 使用路由
app.use(ElementPlus, {locale: zhCn,}); // 国际化

// 请求地址
import urls from './api/api.js'
app.config.globalProperties.$urls = urls
// 请求方法
import request from './api/request'
app.config.globalProperties.$request = request



app.mount('#app'); //挂载，app 在public下的index.html

App.vue 文件内容

<template>
  <router-view/>  // 路由页面显示位置
</template>

<script>

</script>

<style>

</style>

1、请求封装

1.1、axios 安装

cnpm install axios --save

1.2 api 封装(面向对象封装)

在 api 文件夹中创建 api.js。文件内容如下

const url = "http://localhost:8080";  // 基础url

const urls = class {
  static m() {
    const login = `${url}/login`; // 模板语法

    return {
        login  // 导出 login 地址
    }
  }
}
export default urls  // 暴露 urls

在 api 下创建 header.js 。内容如下

import axios from "axios";  //导入 axios
import {ElMessageBox } from 'element-plus'  // 局部引入 element 弹框（虽然在main.js中已经全局引入，但是这里是js文件，并不是 vue 文件，所有要导入）

//创建 axios 全局配置

let instance = axios.create({
  responseType: "json", // 期望后端返回的数据类型 json
  headers: { "Content-Type": "application/json" },// 请求头中添加上传给服务器的数据类型 json
});

// http 拦截，请求发出之前
instance.interceptors.request.use(
  (config) => {
    let token = localStorage.getItem("token");//缓存中获取token 
    if (token) {
      config.headers.Authorization = token; // 请求头中携带 token
    }
    return config;
  },
  (err) => {
    return Promise.reject(err);
  }
);

// http 拦截 ，请求发出之后
instance.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    if(error.response){
        let ERRS = error.response.status
        let MSG = error.response.data.data
        let errdata = ERRS == 401 ? MSG : '服务器打盹啦'
        switch(ERRS) { // 401 时特别处理 ，没有权限
            case '401':  
                ElMessageBox.alert('没有权限', '提示', {
                confirmButtonText: '好的',
                type: 'error',
              })
              .then(res => {})
              .catch(err => {})
              break;
        }

    }
    return Promise.reject(error.response.data)
  }
)
export default instance

在 api 下创建 request.js 文件，文件内容如下

import instance from "./header";  // 引入 header.js 文件，instance 就是我们在 header.js 中暴露出的 axios 实例

const request = class {  // 创建一个请求类
  constructor(url, arg) {  // 构造器赋值
    this.url = url;  // url
    this.arg = arg;  // 参数
  }

  modepost() {  // 创建 post 请求
    return new Promise((resolve, reject) => {
      instance.post(this.url, this.arg)
      // 成功回调
      .then( res => {
        resolve(res);
      })
      // 失败回调
      .catch( err => {
        reject(err)
      })
    });
  }
// 创建 get 请求
  modeget() {
    return new Promise((reject,resolve) => {
        instance.get((this.url))
        // 成功回调
        .then(res => {
            resolve(res)
        })
        // 失败回调
        .catch(err => {
            reject(err)
        })
    })
  }
}

export default request  // 暴露

这三个文件创建完成之后，我们可以回过头去看 main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // 引入路由
import ElementPlus from 'element-plus' // 引入element，引入之前需要安装 参考element官方网站 （npm 等方式安装即可）
import 'element-plus/dist/index.css'  // 引入element
import zhCn from 'element-plus/es/locale/lang/zh-cn' // element 国际化


const app = createApp(App);
app.use(router); // 使用路由
app.use(ElementPlus, {locale: zhCn,}); // 国际化

// 请求地址
import urls from './api/api.js'
app.config.globalProperties.$urls = urls
// 请求方法
import request from './api/request'
app.config.globalProperties.$request = request



app.mount('#app'); //挂载，app 在public下的index.html

主要看这里

// 请求地址
import urls from './api/api.js'
app.config.globalProperties.$urls = urls  //全局配置请求地址
// 请求方法
import request from './api/request'
app.config.globalProperties.$request = request // 全局配置请求方法

然后再去看 login.vue 中的使用，这里我只拿过来 js 部分

<script setup>
import { reactive , getCurrentInstance} from "vue";

const user = reactive({ account: "", password: "" });

const {proxy} = getCurrentInstance() //对象展开获取 proxy

const login = async() => {
  const obj = {account:user.account,password:user.password} // 封装请求参数
  const res = await new proxy.$request(proxy.$urls.m().login,obj).modepost() // 创建 request 实例并调用 modepost() 方法发送请求
};
</script>

到这里，vue 项目的基本搭建已经完成

二、spring boot 项目搭建

使用 idea 创建 springboot项目，导入web 依赖即可
项目结构

在这里插入图片描述
这里比较简单，不过都赘述，
看一下测试接口（LoginController）

@Slf4j  // 日志注解
@RestController  // 表示是一个controller，并且会返回json 数据，相当于 @Controller 和   @ResponseBody 组合
@RequestMapping("/login")  // 请求地址 /login ，支持所有方式的请求
@CrossOrigin(origins = "http://localhost:8082")  // 跨域解决，允许本机8082程序访问（后续会统一处理）
public class LoginController {

    @PostMapping  // 接受 /login 下的 post 请求
    public String Login(@RequestBody LoginDTO loginDTO){  // @RequestBody 接受请求体中的 json 数据并解析为 LoginDTO 对象
        log.info(loginDTO.toString());  // 日志打印解析后的对象 
        return "";
    }
}

LoginDTO 在controller 下的 dto 下，内容如下

@Data
@AllArgsConstructor
@NoArgsConstructor  // 这三个都是 Lombok 注解，简化开发 ，自动生成getter，setter 构造器等
public class LoginDTO {
    private String account;
    private String password;
}