用户后台管理

User Management

csdn:点我获取资源

git:资源

这是通过SpringBoot完成的用户后台管理系统

一些解释说明也在代码里面,源码及资源会放在文末哦!!!

- 这是效果图

  1. [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gpvTXAKW-1654435273603)(D:\WorkSpace\Typora\images\image-20220605204933537.png)]

  2. 2

  3. [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mWKDCS9p-1654435273606)(D:\WorkSpace\Typora\images\image-20220605205048063.png)]

  • 大概就这些功能不多

1.登录拦截器

package com.xiaomin.config;

import org.springframework.web.servlet.HandlerInterceptor;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * @Author: XiaoMin
 * @PRODUCT_NAME: IntelliJ IDEA
 * @PROJECT_NAME: UserManagement
 * @Date_Time: 2022/5/28 23:13
 */
public class LoginHandlerInterceptor implements HandlerInterceptor {
  @Override
  public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
    Object loginUser = request.getSession().getAttribute("loginUser");
    if (loginUser == null) {//没有登陆
      request.setAttribute("msg","没有权限，请先登录");
      request.getRequestDispatcher("/index.html").forward(request,response);
      return false;
    }else {
      return true;
    }
  }
}

2.MVC的配置类

package com.xiaomin.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * @Author: XiaoMin
 * @PRODUCT_NAME: IntelliJ IDEA
 * @PROJECT_NAME: UserManagement
 * @Date_Time: 2022/5/28 23:11
 */
@Configuration
public class MyMVCConfig implements WebMvcConfigurer {
  @Override
  public void addViewControllers(ViewControllerRegistry registry) {
    registry.addViewController("/").setViewName("index");
    registry.addViewController("/index.html").setViewName("index");

    registry.addViewController("/main.html").setViewName("main");
    registry.addViewController("/main").setViewName("main");

    registry.addViewController("/member_add").setViewName("X-Admin/member-add");
    registry.addViewController("/member_show").setViewName("X-Admin/member-show");
    registry.addViewController("/member_edit").setViewName("X-Admin/member-edit");



  }

  @Override
  public void addInterceptors(InterceptorRegistry registry) {
    registry.addInterceptor(new LoginHandlerInterceptor())
      .addPathPatterns("/**")
      .excludePathPatterns(
      "/index.html","/registered.html","/","/user/login",
      "/user/register","/register",
      "/font/*","/css/*","/images/*","/js/*");
  }
}

3.登录控制器

package com.xiaomin.controller;

import com.xiaomin.dao.UserDao;
import com.xiaomin.pojo.User;
import com.xiaomin.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;

import javax.servlet.http.HttpSession;

/**
 * @Author: XiaoMin
 * @PRODUCT_NAME: IntelliJ IDEA
 * @PROJECT_NAME: UserManagement
 * @Date_Time: 2022/5/28 11:23
 */
@Controller
public class LoginController {

  @Autowired
  private UserService userService;

  @RequestMapping("/user/login")
  public String login(
    @RequestParam("userName") String userName,
    @RequestParam("password") String password,
    Model model, HttpSession session){

    User userLogin = userService.login(userName, password);
    if (userName.equals("XiaoMin") &&
        password.equals("1314520")){
      session.setAttribute("loginUser",userName);
      return "redirect:/main.html";
    }else if (userLogin!=null && userLogin.getIdentity()==1 && userLogin.getStatus()==1){
      session.setAttribute("loginUser",userName);
      return "redirect:/main.html";
    }else if (userLogin!=null && userLogin.getIdentity()==0){
      model.addAttribute("msg","您的权限不够,请使用管理员账户登录");
      return "index";
    }else if (userLogin!=null && userLogin.getIdentity()==1 && userLogin.getStatus()==0){
      model.addAttribute("msg","您的账号已停用,请联系XiaoMin大BOSS修改");
      return "index";
    }else {
      model.addAttribute("msg","用户名或密码错误");
      return "index";
    }
  }

  @RequestMapping("/user/logout")
  public String logout(HttpSession session){
    session.invalidate();
    return "redirect:/index.html";
  }
}

4.用户控制器===>控制一些请求等操作CRUD

package com.xiaomin.controller;

import com.xiaomin.dao.UserDao;
import com.xiaomin.mapper.UserMapper;
import com.xiaomin.pojo.User;
import com.xiaomin.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.Collection;
import java.util.List;

/**
 * @Author: XiaoMin
 * @PRODUCT_NAME: IntelliJ IDEA
 * @PROJECT_NAME: UserManagement
 * @Date_Time: 2022/5/29 14:07
 */
@Controller
public class UserController {

  @Autowired
  private UserService userService;//注入Service

  /**
     * 测试
     * @return
     */
  @GetMapping("/AllUserList")
  @ResponseBody
  public Collection<User> getAllUser() {
    System.out.println("进入User列表");
    Collection<User> allUser = userService.getAllUser();
    allUser.forEach(x-> System.out.println(x));
    return allUser;
  }


  @RequestMapping("/list")
  public String list(Model model){

    Collection<User> users = userService.getAllUser();
    model.addAttribute("users",users);
    return "X-Admin/member-list";
  }
  @RequestMapping("/vip-list")
  public String vipList(Model model){

    Collection<User> users = userService.getAllUser();
    model.addAttribute("users",users);
    return "X-Admin/member-vip-list";
  }

  @RequestMapping("/user/register")
  public String ToRegisterPage(){
    System.out.println("进入注册页面");
    return "registered";
  }
  @RequestMapping("/register")
  public String ToRegister(User user){
    System.out.println("===>"+user.toString());
    userService.addUser(user);
    return "redirect:/index.html";
  }

  @RequestMapping("/user/add")
  public String toAdd(User user){
    userService.addUser(user);
    return "main";
  }
  @RequestMapping("/user/edit")
  public String toEdit(User user){
    System.out.println(user);
    userService.updateUser(user);
    return "main";
  }
  @RequestMapping("/user/del")
  public String toDel(Integer id){
    System.out.println("执行删除方法,删除===>"+id);
    userService.deleteUserById(id);
    return "main";
  }
  @RequestMapping("/user/delSelector")
  public String toDelSelector(String ids){
    System.out.println("进入了批量删除====>"+ids);
    String[] id=ids.split(",");
    for (String s : id) {
      int i = Integer.parseInt(s);
      userService.deleteUserById(i);
    }
    return "main";
  }

  @RequestMapping("/user/getUserById")
  public String toGetUserById(Integer username,Model model){
    User user = userService.getUserById(username);
    System.out.println("============>"+username);
    model.addAttribute("getUserById",user);
    return "main";
  }




  @RequestMapping("/level")
  public String toLevelPage(){
    return "X-Admin/member-level";
  }
  @RequestMapping("/kiss")
  public String toKissPage(){
    return "X-Admin/member-kiss";
  }

  /**
     * echarts图表
     * @return
     */
  @RequestMapping("/echarts1")
  public String toEcharts1Page(){
    return "X-Admin/echarts1";
  }
  @RequestMapping("/echarts2")
  public String toEcharts2Page(){
    return "X-Admin/echarts2";
  }
  @RequestMapping("/echarts4")
  public String toEcharts4Page(){
    return "X-Admin/echarts4";
  }
  @RequestMapping("/echarts5")
  public String toEcharts5Page(){
    return "X-Admin/echarts5";
  }
  @RequestMapping("/echarts6")
  public String toEcharts6Page(){
    return "X-Admin/echarts6";
  }


  @RequestMapping("/demo")
  public String toDemoPage(){
    return "X-Admin/demo";
  }
}

5.dao层如果使用数据库的话可以不用看这一个这是一个模拟数据的

package com.xiaomin.dao;

import com.xiaomin.pojo.User;
import org.springframework.stereotype.Repository;

import java.util.Collection;
import java.util.HashMap;
import java.util.Map;

/**
* @Author: XiaoMin
* @PRODUCT_NAME: IntelliJ IDEA
* @PROJECT_NAME: UserManagement
* @Date_Time: 2022/5/28 9:47
*/
@Repository
public class UserDao {
//模拟数据
public static Map<Integer, User> users=null;
static {
users=new HashMap<Integer, User>();
users.put(1001,new User(1001,"XiaoMin","1314520",1,"xiaomin.spring@qq.com",1,1));
users.put(1002,new User(1002,"XiaoYan","1314520",0,"xiaomin.summer@qq.com",1,1));
users.put(1003,new User(1003,"JieNiYou","1314520",1,"xiaomin.winter@qq.com",0,0));
users.put(1004,new User(1004,"JunXin","1314520",0,"xiaomin.autumn@qq.com",0,0));
users.put(1005,new User(1005,"小敏","1314520",1,"xiaomin.spring@qq.com",0,0));
users.put(1006,new User(1006,"小艳","1314520",0,"xiaomin.winter@qq.com",0,0));
users.put(1007,new User(1007,"解你忧","1314520",1,"xiaomin.spring@qq.com",0,0));
users.put(1008,new User(1008,"君心","1314520",0,"xiaomin.summer@qq.com",0,0));
users.put(1009,new User(1009,"张三","5201314",1,"xiaomin.spring@qq.com",0,0));
users.put(1010,new User(1010,"李四","5201314",1,"xiaomin.autumn@qq.com",0,0));
users.put(1011,new User(1011,"王二麻","5201314",0,"xiaomin.spring@qq.com",0,0));
users.put(1012,new User(1012,"ZhangSan","5201314",1,"xiaomin.summer@qq.com",0,0));
users.put(1013,new User(1013,"LiSi","5201314",1,"xiaomin.autumn@qq.com",0,0));
users.put(1014,new User(1014,"WangErMa","5201314",0,"xiaomin.summer@qq.com",0,0));

}
//初始化id   id自增
public static Integer initId=1015;

public void addUser(User user){
if (user.getId() == null) {
user.setId(initId++);
}
if (user.getStatus()==null){
user.setStatus(0);
}
users.put(user.getId(),user);
}

public Collection<User> getAllUser(){
return users.values();
}

public User getUserById(Integer id){
return users.get(id);
}

public void deleteUserById(Integer id){
users.remove(id);
}

}

6.mapper===>定义接口

package com.xiaomin.mapper;

import com.xiaomin.pojo.User;
import org.apache.ibatis.annotations.Mapper;
import org.springframework.stereotype.Repository;

import java.util.Collection;
import java.util.List;

/**
 * @Author: XiaoMin
 * @PRODUCT_NAME: IntelliJ IDEA
 * @PROJECT_NAME: UserManagement
 * @Date_Time: 2022/6/2 11:08
 */
@Mapper
@Repository
public interface UserMapper {

  Collection<User> getAllUser();
  User getUserById(Integer id);
  User login(String userName,String password);

  void addUser(User user);
  void deleteUserById(Integer id);

  void updateUser(User user);
  void updateUserStatusById(Integer id,Integer status);

}

7.userpojo==>userbean层

package com.xiaomin.pojo;

import lombok.Data;
import lombok.NoArgsConstructor;
import org.apache.ibatis.type.Alias;

import java.util.Date;

/**
 * @Author: XiaoMin
 * @PRODUCT_NAME: IntelliJ IDEA
 * @PROJECT_NAME: UserManagement
 * @Date_Time: 2022/5/28 9:39
 */
@Data
@NoArgsConstructor
@Alias("user")
public class User {
  private Integer id;
  private String userName;
  private String password;
  private Integer gender;     //0:女   1:男
  private String email;
  private Date birth;

  private Integer identity;   //1:超级用户    0:普通用户

  private Integer status;     //1:已启用 0:已停用

  public User(Integer id, String userName, String password, Integer gender, String email,Integer identity,Integer status) {
    this.id = id;
    this.userName = userName;
    this.password = password;
    this.gender = gender;
    this.email = email;
    //自动生成当前日期为生日
    this.birth = new Date();
    this.identity = identity;
    this.status = status;
  }
}

8.业务层(接口)

package com.xiaomin.service;

import com.xiaomin.pojo.User;

import java.util.Collection;
import java.util.List;

/**
 * @Author: XiaoMin
 * @PRODUCT_NAME: IntelliJ IDEA
 * @PROJECT_NAME: UserManagement
 * @Date_Time: 2022/6/2 11:16
 */
public interface UserService {
  Collection<User> getAllUser();
  User getUserById(Integer id);
  User login(String userName,String password);
  void addUser(User user);
  void deleteUserById(Integer id);

  void updateUser(User user);
  void updateUserStatusById(Integer id,Integer status);
}

9.业务层(实现类)

package com.xiaomin.service.impl;

import com.xiaomin.mapper.UserMapper;
import com.xiaomin.pojo.User;
import com.xiaomin.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.Collection;
import java.util.List;

/**
 * @Author: XiaoMin
 * @PRODUCT_NAME: IntelliJ IDEA
 * @PROJECT_NAME: UserManagement
 * @Date_Time: 2022/6/2 11:19
 */
@Service
public class UserServiceImpl implements UserService {

  @Autowired
  private UserMapper userMapper;
  @Override
  public Collection<User> getAllUser() {
    return userMapper.getAllUser();
  }

  @Override
  public User getUserById(Integer id) {
    return userMapper.getUserById(id);
  }
  @Override
  public User login(String userName,String password){
    return userMapper.login(userName,password);
  }

  @Override
  public void addUser(User user) {
    userMapper.addUser(user);
  }

  @Override
  public void deleteUserById(Integer id) {
    userMapper.deleteUserById(id);
  }

  @Override
  public void updateUser(User user) {
    userMapper.updateUser(user);
  }

  @Override
  public void updateUserStatusById(Integer id,Integer status) {
    userMapper.updateUserStatusById(id,status);
  }
}

10.userMapper===>相当于操作数据库的代码

<?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.xiaomin.mapper.UserMapper">
  <resultMap id="user" type="com.xiaomin.pojo.User"/>
  <parameterMap id="user" type="com.xiaomin.pojo.User"/>

  <select id="getAllUser" resultMap="user">
    select  * from user_tb
  </select>
  <select id="login" resultMap="user">
    select  userName,password,identity,status from user_tb
    where userName=#{userName} and password=#{password}
  </select>

  <insert id="addUser" parameterType="User" keyProperty="id" useGeneratedKeys="true">
    insert into user_tb (userName, password, gender, email, birth, identity, status)
    values (#{userName}, #{password}, #{gender}, #{email}, #{birth}, #{identity}, ifnull(#{status},0));
  </insert>

  <update id="updateUser" parameterType="User">
    # ifnull()防止传入空值影影响数据
    update user_tb
    set userName = ifnull(#{userName},userName),
    password = ifnull(#{password},password),
    gender = ifnull(#{gender},gender),
    email = ifnull(#{email},email),
    birth = ifnull(#{birth},birth),
    identity = ifnull(#{identity},identity),
    status = ifnull(#{status},status)
    where id=#{id};
  </update>

  <delete id="deleteUserById" parameterType="User">
    delete from user_tb where id=#{id};
  </delete>
</mapper>

11.commons====>这是一些页面都有的东西放在一个共有页面,可以直接调取

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
  <!-- 顶部开始 -->
  <div class="container" th:fragment="topbar">
    <div class="logo"><a href="">XiaoMin</a></div>
    <div class="open-nav"><i class="iconfont">&#xe699;</i></div>
    <ul class="layui-nav right" lay-filter="">
      <li class="layui-nav-item">
        <!--<a href="">[[${session.loginUser}]]</a>-->
        <a href="" th:text="${session.loginUser}"/>
        <dl class="layui-nav-child"> <!-- 二级菜单 -->
          <dd><a href="">个人信息</a></dd>
          <dd><a href="/">切换帐号</a></dd>
          <dd><a th:href="@{/user/logout}">退出</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item"><a th:href="@{/main}">前台首页</a></li>
    </ul>
  </div>
  <!-- 顶部结束 -->

  <!-- 左侧菜单开始 -->
  <div class="left-nav" th:fragment="leftbar">
    <div id="side-nav">
      <ul id="nav">

        <li class="list" current>
          <a href="/main">
            <i class="iconfont">&#xe761;</i>
            欢迎页面
            <i class="iconfont nav_right">&#xe697;</i>
          </a>
        </li>
        <li class="list" current>
          <a th:href="@{/demo}">
            <i class="iconfont">&#xe761;</i>
            小Demo
            <i class="iconfont nav_right">&#xe697;</i>
          </a>
        </li>

        <li class="list">
          <a href="javascript:;">
            <i class="iconfont">&#xe70b;</i>
            用户管理
            <i class="iconfont nav_right">&#xe697;</i>
          </a>
          <ul class="sub-menu">
            <li>
              <a th:href="@{/list}">
                <i class="iconfont">&#xe6a7;</i>
                用户列表
              </a>
            </li>
            <li>
              <a th:href="@{/level}">
                <i class="iconfont">&#xe6a7;</i>
                等级管理
              </a>
            </li>
            <li>
              <a th:href="@{/kiss}">
                <i class="iconfont">&#xe6a7;</i>
                积分管理
              </a>
            </li>
          </ul>
        </li>

        <li class="list" >
          <a href="javascript:;">
            <i class="iconfont">&#xe6a3;</i>
            管理员管理
            <i class="iconfont nav_right">&#xe697;</i>
          </a>
          <ul class="sub-menu" style="display:none">
            <li>
              <a th:href="@{/vip-list}">
                <i class="iconfont">&#xe6a7;</i>
                管理员列表
              </a>
            </li>
          </ul>
        </li>

        <li class="list" >
          <a href="javascript:;">
            <i class="iconfont">&#xe6a3;</i>
            系统统计
            <i class="iconfont nav_right">&#xe697;</i>
          </a>
          <ul class="sub-menu" style="display:none">
            <li>
              <a th:href="@{/echarts1}">
                <i class="iconfont">&#xe6a7;</i>
                拆线图
              </a>
            </li>
            <li>
              <a th:href="@{/echarts2}">
                <i class="iconfont">&#xe6a7;</i>
                柱状图
              </a>
            </li>
            <li>
              <a th:href="@{/echarts4}">
                <i class="iconfont">&#xe6a7;</i>
                饼图
              </a>
            </li>
            <li>
              <a th:href="@{/echarts5}">
                <i class="iconfont">&#xe6a7;</i>
                k线图
              </a>
            </li>
            <li>
              <a th:href="@{/echarts6}">
                <i class="iconfont">&#xe6a7;</i>
                仪表图
              </a>
            </li>
          </ul>
        </li>

      </ul>
    </div>
  </div>
  <!-- 左侧菜单结束 -->

  <!-- 右侧内容框架,更改从这里开始 -->
  <form class="layui-form xbs" method="post" th:action="@{/user/getUserById}" target="_self" th:fragment="R_search">
    <div class="layui-form-pane" style="text-align: center;">
      <div class="layui-form-item" style="display: inline-block;">
        <label class="layui-form-label xbs768">日期范围</label>
        <div class="layui-input-inline xbs768">
          <input class="layui-input" placeholder="开始日" id="LAY_demorange_s">
        </div>
        <div class="layui-input-inline xbs768">
          <input class="layui-input" placeholder="截止日" id="LAY_demorange_e">
        </div>
        <div class="layui-input-inline">
          <input type="text" name="username"  placeholder="请输入用户名" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-input-inline" style="width:80px">
          <button class="layui-btn" type="submit"  lay-submit="" lay-filter="search"><i class="layui-icon">&#xe615;</i></button>
        </div>
      </div>
    </div>
  </form>
  <xblock th:fragment="xblockAdd">
    <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon">&#xe640;</i>批量删除</button>
    <button class="layui-btn" onclick="member_add('添加用户','/member_add','600','500')"><i class="layui-icon">&#xe608;</i>添加</button>
    <!--<span class="x-right" style="line-height:40px">共有数据：88 条</span>-->
  </xblock>

  <!--table-->
  <thead th:fragment="thead">
    <tr>
      <th>
        <input type="checkbox" id="selectAll"/>
      </th>
      <th>ID</th>
      <th>用户名</th>
      <th>密码</th>
      <th>性别</th>
      <th>邮箱</th>
      <th>生日</th>
      <th>身份</th>
      <th>状态</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody th:each="user:${users}" th:fragment="id(userid)">
    <tr th:if="${user.identity}==${userid}">
      <td>
        <input type="checkbox" th:value="${user.id}">
      </td>
      <td th:text="${user.id}"/>
      <td>
        <u style="cursor:pointer" th:onclick="member_show('[[${user.userName}]]',
                                              '/member_show','[[${user.userName}]]','[[${user.email}]]','[[${user.gender}]]',
                                              '[[${user.identity}]]','400','600')">
          [[${user.userName}]]
        </u>
      </td>
      <td th:text="${user.password}"/>
      <td th:text="${user.gender==0?'女':'男'}"/>
      <td th:text="${user.email}"/>
      <td th:text="${#dates.format(user.birth,'yyyy-MM-dd')}"/>
      <td th:text="${user.identity}==1?'超级管理员':'普通用户'"/>
      <td class="td-status">
        <span th:if="${user.status==1}" class="layui-btn layui-btn-normal layui-btn-mini"
              th:text="${user.status==1?'已启用':'已停用'}"/>
        <span th:if="${user.status==0}" class="layui-btn layui-btn-disabled layui-btn-mini"
              th:text="${user.status==0?'已停用':'已启用'}"/>
      </td>
      <td class="td-manage">

        <!--'[[${user.userName}]]',
'[[${user.password}]]','[[${user.gender}]]',
'[[${user.email}]]','[[${user.birth}]]',
'[[${user.identity}]]',-->
        <a th:if="${user.status==1}" style="text-decoration:none"
           th:onclick="member_stop(this,'[[${user.id}]]','0')"
           href="javascript:;" title="停用">
          <i class="layui-icon">&#xe601;</i>
        </a>
        <!--'[[${user.userName}]]',
'[[${user.password}]]','[[${user.gender}]]',
'[[${user.email}]]','[[${user.birth}]]',
'[[${user.identity}]]',-->
        <a th:if="${user.status==0}" style="text-decoration:none"
           th:onclick="member_start(this,'[[${user.id}]]','1')"
           href="javascript:;" title="启用">
          <i class="layui-icon">&#xe62f;</i>
        </a>

        <a title="编辑" href="javascript:;" th:onclick="member_edit(
                                                      '编辑','/member_edit',
                                                      '[[${user.id}]]','[[${user.userName}]]',
                                                      '[[${user.password}]]','[[${user.gender}]]',
                                                      '[[${user.email}]]','[[${user.birth}]]',
                                                      '[[${user.identity}]]','[[${user.status}]]',
                                                      '','510')"
           class="ml-5" style="text-decoration:none">
          <i class="layui-icon">&#xe642;</i>
        </a>
        <a title="删除" href="javascript:;" th:onclick="member_del(this,'[[${user.id}]]')"
           style="text-decoration:none">
          <i class="layui-icon">&#xe640;</i>
        </a>

      </td>
    </tr>
  </tbody>
  <!--table-->
  <!-- 右侧内容框架,更改从这里结束 -->

  </div>
<!-- 中部结束 -->

<!-- 底部开始 -->
<div class="footer" th:fragment="footerbar">
  <div class="copyright">Copyright &copy;2022 xiaomin v2.3 All Rights Reserved.</div>
</div>
<!-- 底部结束 -->

<!-- 背景切换开始 -->
<div class="bg-changer" th:fragment="bgchange">
  <div class="swiper-container changer-list">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img class="item" th:src="@{/X-Admin/images/a.jpg}" alt=""></div>
      <div class="swiper-slide"><img class="item" th:src="@{/X-Admin/images/b.jpg}" alt=""></div>
      <div class="swiper-slide"><img class="item" th:src="@{/X-Admin/images/c.jpg}" alt=""></div>
      <div class="swiper-slide"><img class="item" th:src="@{/X-Admin/images/d.jpg}" alt=""></div>
      <div class="swiper-slide"><img class="item" th:src="@{/X-Admin/images/e.jpg}" alt=""></div>
      <div class="swiper-slide"><img class="item" th:src="@{/X-Admin/images/f.jpg}" alt=""></div>
      <div class="swiper-slide"><img class="item" th:src="@{/X-Admin/images/g.jpg}" alt=""></div>
      <div class="swiper-slide"><img class="item" th:src="@{/X-Admin/images/h.jpg}" alt=""></div>
      <div class="swiper-slide"><img class="item" th:src="@{/X-Admin/images/i.jpg}" alt=""></div>
      <div class="swiper-slide"><img class="item" th:src="@{/X-Admin/images/j.jpg}" alt=""></div>
      <div class="swiper-slide"><img class="item" th:src="@{/X-Admin/images/k.jpg}" alt=""></div>
      <div class="swiper-slide"><img class="item" th:src="@{/X-Admin/images/l.jpg}" alt=""></div>
      <div class="swiper-slide"><span class="reset">初始化</span></div>
    </div>
  </div>
  <div class="bg-out"></div>
  <div id="changer-set"><i class="iconfont">&#xe696;</i></div>
</div>
<!-- 背景切换结束 -->
</html>

12.自定义错误页面直接建文件夹和404.html

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-InCYGuPM-1654435273609)(D:\WorkSpace\Typora\images\image-20220605210951415.png)]

13.登录页

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link th:href="@{/css/bootstrap.min.css}" type="text/css" rel="stylesheet">
    <link th:href="@{/css/font-awesome.min.css}" type="text/javascript" rel="stylesheet">
    <link th:href="@{/css/bootsnav.css}" type="text/css" rel="stylesheet">
    <link th:href="@{/css/normalize.css}" type="text/css" rel="stylesheet">
    <link th:href="@{/css/css.css}" rel="stylesheet" type="text/css">
    <script th:src="@{/js/jquery-1.11.0.min.js}" type="text/javascript"></script>
    <script th:src="@{/js/bootstrap.min.js}" type="text/javascript"></script>
    <script th:src="@{/js/bootsnav.js}" type="text/javascript"></script>
    <script th:src="@{/js/jquery.js}" type="text/javascript"></script>
    <script th:src="@{/js/html5.js}"  type="text/javascript"></script>
    <title>登录</title>
  </head>

  <body class="logobg_style">

    <div id="large-header" class="large-header login-page">
      <canvas id="demo-canvas" width="1590" height="711"></canvas>
      <div class="login-form">
        <div class="login-content">
          <h1 class="title_name">账户登录</h1>

          <form th:action="@{/user/login}" method="post" role="form" id="form_login" class="login_padding">
            <div class="form-group clearfix">
              <div class="input-group">
                <div class="input-group-addon">
                  <i class="icon_user"></i>
                </div>
                <input type="text" class="form-control" name="userName" id="username" placeholder="用户名" autocomplete="off" required="" autofocus="" value="XiaoMin">
              </div>
            </div>
            <div class="form-group clearfix">
              <div class="input-group">
                <div class="input-group-addon">
                  <i class="icon_password"></i>
                </div>
                <input type="password" class="form-control" name="password" id="password" placeholder="密码" required="" autocomplete="off" value="1314520">
              </div>
            </div>
            <div class=" textright"><a href="" class="forget">忘记密码？</a></div>
            <div class="tishi"></div>
            <div class="form-group">
              <p style="color: red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"/>
              <input type="submit" class="btn btn-danger btn-block btn-login" value="登录"/>
            </div>
            <div class=" textright"><a th:href="@{/user/register}" class="forget">立即注册</a></div>
            <div class="form-group">
            </div>
          </form>
        </div>

      </div>
    </div>

    <script th:src="@{/js/TweenLite/TweenLite.min.js}"></script>
    <script th:src="@{/js/TweenLite/EasePack.min.js}"></script>
    <script th:src="@{/js/TweenLite/rAF.js}"></script>
    <script th:src="@{/js/TweenLite/demo-1.js}"></script>
  </body>
</html>

14.主页面main

<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8">
    <title>首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" th:href="@{/favicon.ico}" type="image/x-icon" />
    <link rel="stylesheet" th:href="@{/X-Admin/css/font.css}">
    <link rel="stylesheet" th:href="@{/X-Admin/css/xadmin.css}">
    <link rel="stylesheet" th:href="@{https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css}">
    <script type="text/javascript" th:src="@{https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.jquery.min.js}"></script>
    <script th:src="@{/X-Admin/lib/layui/layui.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/X-Admin/js/xadmin.js}"></script>

  </head>
  <body>
    <!-- 顶部开始 -->
    <div th:replace="~{/commons/commons::topbar}"/>
    <!-- 顶部结束 -->
    <!-- 中部开始 -->
    <div class="wrapper">
      <!-- 左侧菜单开始 -->
      <div th:replace="~{/commons/commons::leftbar}"/>
      <!-- 左侧菜单结束 -->
      <!-- 右侧主体开始 -->
      <div class="page-content">
        <div class="content">
          <!-- 右侧内容框架，更改从这里开始 -->
          <blockquote class="layui-elem-quote">
            注意：每个页面都可以独立设置一个背景主题，如果每个都设置会比较消耗本地的存储，如果想全部恢复，请重置。
          </blockquote>
          <blockquote class="layui-elem-quote">
            欢迎使用XiaoMin后台管理系统！<span class="f-14">v18.0</span>
          </blockquote>
          <fieldset class="layui-elem-field layui-field-title site-title">
            <legend><a name="default">信息统计</a></legend>
          </fieldset>
          <table class="layui-table">
            <thead>
              <tr>
                <th>统计</th>
                <th>资讯库</th>
                <th>图片库</th>
                <th>产品库</th>
                <th>用户</th>
                <th>管理员</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>总数</td>
                <td>92</td>
                <td>9</td>
                <td>0</td>
                <td>8</td>
                <td>20</td>
              </tr>
              <tr>
                <td>今日</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
              </tr>
              <tr>
                <td>昨日</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
              </tr>
              <tr>
                <td>本周</td>
                <td>2</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
              </tr>
              <tr>
                <td>本月</td>
                <td>2</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
              </tr>
            </tbody>
          </table>
          <table class="layui-table">
            <thead>
              <tr>
                <th colspan="2" scope="col">服务器信息</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th width="30%">服务器计算机名</th>
                <td><span id="lbServerName">http://127.0.0.1/</span></td>
              </tr>
              <tr>
                <td>服务器IP地址</td>
                <td>192.168.1.1</td>
              </tr>
              <tr>
                <td>服务器域名</td>
                <td>jieniyou</td>
              </tr>
              <tr>
                <td>服务器端口 </td>
                <td>80</td>
              </tr>
              <tr>
                <td>服务器IIS版本 </td>
                <td>Microsoft-IIS/6.0</td>
              </tr>
              <tr>
                <td>本文件所在文件夹 </td>
                <td>本地</td>
              </tr>
              <tr>
                <td>服务器操作系统 </td>
                <td>Microsoft Windows NT 5.2.3790 Service Pack 2</td>
              </tr>
              <tr>
                <td>系统所在文件夹 </td>
                <td>C:\WINDOWS\system32</td>
              </tr>
              <tr>
                <td>服务器脚本超时时间 </td>
                <td>30000秒</td>
              </tr>
              <tr>
                <td>服务器的语言种类 </td>
                <td>Chinese (People's Republic of China)</td>
              </tr>
              <tr>
                <td>.NET Framework 版本 </td>
                <td>2.050727.3655</td>
              </tr>
              <tr>
                <td>服务器当前时间 </td>
                <td></td>
              </tr>
              <tr>
                <td>服务器IE版本 </td>
                <td>6.0000</td>
              </tr>
              <tr>
                <td>服务器上次启动到现在已运行 </td>
                <td>7210分钟</td>
              </tr>
              <tr>
                <td>逻辑驱动器 </td>
                <td>C:\D:\</td>
              </tr>
              <tr>
                <td>CPU 总数 </td>
                <td>4</td>
              </tr>
              <tr>
                <td>CPU 类型 </td>
                <td>x86 Family 6 Model 42 Stepping 1, GenuineIntel</td>
              </tr>
              <tr>
                <td>虚拟内存 </td>
                <td>52480M</td>
              </tr>
              <tr>
                <td>当前程序占用内存 </td>
                <td>3.29M</td>
              </tr>
              <tr>
                <td>Asp.net所占内存 </td>
                <td>51.46M</td>
              </tr>
              <tr>
                <td>当前Session数量 </td>
                <td>8</td>
              </tr>
              <tr>
                <td>当前SessionID </td>
                <td>无</td>
              </tr>
              <tr>
                <td>当前系统用户名 </td>
                <td>NETWORK SERVICE</td>
              </tr>
            </tbody>
          </table>
          <!-- 右侧内容框架，更改从这里结束 -->
        </div>
      </div>
      <!-- 右侧主体结束 -->
    </div>
    <!-- 中部结束 -->
    <!-- 底部开始 -->
    <div th:replace="~{/commons/commons::footerbar}">
    </div>
    <!-- 底部结束 -->
    <!-- 背景切换开始 -->
    <div th:replace="~{/commons/commons::bgchange}">
    </div>
    <!-- 背景切换结束 -->

    <!--传值测试-->
    <!--<button οnclick="show_layer('132','/test','我是你爸爸','555','500','600')">sdbkdsbcdskcnkds</button>-->
    <!--<script>-->
    <!--    function show_layer(title,url,userName,password,w,h){-->
    <!--        layer.open({-->
    <!--            type: 2,-->
    <!--            area: [w+'px', h +'px'],-->
    <!--            fix: false, //不固定-->
    <!--            maxmin: true,-->
    <!--            shadeClose: true,-->
    <!--            shade:0.4,-->
    <!--            title: title,-->
    <!--            content: url,  //url 为子布局的url路径-->
    <!--            success:function (layero,index) {-->
    <!--                var iframe = window['layui-layer-iframe' + index];-->
    <!--                iframe.child([userName,password])-->
    <!--            }-->
    <!--        });-->
    <!--    }-->
    <!--</script>-->
  </body>
</html>

16.注册页面

<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link th:href="@{/css/bootstrap.min.css}" type="text/css" rel="stylesheet">
    <link th:href="@{/css/font-awesome.min.css}" type="text/javascript" rel="stylesheet">
    <link th:href="@{/css/bootsnav.css}" type="text/css" rel="stylesheet">
    <link th:href="@{/css/normalize.css}" type="text/css" rel="stylesheet">
    <link th:href="@{/css/css.css}" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" th:href="@{https://www.layuicdn.com/layui/css/layui.css}" />
    <style type="text/css">
      input::-webkit-outer-spin-button,
      input::-webkit-inner-spin-button {
        -webkit-appearance: none;
      }
      input[type="number"] {
        -moz-appearance: textfield;
      }
    </style>

    <script th:src="@{/js/jquery-1.11.0.min.js}" type="text/javascript"></script>
    <script th:src="@{/js/jquery.step.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}" type="text/javascript"></script>
    <script th:src="@{/js/bootsnav.js}" type="text/javascript"></script>
    <script th:src="@{https://www.layuicdn.com/layui/layui.js}"></script>

    <script th:src="@{/js/jquery.js}" type="text/javascript"></script>
    <!--[if IE]><script th:src="@{/js/html5.js}"></script><![endif]-->
    <title>注册</title>
  </head>

  <body class="logobg_style">
    <div id="large-header" class="large-header login-page">
      <canvas id="demo-canvas" width="1590" height="711"></canvas>
      <div class="Retrieve_style">
        <div class="Retrieve-content step-body" id="myStep">
          <h1 class="title_name">用户注册</h1>

          <form th:action="@{/register}" role="form" class="login_padding">

            <div class="form-group clearfix">
              <div class="input-group">
                <input type="number" class="form-controlR" name="userName" id="username" placeholder="用户名" required="required" autofocus="autofocus" autocomplete="off">
              </div>
            </div>

            <div class="form-group clearfix">
              <div class="input-group">
                <input type="password" class="form-controlR" name="password" id="password" placeholder="密码" required="required" autofocus="autofocus" autocomplete="off">
              </div>
            </div>

            <div class="form-group clearfix">
              <div class="input-group">
                <select class="form-controlR" name="gender" id="gender" autofocus="autofocus" autocomplete="off">
                  <option selected value="1">男</option>
                  <option value="0">女</option>
                </select>
              </div>
            </div>

            <div class="form-group clearfix">
              <div class="input-group">
                <input type="email" class="form-controlR" name="email" placeholder="邮箱" required="required" autofocus="autofocus" autocomplete="off">
              </div>
            </div>

            <div class="form-group clearfix">
              <div class="input-group">
                <input type="date" class="form-controlR" name="birth" required="required" autofocus="autofocus" autocomplete="off">
              </div>
            </div>

            <div class="form-group clearfix">
              <div class="input-group">
                <select class="form-controlR" name="identity" required="required" autofocus="autofocus" autocomplete="off">
                  <option value="1">超级管理员</option>
                  <option value="0">普通用户</option>
                </select>
              </div>
            </div>
            <div class="form-group">
              <input type="submit" class="btn btn-danger btn-block btn-login" id="submitBtn" value="注册"/>
            </div>
          </form>
        </div>
      </div>
    </div>
    <script th:src="@{/js/TweenLite/TweenLite.min.js}"></script>
    <script th:src="@{/js/TweenLite/EasePack.min.js}"></script>
    <script th:src="@{/js/TweenLite/rAF.js}"></script>
    <script th:src="@{/js/TweenLite/demo-1.js}"></script>
  </body>
</html>

17.资源文件===>resources/application.properties

server.port=80
spring.mvc.format.date=yyyy-MM-dd
#关闭模板引擎的缓存
spring.thymeleaf.cache=false


#数据库配置
mybatis.type-aliases-package=com.xiaomin.pojo
## mapper xml 文件地址
mybatis.mapper-locations=classpath:mybatis/mapper/*.xml

##数据库url
spring.datasource.url=jdbc:mysql://localhost:3306/你的数据库?serverTimezone=UTC&useUnicode=true&characterEncoding=utf-8
##数据库用户名
spring.datasource.username=你的用户名
##数据库密码
spring.datasource.password=你的密码
##数据库驱动
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

18.资源文件

1. csdn:点我获取资源

2. git:资源

posted @ 2022-06-27 22:14  解你忧  阅读(232)  评论(1)  编辑  收藏  举报