springboot+VUE 后台管理系统

这是一个使用SpringBoot和Vue3构建的前后端分离的后台管理系统。后端使用SpringBoot框架，前端使用Vue3和Element Plus组件库，数据库使用MySQL。你可以下载源代码并在IDE中加载运行。以下是该系统的一些特点和功能：

1.使用Spring Security进行身份验证和授权，保护系统安全。
2.使用Mybatis-Plus进行数据库操作，简化了SQL语句的编写。
3.使用Vue Router进行路由管理，实现了单页面应用。
4.使用Element Plus组件库，提供了丰富的UI组件和交互效果。
5.使用wangEditor富文本编辑器，方便用户编辑富文本内容。
6.实现了用户管理、角色管理、权限管理、日志管理等功能。

以下是该系统的部分代码示例：

1.后端使用SpringBoot框架，使用Mybatis-Plus进行数据库操作：

@Service
public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements UserService {

    @Override
    public User getUserByUsername(String username) {
        QueryWrapper<User> wrapper = new QueryWrapper<>();
        wrapper.eq("username", username);
        return getOne(wrapper);
    }
}

2.前端使用Vue3和Element Plus组件库，实现了用户管理页面：

<template>
  <div class="user">
    <el-table :data="users" style="width: 100%">
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="username" label="用户名"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <el-table-column prop="phone" label="电话"></el-table-column>
      <el-table-column prop="createTime" label="创建时间"></el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="primary" size="small" @click="editUser(row)">编辑</el-button>
          <el-button type="danger" size="small" @click="deleteUser(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getUserList, deleteUser } from '@/api/user'

export default {
  data() {
    return {
      users: []
    }
  },
  created() {
    this.getUserList()
  },
  methods: {
    async getUserList() {
      const res = await getUserList()
      this.users = res.data
    },
    editUser(row) {
      // 编辑用户
    },
    async deleteUser(row) {
      await deleteUser(row.id)
      this.getUserList()
    }
  }
}
</script>