首页 > 基础资料 博客日记
java+springboot+jsp实现用户登录注册
2024-06-04 18:00:06基础资料围观427次
本篇文章分享java+springboot+jsp实现用户登录注册，对你有帮助的话记得收藏一下，看Java资料网收获更多编程知识
1.编译工具：
idea
2.所用技术：
java+springboot+jsp
数据库：mysql
3.登录页面的jsp（可以自己调整属性，仅供参考）
<head>
<meta charset="UTF-8">
<title>hello</title>
</head>
<body style="background: url(../img/登录壁纸.jpg)">
<div id="divlogin" >
<h1 style="margin-top: 200px;margin-left: 620px">登录页面</h1>
<div >
<div class="login">
<div style="margin-top: 10px">
<a style="align-content: center;margin-left: 550px;margin-top: 100px;font-size: 22px;font-family: Calibri">请输入账号:</a><input id="account" placeholder="账号" style="height: 30px;border-radius: 10%">
</div>
<div style="margin-top: 10px">
<a style="align-content: center;margin-left: 550px;margin-top: 100px;font-size: 22px">请输入密码:</a><input id="password" placeholder="密码" style="height: 30px;border-radius: 10%">
</div>
<div style="margin-top: 10px">
<a style="align-content: center;margin-left: 550px;margin-top: 100px;font-size: 22px">请输入身份:</a><input id="identity" placeholder="1.学生/2.教师/3.管理员" style="height: 30px;border-radius: 10%">
</div>
<div style="margin-top: 30px">
<button οnclick="login()" id="login" style="align-content: center;margin-left: 666px;font-size: 18px;background-color: #b2b2b2"> 登录</button>
未注册账号？点击<a href="./register">注册</a>
</div>
</div>
</div>
<script src="../js/jquery-3.3.1.min.js"></script>
<!--注：url是本地端口，我就不展示我的了->
<script>
url="http://localhost:xxxx"
var user={
"login":"/auth/login",
}
function login(){
var geturl=url+user.login;
var account = document.getElementById("account").value
var password = document.getElementById("password").value
var identity= document.getElementById("identity").value
console.log(account)
console.log(password)
console.log(identity)
var parm = {
"account": account,
"password": password,
"identity":identity,
}
$.ajax({
url: geturl,
type: "post",
contentType: 'application/json',
data: JSON.stringify(parm),
success: function (res) {
if (res.data.state === "200"&&identity==="学生") {
var storage = window.localStorage;
//storage.setItem("Authorization",res.data.token);
storage.setItem("account", res.data.user.account);
storage.setItem("password", res.data.user.pass3word);
storage.setItem("indentity", res.data.user.identity);
console.log(res.data.user.account);
console.log(res.data.user.password);
console.log(res.data.user.identity);
console.log(storage)
location.href = "./menue"
} else if (res.data.state === "200"&&identity==="教师"){
var storage = window.localStorage;
//storage.setItem("Authorization",res.data.token);
storage.setItem("account", res.data.user.account);
storage.setItem("password", res.data.user.password);
storage.setItem("indentity", res.data.user.identity);
console.log(res.data.user.account);
console.log(res.data.user.password);
console.log(res.data.user.identity);
console.log(storage)
location.href = "./teacher"
}else if (res.data.state === "200"&&identity==="管理员"){
var storage = window.localStorage;
//storage.setItem("Authorization",res.data.token);
storage.setItem("account", res.data.user.account);
storage.setItem("password", res.data.user.password);
storage.setItem("indentity", res.data.user.identity);
console.log(res.data.user.account);
console.log(res.data.user.password);
console.log(res.data.user.identity);
console.log(storage)
location.href = "./manage"
}else{
alert("您输入的信息有误")
}
}
})
}
</script>
</div>
</body>
4.注册的jsp（可以自己调整属性，仅供参考）
<head>
<title>注册</title>
</head>
<head>
</head>
<body style="background-image: url(../img/登录壁纸.jpg)">
<h1 style="margin-top: 200px;margin-left: 620px">注册页面</h1>
<div>
<a style="align-content: center;margin-left: 550px;margin-top: 100px;font-size: 22px">请输入账号:<input placeholder="账号" style="height: 30px;border-radius: 10%" type="text" name="user" id="account" size="20"><br></a>
<a style="align-content: center;margin-left: 550px;margin-top: 100px;font-size: 22px">请输入密码:<input placeholder="密码" style="height: 30px;border-radius: 10%" type="password" name="pass" id="password" size="20"><br></a>
<div style="margin-top: 10px">
<a style="align-content: center;margin-left: 550px;margin-top: 100px;font-size: 22px">请输入身份:</a><input id="identity" placeholder="学生/教师/管理员" style="height: 30px;border-radius: 10%">
</div>
<div style="margin-top: 30px">
<button style="align-content: center;margin-left: 666px;font-size: 18px;background-color: #b2b2b2" οnclick="register()" id="register">注册</button>
已有账号？返回<a href="./">登录</a>
</div>
</div>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
url="http://localhost:xxxx"
var user={
"register":"/auth/register"
}
function register(){
var geturl = url + user.register;
var account = document.getElementById("account").value
var password = document.getElementById("password").value
var identity = document.getElementById("identity").value
console.log(account)
console.log(password)
console.log(identity)
var parm = {
"account": account,
"password": password,
"identity": identity,
}
$.ajax({
url: geturl,
type: "post",
contentType: 'application/json',
data: JSON.stringify(parm),
success: function (res) {
if (res.data.state == 400) {
alert("账号已存在")
}
else if (res.data.state == 200) {
alert("注册成功")
location.href = "./"
} else {
alert("注册失败")
}
}
})
}
</script>
</div>
</body>
5.连接数据库（在application.properties文件配置）：
username是用户名称，一般都是root
password是设置的数据库密码，例如：123456
url：是数据库的地址，例如：javaee就是我的数据库名称，localhost:xxxx是本地链接
spring.datasource.username=root spring.datasource.password= spring.datasource.url=jdbc:mysql://localhost:xxxx/javaee?serverTimezone=UTC&useUnicode=true&characterEncoding=utf-8&useSSL=false spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
6.数据库mysql语句：
需注意：id与dao层的id相对应
6.1mapper层的xml文件写sql语句：
<!-- 查询数据库是否有该条数据，本项目是根据用户账号进行查询-->
<select id="queryUserByAccount" resultType="User">
select 需要查询的字段 from 表名 where account = #{account}
</select>
<insert id="register" parameterType="User" >
insert into 表名(account,password,identity)
values(#{account},#{password},#{identity})
</insert>
<!-- <insert id="register" parameterType="User">-->
<!-- insert into 表名(<include refid="Field"></include> )-->
<!-- values (<include refid="FieldValue"></include>);-->
<!-- </insert>-->
<!--登录用户-->
<select id="login" resultMap="userRoleMap">
SELECT u.id, u.account, u.password
FROM 表名 u
where u.account = #{account}
and u.password = #{password}
</select>
6.2dao层
public User queryUserByAccount(int account);
//注册用户
public int register(User user);
// 登录用户
public List<User> login(Map<String,Object> map);
7.控制层controller层配路由：
@Controller
public class helloController {
// 登录
@RequestMapping("/")
public String index() {
return "login";
}
// 注册
@RequestMapping("/register")
public String register() {
ModelAndView mv = new ModelAndView();
mv.setViewName("register");
return "register";
}
}
8.控制层后端处理：
@PostMapping("/auth/login")
public ResponseMsg<Map> login(@RequestBody User user) {
ResponseMsg<Map> res = new ResponseMsg<Map>();
Map<String, Object> map = new HashMap<String, Object>();
map.put("account", user.getAccount());
map.put("password", user.getPassword());
map.put("identity", user.getIdentity());
User u = new User();
u.setAccount(user.getAccount());
u.setPassword(user.getPassword());
u.setIdentity(user.getIdentity());
System.out.println(u);
try {
List<User> users = userlogin.login(u);
System.out.println(users);
if (users.size() != 0) {
System.out.println(users.get(0));
res.success("登录成功");
map.put("user", users.get(0));
map.put("state", "200");
res.setData(map);
} else {
System.out.println("登录失败");
map.put("state", "400");
res.fail("登录失败");
res.setData(map);
}
} catch (Exception e) {
res.fail("登录失败");
}
return res;
}
@PostMapping("/auth/register")
public ResponseMsg<Map> register(@RequestBody User user) {
ResponseMsg<Map> res = new ResponseMsg<Map>();
Map<String, Object> map = new HashMap<String, Object>();
map.put("account", user.getAccount());
map.put("password", user.getPassword());
map.put("identity", user.getIdentity());
User u = new User();
u.setAccount(user.getAccount());
u.setPassword(user.getPassword());
u.setIdentity(user.getIdentity());
System.out.println(u);
try {
int i = userlogin.register(u);
System.out.println(i);
if (i == 0) {
res.success("注册成功");
map.put("state", "200");
res.setData(map);
} else if (i == 1) {
res.fail("用户名已存在");
map.put("state", "400");
res.setData(map);
} else {
System.out.println("注册失败");
map.put("state", "300");
res.fail("注册失败");
res.setData(map);
}
} catch (Exception e) {
res.fail("注册失败");
}
return res;
}
9.展示图：
10.作者有话说：
本人尚在学习，如果有地方写的不对或者代码有疑问请联系我，及时沟通，共同进步。如果报错的话可能是没有在pom配置依赖。
例如这些：
<dependency>
<groupId>com.mysql</groupId>
<artifactId>mysql-connector-j</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter-test</artifactId>
<version>2.3.1</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
<scope>runtime</scope>
</dependency>
<!--热部署-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<optional>true</optional>
</dependency>
<!--Thymeleaf模板引擎--> <dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!-- tomcat 的支持.-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-tomcat</artifactId>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>org.apache.tomcat.embed</groupId>
<artifactId>tomcat-embed-jasper</artifactId>
<scope>provided</scope>
</dependency>
文章来源:https://blog.csdn.net/weixin_65201086/article/details/138527883
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：jacktools123@163.com进行投诉反馈，一经查实，立即删除！
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：jacktools123@163.com进行投诉反馈，一经查实，立即删除！
标签：
相关文章
最新发布
点击排行
本站推荐
