思路：在进入展示页面时 可以进行查询数据库 并展示出来再进行下拉框的构造
先写出dao层的接口
int insert(String username,String password,int age); /** * * @param username 用户名 * @param password 密码 * @return 查询的数据 */ User queryByUsernameAndPassword(String username,String password); /** * * @param age 年龄 * @return 查询的集合 */ List<User> queryByAge(int age); /** * * @return 全部年龄 */ Set<Integer> queryAllage();
再进行dao层实现
@Override
public int insert(String username, String password, int age) {
// 通过工具类获取连接对象 connection
Connection connection = BaseDao.getConnection();
// 插入的sql语句
String sql = "insert into user (username,password,age) values (?,?,?)";// sql insert语句
PreparedStatement statement = null; //定义一个statement为null
int i = -1; //定义一个i初始值为-1
try {
//获取statement对象
statement = connection.prepareStatement(sql);
statement.setString(1,username); //第一个占位符为注册界面输入的username
statement.setString(2,password); //第二个占位符为 注册界面输入的password
statement.setInt(3,age); // 第三个占位符为 注册界面输入的age
i = statement.executeUpdate(); //受影响行数 为 i
} catch (SQLException throwables) {
throwables.printStackTrace();
}
return i; //返回一个受影响受影响行数
}
@Override
public User queryByUsernameAndPassword(String username, String password) {
// 通过工具类获取连接对象 connection
Connection connection = BaseDao.getConnection();
// 插入的sql语句
String sql = "select id,username,password,age from user where username=? and password=?";
PreparedStatement statement = null;
ResultSet resultSet = null;
User user = null;
try {
//获取statement对象
statement = connection.prepareStatement(sql);
statement.setString(1,username);
statement.setString(2,password);
resultSet = statement.executeQuery();
if (resultSet.next()){
int id = resultSet.getInt(1);
String uname = resultSet.getString(2);
String pw = resultSet.getString(3);
int age = resultSet.getInt(4);
user = new User(id, uname, pw, age);
}
} catch (SQLException throwables) {
throwables.printStackTrace();
}
return user;
}
@Override
public List<User> queryByAge(int age) {
// 通过工具类获取连接对象 connection
Connection connection = BaseDao.getConnection();
// 插入的sql语句
String sql = "select id,username,password,age from user where age=?";
if(age==-1){
sql = sql + " or 1=1";
}
PreparedStatement statement = null;
ResultSet resultSet = null;
ArrayList<User> list = new ArrayList<>();
try {
//获取statement对象
statement = connection.prepareStatement(sql);
statement.setInt(1,age);
resultSet = statement.executeQuery();
while (resultSet.next()){
int id = resultSet.getInt(1);
String uname = resultSet.getString(2);
String pw = resultSet.getString(3);
int age1 = resultSet.getInt(4);
User user = new User(id, uname, pw, age1);
list.add(user);
}
} catch (SQLException throwables) {
throwables.printStackTrace();
}
return list;
}
@Override
public Set<Integer> queryAllage() {
// 通过工具类获取连接对象 connection
Connection connection = BaseDao.getConnection();
// 插入的sql语句
String sql = "select age from user";
PreparedStatement statement = null;
ResultSet resultSet = null;
Set<Integer> set = new HashSet<>();
try {
//获取statement对象
statement = connection.prepareStatement(sql);
resultSet = statement.executeQuery();
while (resultSet.next()){
int age = resultSet.getInt(1);
set.add(age);
}
} catch (SQLException throwables) {
throwables.printStackTrace();
}
return set;
}
写视图层的接口
boolean register(String username,String password,int age); User queryByUsernameAndPassword(String username,String password); List<User> queryByAge(int age); Set<Integer> queryAllage();
写视图层的实现类
private IUserDao userDao = new UserDaoImpl();
@Override
public boolean register(String username, String password, int age) {
int insert = userDao.insert(username,password,age);
return insert>0;
}
@Override
public User queryByUsernameAndPassword(String username, String password) {
return userDao.queryByUsernameAndPassword(username,password);
}
@Override
public List<User> queryByAge(int age) {
return userDao.queryByAge(age);
}
@Override
public Set<Integer> queryAllage() {
return userDao.queryAllage();
}
写注册的界面
<%-- Created by IntelliJ IDEA. --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>注册页面</title>
</head>
<style>
body {
background-image: url("壁纸 (2).jpg");
background-size: cover;
background-position-x: center;
}
.layout { /*设置登录窗口部分的样式*/
width: 900px;
height: 530px;
position: relative;
box-sizing: border-box;
margin-left: 190px;
margin-top: 110px;
padding: 1px;
border: 8px solid silver;
border-radius: 2px;
background-image: url("壁纸 (2).jpg");
background-size: 1300px;
background-position-x: center;
background-position-y: -125px;
z-index: 1;
}
.layout::after { /*设置背景虚图层*/
content: "";
position: absolute;
width: 100%;
height: 100%;
background: inherit;
left: 0;
top: 0;
filter: blur(5px);
z-index: 2;
}
.input { /*登录条框布局*/
margin-top: 160px;
margin-left: 250px;
margin-right: 250px;
}
.input-group { /*调节账号和密码框图层*/
position: relative;
z-index: 3;
}
.input-group { /*调节两个输入框的之间距离*/
padding: 15px;
}
button { /*设置登录按钮的图层分布和位置*/
position: relative;
z-index: 3;
margin-top: 15px;
margin-left: 120px;
}
.submit-default { /*设置登录按钮边界弧度*/
border-radius: 5px;
}
.bz { /*火焰图标*/
position: absolute;
z-index: 3;
font-size: 40px;
margin-left: 405px;
margin-top: 89px;
}
#注册 { /*注册超链接的设置*/
position: absolute;
z-index: 3;
color: #222222;
margin-top: 15px;
margin-left: 725px;
}
</style>
<body>
<div class="layout">
<div id="注册">
<span>已有用户</span><a href="login.jsp">立即登录</a>
</div>
<div class="bz"><span style="color: #22ffb9; "> </span>
<span class="glyphicon glyphicon-fire" aria-hidden="true"
style="size: 50px"></span></div>
<div class="input">
<form action="regService.jsp" method="post">
<div class="input-group">
账 号: <input type="text" name="username">
</div>
<div class="input-group">
密 码: <input type="password" name="password"><br>
</div>
<div class="input-group">
年 龄: <input type="number" name="age"><br>
</div>
<div class="input-group">
<input type="submit" style="display:block;margin:10px 100px auto" value="注册" ><br>
</div>
</form>
</div>
</div>
</body>
</html>
写注册的后台逻辑
<%
//解决乱码
request.setCharacterEncoding("utf-8");
String username = request.getParameter("username"); //接收注册输入的账号密码年龄
String password = request.getParameter("password");
int age = Integer.parseInt(request.getParameter("age"));
IUserService userService = new UserServicelmpl();
boolean register = userService.register(username, password, age); //受影响行数
if(register){ //如果受影响行数不为空
request.setAttribute("into","注册成功");
request.getRequestDispatcher("login.jsp").forward(request,response);
}else {
request.setAttribute("info","注册失败");
request.getRequestDispatcher("register.jsp").forward(request,response);
}
%>
写登录页面 （这是我优化后的登录界面）
<%-- Created by IntelliJ IDEA. --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>登录界面</title>
</head>
<style>
body {
background-image: url("壁纸 (2).jpg");
background-size: cover;
background-position-x: center;
}
.layout { /*设置登录窗口部分的样式*/
width: 900px;
height: 530px;
position: relative;
box-sizing: border-box;
margin-left: 190px;
margin-top: 110px;
padding: 1px;
border: 8px solid silver;
border-radius: 2px;
background-image: url("壁纸 (2).jpg");
background-size: 1300px;
background-position-x: center;
background-position-y: -125px;
z-index: 1;
}
.layout::after { /*设置背景虚图层*/
content: "";
position: absolute;
width: 100%;
height: 100%;
background: inherit;
left: 0;
top: 0;
filter: blur(5px);
z-index: 2;
}
.input { /*登录条框布局*/
margin-top: 160px;
margin-left: 250px;
margin-right: 250px;
}
.input-group { /*调节账号和密码框图层*/
position: relative;
z-index: 3;
}
.input-group { /*调节两个输入框的之间距离*/
padding: 15px;
}
button { /*设置登录按钮的图层分布和位置*/
position: relative;
z-index: 3;
margin-top: 15px;
margin-left: 120px;
}
.submit-default { /*设置登录按钮边界弧度*/
border-radius: 5px;
}
.bz { /*火焰图标*/
position: absolute;
z-index: 3;
font-size: 40px;
margin-left: 405px;
margin-top: 89px;
}
#注册 { /*注册超链接的设置*/
position: absolute;
z-index: 3;
color: #222222;
margin-top: 15px;
margin-left: 725px;
}
</style>
<body>
<div class="layout">
<div id="注册">
<span>没有用户</span><a href="register.jsp">立即注册</a>
</div>
<div class="bz"><span style="color: #22ffb9; "> </span>
<span class="glyphicon glyphicon-fire" aria-hidden="true"
style="size: 50px"></span></div>
<div class="input">
<form action="longService.jsp" method="post">
<div class="input-group">
账 号: <input type="text" name="username">
</div>
<div class="input-group">
密 码: <input type="password" name="password"><br>
</div>
<div class="input-group">
<input type="submit" style="display:block;margin:10px 100px auto" value="登录" ><br>
</div>
</form>
</div>
</div>
</body>
</html>
写登录的后台逻辑（）
<%
// 处理乱码
request.setCharacterEncoding("utf-8");
// 获取前端页面输入框里面的信息
String username = request.getParameter("username");
String password = request.getParameter("password");
IUserService userService = new UserServicelmpl();
User user = userService.queryByUsernameAndPassword(username, password); //将账号密码传入查询语句 用user接收返回的数据
if(user!=null){
List<User> list = userService.queryByAge(-1); //给个-1 也就是查全部
Set<Integer> ages = userService.queryAllage();
session.setAttribute("ages",ages);
session.setAttribute("list",list);
session.setAttribute("user",user);
response.sendRedirect("show.jsp"); //跳转到 show.jsp 值也传过去
}else {
request.getRequestDispatcher("login.jsp").forward(request,response); // 重定向登录页面
}
%>
写展示界面的页面
<%@ page import="com.xinzhi.model.User" %><%--
Created by IntelliJ IDEA.
User: ASUS
Date: 2022/8/30
Time: 10:56
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> //这个是标签库
<html>
<head>
<title>Title</title>
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script> 这个是js的一个文件
</head>
<body>
欢迎<%=((User)session.getAttribute("user")).getUsername()%>回来
<table border="1px solid black" cellspacing="0" cellpadding="0" width="500px" style="margin: auto;text-align: center" > <!--table 表格标签-->
<tr>
<td>姓名</td>
<td>密码</td>
<td>年龄</td>
</tr>
<c:forEach items="${list}" var="user"> <!---标签库-->
<tr>
<td>${user.username}</td>
<td>${user.password}</td>
<td>${user.age}</td>
</tr>
</c:forEach>
<tr>
<td colspan="3">
<select>
<option value="-1">全部</option>
<c:forEach items="${ages}" var="age">
<option value="${age}">${age}</option>
</c:forEach>
</select>
</td>
</tr>
</table>
<script type="text/javascript">
$(function(){
$("select").change(function(){
location = "selService.jsp?sel="+ $("select").val();
});
});
</script>
</body>
</html>
写展示界面的后台逻辑
<%
request.setCharacterEncoding("utf-8");
String age = request.getParameter("sel");
IUserService userService = new UserServicelmpl();
List<User> list = userService.queryByAge(Integer.parseInt(age));
Set<Integer> ages = userService.queryAllage();
session.setAttribute("list",list);
session.setAttribute("ages",ages);
response.sendRedirect("show.jsp");
%>
效果图如下
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
