关于看了SpringBoot快速入门的感想_spring boot前后端交互使用心得与体会-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_52870771/article/details/113729494

任务要求
最终任务：
1、做出来一个可以前后端交互的登录功能（账号和密码写死在Java代码中即可）
交付物：
1、至少一篇过程或者心得博客；
2、最终结果截图发到群里。
交付时间：
2021.02.06

将账号和密码写死在Java代码中，实现登录功能，已完成。

登录控制器：package main.demo;


import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class LoginController {
@ResponseBody
    @PostMapping("/login")
    public String login(@RequestParam("telephone")String telephone,@RequestParam("password")String password){
    System.out.println("telephone   "+telephone);
    if(password.equals("123"))
    return "登录成功。0";
    else
        return "登录失败";
}
}

首页控制器：package main.demo;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class HelloController {
    @RequestMapping("/hello")
    @ResponseBody
    public  String hello(){
        return "hello";
    }
}

以知乎界面作为例子的首页代码：
<!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="/login" 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>
//其中form表单中的action要填对应的跳转页面的地址

这是对应的项目目录结构 在这里插入图片描述
测试结果正确与代码一致。

心得与感想：
知道了一些注解的意思：
Controller：即控制器，用来控制某一部分，比如上例的登录控制器，和首页控制器，处理页面跳转的控制器，控制页面的跳转。
也能了解form表单里的代码的含义，某一部分控制输入块，账号密码输入的地方，和控制跳转的按钮该怎么写。
RequestMapping（）里面写上路径即对路径里的内容分配到Controller中处理
RequestParam是将页面的参数返回到程序中作为变量，如上例中的将在页面中输入的账号和密码传入程序中来判断密码是否正确。
ResponseBody
作用：将方法的返回值，以特定的格式写入到response的body区域，进而将数据返回给客户端。

关于部署
部署的步骤：
当项目完成之后不在修改时，在这里插入图片描述