- 开发工具 IDEA
- Java 1.8
- 项目构建 spring boot 2.6.7
- 项目管理 maven 3.6.3
- 持久层 mybatis-plus 3.5.0
- 数据库 MySQL 8.0.28
- 数据源 Druid 1.2.8
- Layui 2.6.8 https://www.layuion.com/
- jQuery 3.6.0 https://jquery.com/download/
实现过程有些长，效果：
登录页面：
后台基础页面
如何通过IDEA创建springboot项目请自行另外查找
static下layui可以通过https://www.layuion.com/ 下载
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.6.7</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.example</groupId>
<artifactId>demo-manage</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>demo-manage</name>
<description>Demo project for Spring Boot</description>
<properties>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.5.0</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid</artifactId>
<version>1.2.8</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<configuration>
<excludes>
<exclude>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</exclude>
</excludes>
</configuration>
</plugin>
</plugins>
</build>
</project>
spring:
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
type: com.alibaba.druid.pool.DruidDataSource
# 数据库用户名
username: root
# 数据库密码
password: 123456
# 127.0.0.1 本地地址，3306 端口 demo_manage 数据库名称
url: jdbc:mysql://127.0.0.1:3306/demo_manage?serverTimezone=UTC&useUnicode=true&characterEncoding=utf8
# druid参数调优（可选）
# 初始化大小，最小，最大
initialSize: 5
minIdle: 5
maxActive: 20
# 配置获取连接等待超时的时间
maxWait: 60000
# 配置间隔多久才进行一次检测，检测需要关闭的空闲连接，单位是毫秒
timeBetweenEvictionRunsMillis: 60000
# 配置一个连接在池中最小生存的时间，单位是毫秒
minEvictableIdleTimeMillis: 300000
# 测试连接
testWhileIdle: true
testOnBorrow: false
testOnReturn: false
# 打开PSCache，并且指定每个连接上PSCache的大小
poolPreparedStatements: true
maxPoolPreparedStatementPerConnectionSize: 20
# 配置监控统计拦截的filters
filters: stat
# asyncInit是1.1.4中新增加的配置，如果有initialSize数量较多时，打开会加快应用启动时间
asyncInit: true
mybatis-plus:
# 包扫描
type-aliases-package: com.example.model
mapper-locations: classpath:mapper/*.xml
configuration:
# 开启驼峰
map-underscore-to-camel-case: true
# 格式化全局时间字段
spring.jackson.date-format=yyyy-MM-dd HH:mm:ss
# 指定时间区域类型
spring.jackson.time-zone=GMT+8
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Demo-Manage</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo">Demo Manage</div>
<!-- 头部区域（可配合layui已有的水平导航） -->
<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item"><a href="">控制台</a></li>
<li class="layui-nav-item"><a href="">商品管理</a></li>
<li class="layui-nav-item"><a href="">用户</a></li>
<li class="layui-nav-item">
<a href="javascript:;">其它系统</a>
<dl class="layui-nav-child">
<dd><a href="">邮件管理</a></dd>
<dd><a href="">消息管理</a></dd>
<dd><a href="">授权管理</a></dd>
</dl>
</li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<a href="javascript:;">
<img src="http://t.cn/RCzsdCq" class="layui-nav-img">
赵云
</a>
<dl class="layui-nav-child">
<dd><a href="">基本资料</a></dd>
<dd><a href="">安全设置</a></dd>
<dd><a href="">退出</a></dd>
</dl>
</li>
<li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
<a href="javascript:;">
<i class="layui-icon layui-icon-more-vertical"></i>
</a>
</li>
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;">所有商品</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">列表一</a></dd>
<dd><a href="javascript:;">列表二</a></dd>
<dd><a href="javascript:;">列表三</a></dd>
<dd><a href="">超链接</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">列表一</a></dd>
<dd><a href="javascript:;">列表二</a></dd>
<dd><a href="">超链接</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">云市场</a></li>
<li class="layui-nav-item"><a href="">发布商品</a></li>
</ul>
</div>
</div>
<div class="layui-body">
<!-- 内容主体区域 -->
<div style="padding: 15px;">内容主体区域</div>
</div>
<!-- <div class="layui-footer">-->
<!-- <!– 底部固定区域 –>-->
<!-- © layui.com - 底部固定区域-->
<!-- </div>-->
</div>
<script src="layui/layui.js"></script>
<script>
//JavaScript代码区域
layui.use(['element', 'layer', 'util'], function(){
var element = layui.element
,layer = layui.layer
,util = layui.util
,$ = layui.$;
//头部事件
util.event('lay-header-event', {
//左侧菜单事件
menuLeft: function(othis){
layer.msg('展开左侧菜单的 *** 作', {icon: 0});
}
,menuRight: function(){
layer.open({
type: 1
,content: '<div style="padding: 15px;">处理右侧面板的 *** 作</div>'
,area: ['260px', '100%']
,offset: 'rt' //右上角
,anim: 5
,shadeClose: true
});
}
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>登录</title>
<link rel="stylesheet" href="/layui/css/layui.css">
<link rel="stylesheet" href="/layui/css/admin.css">
<link rel="stylesheet" href="/layui/css/log.css">
</head>
<body>
<div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login" style="display: none;">
<div class="layadmin-user-login-main">
<div class="layadmin-user-login-box layadmin-user-login-header">
<h2>Demo-Manage</h2>
<p>基于Layui的后台管理系统</p>
</div>
<div class="layadmin-user-login-box layadmin-user-login-body layui-form">
<div class="layui-form-item">
<label class="layadmin-user-login-icon layui-icon layui-icon-username"></label>
<input type="text" name="username" id="LAY-user-login-username" lay-verify="required" placeholder="用户名" class="layui-input">
</div>
<div class="layui-form-item">
<label class="layadmin-user-login-icon layui-icon layui-icon-password"></label>
<input type="password" name="password" id="LAY-user-login-password" lay-verify="required" placeholder="密码" readonly onfocus="this.removeAttribute('readonly');" class="layui-input">
</div>
<div class="layui-form-item" style="margin-bottom: 20px;">
<input type="checkbox" name="remember" lay-skin="primary" title="记住密码" >
<a href="#" class="layadmin-user-jump-change layadmin-link" style="margin-top: 7px;">忘记密码？</a>
</div>
<div class="layui-form-item">
<button class="layui-btn layui-btn-fluid" lay-submit lay-filter="LAY-user-login-submit">登 入</button>
</div>
<div class="layui-trans layui-form-item layadmin-user-login-other">
<label>社交账号登入</label>
<a href="javascript:;"><i class="layui-icon layui-icon-login-qq"></i></a>
<a href="javascript:;"><i class="layui-icon layui-icon-login-wechat"></i></a>
<a href="javascript:;"><i class="layui-icon layui-icon-login-weibo"></i></a>
<a href="#" class="layadmin-user-jump-change layadmin-link">注册帐号</a>
</div>
</div>
</div>
</div>
<script src="/layui/layui.js"></script>
<script>
//JavaScript代码区域
layui.use(['layer','element','form'], function(){
var layer = layui.layer;
var form = layui.form;
var element = layui.element;
});
</script>
</body>
</html>
这里面有自定义的css
自定义css admin.css/** layuiAdmin.std-v1.2.1 LPPL License By http://www.layui.com/admin/ */
html #layuicss-layuiAdmin{display:none;position:absolute;width:1989px}::-webkit-input-placeholder{color:#ccc}html{background-color:#f2f2f2;color:#666}.layadmin-tabsbody-item,[template]{display:none}[lay-href],[lay-tips],[layadmin-event]{cursor:pointer}.layui-layout-admin .layui-header{position:fixed;top:0;left:0;width:100%;height:50px}.layui-layout-admin .layui-header .layui-nav .layui-nav-child a{color:#333}.layui-layout-admin .layui-side{width:220px;top:0;z-index:1001}.layui-layout-admin .layui-header .layui-nav .layui-nav-item,.layui-layout-admin .layui-logo{height:50px;line-height:50px}.layui-layout-admin .layui-logo{position:fixed;left:0;top:0;z-index:1002;width:220px;height:49px;padding:0 15px;box-sizing:border-box;overflow:hidden;font-weight:300;background-repeat:no-repeat;background-position:center center}.layadmin-pagetabs,.layui-layout-admin .layui-body,.layui-layout-admin .layui-footer,.layui-layout-admin .layui-layout-left{left:220px}.layadmin-pagetabs{position:fixed;top:50px;right:0;z-index:999}.layadmin-pagetabs .layui-breadcrumb{padding:0 15px}.layui-layout-admin .layui-body{position:fixed;top:90px;bottom:0}.layui-layout-admin .layui-body .layadmin-tabsbody-item{position:absolute;top:0;bottom:0;left:0;right:0;overflow:hidden}.layui-layout-admin .layui-header .layui-nav-img{width:26px;height:26px}.layui-layout-admin .layui-header .layui-nav-child{top:55px}.layui-layout-admin .layui-header .layui-layout-right .layui-nav-child{left:auto;right:0}.layui-layout-admin .layui-header .layui-nav .layui-nav-child dd.layui-this,.layui-layout-admin .layui-header .layui-nav .layui-nav-child dd.layui-this a{background:0 0}.layadmin-pagetabs,.layui-layout-admin .layui-body,.layui-layout-admin .layui-footer,.layui-layout-admin .layui-header .layui-layout-right,.layui-layout-admin .layui-header .layui-nav .layui-nav-item,.layui-layout-admin .layui-layout-left,.layui-layout-admin .layui-logo,.layui-layout-admin .layui-side{transition:all .3s;-webkit-transition:all .3s}.layui-icon-login-qq{color:#3492ED}.layui-icon-login-wechat{color:#4DAF29}.layui-icon-login-weibo{color:#CF1900}.layui-form[wid100] .layui-form-label{width:100px}.layui-form[wid100] .layui-input-block{margin-left:130px}@media screen and (max-width:450px){.layui-form[wid100] .layui-form-item .layui-input-inline{margin-left:132px}.layui-form[wid100] .layui-form-item .layui-input-inline+.layui-form-mid{margin-left:130px}}.layui-form-item .layui-input-company{width:auto;padding-right:10px;line-height:38px}.layui-bg-white{background-color:#fff}.layadmin-loading{position:absolute;left:50%;top:50%;margin:-16px -15px;font-size:30px;color:#c2c2c2}.layadmin-fixed{position:fixed;left:0;top:0;z-index:999}.layadmin-link{color:#029789!important}.layadmin-link:hover{opacity:.8}.layui-layer-admin .layui-layer-title{height:50px;line-height:50px;border:0;background-color:#20222A;color:#fff}.layui-layer-admin i[close]{position:absolute;padding:5px;right:10px;top:12px;color:#fff;cursor:pointer}.layui-layer-admin .layui-layer-content{padding:20px;line-height:22px}.layui-layer-admin .layui-layer-content cite{font-style:normal;color:#FF5722}.layui-layer-adminRight{top:50px!important;bottom:0;box-shadow:1px 1px 10px rgba(0,0,0,.1);border-radius:0;overflow:auto}.layadmin-note .layui-layer-content{padding:0}.layadmin-note textarea{display:block;width:300px;height:132px;min-width:300px;min-height:132px;line-height:20px;padding:10px 20px;border:none;box-sizing:border-box;color:#666;word-wrap:break-word}.layui-layout-admin .layui-layout-left{padding:0 10px}.layui-layout-admin .layui-layout-left .layui-nav-item{margin:0 20px}.layui-layout-admin .layui-input-search{display:inline-block;vertical-align:middle;height:32px;border:none;cursor:text}.layui-layout-admin .layui-layout-left a,.layui-layout-admin .layui-layout-right{padding:0}.layui-header .layui-nav-item .layui-icon{position:relative;top:1px;font-size:16px}.layui-header .layui-layout-right .layui-badge-dot{margin-left:11px}.layui-header .layui-nav .layui-this:after,.layui-layout-admin .layui-header .layui-nav-bar{top:0!important;bottom:auto;height:3px;background-color:#fff;background-color:rgba(255,255,255,.3)}.layadmin-body-shade{position:fixed;display:none;left:0;right:0;top:0;bottom:0;background-color:rgba(0,0,0,.3);z-index:1000}.layui-side-menu .layui-side-scroll{width:240px}.layui-side-menu .layui-nav{width:220px;margin-top:50px;background:0 0}.layui-side-menu .layui-nav .layui-nav-item a{height:40px;line-height:40px;padding-left:45px;padding-right:30px}.layui-side-menu .layui-nav .layui-nav-item>a{padding-top:8px;padding-bottom:8px}.layui-side-menu .layui-nav .layui-nav-item a:hover{background:0 0}.layui-side-menu .layui-nav .layui-nav-itemed>.layui-nav-child{padding:5px 0}.layui-side-menu .layui-nav .layui-nav-item .layui-icon{position:absolute;top:50%;left:20px;margin-top:-19px}.layui-side-menu .layui-nav .layui-nav-child .layui-nav-child{background:0 0!important}.layui-side-menu .layui-nav .layui-nav-child .layui-nav-child a{padding-left:60px}.layui-side-menu .layui-nav .layui-nav-more{right:15px}@media screen and (max-width:992px){.layui-layout-admin .layui-side{transform:translate3d(-220px,0,0);-webkit-transform:translate3d(-220px,0,0);width:220px}.layadmin-pagetabs,.layui-layout-admin .layui-body,.layui-layout-admin .layui-footer,.layui-layout-admin .layui-layout-left{left:0}}.layadmin-side-shrink .layui-layout-admin .layui-logo{width:60px;background-image:url(res/logo.png)}.layadmin-side-shrink .layui-layout-admin .layui-logo span{display:none}.layadmin-side-shrink .layui-side{left:0;width:60px}.layadmin-side-shrink .layadmin-pagetabs,.layadmin-side-shrink .layui-layout-admin .layui-body,.layadmin-side-shrink .layui-layout-admin .layui-footer,.layadmin-side-shrink .layui-layout-admin .layui-layout-left{left:60px}.layadmin-side-shrink .layui-side-menu .layui-nav{position:static;width:60px}.layadmin-side-shrink .layui-side-menu .layui-nav-item{position:static}.layadmin-side-shrink .layui-side-menu .layui-nav-item>a{padding-right:0}.layadmin-side-shrink .layui-side-menu .layui-nav-item cite,.layadmin-side-shrink .layui-side-menu .layui-nav>.layui-nav-item>.layui-nav-child,.layadmin-side-shrink .layui-side-menu .layui-nav>.layui-nav-item>a .layui-nav-more{display:none;padding:8px 0;width:200px}.layadmin-side-shrink .layui-side-menu .layui-nav>.layui-nav-itemed>a{background:rgba(0,0,0,.3)}.layadmin-side-spread-sm .layadmin-pagetabs,.layadmin-side-spread-sm .layui-layout-admin .layui-body,.layadmin-side-spread-sm .layui-layout-admin .layui-footer,.layadmin-side-spread-sm .layui-layout-admin .layui-layout-left{left:0;transform:translate3d(220px,0,0);-webkit-transform:translate3d(220px,0,0)}.layadmin-side-spread-sm .layui-layout-admin .layui-layout-right{transform:translate3d(220px,0,0);-webkit-transform:translate3d(220px,0,0)}.layadmin-side-spread-sm .layui-side{transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0)}.layadmin-side-spread-sm .layadmin-body-shade{display:block}.layadmin-pagetabs .layui-tab-title li:first-child .layui-tab-close,.layadmin-tabs-select.layui-nav .layui-nav-bar,.layadmin-tabs-select.layui-nav .layui-nav-more{display:none}.layadmin-pagetabs{height:40px;line-height:40px;padding:0 80px 0 40px;background-color:#fff;box-sizing:border-box;box-shadow:0 1px 2px 0 rgba(0,0,0,.1)}.layadmin-pagetabs .layadmin-tabs-control{position:absolute;top:0;width:40px;height:100%;text-align:center;cursor:pointer;transition:all .3s;-webkit-transition:all .3s;box-sizing:border-box;border-left:1px solid #f6f6f6}.layadmin-pagetabs .layadmin-tabs-control:hover{background-color:#f6f6f6}.layadmin-pagetabs .layui-icon-prev{left:0;border-left:none;border-right:1px solid #f6f6f6}.layadmin-pagetabs .layui-icon-next{right:40px}.layadmin-pagetabs .layui-icon-down{right:0}.layadmin-tabs-select.layui-nav{position:absolute;left:0;top:0;width:100%;height:100%;padding:0;background:0 0}.layadmin-tabs-select.layui-nav .layui-nav-item{line-height:40px}.layadmin-tabs-select.layui-nav .layui-nav-item>a{height:40px}.layadmin-tabs-select.layui-nav .layui-nav-item a{color:#666}.layadmin-tabs-select.layui-nav .layui-nav-child{top:40px;left:auto;right:0}.layadmin-tabs-select.layui-nav .layui-nav-child dd.layui-this,.layadmin-tabs-select.layui-nav .layui-nav-child dd.layui-this a{background-color:#f2f2f2!important;color:#333}.layadmin-pagetabs .layui-tab{margin:0;overflow:hidden}.layadmin-pagetabs .layui-tab-title{height:40px;border:none}.layadmin-pagetabs .layui-tab-title li{min-width:0;line-height:40px;max-width:160px;text-overflow:ellipsis;padding-right:40px;overflow:hidden;border-right:1px solid #f6f6f6;vertical-align:top}.layadmin-pagetabs .layui-tab-title li:first-child{padding-right:15px}.layadmin-pagetabs .layui-tab-title li .layui-tab-close{position:absolute;right:8px;top:50%;margin:-7px 0 0;width:16px;height:16px;line-height:16px;border-radius:50%;font-size:12px}.layadmin-pagetabs .layui-tab-title li:after{content:'';position:absolute;top:0;left:0;width:0;height:2px;border-radius:0;background-color:#292B34;transition:all .3s;-webkit-transition:all .3s}.layadmin-pagetabs .layui-tab-title li:hover:after{width:100%}.layadmin-pagetabs .layui-tab-title li.layui-this,.layadmin-pagetabs .layui-tab-title li:hover{background-color:#f6f6f6}.layadmin-pagetabs .layui-tab-title li.layui-this:after{width:100%;border:none;height:2px;background-color:#292B34}.layadmin-tabspage-none .layui-layout-admin .layui-header{border-bottom:none;box-shadow:0 1px 2px 0 rgba(0,0,0,.05)}.layadmin-tabspage-none .layui-layout-admin .layui-body{top:50px}.layadmin-tabspage-none .layadmin-header{display:block}.layadmin-tabspage-none .layadmin-header .layui-breadcrumb{border-top:1px solid #f6f6f6}.layui-layout-admin .layui-header{border-bottom:1px solid #f6f6f6;box-sizing:border-box;background-color:#fff}.layui-layout-admin .layui-header a,.layui-layout-admin .layui-header a cite{color:#333}.layui-layout-admin .layui-header a:hover{color:#000}.layui-layout-admin .layui-header .layui-nav .layui-nav-more{border-top-color:#666}.layui-layout-admin .layui-header .layui-nav .layui-nav-mored{border-color:transparent transparent #666}.layui-layout-admin .layui-header .layui-nav .layui-this:after,.layui-layout-admin .layui-header .layui-nav-bar{height:2px;background-color:#20222A}.layui-layout-admin .layui-logo{background-color:#20222A;box-shadow:0 1px 2px 0 rgba(0,0,0,.15)}.layui-layout-admin .layui-logo,.layui-layout-admin .layui-logo a{color:#fff;color:rgba(255,255,255,.8)}.layui-side-menu{box-shadow:1px 0 2px 0 rgba(0,0,0,.05)}.layui-layout-admin .layui-footer{padding:10px 0;text-align:center;box-shadow:0 -1px 2px 0 rgba(0,0,0,.05)}.layadmin-setTheme-side,.layui-side-menu{background-color:#20222A;color:#fff}.layadmin-setTheme-header,.layui-layout-admin .layui-footer{background-color:#fff}.layui-tab-admin .layui-tab-title{background-color:#393D49;color:#fff}.layui-fluid{padding:15px}.layadmin-header{display:none;height:50px;line-height:50px;margin-bottom:0;border-radius:0}.layadmin-header .layui-breadcrumb{padding:0 15px}.layui-card-header{position:relative}.layui-card-header .layui-icon{line-height:initial;position:absolute;right:15px;top:50%;margin-top:-7px}.layadmin-iframe{position:absolute;width:100%;height:100%;left:0;top:0;right:0;bottom:0}.layadmin-carousel{height:185px!important;background-color:#fff}.layadmin-carousel .layui-carousel-ind li{background-color:#e2e2e2}.layadmin-carousel .layui-carousel-ind li:hover{background-color:#c2c2c2}.layadmin-carousel .layui-carousel-ind li.layui-this{background-color:#999}.layadmin-carousel .layui-carousel,.layadmin-carousel>[carousel-item]>*{background-color:#fff}.layadmin-carousel .layui-col-space10{margin:0}.layadmin-carousel .layui-carousel-ind{position:absolute;top:-41px;text-align:right}.layadmin-carousel .layui-carousel-ind ul{background:0 0}.layui-card .layui-tab-brief .layui-tab-title{height:42px;border-bottom-color:#f6f6f6}.layui-card .layui-tab-brief .layui-tab-title li{margin:0 15px;padding:0;line-height:42px}.layui-card .layui-tab-brief .layui-tab-title li.layui-this{color:#333}.layui-card .layui-tab-brief .layui-tab-title .layui-this:after{height:43px}.layui-card .layui-tab-brief .layui-tab-content{padding:15px}.layui-card .layui-table-view{margin:0}.layadmin-shortcut li{text-align:center}.layadmin-shortcut li .layui-icon{display:inline-block;width:100%;height:60px;line-height:60px;text-align:center;border-radius:2px;font-size:30px;background-color:#F8F8F8;color:#333;transition:all .3s;-webkit-transition:all .3s}.layadmin-shortcut li cite{position:relative;top:2px;display:block;color:#666;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:14px}.layadmin-shortcut li:hover .layui-icon{background-color:#f2f2f2}.layadmin-backlog .layadmin-backlog-body{display:block;padding:10px 15px;background-color:#f8f8f8;color:#999;border-radius:2px;transition:all .3s;-webkit-transition:all .3s}.layadmin-backlog-body h3{padding-bottom:10px;font-size:12px}.layadmin-backlog-body p cite{font-style:normal;font-size:30px;font-weight:300;color:#009688}.layadmin-backlog-body:hover{background-color:#f2f2f2;color:#888}.layadmin-dataview{height:332px!important}.layadmin-dataview>[carousel-item]:before{display:none}.layadmin-dataview>[carousel-item]>div{height:332px}.layadmin-takerates{padding-top:5px}.layadmin-takerates .layui-progress{margin:50px 0 60px}.layadmin-takerates .layui-progress:last-child{margin-bottom:10px}.layadmin-takerates .layui-progress h3{position:absolute;right:0;top:-35px;color:#999;font-size:14px}.layadmin-takerates .layui-progress-bar{text-align:left}.layadmin-takerates .layui-progress-text{top:-35px;line-height:26px;font-size:26px}.layadmin-news{height:60px!important;padding:5px 0}.layadmin-news a{display:block;line-height:60px;text-align:center}.layadmin-news .layui-carousel-ind{height:45px}.layadmin-list li{margin-bottom:6px;padding-bottom:6px;border-bottom-color:#f6f6f6;list-style-position:inside;list-style-type:disc;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.layadmin-list li a{color:#666}.layadmin-list li a:hover{color:#009688}.layadmin-list li:last-child{border:none;padding:0;margin:0}.layadmin-text p{margin-bottom:10px;text-indent:2em}.layadmin-text p:last-child{margin:0}.layadmin-font-em{font-size:13px;color:#758697}.layui-card-header .layui-a-tips{position:absolute;right:15px;color:#01AAED}.layuiadmin-card-text{background-color:#f8f8f8;color:#777;padding:24px}.layuiadmin-card-text .layui-text-top{padding-bottom:10px}.layuiadmin-card-text .layui-text-top i{margin-right:10px;font-size:24px;color:#009688}.layuiadmin-card-text .layui-text-top a{line-height:24px;font-size:16px;vertical-align:top}.layuiadmin-card-text .layui-text-center{height:44px;line-height:22px;margin-bottom:10px;overflow:hidden}.layuiadmin-card-text .layui-text-bottom{position:relative}.layuiadmin-card-text .layui-text-bottom a{color:#777;font-size:12px;text-overflow:ellipsis;word-break:break-all}.layuiadmin-card-text .layui-text-bottom span{color:#CCC;font-size:12px;position:absolute;right:0}.layuiadmin-badge,.layuiadmin-btn-group,.layuiadmin-span-color{position:absolute;right:15px}.layuiadmin-card-link a:hover,.layuiadmin-card-team li a:hover,.layuiadmin-card-text a:hover{color:#01AAED;transition:all .3s}.layuiadmin-card-status{padding:0 10px 10px}.layuiadmin-card-status dd{padding:15px 0;border-bottom:1px solid #EEE;display:-webkit-flex;display:flex}.layuiadmin-card-status dd:last-child{border:none}.layuiadmin-card-status dd div.layui-status-img,.layuiadmin-card-team .layui-team-img{width:32px;height:32px;border-radius:50%;background-color:#009688;margin-right:15px}.layuiadmin-card-status dd div.layui-status-img a{width:100%;height:100%;display:inline-block;text-align:center;line-height:32px}.layuiadmin-card-status dd div.layui-status-img img,.layuiadmin-card-team .layui-team-img img{width:50%;height:50%}.layuiadmin-card-status dd div a{color:#01AAED}.layuiadmin-card-status dd div span{color:#BBB}.layuiadmin-card-link{padding-left:10px;font-size:0}.layuiadmin-card-link a{display:inline-block;width:25%;color:#666;font-size:14px;margin-bottom:12px}.layuiadmin-card-link button{vertical-align:top}.layuiadmin-card-link button:hover{color:#009688}.layuiadmin-card-team li{padding:10px 0 10px 10px}.layuiadmin-card-team .layui-team-img{display:inline-block;margin-right:8px;width:24px;height:24px;text-align:center;line-height:24px}.layuiadmin-card-team span{color:#777}.layuiadmin-badge{top:50%;margin-top:-9px;color:#01AAED}.layuiadmin-card-list{padding:15px}.layuiadmin-card-list p.layuiadmin-big-font{font-size:36px;color:#666;line-height:36px;padding:5px 0 10px;overflow:hidden;text-overflow:ellipsis;word-break:break-all;white-space:nowrap}.layuiadmin-card-list p.layuiadmin-normal-font{padding-bottom:10px;font-size:20px;color:#666;line-height:24px}.layuiadmin-span-color{font-size:14px}.layuiadmin-span-color i{padding-left:5px}.layuiadmin-card-status li{position:relative;padding:10px 0;border-bottom:1px solid #EEE}.layuiadmin-card-status li h3{padding-bottom:5px;font-weight:700}.layuiadmin-card-status li p{padding-bottom:10px}.layuiadmin-card-status li>span{color:#999}.layuiadmin-home2-usernote .layuiadmin-reply{display:none;position:absolute;right:0;bottom:12px}.layuiadmin-home2-usernote li:hover .layuiadmin-reply{display:block}.layuiadmin-page-table td span{color:#2F4056}.layuiadmin-page-table td span.first{color:#FF5722}.layuiadmin-page-table td span.second{color:#FFB800}.layuiadmin-page-table td span.third{color:#5FB878}.layuiAdmin-msg-detail h1{font-size:16px}.layuiAdmin-msg-detail .layui-card-header{height:auto;line-height:30px;padding:15px}.layuiAdmin-msg-detail .layui-card-header span{padding:0 5px;color:#999}.layuiAdmin-msg-detail .layui-card-header span:first-child{padding-left:0}.layuiAdmin-msg-detail .layui-card-body{padding:15px}.layuiadmin-content-bread{padding-bottom:20px}.layuiadmin-order-progress{position:relative;top:12px}.layui-card-header.layuiadmin-card-header-auto{padding-top:15px;padding-bottom:15px;height:auto}.layuiadmin-card-header-auto i.layuiadmin-button-btn{position:relative;right:0;top:0;vertical-align:middle}.layuiadmin-card-header-auto .layui-form-item:last-child{margin-bottom:0}.layadmin-setTheme{padding:15px;overflow-x:hidden}.layadmin-setTheme>h5{padding:20px 0 10px;color:#000}.layadmin-setTheme>h5:first-child{padding-top:0}.layadmin-setTheme-color{width:330px;font-size:0}.layadmin-setTheme-color li{position:relative;display:inline-block;vertical-align:top;width:80px;height:50px;margin:0 15px 15px 0;background-color:#f2f2f2;cursor:pointer;font-size:12px;color:#666}.layadmin-setTheme-color li:after{content:'';position:absolute;z-index:20;top:50%;left:50%;width:1px;height:0;border:1px solid #f2f2f2;transition:all .3s;-webkit-transition:all .3s;opacity:0}.layadmin-setTheme-color li.layui-this:after,.layadmin-setTheme-color li:hover:after{width:100%;height:100%;padding:4px;top:-5px;left:-5px;border-color:#5FB878;opacity:1}.layadmin-setTheme-header{position:relative;z-index:10;height:10px;border-top:1px solid #f2f2f2;border-right:1px solid #f2f2f2}.layadmin-setTheme-side{position:absolute;left:0;top:0;width:20px;height:100%;z-index:11;box-shadow:1px 0 2px 0 rgba(0,0,0,.05)}.layadmin-setTheme-logo{position:absolute;left:0;top:0;width:100%;height:10px;box-shadow:0 1px 2px 0 rgba(0,0,0,.15)}.layadmin-form-right{text-align:right}.layadmin-about p{margin-bottom:10px}.layadmin-menu-list .layui-card-header{height:50px;line-height:50px;font-size:16px}.layadmin-menu-list .layui-card-header:active{background-color:#f2f2f2}.layadmin-menu-list .layui-card-header .layui-icon{position:relative;top:1px;left:0;display:inline-block;margin:0 10px;font-size:18px}@-webkit-keyframes layui-rl{from{-webkit-transform:translate3d(100%,0,0)}to{-webkit-transform:translate3d(0,0,0)}}@keyframes layui-rl{from{transform:translate3d(100%,0,0)}to{transform:translate3d(0,0,0)}}.layui-anim-rl{-webkit-animation-name:layui-rl;animation-name:layui-rl}@-webkit-keyframes layui-lr{from{-webkit-transform:translate3d(0 0,0);opacity:1}to{-webkit-transform:translate3d(100%,0,0);opacity:1}}@keyframes layui-lr{from{transform:translate3d(0,0,0)}to{transform:translate3d(100%,0,0)}}.layui-anim-lr,.layui-anim-rl.layer-anim-close{-webkit-animation-name:layui-lr;animation-name:layui-lr}.layadmin-tips{margin-top:30px;text-align:center}.layadmin-tips .layui-icon[face]{display:inline-block;font-size:300px;color:#393D49}.layadmin-tips .layui-text{width:500px;margin:30px auto;padding-top:20px;border-top:5px solid #009688;font-size:16px}.layadmin-tips h1{font-size:100px;line-height:100px;color:#009688}.layadmin-tips .layui-text .layui-anim{display:inline-block}@media screen and (max-width:768px){.layadmin-panel-selection{margin:0;width:auto}.layui-body .layui-nav .layui-nav-item{display:block}.layui-layout-admin .layui-body .layadmin-tabsbody-item{-webkit-overflow-scrolling:touch;overflow:auto}}
/** layuiAdmin.std-v1.2.1 LPPL License By http://www.layui.com/admin/ */
#LAY_app,body,html{height:100%}.layui-layout-body{overflow:auto}#LAY-user-login,.layadmin-user-display-show{display:block!important}.layadmin-user-login{position:relative;left:0;top:0;padding:110px 0;min-height:100%;box-sizing:border-box}.layadmin-user-login-main{width:375px;margin:0 auto;box-sizing:border-box}.layadmin-user-login-box{padding:20px}.layadmin-user-login-header{text-align:center}.layadmin-user-login-header h2{margin-bottom:10px;font-weight:300;font-size:30px;color:#000}.layadmin-user-login-header p{font-weight:300;color:#999}.layadmin-user-login-body .layui-form-item{position:relative}.layadmin-user-login-icon{position:absolute;left:1px;top:1px;width:38px;line-height:36px;text-align:center;color:#d2d2d2}.layadmin-user-login-body .layui-form-item .layui-input{padding-left:38px}.layadmin-user-login-codeimg{max-height:38px;width:100%;cursor:pointer;box-sizing:border-box}.layadmin-user-login-other{position:relative;font-size:0;line-height:38px;padding-top:20px}.layadmin-user-login-other>*{display:inline-block;vertical-align:middle;margin-right:10px;font-size:14px}.layadmin-user-login-other .layui-icon{position:relative;top:2px;font-size:26px}.layadmin-user-login-other a:hover{opacity:.8}.layadmin-user-jump-change{float:right}.layadmin-user-login-footer{position:absolute;left:0;bottom:0;width:100%;line-height:30px;padding:20px;text-align:center;box-sizing:border-box;color:rgba(0,0,0,.5)}.layadmin-user-login-footer span{padding:0 5px}.layadmin-user-login-footer a{padding:0 5px;color:rgba(0,0,0,.5)}.layadmin-user-login-footer a:hover{color:rgba(0,0,0,1)}.layadmin-user-login-main[bgimg]{background-color:#fff;box-shadow:0 0 5px rgba(0,0,0,.05)}.ladmin-user-login-theme{position:fixed;bottom:0;left:0;width:100%;text-align:center}.ladmin-user-login-theme ul{display:inline-block;padding:5px;background-color:#fff}.ladmin-user-login-theme ul li{display:inline-block;vertical-align:top;width:64px;height:43px;cursor:pointer;transition:all .3s;-webkit-transition:all .3s;background-color:#f2f2f2}.ladmin-user-login-theme ul li:hover{opacity:.9}@media screen and (max-width:768px){.layadmin-user-login{padding-top:60px}.layadmin-user-login-main{width:300px}.layadmin-user-login-box{padding:10px}}
访问localhost:8080 （spring boot 默认访问static下的index.html）
访问localhost:8080/index.html
目录
mybatis-plus扫描位置
CREATE TABLE `sys_user` (
`id` bigint unsigned NOT NULL AUTO_INCREMENT,
`user_code` varchar(32) DEFAULT NULL COMMENT '账号名称',
`username` varchar(32) DEFAULT NULL COMMENT '用户名',
`password` varchar(32) DEFAULT NULL COMMENT '密码',
`email` varchar(32) DEFAULT NULL COMMENT '邮箱',
`mobile` varchar(32) DEFAULT NULL COMMENT '手机号',
`status` tinyint DEFAULT NULL COMMENT '状态 0：禁用 1：正常',
`create_by` bigint DEFAULT NULL COMMENT '创建者ID',
`create_time` timestamp NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
`update_by` bigint DEFAULT NULL COMMENT '更新人',
`update_time` timestamp NULL DEFAULT NULL ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8mb3 COMMENT='系统用户';
package com.example.controller;
import com.example.model.User;
import com.example.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.List;
import java.util.Map;
@RestController
@RequestMapping("/sys/user")
public class UserController {
@Autowired
private UserService userService;
@GetMapping("getUserList")
public List<Map> getUserList(){
return userService.getUserList();
}
@PostMapping("save")
public void save(@RequestBody User user){
userService.save(user);
}
}
package com.example.service;
import com.example.model.User;
import java.util.List;
import java.util.Map;
public interface UserService {
List<Map> getUserList();
void save(User user);
}
这边要注意配置@Service注解
package com.example.service.impl;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.example.mapper.UserMapper;
import com.example.model.User;
import com.example.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.sql.Wrapper;
import java.util.List;
import java.util.Map;
@Service
public class UserServiceImpl implements UserService {
@Autowired
private UserMapper userMapper;
@Override
public List<Map> getUserList() {
QueryWrapper query = new QueryWrapper<User>();
return userMapper.selectList(query);
}
@Override
public void save(User user) {
userMapper.insert(user);
}
}
通过BaseMapper能够继承mybatis-plus提供的基本的增删改查方法
package com.example.mapper;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.example.model.User;
import org.apache.ibatis.annotations.Mapper;
@Mapper
public interface UserMapper extends BaseMapper<User> {
}
package com.example.model;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;
import java.util.Date;
@Data
@TableName("sys_user")
public class User {
@TableId(type = IdType.AUTO)
private Long id;
private String userCode;
private String username;
private String password;
private String email;
private String mobile;
private Integer status;
private Long createBy;
private Date createTime;
private Long updateBy;
private Date updateTime;
}
后端基本链路实现完成
package com.example.controller;
import com.example.common.utils.Message;
import com.example.model.User;
import com.example.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
@RequestMapping("login")
public class LoginController {
@Autowired
private UserService userService;
@PostMapping("login")
public Message login(String userCode,String password){
User user = new User();
user.setUserCode(userCode);
user = userService.selectUser(user);
if (user == null){
return Message.error("账号不存在");
}
if (password.equals(user.getPassword())){
return Message.SUCCESS_MESSAGE;
}else{
return Message.error("密码错误");
}
}
}
User selectUser(User user);
@Override
public User selectUser(User user) {
QueryWrapper query = new QueryWrapper<User>();
query.eq("user_code",user.getUserCode());
return userMapper.selectOne(query);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>登录</title>
<link rel="stylesheet" href="/layui/css/layui.css">
<link rel="stylesheet" href="/layui/css/admin.css">
<link rel="stylesheet" href="/layui/css/log.css">
</head>
<body>
<div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login" style="display: none;">
<div class="layadmin-user-login-main">
<div class="layadmin-user-login-box layadmin-user-login-header">
<h2>Demo-Manage</h2>
<p>基于Layui的后台管理系统</p>
</div>
<div class="layadmin-user-login-box layadmin-user-login-body layui-form">
<div class="layui-form-item">
<label class="layadmin-user-login-icon layui-icon layui-icon-username"></label>
<input type="text" id="userCode" lay-verify="required" placeholder="用户名" class="layui-input">
</div>
<div class="layui-form-item">
<label class="layadmin-user-login-icon layui-icon layui-icon-password"></label>
<input type="password" id="password" lay-verify="required" placeholder="密码" readonly onfocus="this.removeAttribute('readonly');" class="layui-input">
</div>
<div class="layui-form-item" style="margin-bottom: 20px;">
<input type="checkbox" name="remember" lay-skin="primary" title="记住密码" >
<a href="#" class="layadmin-user-jump-change layadmin-link" style="margin-top: 7px;">忘记密码？</a>
</div>
<div class="layui-form-item">
<button class="layui-btn layui-btn-fluid" lay-submit id="userlogin">登 入</button>
</div>
<div class="layui-trans layui-form-item layadmin-user-login-other">
<label>社交账号登入</label>
<a href="javascript:;"><i class="layui-icon layui-icon-login-qq"></i></a>
<a href="javascript:;"><i class="layui-icon layui-icon-login-wechat"></i></a>
<a href="javascript:;"><i class="layui-icon layui-icon-login-weibo"></i></a>
<a href="#" class="layadmin-user-jump-change layadmin-link">注册帐号</a>
</div>
</div>
</div>
</div>
<script src="/layui/layui.js" type="text/javascript"></script>
<script src="/js/jquery-3.6.0.min.js"></script>
<script src="/js/vue.min.js" type="text/javascript"></script>
<script>
//JavaScript代码区域
layui.use(['layer','element','form','jquery'], function(){
let layer = layui.layer;
let form = layui.form;
let element = layui.element;
let $ = layui.jquery;
$("#userlogin").click(function(){
let userCode = $("#userCode").val()
let password = $("#password").val()
$.ajax({
url:"http://localhost:8080/login/login",
data:{
userCode:userCode,
password:password
},
type:"post",
success:function(result){
console.log(result);
if (result.type==='success'){
layer.msg(result.tip,{icon:1,time:2000},function () {
location.href="http://localhost:8080/index.html"
})
}else if (result.type==='error'){
layer.msg(result.tip)
}else {
layer.msg('未知异常，请联系管理员')
}
},
})
});
});
</script>
</body>
</html>
大概的实现就是这样了，有其他问题可评论留言
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）