【爆肝推荐】手摸手带你做后台管理项目（第二章）登陆和用户管理

最新推荐文章于 2024-04-10 22:41:32 发布

无术同学

最新推荐文章于 2024-04-10 22:41:32 发布

阅读量989

点赞数 1

分类专栏： SpringBoot 文章标签： shiro redis spring boot

本文链接：https://blog.csdn.net/qq_25974401/article/details/120585769

版权

本文是后台管理项目的第二章节，主要涉及前端页面的搭建，包括文件和文件夹的创建、login.css与login.html的编写，以及使用Shiro和Redis实现登录功能。介绍了页面跳转、接口方法的实现，以及管理员模块的创建。文章还涵盖了数据初始化、对象转换、文件上传的处理。最后，提供了源码供读者参考。

摘要由CSDN通过智能技术生成

前情提要

上一篇搭建了基础的架子，这一篇搭建页面架子，主要偏前端一点，手摸手上一篇地址，点击跳转
这篇不做账号登陆的验证，留到下一篇shiro的时候一起做了,写到最后几章更像是在写前后端分离,
页面的跳转没有走controller，因为thymeleaf模版的原因，要不然每个页面都要写一个跳转的，
后面大部分都在前端解决跳转问题

第二章需要搭建的页面如下:
在这里插入图片描述

在这里插入图片描述

正文开始

新建以下文件和文件夹

在这里插入图片描述

修改`application.yml`文件

设置映射路径为:templates文件夹下

thymeleaf:
  cache: false
  encoding: utf-8
  mode: HTML5
  prefix: classpath:/templates/
  suffix: .html
  # 保证html能直接访问，不需要跳转controller,后期动态管理页面地址
resources: 
  static-locations: classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/,classpath:/templates/

详细图片
在这里插入图片描述

layui-admin.css

.layui-admin-bg{
   
    background-color: #20222A !important ;
}
.layui-admin-border {
   
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
}
.panel {
   
    padding: 15px;
}
.panel-height {
   
    height: 600px;
}
.card-header {
   
    height: 60px;
}
.title {
   
    text-align: center;
}
.layui-layer-title {
   
    background-color: #001529 !important;
    color:#fff !important;
}
.layui-layer-close1 {
   
    color:#fff !important;
}
.layui-upload-img {
   
    width: 92px;
    height: 92px;
}
.avatar-uploader .el-upload {
   
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 98px;
    height: 98px;
}
.avatar-uploader .el-upload:hover {
   
    border-color: #409EFF;
}
.avatar-uploader-icon {
   
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
   
    width: 98px;
    height: 98px;
    display: block;
}

.el-upload-list--text {
   
    display: none;
}

.el-dialog {
   
    margin-top: 20px !important;
}
.el-dialog > .el-dialog__header {
   
    background-color: #001529 !important;
}
.el-dialog__title {
   
    color: #fff !important;
}
.el-dialog__body {
   
    padding-left: 0px !important;
}

login.css代码

.login-form {
   
    width: 25%;
    margin: auto;
    margin-top: 120px;
}
.login-title {
   
    text-align: center;
    font-size: 30px;
}
.input-div,.input-div2{
   
    display:flex;
    border: 1px solid #eee ;
    background-color: #fff;
    height: 38px;
    line-height: 38px;
    padding: 0px 10px;
}
.layui-input {
   
    border-style: none;
}

input::-webkit-input-placeholder {
   
    color: #ccc;
}
input:-moz-placeholder {
   
    color: #ccc;
}
input::-moz-placeholder {
   
    color: #ccc;
}
input:-ms-input-placeholder {
   
    color: #ccc;
}
.layui-form {
   
    margin-top: 50px;
}
body {
   
    background-color: #EFEFEF;
}
.layui-icon {
   
    color: #D2D2D2;
}

login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>登陆</title>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <link rel="stylesheet" href="/css/login.css">
    <link  rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios@0.21.1/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <div class="login-form">
        <div class="login-title">后台管理系统</div>
        <div class="layui-form">
            <div class="layui-form-item">
                <div class="input-div">
                    <i class="layui-icon layui-icon-username"></i>
                    <input type="text" name="username" v-model="user.username" 
                    lay-verify="title" @focus="focusCss('input-div')"
                     @blur="blurCss('input-div')" autocomplete="off"
                      placeholder="用户名" class="layui-input" >
                </div>
            </div>
            <div class="layui-form-item">
                <div class="input-div2">
                    <i class="layui-icon layui-icon-password"></i>
                    <input type="password" name="username" v-model="user.password"  
                     lay-verify="title" @focus="focusCss('input-div2')" 
                     @blur="blurCss('input-div2')" autocomplete="off" 
                     placeholder="密码" class="layui-input" >
                </div>
            </div>
            <div class="layui-form-item">
                <button type="button" style="width: 100%;"
                 class="layui-btn" @click="login">登陆</button>
            </div>
        </div>
    </div>
</div>
<script>
    var vm = new Vue({
     
        el:"#app",
        data:{
     
            user:{
     
                username:null,
                password:null
            }
        },
        methods:{
     
        	//登陆按钮设置了@click=“login”,点击就会调用此方法
            login(){
     
                let that = this;
                if(vm.user.username == null || vm.user.username == ""){
     
                    this.$message.error("请填写用户名");
                    return;
                }
                if(vm.user.password == null || vm.user.password == ""){
     
                    this.$message.error("请填写密码");
                    return;
                }
                //post请求发送账号密码
                axios({
     
                    url:"user/login",
                    method: "post",
                    headers:{
     
                        "Content-Type": "application/json"
                    },
                    data:JSON.stringify(vm.user)
                }).then(res => {
     
                   console.log("返回结果",res.data);
                })
            },
            // 聚焦和失焦事件
            focusCss(name){
     
                $("."+name).css("border"," 1px solid #D2D2D2 ");
            },
            blurCss(name){
     
                $("."+name).css("border"," 1px solid #eee ");
            }
        }
    })
</script>
</body>
</html>

请求方式采用了axios，如果后面要接触了前后端分离项目，可能就会了解到axios

在`controller`文件夹中编写登陆代码和页面跳转

新建一个LoginController类，跳转到login.html是依靠yml中设置thymeleaf配置
跳转到templates/login.html页面的

import com.github.pagehelper.util.StringUtil;
import com.macro.entity.UserEntity;
import com.macro.service.UserService;
import com.macro.utils.Result;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class LoginController {
   

    @Autowired
    private UserService userService;

    @GetMapping("login")
    public