springboot实战---1.搭建springboot实现登录

靓仔很忙i

已于 2024-03-27 15:06:53 修改

阅读量3.5k

点赞数 8

分类专栏： # springboot 文章标签： spring boot okhttp 后端

于 2020-09-10 22:32:10 首次发布

本文链接：https://blog.csdn.net/qq_34082113/article/details/108523240

版权

springboot 专栏收录该内容

7 篇文章 2 订阅

订阅专栏

🎈个人主页：靓仔很忙i
💻B 站主页：👉B站👈
🎉欢迎 👍点赞✍评论⭐收藏
🤗收录专栏：SptringBoot
🤝希望本文对您有所裨益，如有不足之处，欢迎在评论区提出指正，让我们共同学习、交流进步！

功能需求：

1.实现登录
2.登录失败，提示错误信息
3.登录成功，显示柱状图

实现思路:

1.新建一个springboot新项目
2.熟悉springboot中几个常用注解
@Controller,@RequestMapping,@ResponseBody
3.掌握基本的html和简单的js
4.了解如何使用echarts
5.前后端交互(jquery ajax)

附加：常用快捷键使用

main函数：psvm
打印：sout
for循环：fori

具体流程：

1.新建一个springboot新项目

点击next，直至完成。建完后，项目如下。无用的可直接删除。

文件详情，如下：

验证项目搭建是否成功，如下：

2.熟悉springboot中几个常用注解

2.1 准备工作

2.2 @Controller

将类标注为控制器，使Spring框架可以管理这个类

@ResponseBody
将返回内容以json字符串形式输出到页面中。

@RequestMapping

返回的字符串，为页面所在路径。默认所在文件夹是src/main/resource/static。

新建html

网页代码如下：

 <form>
        用户名：<input type="text" name="username"/>
        密码：<input type="text" name="username"/>
        <input type="submit" name="登录"/>
    </form>

新建网页后，修改之前的LoginController

再次启动项目，如下

3.掌握基本的html和简单的js

表单(input),引入第三方的js，js基本语法

4.了解如何使用echarts

先建立一个页面

echarts文档参见：Documentation - Apache ECharts

引入echarts：BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>

代码见官方文档。

登录逻辑自己实现。

5.前后端交互(jquery ajax)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
</head>
<body>
    <form action="">
        用户名：<input type="text" id="username" name="username"/>
        密码：<input type="password" id="password" name="password"/>
        <!--<input type="submit" name="登录"/>-->
    </form>
    <button onclick="login()">登录</button>
<script>

    function login(){
        //获取用户输入参数
        //jquery ajax获取input输入的内容
        var opt={username:$("#username").val(),
            password:$("#password").val()};
        console.log(JSON.stringify(opt))
        //提交ajax请求
        $.ajax({
            type : "POST",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url : "/index",
            //数据，json字符串
            data : JSON.stringify(opt),
            //请求成功
            success : function(result) {
                if(result=="USER_NOT_EXIST"){
                    alert("用户不存在")
                }
                else if(result=="ACCOUNT_OLD"){
                    alert("账号已被冻结，请联系管理员")
                }
                else if(result=="PASSWORD_ERR"){
                    alert("密码输入有误")
                }
                else{
                    window.location.href="index.html";
                }
            },
            //请求失败，包含具体的错误信息
            error : function(e){
                console.log(e.status);
                console.log(e.responseText);
            }
        });
    }



</script>
</body>
</html>

LoginController.java

package com.jzzn.echarts_demo.controller;

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

class User{
    public  String username;
    public  String password;
}

@Controller
public class LoginController {


    //@ResponseBody
    @RequestMapping("/")
    public  String  login(){
        return  "login.html";
    }

    @ResponseBody
    @RequestMapping("/index")
    public  String  index(@RequestBody User user){
        if(!user.username.equals("aaa")){
            return  "USER_NOT_EXIST";
        }
        if(user.password.equals("000000")){
            return  "ACCOUNT_OLD";
        }
        if(!user.password.equals("111111")){
            return  "PASSWORD_ERR";
        }
        return "SUCCESS";

    }

}

靓仔很忙i

关注

8
点赞
踩
29

收藏

觉得还不错? 一键收藏
打赏
5
评论
springboot实战---1.搭建springboot实现登录

功能需求：1.实现登录2.登录失败，提示错误信息3.登录成功，显示柱状图实现思路:1.新建一个springboot新项目2.熟悉springboot中几个常用注解 @Controller,@RequestMapping,@ResponseBody3.掌握基本的html和简单的js4.了解如何使用echarts5.前后端交互(jquery ajax)附加：常用快捷键使用main函数：psvm打印：soutfor循环：fori具体流程：1.新建一个sprin..
复制链接

扫一扫