04-框架--SpringBoot

山荷枝2026-08-13 14:03

1. 创建SpringBoot工程

2. SpringMVC

后端Servlet中处理客户端请求的核心单元

2.1方法参数列表

基本类型

----参数列表名字和表单名字相同

对象类

复制代码 
package com.iweb.sprintbootmybatis.bean;

import lombok.Data;
//date获取类的数据
@Data
public class User {

    private String username;
    private String uid;
    private String password;
    private Cat cat;
}

controller部分内容

复制代码 
@RequestMapping("/login1")
public void login1(String username,String password){
    System.out.println(username + ":" + password);
}

----参数列表名字和表单名字不同

对象类

复制代码 
package com.iweb.sprintbootmybatis.bean;

import lombok.Data;
//date获取类的数据
@Data
public class User {

    private String username;
    private String uid;
    private String password;
    private Cat cat;
}

controller部分内容

复制代码 
 //null和""
@RequestMapping("/login1")
public void login1(@RequestParam("username") String username1, String password){
    System.out.println(username1 + ":" + password);
}

对象类型

controller部分内容

复制代码 
@RequestMapping("/login")
@ResponseBody
public String login(User user){
    user = userService.login(user);
    if(user == null){
        return "登录失败";
    }else{
        return "登录成功";
    }
}

web页面

复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统登录</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", sans-serif;
        }

        body {
            /* 渐变背景 */
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* 登录卡片 */
        .login-box {
            background: #fff;
            width: 380px;
            padding: 40px 35px;
            border-radius: 16px;
            box-shadow: 0 10px 35px rgba(0, 0, 0, 0.2);
        }

        .title {
            text-align: center;
            font-size: 26px;
            color: #333;
            margin-bottom: 35px;
            font-weight: 600;
        }

        /* 输入框容器 */
        .input-item {
            margin-bottom: 22px;
        }

        .input-item input {
            width: 100%;
            height: 48px;
            padding: 0 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
            transition: 0.3s;
            outline: none;
        }

        /* 聚焦效果 */
        .input-item input:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
        }

        /* 登录按钮 */
        .login-btn {
            width: 100%;
            height: 48px;
            border: none;
            border-radius: 8px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            font-size: 17px;
            cursor: pointer;
            transition: opacity 0.3s;
        }

        .login-btn:hover {
            opacity: 0.9;
        }

        /* 底部文字 */
        .tip {
            margin-top: 20px;
            text-align: center;
            color: #888;
            font-size: 14px;
        }

        .tip a {
            color: #667eea;
            text-decoration: none;
        }

        /* 移动端适配 */
        @media (max-width: 420px) {
            .login-box {
                width: 92%;
                padding: 30px 20px;
            }
        }
    </style>
</head>
<body>
    <form action="http://localhost:8080/user/login" method="post">
        <div class="login-box">
            <h2 class="title">JavaWeb 后台登录</h2>
            <div class="input-item">
                <input type="text" name="username" id="username" placeholder="请输入用户名">
            </div>
            <div class="input-item">
                <input type="password" name="password" id="password" placeholder="请输入密码">
            </div>
            <div class="input-item">
                小猫种类：<input type="text" name="cat.kind"  placeholder="请输入种类"><br />
                小猫价格：<input type="text" name="cat.price" placeholder="请输入价格">
            </div>

            <button class="login-btn" type="submit" id="loginBtn">登 录</button>
            <div class="tip">
                没有账号？<a href="/day03/register.html">立即注册</a>
            </div>
        </div>
    </form>
</body>
</html>

3.Ajax

发送异步请求的技术

传统请求，从后端返回页面后会刷新整个页面，导致选先填写的数据丢失了

原理图

前端web文件

复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统登录</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", sans-serif;
        }

        body {
            /* 渐变背景 */
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* 登录卡片 */
        .login-box {
            background: #fff;
            width: 380px;
            padding: 40px 35px;
            border-radius: 16px;
            box-shadow: 0 10px 35px rgba(0, 0, 0, 0.2);
        }

        .title {
            text-align: center;
            font-size: 26px;
            color: #333;
            margin-bottom: 35px;
            font-weight: 600;
        }

        /* 输入框容器 */
        .input-item {
            margin-bottom: 22px;
        }

        .input-item input {
            width: 100%;
            height: 48px;
            padding: 0 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
            transition: 0.3s;
            outline: none;
        }

        /* 聚焦效果 */
        .input-item input:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
        }

        /* 登录按钮 */
        .login-btn {
            width: 100%;
            height: 48px;
            border: none;
            border-radius: 8px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            font-size: 17px;
            cursor: pointer;
            transition: opacity 0.3s;
        }

        .login-btn:hover {
            opacity: 0.9;
        }

        /* 底部文字 */
        .tip {
            margin-top: 20px;
            text-align: center;
            color: #888;
            font-size: 14px;
        }

        .tip a {
            color: #667eea;
            text-decoration: none;
        }

        /* 移动端适配 */
        @media (max-width: 420px) {
            .login-box {
                width: 92%;
                padding: 30px 20px;
            }
        }
    </style>
</head>
<body>
        <div class="login-box">
            <h2 class="title">JavaWeb 后台登录</h2>
            <div class="input-item">
                <input type="text" name="username" id="username" placeholder="请输入用户名">
            </div>
            <div class="input-item">
                <input type="password" name="password" id="password" placeholder="请输入密码">
            </div>
            <button class="login-btn" type="submit" id="loginBtn">登 录</button>
            <div class="tip">
                没有账号？<a href="/day03/register.html">立即注册</a>
            </div>
        </div>
</body>
</html>
<script>
    let btn = document.querySelector('#loginBtn');
    let username = document.querySelector('#username');
    let password = document.querySelector('#password');

    btn.onclick = function(){
        // 1. 创建请求对象
        const xhr = new XMLHttpRequest();  
        // 2. 打开连接，请求方式、地址、true=异步
        xhr.open('POST', 'http://localhost:8080/user/ajaxLogin', true); 
        // 3. 设置请求头（POST表单必须配置）
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        //4、发送数据
        const data = "username="+username.value+"&password="+password.value+"";
        xhr.send(data);
        xhr.onreadystatechange = function(){
            //200代表客户端和服务器端通信成功，并且客户端正确接收服务器返回给客户端的数据
            if(xhr.status == 200 && xhr.readyState == 4){
                alert(xhr.responseText);
                password.value = '';
            }
        }
    }
</script>

后端controller文件

复制代码 
package com.iweb.sprintbootmybatis.controller;

import com.iweb.sprintbootmybatis.bean.User;
import com.iweb.sprintbootmybatis.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
@CrossOrigin//专门处理客户端请求和给客户端响应结果
public class UserController {

    @Autowired
    private UserService userService;//这个代码相当于之前写的多态（UserService userService=new UserServiceimpl）


    //一个方法对应一个请求
    //@RequestMapping处理登录请求且括号里的内容不能重复,web想要请求路径，都以斜杠开头


    @RequestMapping("/ajaxlogin")
    @ResponseBody
    public String ajaxlogin(User user){
        user=userService.login(user);
        if(user==null){
            return "密码输入错误";
        }
        return "登陆成功";
    }
}

4.Json

4.1前端->后端

前端页面代码

复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-1.8.3.min.js"></script>
</head>
<body>
    
</body>
</html>
<script >
    //axios
    js对象-->字符串,js=>java   客户端->服务器端
     let user={uid:2,username:'王五',password:'admin'};
     let userJson=JSON.stringify(user);
     $.ajax({
         url:'http://localhost:8080/user/json',
         type:'post',
         data:userJson,
         contentType: 'application/json;charset=utf-8',
     });
</script>

后端代码（controller）

复制代码 
@RequestMapping("/json")
public void json(@RequestBody User user){
        System.out.println(user);
}

4.2后端->前端

前端页面代码

复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-1.8.3.min.js"></script>
</head>
<body>
    
</body>
</html>
<script >
    //axios
    //java=>js   服务器端->客户端
    let user={uid:2,username:'王五',password:'admin'};
    let userJson=JSON.stringify(user);
    $.ajax({
        url:'http://localhost:8080/user/json',
        type:'post',
        data:userJson,
        contentType: 'application/json;charset=utf-8',
        dataType:'json',
        success:function(tUser){
            alert(tUser.uid);
            alert(tUser.username);
            alert(tUser.password);
        }
    });
</script>

后端代码

复制代码 
    @RequestMapping("/json")
    @ResponseBody    //后端传入前端时需要加这个注解
    public User json(@RequestBody User user){
        return user;
    }
相关推荐
linux修理工1 小时前
内存占用 99% 且 Java 程序较多的优化建议
java·开发语言
weixin_460443561 小时前
企业考试系统如何对接OA、钉钉和企业微信？SSO单点登录、组织同步与权限一致性设计
java·开发语言·数据库
Sylvia33.1 小时前
篮球数据API的技术架构与工程实践：基于火星数据WebSocket实时推送体系
java·python·websocket·网络协议·架构
Hi李耶1 小时前
【LeetCode】15.三数之和
java·算法·leetcode
蔬菜_2 小时前
前端转全栈-day6（构造函数与继承）
java
程序员雷欧2 小时前
Java 反射深度解析：从原理到源码的全面剖析
java·开发语言·python
登登登__2 小时前
春秋招笔试题总结
java·开发语言
Undoom2 小时前
用TextIn xParse搞定批量简历解析，WorkBuddy里一句话就能完成
后端
rannn_1112 小时前
【力扣hot100】链表专题|21、2、19、24、92、25
java·数据结构·算法·leetcode·链表·开发
热门推荐
01GitHub 镜像站点02VSCode+CodeX扩展，无法启动03国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）042026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？05微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新06AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路07历年考研数学一、数学二、数学三真题试卷及答案PDF08Agnes AI 免费 API 接入指南：文本、生图、生视频，一套接口全免费09如何新建文件夹？ 电脑新建文件夹的4种方法102026年7月AI圈大地震：GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片