🎈个人主页:靓仔很忙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)
login.html
<!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";
}
}