SpringBoot 框架搭建 用户管理系统(附代码)

本文介绍如何利用SpringBoot框架搭建一个用户管理系统,包括登录、用户列表、添加、修改和删除用户功能。系统设计了用户表,并提供了统一的返回格式。前端页面使用HTML和jQuery进行交互,后端通过MyBatis进行数据库操作。用户权限通过Session管理,超级管理员与普通管理员具有不同的操作权限。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

使用SpringBoot 框架搭建用户管理系统,代码附在文末
快~点这里来试试(●’◡’●)

1、项目解决问题

  用户管理系统:用户的信息做统一的管理

2、需求功能分析

1、登录功能(普通管理员登陆、超级管理员的登录)
2、用户列表页面(普通用户的列表、超级管理员的列表页)
3、条件查询(组合条件查询、不定规则查询)
4、分页功能
5、添加功能(普通管理员的添加、超级管理员的添加)
6、单挑删除功能
7、多条删除功能

3、设计数据库

  用户管理系统,所以只需要设置一张用户表即可,SQL语句如下:

drop database if exists userdb;

create DATABASE if not exists userdb character set utf8;

use userdb;

drop table if exists userinfo;
create table `userinfo` (
   `id` INT PRIMARY KEY auto_increment,
   `name` varchar(60),	    --姓名
   `username` varchar(60) default 'root',
   `password` varchar(60) default '123456',
   `sex` varchar(4),     	--性别
   `age` int,			    --年龄
   `address` varchar(90),	--邮箱
   `qq` varchar (20),	    -- QQ
   `email` varchar (30),    --是否为超管,默认为否
   `isadmin` int not null default 0
);

INSERT INTO userinfo VALUES(1,'超级管理员','admin','123','男',18,'成都','1262913815','admin@qq.com',1);
INSERT INTO userinfo VALUES(2,'张飞','zhangfei','123','男',18,'成都','1262913815','126@qq.com',0);
INSERT INTO userinfo VALUES(3,'关羽','guanyu','1234','男',18,'西安','1262913816','1262@qq.com',0);
INSERT INTO userinfo VALUES(4,'张三','zhangsan','1235','女',19,'西安','1262913817','1263@qq.com',0);
INSERT INTO userinfo VALUES(5,'李四','lisi','1236','男',20,'北京','1262913818','1264@qq.com',0);
INSERT INTO userinfo VALUES(6,'王五','wangwu','1237','女',21,'西安','1262913819','1265@qq.com',0);
INSERT INTO userinfo VALUES(7,'孙权','sunquan','1238','男',22,'上海','1262913814','1266@qq.com',0);
INSERT INTO userinfo VALUES(8,'孙悟空','sunwukong','1239','男',23,'西安','1262913813','1267@qq.com',0);
INSERT INTO userinfo VALUES(9,'猪八戒','zhubajie','1239','男',23,'上海','1262913813','1267@qq.com',0);
4、返回原则:所有接口必须有统一的返回格式

  为前端返回JSON字符串,包含 {status,data,message}
  第一种封装方法:定义一个全局的返回时调用此对象进行返回。
  第二种封装方法:Advice 接口实现统一的数据封装
  这里采用第二种:定义全区的返回掉用对象来实现统一返回原则,泛用性强

package com.example.usermanager.tools;

import lombok.Data;

@Data
public class ResponseBody<T> {
   
  private int status;
  private String message;
  private T data;

  public ResponseBody(int status, String message, T data) {
   
      this.status = status;
      this.message = message;
      this.data = data;
  }
}

  在之后写的后端controller类下各种方法,都将其返回值设置为ResponseBody,根据需求返回值不同,设置data属性为需要的属性。

5、登录

  先贴上登录的前端页面:login.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>用户信息管理系统登录页面</title>
    <!-- 1. 导入CSS的全局样式 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- 2. jQuery导入,建议使用1.9以上的版本 -->
    <script src="js/jquery-2.1.0.min.js"></script>
    <!-- 3. 导入bootstrap的js文件 -->
    <!--<script src="js/bootstrap.min.js"></script>-->
    <script type="text/javascript"></script>
    <style>
        html, body {
   
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: auto;
        }
        body {
   
            background: url(images/acg.gy_16.jpg) no-repeat 100% 100%;
            background-size: cover;
        }
    </style>
</head>
<body id="body">
<div class="container" style="width: 400px;margin-top: 110px;background-color: rgba(255,255,255,0.8)">
    <h3 style="text-align: center;">后台管理员登录</h3>
    <div class="form-group">
        <label for="username">用户名:</label>
        <input type="text" name="user" class="form-control" id="username" placeholder="请输入用户名"/>
    </div>

    <div class="form-group">
        <label for="password">密码:</label>
        <input type="password" name="password" class="form-control" id="password" placeholder="请输入密码"/>
    </div>
    <div>
        测试超管帐号:admin
        &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;测试密码:123
    </div>
    <hr/>
    <div class="form-group" style="text-align: center;"><!--class="form-group"-->
        <input style="width: 200px;height: 40px" id="submit"
               class="btn btn btn-primary" type="button" value="登录" onclick="mysub()">
    </div>
</div>
<script>
    function mysub() {
   
        // 获取用户名
        var username = jQuery("#username");
        // 获取密码
        var password = jQuery("#password");
        // 非空效验
        if (username.val().trim() == "" ||
            password.val().trim() == "") {
   
            alert("请先输入用户名和密码才能进行登录!");
            return false;
        }
        // 提交数据到后端进行登录效验
        jQuery.getJSON("/user/login", {
   
            "username": username.val(),
            "password": password.val()
        }, function (result) {
   
            if (result != null && result.status == 0) {
   
                // 登录成功
                alert("登录成功");
                location.href = "list.html";
            } else {
   
                // todo:安全限制(如果一定时间内输入的用户名和密码错误次数过多,就可以先冻结账户一段时间)
                alert(result.message);
            }
        });
    }
</script>
</body>
</html>

  登录功能需要做的就是两件事,第一件事,拿到前端传来的帐号和密码后,去数据库验证,验证成功则登录,失败则拒绝登录;第二件事,登陆成功后,将当前登录用户的Session信息保存下来

package com.example.usermanager.controller;
import com.example.usermanager.mapper.UserMapper;
import com.example.usermanager.model.UserInfo;
import com.example.usermanager.tools.AppFinal;
import com.example.usermanager.tools.ResponseBody;
import com.example.usermanager.tools.SessionUtil;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import java.util.HashMap;
import java.util.List;

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

    @Resource
    private UserMapper userMapper; // 注入UserMapper.class接口类,用于映射与数据库沟通的方法

    // 登录方法
    @RequestMapping("/login")
    public ResponseBody<UserInfo> login(@RequestParam String username,
                                        @RequestParam String password,
                                        HttpServletRequest request) {
   
        UserInfo userInfo = userMapper.login(username, password);
        int status = -1;
        String message = "用户或密码错误!";
        if (userInfo != null && userInfo.getId() > 0) {
   
            // 登录成功
            status = 0;
            message = "";
            // 将用户对象存储到 session 中
            HttpSession session = request.getSession();
            session.setAttribute(AppFinal.USERINFO_SESSION_KEY, userInfo);
        }
        return new ResponseBody<>(status, message, userInfo);
    }

  UserMapper.class接口类,用于映射UserMapper.xml配置类中的具体操作数据库的方法

package com.example.usermanager.mapper;
import com.example.usermanager.model.UserInfo;
import org.apache.ibatis.annotations.Mapper;
import java.util.List;
@Mapper
public interface UserMapper {
   
    public UserInfo login(String username, String password);

  UserMapper.xml配置文件,用于具体操作数据库的SQL语句书写

<?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.usermanager.mapper.UserMapper">

    <select id="login" resultType="com.example.usermanager.model.UserInfo">
        select * from userinfo where username=#{username} and password=#{password}
    </select>
    
</mapper>
6、添加用户页面 —— 拥有两个访问后端的接口

  先贴上添加用户的前端页面:add.html

<!DOCTYPE html>
<!-- 网页使用的语言 -->
<html lang="zh-CN">
<head>
    <!-- 指定字符集 -->
    <meta charset="utf-8">
    
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值