基于Spring Boot + SSM（Spring + Spring MVC + MyBatis）+Vue+MySQL实现一个简单的用户管理功能

后端代码（Spring Boot + SSM部分）

1. 创建Spring Boot项目

使用Spring Initializr（可以通过IDEA等IDE自带的创建Spring Boot项目功能，或者访问Spring官网的Initializr页面）创建一个基础的Spring Boot项目，添加相关依赖，比如Web（用于构建Web应用）、MyBatis、MyBatis Spring Boot Starter、MySQL Driver（如果使用MySQL数据库）等。

2. 数据库相关配置（application.properties 或 application.yml）

如果使用application.properties，配置如下示例（以MySQL为例，根据实际情况修改数据库连接信息）：

spring.datasource.url=jdbc:mysql://localhost:3306/your_database_name?useSSL=false&serverTimezone=UTC&characterEncoding=utf8
spring.datasource.username=your_username
spring.datasource.password=your_password
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

mybatis.mapper-locations=classpath:mapper/*.xml

如果是application.yml格式：

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/your_database_name?useSSL=false&serverTimezone=UTC&characterEncoding=utf8
    username: your_username
    password: your_password
    driver-class-name: com.mysql.cj.jdbc.Driver
mybatis:
  mapper-locations: classpath:mapper/*.xml

3. 创建实体类（User.java为例）

public class User {
    private Long id;
    private String username;
    private String password;
    // 生成相应的Getter、Setter、构造函数等
    // 可以使用Lombok简化代码（添加Lombok依赖后使用相关注解）
}

4. 创建Mapper接口（UserMapper.java）

import org.apache.ibatis.annotations.Mapper;
import com.example.demo.model.User;

@Mapper
public interface UserMapper {
    List<User> selectAllUsers();
    int insertUser(User user);
    // 可以定义更多操作数据库的方法，比如根据ID查询、更新、删除等
}

5. 创建Mapper对应的XML文件（UserMapper.xml，放在resources/mapper目录下）

<?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.demo.mapper.UserMapper">
    <select id="selectAllUsers" resultMap="UserResultMap">
        select * from user
    </select>

    <insert id="insertUser" keyProperty="id" useGeneratedKeys="true">
        insert into user(username, password) values(#{username}, #{password})
    </insert>

    <!-- 定义resultMap -->
    <resultMap id="UserResultMap" type="com.example.demo.model.User">
        <id property="id" column="id" />
        <result property="username" column="username" />
        <result property="password" column="password" />
    </resultMap>
</mapper>

6. 创建Service层接口（UserService.java）

import java.util.List;
import com.example.demo.model.User;

public interface UserService {
    List<User> getAllUsers();
    boolean addUser(User user);
}

7. 创建Service层接口实现类（UserServiceImpl.java）

import java.util.List;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import com.example.demo.mapper.UserMapper;
import com.example.demo.model.User;
import com.example.demo.service.UserService;

@Service
@Transactional
public class UserServiceImpl implements UserService {

    private final UserMapper userMapper;

    public UserServiceImpl(UserMapper userMapper) {
        this.userMapper = userMapper;
    }

    @Override
    public List<User> getAllUsers() {
        return userMapper.selectAllUsers();
    }

    @Override
    public boolean addUser(User user) {
        return userMapper.insertUser(user) > 0;
    }
}

8. 创建Controller层（UserController.java）

import java.util.List;
import org.springframework.web.bind.annotation.*;
import com.example.demo.model.User;
import com.example.demo.service.UserService;

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

    private final UserService userService;

    public UserController(UserService userService) {
        this.userService = userService;
    }

    // 获取所有用户列表
    @GetMapping
    public List<User> getUsers() {
        return userService.getAllUsers();
    }

    // 添加用户
    @PostMapping
    public boolean addUser(@RequestBody User user) {
        return userService.addUser(user);
    }
}

前端代码（Vue部分）

1. 创建Vue项目

使用vue-cli创建项目（确保已安装vue-cli，通过命令vue create your-project-name创建项目），选择相应的配置，比如是否使用Router、Vuex等（这里简单示例可不选）。

2. 安装axios用于和后端交互（在项目目录下执行命令）

npm install axios

3. 创建组件（比如UserList.vue用于展示用户列表，AddUser.vue用于添加用户，这里以UserList.vue为例）

<template>
  <div>
    <h2>用户列表</h2>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.username }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      users: []
    };
  },
  mounted() {
    this.fetchUsers();
  },
  methods: {
    fetchUsers() {
      axios.get('http://localhost:8080/users')  // 根据后端实际部署的地址和端口修改
       .then(response => {
          this.users = response.data;
        })
       .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>

4. 在main.js中注册组件并挂载到根实例（简单示例）

import Vue from 'vue';
import App from './App.vue';
import UserList from './components/UserList.vue';

Vue.component('user-list', UserList);

new Vue({
  render: h => h(App)
}).$mount('#app');