编写用户注册页面regist.jsp,用户登录页面login.jsp,及用户个人信息查看页面show.jsp完成用户注册,用已注册账号进行登录并查看个人信息(要求在前后端进行数据交换时采用JSON格式数据交互)
时间: 2024-06-09 10:07:11 浏览: 155
这里给出一个简单的示例代码,使用了JSP和Servlet进行开发,采用了JSON格式数据交互。
regist.jsp:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户注册</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function(){
$('#registBtn').click(function(){
var username = $('#username').val();
var password = $('#password').val();
var data = {
"username": username,
"password": password
};
$.ajax({
url: "regist",
type: "POST",
data: JSON.stringify(data),
contentType: "application/json;charset=utf-8",
success: function(result){
if(result.success){
alert("注册成功!");
window.location.href = "login.jsp";
}else{
alert(result.msg);
}
},
error: function(){
alert("请求失败!");
}
});
});
});
</script>
</head>
<body>
<h1>用户注册</h1>
<form>
<label>用户名:</label><input type="text" id="username"><br>
<label>密码:</label><input type="password" id="password"><br>
<button type="button" id="registBtn">注册</button>
</form>
</body>
</html>
```
login.jsp:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户登录</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function(){
$('#loginBtn').click(function(){
var username = $('#username').val();
var password = $('#password').val();
var data = {
"username": username,
"password": password
};
$.ajax({
url: "login",
type: "POST",
data: JSON.stringify(data),
contentType: "application/json;charset=utf-8",
success: function(result){
if(result.success){
alert("登录成功!");
window.location.href = "show.jsp";
}else{
alert(result.msg);
}
},
error: function(){
alert("请求失败!");
}
});
});
});
</script>
</head>
<body>
<h1>用户登录</h1>
<form>
<label>用户名:</label><input type="text" id="username"><br>
<label>密码:</label><input type="password" id="password"><br>
<button type="button" id="loginBtn">登录</button>
</form>
</body>
</html>
```
show.jsp:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>个人信息</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function(){
$.ajax({
url: "show",
type: "POST",
success: function(result){
if(result.success){
$('#username').text(result.data.username);
$('#password').text(result.data.password);
}else{
alert(result.msg);
}
},
error: function(){
alert("请求失败!");
}
});
});
</script>
</head>
<body>
<h1>个人信息</h1>
<p>用户名:<span id="username"></span></p>
<p>密码:<span id="password"></span></p>
</body>
</html>
```
RegistServlet.java:
```java
package com.example.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.example.bean.User;
import com.example.service.UserService;
import com.example.service.impl.UserServiceImpl;
import com.google.gson.Gson;
import com.google.gson.JsonObject;
@WebServlet("/regist")
public class RegistServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("application/json;charset=utf-8");
String data = request.getReader().readLine();
Gson gson = new Gson();
User user = gson.fromJson(data, User.class);
UserService userService = new UserServiceImpl();
JsonObject jsonObject = new JsonObject();
if(userService.addUser(user)){
jsonObject.addProperty("success", true);
}else{
jsonObject.addProperty("success", false);
jsonObject.addProperty("msg", "用户名已存在!");
}
response.getWriter().write(jsonObject.toString());
}
}
```
LoginServlet.java:
```java
package com.example.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.example.bean.User;
import com.example.service.UserService;
import com.example.service.impl.UserServiceImpl;
import com.google.gson.Gson;
import com.google.gson.JsonObject;
@WebServlet("/login")
public class LoginServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("application/json;charset=utf-8");
String data = request.getReader().readLine();
Gson gson = new Gson();
User user = gson.fromJson(data, User.class);
UserService userService = new UserServiceImpl();
JsonObject jsonObject = new JsonObject();
if(userService.checkUser(user)){
jsonObject.addProperty("success", true);
request.getSession().setAttribute("user", user);
}else{
jsonObject.addProperty("success", false);
jsonObject.addProperty("msg", "用户名或密码不正确!");
}
response.getWriter().write(jsonObject.toString());
}
}
```
ShowServlet.java:
```java
package com.example.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.example.bean.User;
import com.google.gson.Gson;
import com.google.gson.JsonObject;
@WebServlet("/show")
public class ShowServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("application/json;charset=utf-8");
User user = (User) request.getSession().getAttribute("user");
JsonObject jsonObject = new JsonObject();
if(user != null){
jsonObject.addProperty("success", true);
jsonObject.add("data", new Gson().toJsonTree(user));
}else{
jsonObject.addProperty("success", false);
jsonObject.addProperty("msg", "请先登录!");
}
response.getWriter().write(jsonObject.toString());
}
}
```
其中,UserService和UserServiceImpl是自定义的用户服务接口和实现类,具体实现可以根据自己的需求进行编写。User是自定义的用户实体类。
阅读全文