1小时学会SpringBoot3+Vue3前后端分离开发

引言

大家可能刚学会JavaVue之后都会想下一步是什么?那么就先把SpringBootVue结合起来,做一个前后端分离的项目吧。

准备工作

首先你需要懂得JavaVue的基础知识,环境这里就不多说了,直接开始。

创建 SpringBoot 项目

使用IDEA旗舰版的可以直接使用自带Spring Initializr创建项目,其他的可以使用Spring Initializr创建项目。

语言选择Java,类型选择Gradle-KotlinJava选择 21,其他的都随便填。

20240423215241

20240423210415

接下来选择依赖,这里选择weblombok,数据库选择PostgreSQL,如果你使用的是MySQL就选它

20240423210635

20240423210727

之后点击创建自动打开项目,或者点击生成打开下载的项目

20240423210848 20240423210903

之后等待项目的依赖下载完成就好了

如果需要配置镜像那就在repositories中最上面添加腾讯云的镜像

repositories {
    maven {
        url = uri("https://mirrors.cloud.tencent.com/nexus/repository/maven-public")
    }
    mavenCentral()
}

首先我们需要创建数据库,比如一个图书管理系统,需要有一张图书表,有一些字段,比如标题、作者、创建时间、等等。

我们使用数据库管理工具来创建一个表吧。

20240423225934

注意这里使用的是Postgres,如果是MySQL类型略有不同。

之后我们就可以创建实体类了,这里需要先引入ORM框架依赖,这里我为了方便引入写了一个Gradle插件,把它写入到plugins中,接着在刷新一下项目就可以继续编写代码了。

plugins {
    // 省略其他插件...
    id("cn.enaium.jimmer.gradle") version "0.0.11"
}

我们创建一个接口Book添加一个EntityTable注解,之后添加一些方法,名称就是根据数据库中字段名称一样,只不过要把蛇形命名改为小驼峰。

@Entity
@Table(name = "book")
public interface Book {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    int id();

    String title();

    String author();

    LocalDateTime createTime();
}

写完之后,我们按下编译的快捷键(默认是 Ctrl+F9),之后就可以编写接口了。

@RestController
@RequiredArgsConstructor
public class BookController {

    private final JSqlClient sql;

    @GetMapping("/book")
    public List<Book> getBooks() {
        return sql.createQuery(Tables.BOOK_TABLE).select(Tables.BOOK_TABLE).execute();
    }

    @PostMapping("/book")
    public void saveBook(@RequestBody Book book) {
        sql.save(book);
    }
}

使用RequiredArgsConstructor注解可以为被final修饰的字段生成构造方法,这样就不用手动写构造方法了。

getBooks用于获取图书列表,首先使用createQuery创建一个查询,传入一张表,类似于from book,接着使用select选择所有字段,类似于select id, name, author, createTime,最后使用execute执行查询。 saveBook用于保存图书,使用save方法保存图书。

接下来需要配置允许跨域,这里使用CORS,在SpringBoot中配置CORS很简单,只需实现WebMvcConfigurer接口的addCorsMappings方法即可。

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedMethods("*")
                .allowedOrigins("*")
                .allowedHeaders("*");
    }
}

最后我们配置一下数据库链接。

spring.datasource.driver-class-name=org.postgresql.Driver
spring.datasource.url=jdbc:postgresql://localhost:5432/postgres?currentSchema=sbv
spring.datasource.username=postgres
spring.datasource.password=postgres
jimmer.dialect=org.babyfish.jimmer.sql.dialect.PostgresDialect

如果是MySQL就把PostgresDialect改为MySqlDialect

这样我们的后端就写完了,接下来我们开始写前端。

创建 Vue 项目

这里使用pnpm create vue来创建,如果没有安装pnpm可以使用npm install -g pnpm来安装。

20240423215715

名称随便,之后使用TypescriptVue Router剩下的选否。

之后使用命令pnpm install安装依赖,并删除src下的所有文件。

编写App.vue

<script setup lang="ts"></script>

<template>
  <h1>Vue 3 + Vite + TypeScript</h1>
</template>

编写main.ts

import { createApp } from "vue"; import App from "./App.vue"; const app = createApp(App); app.mount("#app");

这里我使用naive ui,使用命令安装pnpm add -D naive-ui,之后使用自动导入配置。

安装这两个插件pnpm add -D unplugin-auto-import unplugin-vue-components

之后修改vite.config.ts文件

import { fileURLToPath, URL } from "node:url"

import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import AutoImport from "unplugin-auto-import/vite"
import Components from "unplugin-vue-components/vite"
import { NaiveUiResolver } from "unplugin-vue-components/resolvers"

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: [
        "vue",
        {
          "naive-ui": ["useDialog", "useMessage", "useNotification", "useLoadingBar"]
        }
      ]
    }),
    Components({
      resolvers: [NaiveUiResolver()]
    })
  ],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url))
    }
  }
})

然后就可以继续编写页面了,首先在views中编写两个页面一个用来获取所有的图书,一个用来添加图书。

<script setup lang="ts">
import type { DataTableColumns } from "naive-ui"
import { ref } from "vue"

interface Book {
  id: number
  title: string
  author: string
  createTime: string
}

const columns: DataTableColumns<Book> = [
  {
    title: "ID",
    key: "id"
  },
  {
    title: "Title",
    key: "title"
  },
  {
    title: "Author",
    key: "author"
  },
  {
    title: "Create Time",
    key: "createTime"
  }
]

const books = ref<Book[]>([])

fetch("http://localhost:8080/book")
  .then((response) => response.json())
  .then((data: Book[]) => {
    books.value = data
  })
</script>

<template>
  <n-data-table :columns="columns" :data="books" />
</template>
<script setup lang="ts">
import { ref } from "vue"
import { useMessage, type FormInst } from "naive-ui"

interface BookInput {
  title?: string
  author?: string
}

const message = useMessage()

const formRef = ref<FormInst | null>(null)
const bookInput = ref<BookInput>({})

const save = () => {
  formRef.value?.validate().then((valid) => {
    if (valid) {
      fetch("http://localhost:8080/book", {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify(bookInput.value)
      }).then(() => {
        message.success("Book saved")
      })
    }
  })
}
</script>

<template>
  <n-form ref="formRef" :model="bookInput">
    <n-form-item label="Title" path="title" :rule="[{ required: true, message: 'Please input title' }]">
      <n-input v-model:value="bookInput.title" />
    </n-form-item>
    <n-form-item label="Author" path="author" :rule="[{ required: true, message: 'Please input author' }]">
      <n-input v-model:value="bookInput.author" />
    </n-form-item>
    <n-button type="primary" @click="save">Save</n-button>
  </n-form>
</template>

之后编写布局,在layouts下编写一个,BookLayout.vue,我们使用左侧一栏来选择页面,右侧来展示页面。

<script setup lang="ts"></script>

<template>
  <n-layout has-sider>
    <n-layout-sider content-style="padding: 24px;">
      <ul>
        <li>
          <RouterLink to="/book">Book</RouterLink>
        </li>
        <li>
          <RouterLink to="/book/create">Create Book</RouterLink>
        </li>
      </ul>
    </n-layout-sider>
    <n-layout>
      <n-layout-content content-style="padding: 24px;">
        <RouterView />
      </n-layout-content>
    </n-layout>
  </n-layout>
</template>

之后创建一个router目录,编写index.ts文件

import BookLayout from "@/layouts/BookLayout.vue"
import Books from "@/views/Books.vue"
import SaveBook from "@/views/SaveBook.vue"
import { createRouter, createWebHistory } from "vue-router"

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: "/book",
      component: BookLayout,
      children: [
        {
          path: "",
          component: Books
        },
        {
          path: "create",
          component: SaveBook
        }
      ]
    }
  ]
})

export default router

之后在main.ts中引入router

import router from "./router"

// 省略其他代码...

app.use(router)

最后在App.vue中使用RouterView

<template>
  <NMessageProvider>
    <RouterView />
  </NMessageProvider>
</template>

这样我们的前端就写完了,接下来我们启动项目。