IDEA创建springboot项目
测试HelloWorld和知乎登录界面交互
一、检查JDK、Maven
环境准备
- jdk 1.7以上
- maven 3.x
检查JDK版本
打开DOS界面检查:“win+R” 然后输入“cmd”输入"java -version"
IDEA设置
打开IDEA 选择“文件"->“其他设置”->“设置 for New Projects…”
配置maven内容
To
二、创建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>
