springboot+mybatis+vue实现的增删改查简单版

项目名称：springboot+mybatis+vue的增删改查的简单实现

一、前期准备

1.工具与版本

jdk：1.8

IDEA 2022.3.2

MySQL 8.0

Maven 3.6.3

2.建立数据库

-- 创建数据库（如果没有）
CREATE DATABASE IF NOT EXISTS springmvc_demo DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;

-- 切换到数据库
USE springmvc_demo;

-- 创建用户表
CREATE TABLE IF NOT EXISTS user (
    id INT AUTO_INCREMENT PRIMARY KEY,   -- 主键，自增
    name VARCHAR(100) NOT NULL,           -- 用户名，不能为空
    age INT                              -- 年龄
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

INSERT INTO user (name, age) VALUES ('张三', 20);
INSERT INTO user (name, age) VALUES ('李四', 25);

二、后端

4.搭建springboot框架

1.打开IDEA -->新建项目-->选择spring initializr --> 命名为demo1-->选择maven--> java 8

2.点击下一步 springbooot选择2.7.6 -->搜索并添加以下依赖： Spring Web 、MyBatis Framework 、MySQL Driver 、Spring Boot、 DevTools Lombok

5.配置文件目录

这两个是自动生成的一些目录可以删掉

配置完后

7.配置pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0" 
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 
                             http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.example</groupId>
    <artifactId>crud</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>springboot-mybatis-crud</name>
    <packaging>jar</packaging>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.7.5</version> <!-- 或其他稳定版本 -->
        <relativePath/>
    </parent>

    <dependencies>
        <!-- Web -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <!-- MyBatis Spring Boot Starter -->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.2.2</version>
        </dependency>

        <!-- MySQL驱动 -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>

        <!-- Lombok -->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>

        <!-- 开发工具 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>

        <!-- 测试 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>
</project>

8.配置application.yml(我的数据库密码为：root 你可以修改为自己的密码)

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/springmvc_demo?useSSL=false&serverTimezone=UTC
    username: root
    password: root
    driver-class-name: com.mysql.cj.jdbc.Driver

mybatis:
  mapper-locations: classpath:mapper/*.xml
  type-aliases-package: com.example.crud.entity

server:
  port: 8080

9.启动类CrudApplication.java

package com.example.crud;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class CrudApplication {
    public static void main(String[] args) {
        SpringApplication.run(CrudApplication.class, args);
    }
}

10.实体类User.java

package com.example.crud.entity;

import lombok.Data;

@Data
public class User {
    private Integer id;
    private String name;
    private Integer age;
}

11.Mapper接口UserMapper.java

package com.example.crud.mapper;

import com.example.crud.entity.User;
import org.apache.ibatis.annotations.Mapper;

import java.util.List;

@Mapper
public interface UserMapper {
    List<User> findAll();
    User findById(Integer id);
    void insert(User user);
    void update(User user);
    void delete(Integer id);
}

12.Mapper XML 文件UserMapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
    PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
    "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="com.example.crud.mapper.UserMapper">
    <select id="findAll" resultType="com.example.crud.entity.User">
        SELECT * FROM user
    </select>

    <select id="findById" resultType="com.example.crud.entity.User">
        SELECT * FROM user WHERE id = #{id}
    </select>

    <insert id="insert" useGeneratedKeys="true" keyProperty="id">
        INSERT INTO user(name, age) VALUES(#{name}, #{age})
    </insert>

    <update id="update">
        UPDATE user SET name = #{name}, age = #{age} WHERE id = #{id}
    </update>

    <delete id="delete">
        DELETE FROM user WHERE id = #{id}
    </delete>
</mapper>

13.Service类UserService.java

package com.example.crud.service;

import com.example.crud.entity.User;
import com.example.crud.mapper.UserMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class UserService {
    @Autowired
    private UserMapper userMapper;

    public List<User> findAll() {
        return userMapper.findAll();
    }

    public User findById(Integer id) {
        return userMapper.findById(id);
    }

    public void insert(User user) {
        userMapper.insert(user);
    }

    public void update(User user) {
        userMapper.update(user);
    }

    public void delete(Integer id) {
        userMapper.delete(id);
    }
}

14.Controller类UserController.java

package com.example.crud.controller;

import com.example.crud.entity.User;
import com.example.crud.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@RequestMapping("/user")
public class UserController {

    @Autowired
    private UserService userService;

    @GetMapping("/list")
    public List<User> list() {
        return userService.findAll();
    }

    @GetMapping("/{id}")
    public User getById(@PathVariable Integer id) {
        return userService.findById(id);
    }

    @PostMapping("/add")
    public void add(@RequestBody User user) {
        userService.insert(user);
    }

    @PutMapping("/edit")
    public void edit(@RequestBody User user) {
        userService.update(user);
    }

    @DeleteMapping("/delete/{id}")
    public void delete(@PathVariable Integer id) {
        userService.delete(id);
    }
}

三、前端

1. 创建 Vue 项目

打开终端

输入代码生成vue目录和下载vue

npm create vite@latest my-vue-app -- --template vue
cd my-vue-app
npm install

安装Axios

npm install axios

3. 编辑/my-vue-app/src/App.vue 前端界面实现用户增删改查

<template>
  <div>
    <h2>用户管理</h2>

    <div>
      <input v-model="user.id" type="number" placeholder="ID（编辑时填写）" />
      <input v-model="user.name" placeholder="姓名" />
      <input v-model.number="user.age" type="number" placeholder="年龄" />
      <button @click="addUser">添加</button>
      <button @click="editUser">修改</button>
    </div>

    <div style="margin-top: 20px;">
      <input v-model.number="searchId" type="number" placeholder="输入用户ID查询" />
      <button @click="searchUser">查询</button>
      <div v-if="searchedUser">
        <p>ID: {{ searchedUser.id }}</p>
        <p>姓名: {{ searchedUser.name }}</p>
        <p>年龄: {{ searchedUser.age }}</p>
      </div>
      <div v-else-if="searchError" style="color:red;">{{ searchError }}</div>
    </div>

    <table border="1" cellspacing="0" cellpadding="5" style="margin-top: 20px;">
      <thead>
        <tr><th>ID</th><th>姓名</th><th>年龄</th><th>操作</th></tr>
      </thead>
      <tbody>
        <tr v-for="u in users" :key="u.id">
          <td>{{ u.id }}</td>
          <td>{{ u.name }}</td>
          <td>{{ u.age }}</td>
          <td>
            <button @click="fillForm(u)">编辑</button>
            <button @click="deleteUser(u.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'

const users = ref([])
const user = ref({ id: null, name: '', age: null })
const searchId = ref(null)
const searchedUser = ref(null)
const searchError = ref('')

function loadUsers() {
  axios.get('/user/list').then(res => {
    users.value = res.data
  })
}

function addUser() {
  axios.post('/user/add', {
    name: user.value.name,
    age: user.value.age
  }).then(() => {
    alert('添加成功')
    clearForm()
    loadUsers()
  })
}

function editUser() {
  if (!user.value.id) {
    alert('请输入用户ID')
    return
  }
  axios.put('/user/edit', user.value).then(() => {
    alert('修改成功')
    clearForm()
    loadUsers()
  })
}

function deleteUser(id) {
  if (!confirm('确定删除该用户？')) return
  axios.delete(`/user/delete/${id}`).then(() => {
    alert('删除成功')
    loadUsers()
  })
}

function searchUser() {
  searchedUser.value = null
  searchError.value = ''
  if (!searchId.value) {
    alert('请输入用户ID')
    return
  }
  axios.get(`/user/${searchId.value}`).then(res => {
    searchedUser.value = res.data
  }).catch(() => {
    searchError.value = '用户不存在'
  })
}

function fillForm(u) {
  user.value.id = u.id
  user.value.name = u.name
  user.value.age = u.age
}

function clearForm() {
  user.value = { id: null, name: '', age: null }
}

onMounted(loadUsers)
</script>

4. 配置代理（解决跨域）

编辑/my-vue-app/vite.config.js，写入：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/user': {
        target: 'http://localhost:8080',  // Spring Boot 端口
        changeOrigin: true,
      }
    }
  }
})

四、启动与访问

1.启动后端CrudApplication

2.启动前端

在终端中输入

cd my-vue-app
npm run dev

点击链接

posted @ 2025-05-28 17:27 link8829 阅读(109) 评论(0) 收藏举报

刷新页面返回顶部

link8829