个人主页：兜���有颗棉花糖

欢迎 点赞 收藏✨ 留言✉ 加关注本文由 兜里有颗棉花糖 原创

收录于专栏【Spring MVC】

本专栏旨在分享学习Spring MVC的一点学习心得，欢迎大家在评论区交流讨论

目录

• 一、加法计算器
• 二、登录页面
• • login.html
  • index.html
  • 三、留言板

    一、加法计算器

    前端代码：

                Document             
    计算器
            数字1：
            数字2：
    

    后端代码：

    package org.example.demo1.demos.web.controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;@RequestMapping("/calc")@RestControllerpublic class CalcController {    @RequestMapping("/sum")    public String sum(Integer num1,Integer num2) {        Integer sum = num1 + num2;        return "计算结果为:" + sum;    }}

    运行结果：

    二、登录页面

    前端两个文件（login.html、index.html），后端一个文件（UserController.java）。

    后端代码如下：

    package org.example.demo1.demos.web.controller;import org.springframework.util.StringUtils;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;import javax.servlet.http.HttpSession;@RequestMapping("/user")@RestControllerpublic class UserController {    @RequestMapping("/login")    public Boolean login(String userName, String password, HttpSession session) {        // 校验参数的合法性        if(!StringUtils.hasLength(userName) || !StringUtils.hasLength(password))            return false;        // 进行用户名和密码的校验        if("admin".equals(userName) && "admin".equals(password)) {            session.setAttribute("username","admin");            return true;        }        return false;    }    @RequestMapping("/getUserInfo")    public String getUserInfo(HttpSession session) {        // 从session中获取session用户        String userName = (String) session.getAttribute("username");        return userName;    }}

    login.html

            登录页面
    用户登录
    用户名：
    密码：
        function login() {        // console.log("登录...")        $.ajax({            url: "/user/login",            type: "post",            data:{                "userName": $("#userName").val(),                "password": $("#password").val()            },            success:function(result) {                if(result) {                    location.href = "/index.html"; // 方式一                    // location.assign(); 方式二                }else {                    alert("密码错误");                }            }        })    }

    index.html

                    用户登录首页登录人:     // 页面加载时，就去调用后端请求    $.ajax({        url: "/user/getUserInfo",        type: "get",        success:function(username) {            $("#loginUser").text(username);        }    })

    三、留言板

    后端接口定义：

    1.提交留言（/message/publish）：

    参数：MessageInfo(from,to,message)

    返回结果：true/false

    2.查看所有留言（/message/getMessageList）：

    参数：无

    返回结果：List

    前端代码：

                留言板            .container {            width: 350px;            height: 300px;            margin: 0 auto;            /* border: 1px black solid; */            text-align: center;        }        .grey {            color: grey;        }        .container .row {            width: 350px;            height: 40px;            display: flex;            justify-content: space-between;            align-items: center;        }        .container .row input {            width: 260px;            height: 30px;        }        #submit {            width: 350px;            height: 40px;            background-color: orange;            color: white;            border: none;            margin: 10px;            border-radius: 5px;            font-size: 20px;        }        
    留言板
        
    输入后点击提交, 会将信息显示下方空白处
                谁:                 对谁:                 说什么:                 // 页面加载时请求后端获取留言列表    $.ajax({        url: "/message/getMessageInfo",        type: "get",        success: function(messages){            for(var m of messages){                //2. 构造节点(拼接节点的html)                var pE = ""+m.from +"对" + m.to + "说:" + m.message+"";                //3. 把节点添加到页面上                $(".container").append(pE);            }        }    });    function submit(){        //1. 获取留言的内容        var from = $('#from').val();        var to = $('#to').val();        var say = $('#say').val();        if (from== '' || to == '' || say == '') {            return;        }        // 提交留言        $.ajax({            url: "/message/publish",            type: "post",            data: {                "from":from,                "to":to,                "message":say            },            success:function (result){                if(result) {                    // 留言成功                    //2. 构造节点                    var pE = ""+from +"对" + to + "说:" + say+"";                    //3. 把节点添加到页面上                    $(".container").append(pE);                    //4. 清空输入框的值                    $('#from').val("");                    $('#to').val("");                    $('#say').val("");                }else {                    // 留言失败                    alert("留言发布失败")                }            }        });    }

    后端代码：

    package org.example.demo1.demos.web.controller;import org.springframework.util.StringUtils;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;import java.util.ArrayList;import java.util.List;@RequestMapping("/message")@RestControllerpublic class MessageController {    private List messageInfos = new ArrayList();    @RequestMapping("/publish")    public Boolean publicMessage(MessageInfo messageInfo){        if(!StringUtils.hasLength(messageInfo.getMessage())            || !StringUtils.hasLength(messageInfo.getFrom())            || !StringUtils.hasLength((messageInfo.getTo()))) {            return false;        }        messageInfos.add(messageInfo);        return true;    }    @RequestMapping("/getMessageInfo")    public List getMessageInfo(){        return messageInfos;    }}

    效果演示：

    好了，以上就是本文的全部内容了。希望各位友友可以一键三连哈！！！