IDEA创建SpringBoot项目做一个简单登录交互-阿里云开发者社区

IDEA创建SpringBoot项目做一个简单登录交互

2022-10-29 373

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： IDEA创建SpringBoot项目做一个简单登录交互

一、检查jdk、Maven

环境准备

jdk 1.7以上
maven 3.x

检查Jdk版本

打开DOS界面检查:“win+R” 然后输入“cmd”输入"java -version"

IDEA设置

打开IDEA 选择“文件"->“其他设置”->“设置 for New Projects…”

配置maven内容

二、创建SpringBoot项目

三、目录结构及文件说明

java目录用来写Java程序，创建好的HelloWorldApplication.java为项目主程序。resources文件夹中目录结构static：保存所有的静态资源， js css images。

templates：保存所有的模板页面（Spring Boot默认jar包使用嵌入式的Tomcat，默认不支持JSP页面），可以使用模板引擎（freemarker、thymeleaf）。 application.properties： Spring Boot应用的配置文件，可以修改一些默认设置。

四、“HELLO WORLD ”测试

1、在springboot.helloworld中创建一个controller包，在其中创建一个HelloWorldController.java。 2、在HelloWorldController.java中写一个hello方法。

3、运行主程序的main方法

4、运行成功后该项目会默认启动在8080端口，在浏览器地址栏中输入 http://localhost:8080/hello，浏览器显示如下即为成功。

五、“知乎登录界面”测试

1、在static文件夹中创建一个index.html作为首页或欢迎界面，在浏览器地址栏输入http://localhost:8080，即可访问首页。

2、进行“知乎登录界面”响应测试在controller包，创建一个LoginController.java的控制器类

这样输入任意账号密码点击登录即可得到响应

改进版改写 LoginController.java 实现：只有密码为 sunbujianzuishuai时可访问

密码错误时

密码正确时

注：在resources文件夹中创建以下三个文件夹（静态资源文件夹），将index.html或者其它静态资源（css、js、images）都是可以默认访问的。

附：知乎登录界面源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>知乎 - 有问题，上知乎</title>
    <link rel="icon" type="image/x-icon" href="img/favicon.ico">
    <link rel="stylesheet" href="CSS/reset.css">
    <style>
        body {
            background-color: #B8E5F8;
            background-image: url("背景3.jpeg") ;
            background-size: 100vw 100vh;
            background-attachment: fixed;
        }
        #logo > img {
            width: 128px;
            height: 81px;
        }
        #logo {
            text-align: center;
            margin-top: 115px;
            margin-bottom: 24px;
        }
        #content {
            width: 350px;
            height: 312px;
            background-color: white;
            margin: auto;
            padding: 0px 24px;
            border-radius: 4px 4px 0px 0px;
            position: relative;
        }
        #content_login_select {
            font-size: 16px;
        }
        #content_login_select > span {
            height: 18px;
            padding: 0px 24px;
            display: inline-block;
        }
        #content_login_select > span:first-child {
            margin-right: 20px;
        }
        .chick {
            padding: 20px 0px 18px 0px !important;
            font-weight: 700;
            border-bottom: #0084FF solid;
        }
        #ewm {
            position: absolute;
            width: 52px;
            top: 0px;
            right: 0px;
            border-radius: 0px 4px 0px 0px;
        }
        #img_div {
            position: absolute;
            border: 26px #fff solid;
            border-top: 26px rgba(0, 0, 0, 0) solid;
            border-right: 26px rgba(0, 0, 0, 0) solid;
            top: 0px;
            right: 0px;
            border-radius: 0px 2px 0px 0px;
        }
        #content_login_form input:not([type=submit]) {
            width: 100%;
            height: 42px;
            border: none;
            border-bottom: 1px rgba(0, 0, 0, .1) solid;
            outline: none;
            margin: 7px 0px;
            font-size: 14px;
        }
        #content_login_form {
            position: relative;
            padding-top: 20px;
        }
        #content_login_form > form > div {
            padding: 5px 0px;
        }
        #content_login_form > form > div > a {
            font-size: 0.9em;
            color: #175199;
        }
        #content_login_form > form > div > a:last-of-type {
            float: right;
            color: #8792a8;
        }
        #content a:hover {
            color: #677288 !important;
        }
        #content_login_form input[type=submit] {
            width: 100%;
            height: 36px;
            border: none;
            background-color: #0084FF;
            color: white;
            margin-top: 30px;
            font-size: 14px;
            border-radius: 3px;
        }
        #content_login_form input[type=submit]:hover {
            background-color: #0074dd;
        }
        #content_login_form img {
            position: absolute;
            right: 0px;
            top: 100px;
        }
        #content_login_bottom {
            width: 356px;
            height: 26px;
            background-color: #F6F6F6;
            border-radius: 0px 0px 4px 4px;
            margin: auto;
            font-size: 13px;
            padding: 17px 21px;
            color: #8792a8;
        }
        #content_login_bottom > div:first-of-type {
            float: left;
        }
        #content_login_bottom > div:last-of-type {
            padding: 6px 0px;
            float: right;
        }
        #content_login_bottom > div:last-of-type > a {
            color: #8792a8;
        }
        #content_login_bottom a {
            color: #8792A8;
        }
        #content_login_bottom > div:last-of-type > a:hover {
            color: #1751a5;
        }
        #social_contact_login {
            width: 350px;
            height: 16px;
            border-radius: 3px;
            background-color: #fff;
            padding: 22px 24px;
            margin: auto;
            margin-top: 24px;
            color: #8A95AA;
            text-decoration: none;
        }
        #social_contact_login a {
            display: inline-block;
            margin: 0px 6px;
            color: #8A95AA;
        }
        #social_contact_login > div {
            float: right;
        }
        #social_contact_login > span {
            float: left;
        }
        #btn_dow_app {
            text-align: center;
        }
        #btn_dow_app > a {
            width: 400px;
            height: 22px;
            display: inline-block;
            border-radius: 3px;
            background-color: #fff;
            margin-top: 24px;
            padding: 10px 0px;
            color: #0E8BFF;
        }
        #btn_dow_app > a > img {
            width: 22px;
        }
        #btn_dow_app span {
            position: relative;
            bottom: 5px;
            left: 7px;
        }
        #content_bottom{
            text-align: center;
            margin-top: 150px;
            font-size: 13px;
            color: #fff;
        }
        #content_bottom a:hover{
            text-decoration: underline;
        }
        #content_bottom img{
            width: 16px;
        }
        #content_bottom a{
            color: #fff;
        }
        #content_bottom>div{
            margin: 8px;
        }
        #content_bottom>div>*:after{
            content:' · '
        }
        #content_bottom>div>*:last-child:after{
            content: ' ';
        }
    </style>
</head>
<body>
    <div id="logo">
        <img class="SignFlowHomepage-logo" src="https://pic2.zhimg.com/80/v2-f6b1f64a098b891b4ea1e3104b5b71f6_720w.png">
    </div>
    <div id="content">
        <div id="content_login_select">
            <span class="chick">免密码登录</span>
            <span>密码登录</span>
        </div>
        <img src="img/二维码.png" alt="" id="ewm">
        <div id="img_div"></div>
        <div id="content_login_form">
            <form action="#" method="post">
                <input type="text" name="telephone" placeholder="中国+86      手机号    ">
                <input type="password" name="password" placeholder="密码"><br>
                <a href="#">获取短信验证码</a>
                <div>
                    <a href="#">接收语音验证码</a><br>
                </div>
                <input type="submit" value="注册/登录">
            </form>
        </div>
    </div>
    <div id="content_login_bottom">
        <div>
            未注册手机未注册手机验证后自动登录<br>
            注册即代表同意
            <a href="#">《知乎协议》</a>
            <a href="#">《隐私保护指引》</a>
        </div>
        <div>
            <a href="#">注册机构号</a>
        </div>
    </div>
    <div id="social_contact_login">
        <span>社交账号登录</span>
        <div>
        <a href="#">
            <img src="img/wx.png" alt="">
            <span>微信</span>
        </a>
        <a href="#">
            <img src="img/qq.png" alt="">
            <span>QQ</span>
        </a>
        <a href="#">
            <img src="img/vb.png" alt="">
            <span>微博</span>
        </a>
    </div>
    </div>
    <div id="btn_dow_app">
        <a href="#">
            <img src="img/zhi.png" alt="">
            <span>下载知乎 App</span>
        </a>
    </div>
    <div id="content_bottom">
        <div>
            <a href="#">知乎专栏</a>
            <a href="#">圆桌</a>
            <a href="#">发现</a>
            <a href="#">联系我们</a>
            <a href="#">来知乎工作</a>
            <a href="#">注册机构号</a>
        </div>
        <div>
            <span >© 2021 知乎</span>
            <a href="#">京 ICP 证 110745 号</a>
            <img src="img/ga.png" alt="">
            <a href="#">京公网安备 11010802010035 号</a>
            <a href="#">出版物经营许可证</a>
        <div>
             <a href="#">互联网药品信息服务资格证书（京）</a>
            <a href="#">- 非经营性 - 2017 - 0067</a>
        </div>
        </div>
        <div>
            <a href="#">侵权举报</a>
            <a href="#">网上有害信息举报专区</a>
            <a href="#">儿童色情信息举报专区</a>
            <span>违法和不良信息举报：010-82716601</span>
        </div>
    </div>
</body>
</html>

IDEA创建SpringBoot项目做一个简单登录交互

一、检查jdk、Maven

环境准备

检查Jdk版本

IDEA设置

二、创建SpringBoot项目

三、目录结构及文件说明

四、“HELLO WORLD ”测试

五、“知乎登录界面”测试

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

IDEA创建SpringBoot项目做一个简单登录交互

一、检查jdk、Maven

环境准备

检查Jdk版本

IDEA设置

二、创建SpringBoot项目

三、目录结构及文件说明

四、“HELLO WORLD ”测试

五、“知乎登录界面”测试

热门文章

最新文章

相关课程

相关电子书

相关实验场景