JSP实现登录删除添加星座等（带样式）

已于 2022-10-04 11:14:15 修改
阅读量4.8k 收藏 8
点赞数 6
分类专栏： Java 文章标签： java 前端 javascript
于 2022-09-29 12:18:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53795646/article/details/127104511
版权

功能要求

1、完成两个页面
2、第一个登陆页面login. jsp
3、第二个用户管理页面useManage. jsp
4、有登录功能(能进行用户名密码的校验，用户名若为自己的学号密码为班级号，允许登录，否则不显示用户数据列表)，有退出功能。
5、操作列添加“删除”按钮，使用JavaScr ipt实现用户删除功能。
6、操作列添加“添加星座”按钮，使用JavaScr ipt实现添加星座功能( 注意使用询问框(prompt) :获取输入的值)。

1.文件建立

文件建立目录

2.BootStrap和jQuery引入

Bootstrap4.6.1下载网址

jQuery3.6.1下载网址

下载完成后如下图引入

css和js引入

3.login.jsp编写

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="bootstrap-4.6.1-dist/css/bootstrap.css"/>
</head>
<body>
<div style="align-content: center; width: 400px; height: 250px;text-align: center;margin:200px 500px;">
<form action="useManage.jsp" method="post">
    <div class="form-group row">
        <label for="inputPassword" class="col-sm-2 col-form-label">姓名:</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" name="uname">
        </div>
    </div>
    <div class="form-group row">
        <label for="inputPassword" class="col-sm-2 col-form-label">密码:</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="inputPassword" name="upwd">
        </div>
    </div>
    <button class="btn btn-primary" style="align-content: center">登录</button>
</form>

</div>
</body>
</html>
<script type="text/javascript" src="bootstrap-4.6.1-dist/js/jquery-3.6.1.min.js"></script>
<script type="text/javascript" src="bootstrap-4.6.1-dist/js/bootstrap.js"></script>

4.useManage.jsp编写

为了方便测试，此处账号和密码设为了 admin和123456，可自行修改。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户管理</title>
    <link rel="stylesheet" type="text/css" href="bootstrap-4.6.1-dist/css/bootstrap.css"/>
</head>
<body>
<div style="width: 1000px;height: 600px;margin: 100px 250px">
<div >
<span style="margin: 150px;font-size: 20px">用户管理</span>
<span style="font-size: 20px">登录人：<% out.println("admin");%></span>
 <a href="login.jsp"><button class="btn btn-primary" style="float: right;margin:0px 200px">退出</button></a>
<span style="color:red;font-size:12px">${msg}</span>
</div>
<%
    String username = request.getParameter("uname");
    String password = request.getParameter("upwd");
    if (username.equals("admin") && password.equals("123456")) {
%>

<table class="table">
    <thead class="thead-light">
    <tr>
        <th scope="col">姓名</th>
        <th scope="col">学号</th>
        <th scope="col">性别</th>
        <th scope="col">联系方式</th>
        <th scope="col">地址</th>
        <th scope="col">邮箱</th>
        <th scope="col">星座</th>
        <th scope="col" colspan="2">操作</th>
    </tr>
    </thead>
    <tbody>
    <%
        for (int x = 1; x <= 10; x++){
    %>
    <tr id=<%=x%>>
        <td><%=00+x%></td>
        <td><%=20061100+x%></td>
        <td>男</td>
        <td>18233027798</td>
        <td>北京大学</td>
        <td>1019528865@qq.com</td>
        <td><p id=<%=x+100%>></p></td>
        <td><button class="btn btn-primary" onclick="delData(<%=x%>)">删除</button></td>
        <td><button class="btn btn-primary" onclick="addData(<%=x+100%>)">添加星座</button></td>
    </tr>
    <%
        }
    %>
    </tbody>
</table>
<%
} else {
%>
    <div style="margin: 50px 350px">
        <span style="font-size: 25px;">用户名或密码错误！</span>
    </div>
<%
    }
%>
</div>
</body>
</html>
<script type="application/javascript">
    function delData(x) {
        var box=document.getElementById(x);
        box.remove(box);
    }
    function addData(x) {
        var getMonth = prompt("请输入月份"), getDay = prompt("请输入日期");
        if(getMonth == parseInt(getMonth) && getDay == parseInt(getDay)){
            getMonth = parseInt(getMonth), getDay = parseInt(getDay);
            zodiac();
        }
        else{alert("请输入有效日期")};

        function zodiac(){
            var res = null;
            var lastDay = (getDay <= 30),FebDay = (getDay <= 29);
            if(getDay >= 1 || getDay <= 31){
                switch (getMonth){
                    case 1://1月星座
                        if(getDay <= 19){res = '摩羯座';}else if(getDay >= 20){res = '水瓶座';}break;
                    case 2: //2月星座
                        if(getDay <= 18){res = '水瓶座';}else if(getDay >= 18 && FebDay){res = '双鱼座';}break;
                    case 3://3月星座
                        if(getDay <= 20){res = '双鱼座';}else if(getDay >= 21){res = '白羊座';}break;
                    case 4: //4月星座
                        if(getDay <= 19){res = '白羊座';}else if(getDay >= 20 && lastDay){res = '金牛座';}break;
                    case 5://5月星座
                        if(getDay <= 20){res = '金牛座';}else if(getDay >= 21){res = '双子座';}break;
                    case 6://6月星座
                        if(getDay <= 21){res = '双子座';}else if(getDay >= 22 && lastDay){res = '巨蟹座';}break;
                    case 7://7月星座
                        if(getDay <= 22){res = '巨蟹座';}else if(getDay >= 23){res = '狮子座';}break;
                    case 8://8月星座
                        if(getDay <= 22){res = '狮子座';}else if(getDay >= 23){res = '处女座';}break;
                    case 9://9月星座
                        if(getDay <= 22){res = '处女座';}else if(getDay >= 23 && lastDay){res = '天秤座';}break;
                    case 10://10月星座
                        if(getDay <= 23){res = '天秤座';}else if(getDay >= 24){res = '天蝎座';}break;
                    case 11://11月星座
                        if(getDay <= 22){res = '天蝎座';}else if(getDay >= 23 && lastDay){res = '射手座';}break;
                    case 12://12月星座
                        if(getDay <= 21){res = '射手座';}else if(getDay >= 22){res = '摩羯座';}break;
                }
            }
            var box=document.getElementById(x);
            console.log(res)
            box.innerHTML=res
        }
    }
</script>
<script type="text/javascript" src="bootstrap-4.6.1-dist/js/jquery-3.6.1.min.js"></script>
<script type="text/javascript" src="bootstrap-4.6.1-dist/js/bootstrap.js"></script>

5.测试

运行项目后地址栏输入http://ip:8080/项目名称/login.jsp

1. 登录页面login：

登录页面

2. 用户名密码正确，useManage页面截图：

登陆成功页面

3. 用户名密码错误，useManage页面截图：登陆失败页面

4. 删除操作，useManage页面截图：

删除成功页面

5. 添加星座操作，useManage页面截图：

添加星座页面

JSP实现登录删除添加星座等操作至此结束。

夏沫の梦
关注
  • 6
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
如何用jsp实现数据删除功能
Jacksonyr的博客
02-08 1983
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #tb{ margin: 200px auto; text-align: center; width: 300px; background-color: darkgoldenrod
jsp 实现修改和删除功能
weixin_30730053的博客
06-19 9969
main.jsp 实现查询 在此界面快捷方式到修改界面 点击修改 会把数据传递到exit.jsp 修改 edit.jsp 前面数据： 数据库： 1 /* 2 Navicat Premium Data Transfer 3 4 Source Server : c10.87.12.251 5 Sour...
jsp页面清空表单内容
u012186491的专栏
09-29 1万+
jsp页面中有搜索就会伴随清空，下面我们看看这个清空按钮的实现： function formReset() { $(':input,#myform') .not(':button, :submit, :reset, :hidden') .val('') .removeAttr('checked') .removeAttr('selected');
JSP 中重置按钮 清空传入的表单数据
这个昵称90天可改一次
09-24 7768
http://jackroomage.iteye.com/blog/617153 参考
jsp实现增删改查——（二）添加、修改、删除学生信息
最新发布
weixin_44421143的博客
04-03 1869
添加、修改、删除
JSP使用MVC模式完成删除和修改功能实例详解
01-20
本文实例讲述了JSP使用MVC模式完成删除和修改功能的方法。分享给大家供大家参考。具体如下： 目标： ① 进一步理解MVC模式； ② 掌握删除功能的基本实现过程； ③ 掌握修改功能的基本实现过程。 主要内容： ① 使用MVC完成删除功能； ② 使用MVC模式完成信息更新功能。 1、如何使用MVC模式完成删除功能 根据MVC模式的特点，分别考虑MVC的3个部分。 ① 首先考虑V部分： 输入：通常删除功能是在查询的基础上完成的，所以在用户信息列表界面上可以添加删除的超链。 输出：提示用户删除是否成功，可以采用单独的界面，也可以在其他页面中显示。我们采用第二种方式，在用户列表界面中显示提示信息。 ②
如何使用jsp实现删除功能
m0_55530011的博客
02-25 740
name Email salary   zzz1 qqq dddd 删除 zzz2 qqq dddd 删除 zzz3 qqq dddd 删除 name： email： salary：
修改，删除功能---jsp,servlet
热门推荐
笼中鸟
02-24 1万+
0.引言 前面文章已经实现了登录，查询，添加等功能，本篇文章在前面的基础上继续实现修改和删除功能。 一.分析 删除功能分析 1.在前端jsp页面上需要绑定要删除记录的id参数（这里用id=${user.id}来绑定，因为用户的id是主键），然后将这个参数提交到DelUserServlet中处理。 2.在DelUserServlet中：①获取传过来的参数id; ②通过调用service按id进行删除用户；③删除后跳转到查询所有用户的servlet 3.useService,以及u
JSP实现登录功能之添加验证码
10-20
jsp登陆验证，网页登陆验证带验证码校验，登录功能之添加验证码，非常不错，具有参考借鉴价值，需要的朋友参考下吧
jsp实现用户自动登录功能
10-15
主要为大家详细介绍了jsp实现用户自动登录功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JSP实现登录注册连接MySql数据库-初学
03-03
代码是在初学Web时写的，现在闲来无事做的代码和界面优化，连接MySql数据库，里面有数据库脚本，测试帐号：admin，密码：admin；仅供初学者学习使用。
jsp 留言板(添加，删除，修改等功能)
06-20
语言jsp，数据库sql server 2005(其实调用数据库代码都差不多)，对于刚开始编程的同学有很大帮助
简单的jsp增删改查
12-12
jsp增删改查，，，写得比较简单，只是简单的进行了一下示范。
jsp操作MySQL实现查询/插入/删除功能示例
10-27
jsp操作MySQL实现查询、插入与删除功能（query、insert、delete）示例如下，感兴趣的朋友可以参考下
JSP实现用户登录、注册和退出功能
10-22
主要为大家详细介绍了JSP实现用户登录、注册和退出功能，具有实用性和参考价值，感兴趣的小伙伴们可以参考一下
Jsp页面 实现删除修改
jumpypy的博客
09-19 2617
JSP页面实现删除和修改
【JSP】用户信息界面操作 ---- 删除用户
懂得一千零一种,赋予你失败的方法！
01-30 3248
文章目录用户信息界面操作 ---- 删除Ⅰ.修改userinfo.jspⅡ.完善dbHelper类，添加用户删除方法Ⅲ.创建 DeleteServlet，实现用户删除功能Ⅳ.效果展示① 删除当前登录用户② 删除非当前登录用户 用户信息界面操作 ---- 删除 Ⅰ.修改userinfo.jsp 之前在设计userinfo.jsp中的操作内容时，并没有具体的实现。今天来实现一个简单的用户删除操作。 href="DeleteServlet?username=<%=resultSet.getStrin..
jsp删除页面
Begin_W_T_E_I_M的博客
08-07 2162
1.ajax实现删除功能 <a href="dodelete.jsp?empno=8044"> <script> result =true; 每一行给一个id $('#tr_8044').remove; doDetele.jsp String empno=request.getParameter("empno"); Emplo...
JSP实现选中删除功能
qq_40591439的博客
11-17 4646
选中删除           1.实现所使用到的技术：                                JavaScript做的复选框的“全选和全不选功能”；                                form表单提交；                                使用Bootstrap框架，在超链接按钮做提交按钮时，使用JavaScri...
eclipse jsp+mysql 班级资料管理,实现班级的修改添加删除等功能
12-15
Eclipse是一种集成开发环境（IDE），主要用于开发Java应用程序。JSP（JavaServer Pages）是一种用于开发动态Web应用的Java技术。MySQL是一种广泛使用的关系型数据库管理系统。班级资料管理系统可以使用这些技术来实现班级的修改、添加和删除等功能。 首先，使用Eclipse创建一个动态Web项目，并使用JSP作为前端页面。可以创建一个班级列表页面，显示所有班级的信息。还可以创建一个表单页面，用于添加和修改班级资料。 接下来，通过Java代码连接MySQL数据库。可以使用JDBC（Java Database Connectivity）技术来实现数据库的连接，查询和更新操作。创建一个数据库连接工具类，其中包含了连接数据库的方法和操作数据库的方法。通过调用这些方法，在JSP页面中实现数据库的增删改查功能。 在班级列表页面中，可以通过查询数据库获取班级列表，并展示在页面上。还可以为每个班级添加“编辑”和“删除”按钮，点击这些按钮后，可以跳转到表单页面，显示班级的详细信息，并提供修改和删除的功能。可以使用JSP的表单和提交按钮来实现这些功能。当点击“编辑”按钮时，将通过数据库查询将该班级的信息显示在表单中，方便用户对该班级信息进行修改。当点击“删除”按钮时，将通过数据库的删除操作将该班级从数据库中删除。 在表单页面中，可以使用JSP的表单元素和提交按钮来实现班级信息的添加和修改。当用户填写完表单后，点击提交按钮，将通过数据库的更新操作将班级资料添加或更新到数据库中。 通过以上步骤，就可以实现班级资料管理系统的班级的修改、添加和删除等功能。使用Eclipse作为开发工具，结合JSP和MySQL，可以快速开发出功能完善的班级资料管理系统。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

夏沫の梦

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值