使用springboot和vue3框架完成开发，并进行配置

1.数据库建立

使用navicat数据库管理工具，数据可视化工具，首先建立连接，然后开始建立字段，根据数据需求的类型，加入字段，之后通过字段添加数据在里面，成为一整张数据表，后端的程序可以理解为整个对数据库表进行操作，针对具体的需求，对数据操作，达到预期效果。

2.数据库后端连接

建立一个文件，app-dev.yml文件，设置url，用来连接数据库和后端，通过url后端访问到数据库，对数据进行操作，

3.redis分布式建立

本文选择单节点redis

    redis:
      host: localhost  # Redis服务器的地址
      port: xxxx
      password: xxxxxx
      jedis:
        pool:
          # 连接池最大连接数 默认8 ，负数表示没有限制
          max-active: 8
          # 连接池最大阻塞等待时间（使用负值表示没有限制） 默认-1
          max-wait: -1
          # 连接池中的最大空闲连接 默认8
          max-idle: 8
          # 连接池中的最小空闲连接 默认0
          min-idle: 0

4.前端配置

要创建utils、api、router、views文件夹，首先需要配置这些文件，utils/request.js:

import axios from "axios";
 
const baseURL = '/api';
 
const instance = axios.create({baseURL})
 
instance.interceptors.response.use(
    result=>{
        return result.data;
    },
    err=>{
        alert('服务错误');
        return Promise.reject(err);
    }
 
)
 
export default instance;

api/user.js:api里的js文件名和文件内容，要根据实际的接口文档写

import request from '@/utils/request.js'
 
export const userHelloService = ()=>{
    return request.get('/user/hello')
}

router/index.js:别忘记在views文件夹下创建Login.vue和Layout.vue，

import { createRouter,createWebHistory } from "vue-router";
 
import LoginVue from '@/views/Login.vue'
import LayoutVue from '@/views/Layout.vue'
 
//定义路由关系
const routes = [
    { path:'/login',component:LoginVue},
    { path:'/',component:LayoutVue}
]
 
//创建路由器
const router = createRouter({
    history: createWebHistory(),
    routes: routes
})
 
export default router

main.js:

import './assets/main.css'
 
import { createApp } from 'vue'
import App from './App.vue'
import router from '@/router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
 
const app = createApp(App);
app.use(router)
app.use(ElementPlus)
app.mount('#app')

vite.config.js:target里的url要根据后端的端口号进行修改

import { fileURLToPath, URL } from 'node:url'
 
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server:{
    proxy:{
      '/api':{
        target:'http://localhost:8080',
        changeOrigin:true,
        rewrite:(path)=>path.replace(/^\/api/,'')
      }
    }
  }
})

因为本文使用maven项目管理工具来管理项目，可以自动生成一些注解或者你需要调用的包， 

5.后端写接口（本文以类型接口为例）

首先需要写controller接口，这个部分是连接前端和后端之间的接口，你在后端写的方法需要在前端也写一个接口去调用，在你写的前端方法写一个调用到后端的方法，类似这样

后端：

package com.example.test_demo.Controller;
 
 
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
 
@RestController
@RequestMapping("user")
public class UserController {
 
    @GetMapping("/hello")
    public String hello(){
        return "Hello World! 2024 year";
    }
    
 
}

前端部分：

import request from '@/utils/request.js'
 
export const userHelloService = ()=>{
    return request.get('/user/hello')
}

6.整体流程

写类型数据相关的接口，那么需要完成Modle->form,type接口的编写，指导完成，返回数据类型接口的编写，介绍了需要写的controller文件接口，告知这个文件接口主要与前端链接的，之后介绍了service文件的相关接口，声明数据操作接口，之后指导完成serviceimpl文件的接口编写，前端api文件夹下建立type文件夹，在前端设计需要对应的部分，设计type->index.ts和types.ts接口，完成地图上的数据显示完成map.vue,以及父组件index.vue。整体流程如上。