springboot+bootstrap实现简单登陆

最新推荐文章于 2023-03-12 15:39:04 发布
最新推荐文章于 2023-03-12 15:39:04 发布
阅读量770 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44320200/article/details/110181181
版权

login:

test:

login.html:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 最新的jquery，必须在引入bootstrap之前引入 -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <style>
        body{
            background-image:url(img/8.jpg);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-attachment: fixed;
        }
        .container{
            position: absolute;
            left: calc((100% - 500px)/2);
            top: calc((100% - 400px)/2);;


        }
    </style>
</head>
<body>
<div class="container" style="width: 500px;height: 400px">
    <div class="row">
        <div class="col-md-offset-3 col-md-12">
            <form class="form-horizontal" th:action="@{/inlogin}" method="post">
                <img src="img/7.jpg" height="150px" width="200px" >
                <!-- <span class="heading">用户登录</span> -->
                <div class="form-group" style="margin-top: 30px">
                    <div style="display: flex;">

                    <div style="margin-top: 9px;margin-right: 10px"><span class="glyphicon glyphicon-user"></span></div>
                    <div><input type="text" class="form-control" name="username" placeholder="username"/></div>
                    </div>
                    <i class="fa fa-user"></i>
                </div>
                <div class="form-group help">
                    <div style="display: flex;">
                        <div style="margin-top: 9px;margin-right: 10px"><span class="glyphicon glyphicon-lock"></span></div>
                        <div><input type="password" class="form-control" name="password" placeholder="password"/></div>
                    </div>
                    <i class="fa fa-lock"></i>
                    <a href="#" class="fa fa-question-circle"></a>
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-default">登录</button>
                </div>
            </form>
        </div>
    </div>
</div>

</body>
</html>

test.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 避免中文乱码 -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 最新的jquery，必须在引入bootstrap之前引入 -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</head>
<body>

<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <ul class="nav nav-tabs">
                <li class="active">
                    <a href="#">首页</a>
                </li>
                <li>
                    <a href="#">简介</a>
                </li>
                <li class="disabled">
                    <a href="#">信息</a>
                </li>
                <li class="dropdown pull-right">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle">下拉<strong class="caret"></strong></a>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="#">操作</a>
                        </li>
                        <li>
                            <a href="#">设置栏目</a>
                        </li>
                        <li>
                            <a href="#">更多设置</a>
                        </li>
                        <li class="divider">
                        </li>
                        <li>
                            <a href="#">分割线</a>
                        </li>
                    </ul>
                </li>
            </ul>
            <div class="jumbotron">
                <h2>
                    Hello, world!
                </h2>
                <p>
                    This is a template for a simple marketing or informational website.
                </p>
                <p>
                    <a class="btn btn-primary btn-large" href="#">Learn more</a>
                </p>
            </div>
            <div class="carousel slide" id="carousel-929631">
                <ol class="carousel-indicators">
                    <li data-slide-to="0" data-target="#carousel-929631">
                    </li>
                    <li data-slide-to="1" data-target="#carousel-929631">
                    </li>
                    <li data-slide-to="2" data-target="#carousel-929631" class="active">
                    </li>
                </ol>
                <div class="carousel-inner">
                    <div class="item">
                        <img alt="" src="img/default.jpg" />
                        <div class="carousel-caption">
                            <h4>
                                First Thumbnail label
                            </h4>
                            <p>
                                Cras justo odio, dapibus ac facilisis in</p>
                        </div>
                    </div>
                    <div class="item">
                        <img alt="" src="img/default1.jpg" />
                        <div class="carousel-caption">
                            <h4>
                                Second Thumbnail label
                            </h4>
                            <p>
                                Cras justo odio, dapibus ac facilisis in</p>
                        </div>
                    </div>
                    <div class="item active">
                        <img alt="" src="img/default2.jpg" />
                        <div class="carousel-caption">
                            <h4>
                                Third Thumbnail label
                            </h4>
                            <p>
                                Cras justo odio, dapibus ac facilisis in</p>
                        </div>
                    </div>
                </div> <a class="left carousel-control" href="#carousel-929631" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#carousel-929631" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div class="thumbnail">
                        <img alt="300x200" src="img/default4.jpg" />
                        <div class="caption">
                            <h3>
                                Thumbnail label
                            </h3>
                            <p>
                                Cras justo odio, dapibus ac facilisis in</p>
                            <p>
                                <a class="btn btn-primary" href="#">Action</a> <a class="btn" href="#">Action</a>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="thumbnail">
                        <img alt="300x200" src="img/default5.jpg" />
                        <div class="caption">
                            <h3>
                                Thumbnail label
                            </h3>
                            <p>
                                Cras justo odio, dapibus ac facilisis in</p>
                            <p>
                                <a class="btn btn-primary" href="#">Action</a> <a class="btn" href="#">Action</a>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="thumbnail">
                        <img alt="300x200" src="img/default6.jpg" />
                        <div class="caption">
                            <h3>
                                Thumbnail label
                            </h3>
                            <p>
                                Cras justo odio, dapibus ac facilisis in</p>
                            <p>
                                <a class="btn btn-primary" href="#">Action</a> <a class="btn" href="#">Action</a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

controller:
@Controller
public class TestController {


    @RequestMapping("/test1")
    public String test() {
        return "/test";
    }

 @RequestMapping("/tologin")
    public String tologin() {
        return "/login";
    }

    @RequestMapping(value = "/inlogin", method = RequestMethod.POST)
    public String login(@RequestParam(value = "username") String username,
                        @RequestParam(value = "password") String password) {
        if (username.equals("admin") && password.equals("123456") ) {
            return "/test";
        } else return "/login";
    }

}

 

 

weixin_44320200
关注
Spring Boot 结合Bootstrap
07-17
Spring Boot结合Bootstrap框架，对页面呈现进行优化
springboot+bootstrap+shiro权限管理
03-28
本系统是有springboot结合shiro开发的一款权限管理系统，前端用的是bootstrap，界面美观，含数据库文件。
＜Spring整合系列＞ Spring Boot整合Bootstrap页面实现登录页面
CSRAWD的博客
02-21 1064
这两天接了个项目，结果发现手里居然都没有能直接套用的模板（之前做的直接改贼烦，还不如网上参考），但是网上参考的总是有一些烦人的小问题，所以总结一个模板 1、效果图： 2、目录结构 3、添加依赖 pom.xml <?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-insta
bootstrap框架demo_Vue+Spring Boot简单用户登录(附Demo)_vue.js
weixin_39731456的博客
11-13 323
这篇文章主要介绍了Vue+Spring Boot简单用户登录，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧1 概述前后端分离的一个简单用户登录 Demo 。2 技术栈VueBootstrapVueKotlinSpring BootMyBatis Plus3 前端 创建工程使用 vue-cli 创建，没安装的可以先安装： su...
SpringBoot引入BootStrap登陆页面
Vamps
11-14 883
1.引入thymeleaf和webjars中的bootstrap <dependency> <groupId>org.webjars</groupId> <artifactId>bootstrap</artifactId> <version>4.3.1...
基于B/S架构，SpringBoot+Bootstrap框架的中小医院信息系统.zip
05-02
基于B/S架构，SpringBoot+Bootstrap框架的中小医院信息系统。简单实现了挂号收费，门诊管理，划价收费，药房取药，体检管理，药房管理，系统维护等基础功能。 基于B/S架构，SpringBoot+Bootstrap框架的中小医院信息...
拿来即用springboot+bootstrap整合若依的后台管理系统
08-10
在若依中，开发者可以通过简单的配置和API调用，轻松实现用户登录、角色分配、权限控制等功能。 在具体开发过程中，我们需要注意以下几点： 1. 配置SpringBoot：在`application.properties`或`application.yml`中...
springboot+mybatis+bootstrap整合的简单框架
10-11
本项目"springboot+mybatis+bootstrap整合的简单框架"旨在提供一个快速开发的解决方案，将三个流行的开源技术——Spring Boot、MyBatis和Bootstrap融合在一起，以简化Web应用的构建过程。 Spring Boot是由Pivotal...
基于springboot+bootstrap模版+thymeleaf的一个简单自习室预约管理系统源码+数据库sql文件.zip
最新发布
05-21
这是一个基于Spring Boot、Bootstrap模板和Thymeleaf的自习室预约管理系统的源代码项目，包含数据库SQL文件。这个系统的设计和实现充分利用了现代Web开发技术，旨在提供一个简洁高效的在线预约平台。 首先，Spring ...
springboot+mvc+mybatis(通用mapper)+druid+jsp+bootstrap实现权限管理文件上传下载多数据源切换
05-31
在本项目中，"springboot+mvc+mybatis(通用mapper)+druid+jsp+bootstrap实现权限管理文件上传下载多数据源切换" 是一个综合性的Web应用开发实践，它涵盖了多个核心技术和工具，用于构建一个功能强大的后台系统。...
基于SpringBoot实现单点登录的两种方式
09-01
基于SpringBoot实现单点登录的两种方式，第一种（Session）：SpringBoot+SpringSession+Redis；第二种基于（Session+Cookie）：SpringBoot+Redis（redis集群+池化:一致性Hash分片算法） 实现单点登陆
教学管理系统-springboot+bootstrap
12-06
教学管理系统，内含登、用户管理、角色管理、权限管理、实时对话、写日记（富文本编辑），日记审核流程。日记打分统计（饼图和条形图）。
Spring Boot+Bootstrap开发小而完整web项目
06-30
跟着本课程Demo完整的动手写一次，会发现你已经可以直接利用Spring Boot上手中小型web项目了。 Spring Boot框架是现在比较热门的微服务框架，很多软件公司都在使用，本课程涵盖Spring Boot和Bootstrap较为多面的知识点，针对Spring Boot开发web项目中每个阶段的关键内容和痛点，一步步进行条理清晰的讲解，学员在听课过程中建立起自己较为完备的前端、后端知识体系，具备较好的项目开展能力和自信。 课程特点是不炫技、条理清晰、生动浅显、化繁为简，每个章节都会围绕Spring Boot、Bootstrap的知识点“是什么、有什么用、怎么用”展开，并根据精心准备的简洁清晰的示例进行讲解。   学完该套课程后，可以很快上手Spring Boot实战开发，一个人就能完成一个基于Spring Boot+Bootstrap的完整WEB项目！
springboot+bootstrap论坛
12-26
基于Java开发的论坛系统，内置mysql数据库,自动建立索引，里面包含安装教程。
SpringBoot 简单登录功能
09-25
在实际开发中，我们经常会遇到某些页面需要登录才能查看的情况。下面使用拦截器实现该功能，在用户没有登录的情况下，将网站的所有访问都指向登录页面。
Spring Boot 搭建应用实现登陆实例，页面使用bootstrap
weixin_34245169的博客
04-22 127
2019独角兽企业重金招聘Python工程师标准>>> ...
Spring boot使用Bootstrap
热门推荐
天高任鸟飞
09-06 2万+
添加依赖 webjars https://www.webjars.org/ &amp;lt;!--引入bootstrap--&amp;gt; &amp;lt;dependency&amp;gt; &amp;lt;groupId&amp;gt;org.webjars&amp;lt;/groupId&amp;gt; &amp;lt;artifactId&amp;gt;bootstrap&amp;lt
spring boot集成bootstrap
weixin_34187862的博客
11-24 202
前置环境基于jpa/mybatis、thymeleaf 环境搭建引入bootstrap中的资源文件，css和js 关键页面代码 目录结构2.footer.html和header.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Boo...
Spring Boot 整合 Bootstrap
小凯的博客
03-12 7592
Springboot整合bootstrap笔记
springboot+bootstrap实现登录注册
05-22
Spring Boot 和 Bootstrap 都是非常流行的技术，用于开发 Web 应用程序。下面是一个简单的示例，演示如何使用 Spring Boot 和 Bootstrap 实现用户登录和注册功能。 1. 创建一个 Spring Boot 项目，并添加 Web，Thymeleaf 和 Spring Security 依赖。 2. 在 src/main/resources 目录下创建 application.properties 文件，并配置数据库、端口、日志等信息。 3. 创建一个 User 实体类，用于映射用户信息到数据库。示例代码如下： ``` @Entity @Table(name = "users") public class User { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; private String username; private String password; private String email; // 省略 getter 和 setter 方法 } ``` 4. 创建一个 UserRepository 接口，用于操作用户信息。示例代码如下： ``` @Repository public interface UserRepository extends JpaRepository<User, Long> { User findByUsername(String username); } ``` 5. 创建一个 UserService 接口和实现类，用于处理用户信息的业务逻辑。示例代码如下： ``` public interface UserService { void save(User user); User findByUsername(String username); } @Service public class UserServiceImpl implements UserService { @Autowired private UserRepository userRepository; @Override public void save(User user) { userRepository.save(user); } @Override public User findByUsername(String username) { return userRepository.findByUsername(username); } } ``` 6. 创建一个 UserController 类，用于处理用户登录和注册的请求。示例代码如下： ``` @Controller public class UserController { @Autowired private UserService userService; @GetMapping("/login") public String login() { return "login"; } @GetMapping("/register") public String register(Model model) { model.addAttribute("user", new User()); return "register"; } @PostMapping("/register") public String register(@ModelAttribute("user") User user) { userService.save(user); return "redirect:/login"; } } ``` 7. 创建一个 login.html 文件和 register.html 文件，用于显示登录和注册页面。示例代码如下： login.html ``` <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Login</title> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="row justify-content-center mt-5"> <div class="col-md-6"> <div class="card"> <div class="card-header">Login</div> <div class="card-body"> <form th:action="@{/login}" method="post"> <div class="form-group"> <label for="username">Username:</label> <input type="text" class="form-control" id="username" name="username" required> </div> <div class="form-group"> <label for="password">Password:</label> <input type="password" class="form-control" id="password" name="password" required> </div> <button type="submit" class="btn btn-primary">Login</button> </form> </div> </div> </div> </div> </div> </body> </html> ``` register.html ``` <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Register</title> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="row justify-content-center mt-5"> <div class="col-md-6"> <div class="card"> <div class="card-header">Register</div> <div class="card-body"> <form th:action="@{/register}" method="post" th:object="${user}"> <div class="form-group"> <label for="username">Username:</label> <input type="text" class="form-control" id="username" name="username" th:field="*{username}" required> </div> <div class="form-group"> <label for="password">Password:</label> <input type="password" class="form-control" id="password" name="password" th:field="*{password}" required> </div> <div class="form-group"> <label for="email">Email:</label> <input type="email" class="form-control" id="email" name="email" th:field="*{email}" required> </div> <button type="submit" class="btn btn-primary">Register</button> </form> </div> </div> </div> </div> </div> </body> </html> ``` 8. 启动应用程序，访问 http://localhost:8080/register，输入用户名、密码和电子邮件地址，点击注册按钮，即可将用户信息保存到数据库中。然后访问 http://localhost:8080/login，输入用户名和密码，点击登录按钮，即可登录成功。 上述示例代码仅供参考，实际开发过程中可能需要根据具体需求进行修改和优化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值