用户管理系统(1)

1)用户管理项目:基本功能介绍

1)登录功能:只能是管理员登录，普通用户无法进行登录

因为普通用户进行登陆之后有信息泄露的风险，况且来说你普通用户登陆之后给你分配权限也没有什么用呀，你想要操作什么？

2)用户的列表页面:普通用户的列表页和超级管理员的列表页

3)条件查询:组合条件查询，不定规则的查询，指定名称，指定籍贯，指定邮箱来进行查询

4)分页功能:前端用户信息显示分页功能

5)添加用户:管理员不可以操作管理员(修改，删除)，但是可以新增管理员

6)单条删除功能，多条删除功能(选中多条进行删除)，管理员不可以删除管理员

7)修改用户:不可以修改超级管理员的信息

8)单条删除用户，多条批量删除用户

用动态标签，判断里面是否有管理员，如果有管理员，是不能删除的

注意:

1)这个系统只能是管理员来进行使用，普通用户无法进行操作此系统；

2)管理员可以添加管理员和普通用户，但是管理员不可以删除，修改管理员；

2)设计数据库:

使用的技术:SpringBoot+Mybatis+SpringMVC/拦截器/统一数据格式的返回/统一常的处理

用户表:

UserID 用户的唯一身份标识 int

登录名 varchar(100),

姓名 Varchar(50)

性别 varchar(10)

年龄 int

籍贯 varchar(50)

QQ varchar(15)

邮箱 varchar(50)是否是超级管理员，int

登录名 varchar(50)，不允许有中文的

密码   varchar(100)

用户创建时间 varchar(50)

用户修改时间 varchar(50)

数据库插入操作:

drop database if exists Java100;
create database if not Java100 character set utf8;
use Java100;
create table User(
userID int primary key auto_increment,
userName varchar(50) unique not null,
loginName varchar(60) unique not null,
passWord varchar(90) unique not null,
sex varchar(30) default "男",
address varchar(60),
qq varchar(60),
email varchar(40),
isAdmin int default 0,
createTime datetime default Now(),
updateTime datetime default Now()
);

引入依赖:

1)SpringBootDevTools

2)Lombok

3)SpringWeb

4)MyBatisFrameWork

5)MySQL Dirver

6)拦截器

3)配置配置文件:

#下面是配置数据库连接的基本信息
spring.datasource.username=root
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/Java100?characterEncoding=utf-8&useSSL=true
spring.datasource.password=12503487
spring.driver-class-name=com.mysql.cj.jdbc.Driver
#下面是配置数据库XML文件的保存路径
mybatis.mapper-locations=classpath:mapper/**Mapper.xml
#配置MyBatis打印的SQL
logging.level.com.example.demo=debug
mybatis.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl

我们在配置文件里面指定了mapper的xml文件的路径，在我们的xml里面，我们通过namespace指定了被mapper修饰的接口的路径

4)对同一的异常进行处理，对于统一的对全局生效的文件，我们可以把它放在Configuration文件里面

/对统一的异常进行处理
@ControllerAdvice
public class ProcessException {
    @ExceptionHandler(Exception.class)
    @ResponseBody
    public HashMap Start(Exception e){
        //我们这一次返回的是JSON格式的数据
        HashMap hashMap=new HashMap<>();
        hashMap.put("status",200);
        hashMap.put("data","");
        hashMap.put("state",-1);
        hashMap.put("message",e.getMessage());
        return hashMap;
    }
}

5)返回原则:所有的接口必须有统一的数据格式返回

我们要想进行统一的数据格式的返回，方法有两种:

1)定义一个全局的返回对象，每一个接口返回的时候调用该对象来进行返回

2)Advice接口增强实现统一的数据封装

返回JSON格式的数据:
{
status:状态码
data:后端返回的数据
state:-1/1
message:是对status返回状态的一个对应声明，比如说登陆失败，用户名密码错误，用户名密码是空
}

6)配置拦截器

public class ProcessLogin implements HandlerInterceptor {
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        //如果这个方法的返回值是true,那么表示当前用户已经登陆,那么直接可以访问目标方法
        //如果说这个方法的返回值是false,那么表示当前用户没有进行登录,那么会直接跳转到登陆界面
        HttpSession httpSession= request.getSession(false);
        if(httpSession==null||httpSession.equals("")||httpSession.getAttribute("user")==null||httpSession.getAttribute("user").equals("")){
           response.sendRedirect("login.html");
            return false;
        }
        return true;
    }
}
//把这个注册到Spring里面
@Configuration
class InsertSpringBoot implements WebMvcConfigurer{
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(new ProcessLogin())
                .addPathPatterns("/**")
                .excludePathPatterns("/css/**")
                .excludePathPatterns("/fonts/**")
                .excludePathPatterns("/images/**")
                .excludePathPatterns("/js/**")
                .excludePathPatterns("/css/**")
                .excludePathPatterns("/**/login.html");
    }
}

7)将所有的前端文件放在static目录下面

8)根据数据库的表创建实体类

@Data
public class UserInfo {
    private int userID;
    private String userName;
    private String passWord;
    private String sex;
    private String address;
    private String qq;
    private String email;
    private String isAdmin;
    private Timestamp createTime;
    private Timestamp updateTime;

}

9)除此之外，咱们还要向数据库中插入一条记录，表示超级管理员

1.实现登录功能:我们要根据前端传递的用户名和密码来进行实现登陆

1.1)约定前后端交互的接口:

POST /login submit
ContentType:application/json;charset=utf-8
body:
     {
       "userName":"A",
       "passWord":"12503487"
     }
后端返回:
200 OK HTTP/1.1
true/false
true表示登陆成功,false表示登陆失败

1.2)前端代码:

 

        用户名:
        
    
    

        密码:
        
    
    

    

        
    

先写前端的JS代码:

1.2)先写XML里面的代码，在写Mapper里面的代码，在写UserService里面的代码，最后写Controller里面的代码:

package com.example.demo.Controller;

import com.example.demo.Model.UserInfo;
import com.example.demo.Service.UserService;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;

@Controller
public class UserController {
    @Autowired
    private UserService userService;
    @RequestMapping("/Java100/login")
    @ResponseBody
    public Boolean login(@RequestBody UserInfo userInfo, HttpServletRequest req){
   //1.进行非空校验,必须传递用户名和密码
        Logger logger= LoggerFactory.getLogger(UserController.class);
        logger.info(String.valueOf(userInfo));
        if(userInfo.getUserName()==null||userInfo.getPassWord()==null||userInfo.getPassWord().equals("")||userInfo.getUserName().equals(""))
        {
               return false;
        }
        //代码走到这里说明参数校验合格
       UserInfo ReturnUserInfo= userService.login(userInfo);
        if(ReturnUserInfo==null||ReturnUserInfo.equals("")){
           return false;
        }
    //2.登陆成功,设置HttpSession对象    
        HttpSession httpSession= req.getSession(true);
        httpSession.setAttribute("user",ReturnUserInfo);
          return true;
    }
}
 //
 //       select * from UserInfo where userName=#{userName} and passWord=#{passWord} and //isAdmin=1
//    

2.实现展示功能:

前端推荐学习网站:https://v2.cn.vuejs.org/v2/guide/#Vue-js-%E6%98%AF%E4%BB%80%E4%B9%88

前端代码:

//父亲属性
         //循环这里面的每一个元素userInfo
//因为tr标签里面的每一个标签都是td标签所以这么写可以更规范一些
                    
//三目运算符要放在双大括号里面
  

            

                
选择
                
编号
                
姓名
                
性别
                
年龄
                
籍贯
                
QQ
                
邮箱
                
超管
                
操作
            
            

                        
//下面这个是绑定id属性
      
      
{{userInfo.userID}}
      
{{userInfo.userName}}
      
{{userInfo.sex}}
      
{{userInfo.age}}
      
{{userInfo.address}}
      
{{userInfo.qq}}
      
{{userInfo.email}}
{{userInfo.isAdmin==true?"是":"否"}}
 
                     

修改
删除
     
                    
 
            
        
    
    

        

            

                                
1
                                
2
                                
3
                                

                                    »
                                
                                 共 10 条记录，共 1 页
                                  
            
        
    

实现前后端交互的逻辑: