此DEMO包含以下功能

  1. 后台管理界面(删除+修改+显示数据库里所有数据)
  2. 修改编辑界面(表格检验+修改数据库里的值)

后台管理界面

(头像为默认头像,视频暂未上传)

backstageUI.jsp

<%@ page import="java.sql.ResultSet" %>
<%@ page import="java.sql.*" %>
<%@ page import="java.lang.*" %>
<%@page contentType="text/html; ISO-8859-1;charset=UTF-8" %>
<html lang="en">
<head><meta charset="utf-8"><title>后台管理系统</title><script type="text/javascript" src="js/jquery-3.6.0.js"></script><script>$(document).ready(function () {function update(id){$('#modal-edit').modal('show');}})</script><script>document.write("<link rel='stylesheet' type='text/css' href='css/backstage.css?v=" + new Date().getTime() + "'>");</script>
</head>
<body style="margin:0px;padding:0px;">
<div class="topnav"><a>管理员:<%=request.getParameter("name")%></a><a href="#" style="float:right">退出</a>
</div>
<div class="row"><div class="leftcolumn"><div class="card"><ul><li><a href="#" style="background-color:#f1f1f1">队员管理</a></li><li><a href="#">值班安排</a></li><li><a href="#">更新通知</a></li></ul></div></div><div class="rightcolumn"><div class="infoTable" style="overflow-x: auto; overflow-y: auto; height: 100%; width:100%;"><table  border=1px style="border-collapse:collapse;width:100%;text-align: center;"><%String usersex;String headpath;Class.forName("com.mysql.jdbc.Driver");Connection conn;conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/webdb","root","root");String sql="select * from peo19082203";Statement stmt;stmt = conn.createStatement();ResultSet rs;rs = stmt.executeQuery(sql);String s="<tr><td>头像</td><td>学号</td><td>密码</td><td>性别</td><td>电话</td><td>自我介绍</td><td>操作</td></tr></td>";while(true){try {if (!rs.next()) break;} catch (SQLException e) {e.printStackTrace();}if(rs.getString("sex").equals("0")){usersex="男";}else{usersex="女";}if(rs.getString("photo")==null){headpath="image/backImg.png";}else{headpath=rs.getString("photo");}s+="<tr>";s+="<td><img src='" +headpath+"' width='80' height='80' /></td>";s+="<td>"+rs.getString("name")+"</td>";s+="<td>"+rs.getString("pwd")+"</td>";s+="<td>"+usersex+"</td>";s+="<td>"+rs.getString("tel")+"</td>";s+="<td><video src='" +rs.getString("video")+"' width='120' height='80' controls=controls/></td>";s+="<td>" +"<a  href='DeletCustomer.jsp?username="+rs.getString("name")+"'>删除</a>" +"<h5>     </h5>" +"<a  href='upCusUI.jsp?username="+rs.getString("name")+"&pwd="+rs.getString("pwd")+"&tel="+rs.getString("tel")+"&sex="+rs.getString("sex")+"'>编辑</a>" +"</td>";s+="</tr>";}out.println(s);try {rs.close();} catch (SQLException e) {e.printStackTrace();}try {conn.close();} catch (SQLException e) {e.printStackTrace();}%></table></div></div>
</div></body>
</html>

删除功能

DeletCustomer.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.sql.*" %>
<html>
<head><title>Title</title>
</head>
<body>
<%String username=new String(request.getParameter("username").getBytes("ISO-8859-1"),"utf-8");String sDBDriver = "com.mysql.jdbc.Driver";String conStr = "jdbc:mysql://localhost:3306/webdb?useSSL=false";String dbname = "root";String password = "root";Connection conn=null;try {Class.forName(sDBDriver);conn = DriverManager.getConnection(conStr, dbname, password);} catch (ClassNotFoundException | SQLException cnfe) {cnfe.printStackTrace();}try{assert conn != null;Statement stmt=conn.createStatement();String updatePassword="DELETE FROM peo19082203 WHERE name = '"+username+"'";stmt.executeUpdate(updatePassword);out.println("<script language='javascript'>alert('删除成功!');window.location.href='backsatgeUI.jsp';</script>");}catch(SQLException e){out.println("<script language='javascript'>alert('用户不存在!');window.location.href='backsatgeUI.jsp';</script>");        //处理SQLException异常}try {conn.close();} catch (SQLException e) {e.printStackTrace();}
%></body>
</html>

删除成功

修改编辑页面

upCusUI.jsp

<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>修改密码</title><link rel="stylesheet" type="text/css" href="css/login.css"><script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script><script>$(document).ready(function(){$("input").blur(function(){var $parent = $(this).parent();$parent.find(".onError").remove();if ($(this).is("#newName")) {if (this.value==="") {$parent.append("<span class='onError' style='color: red;font-size: 5px'>用户名不能为空!</span>")}}if ($(this).is("#newpwd")) {if (this.value==="") {$parent.append("<span class='onError' style='color: red;font-size: 5px'>密码不能为空!</span>")}if(this.value.length < 6&&this.value.length>0){$parent.append("<span class='formtips onError' style='color: red;font-size: 5px'>密码长度至少为六位!</span>")}}if ($(this).is("#repwd")) {var newpwd = document.getElementById("newpwd").value;var repwd = document.getElementById("repwd").value;if (newpwd===repwd) {}else{$parent.append("<span class='onError' style='color: red;font-size: 5px'>两次密码输入不一致</span>")}}if ($(this).is("#newTel")) {if (this.value==="") {$parent.append("<span class='onError' style='color: red;font-size: 5px'>电话不能为空!</span>")}if(this.value.length !==11&&this.value.length>0){$parent.append("<span class='formtips onError' style='color: red;font-size: 5px'>大陆手机电话号码应为11位</span>")}}});$("form").submit(function(){$("form input").trigger("blur");if($(".onError").length>0) return false;});});</script><script type="text/javascript">var xmlHttpReq=null;function createRequest(){if(window.XMLHttpRequest){xmlHttpReq=new XMLHttpRequest();}else if(window.ActiveXObject){xmlHttpReq=new ActiveXObject("Microsoft.XMLHTTP");}}function getBackInfo(){createRequest();var newName=document.getElementById("newName").value;if(xmlHttpReq!=null){var url="CheckOnlyName.jsp?username="+newName;xmlHttpReq.open("get",url,true);xmlHttpReq.onreadystatechange=Result;xmlHttpReq.send(null);}else{alert("请求失败!");}}function Result(){if(xmlHttpReq.readyState===4){if(xmlHttpReq.status===200){document.getElementById("er").innerHTML=xmlHttpReq.responseText;}else{alert("请求失败!");}}}</script></head>
<body>
<section class="forms"><div class="container"><div class="forms-grid"><div class="login"><strong>修改信息</strong><form action="UpdateCustomer.jsp?name=<%=request.getParameter("username")%>" method="post" class="login-form"><div class="form"><div class="form-row"><label class="form-label">学号   </label><%=request.getParameter("username")%><br/><br/><label class="form-label">新学号</label><label for="newName"></label><input onblur="getBackInfo()" type="text" class="form-text" id="newName" name="newName" value="<%=request.getParameter("username")%>"><div id="er" style='color: red;font-size: 5px'></div></div><div class="form-row"><label class="form-label">新密码</label><label for="newpwd"></label><input type="text" class="form-text" id="newpwd" name="newpwd" value="<%=request.getParameter("pwd")%>"></div><div class="form-row"><label class="form-label">重复输入密码</label><label for="repwd"></label><input type="password" class="form-text" id="repwd" name="repwd" ></div><div class="form-row"><label class="form-label">电话</label><label for="newTel"></label><input type="text" class="form-text" id="newTel" name="newTel" value="<%=request.getParameter("tel")%>"></div><div class="sex" ><label class="form-label" style="float: left;color: #4d61fc">性别</label><select name="sex" style="float: right"><option value="0" style="font-size: 12px;">男</option><option value="1" style="font-size: 12px;">女</option></select><br/></div><div class="form-row button-login"><button type="submit" class="btn" style="float: left" >确定</button><button type="reset" class="btn" style="float: right">重置</button></div></div></form></div></div></div>
</section>
</body>
</html>

ps:后台管理系统页面css样式免费公开,在我的资源里可以下载

JAVA项目:后台管理页面——显示数据库中所有信息+删除和编辑(MySQL)相关推荐

  1. 一套完整java项目 后台+管理+前端

    分享一套完整的项目: 一.项目功能 此项目是一套完整的小商场系统,主要包括商场后台系统.前端管理页面,管理后台系统.是不是很完善呀.作者对于项目有着详细的介绍,从技术栈到系统的搭建. 从用户登陆,商品 ...

  2. java 项目数据库脚本命名_java项目酒店管理(含数据库脚本)

    java项目酒店管理(含数据库脚本) java 2020-6-27 下载地址 https://www.codedown123.com/26975.html java项目酒店管理(含数据库脚本) 资源下 ...

  3. 小程序食堂订餐点餐项目+后台管理前后分离VUE

    活动地址:毕业季·进击的技术er  博主介绍:✌在职Java研发工程师.专注于程序设计.源码分享.技术交流.专注于Java技术领域和毕业设计✌ 项目名称 小程序食堂订餐点餐项目+后台管理前后分离VUE ...

  4. 二基于Django 简单后台管理页面

    <1> 整个后台页面布局项目基于python的Django框架进行开发 ①实现用户登录 ②实现用户对自己数据的增删改查 (1)在app cmdb的models.py下创建用户数据表:用户表 ...

  5. bootstrap搭建后台管理页面

    bootstrap搭建后台管理页面 管理页面主体包括4部分,顶部导航栏,左侧导航栏,中间正文页和底部的页脚.其中左侧和顶部使用的是bootstrap的导航和下拉菜单组件,主体页面为了演示方便,使用了i ...

  6. Django admin后台管理页面的常用设置

    Django admin后台管理页面的常用设置 选择列表选项choices # filename: models.pyfrom django.db import models# 例1 int类型:ST ...

  7. 后盾网lavarel视频项目---2、phpstorm显示类中的方法快捷键

    后盾网lavarel视频项目---2.phpstorm显示类中的方法快捷键 一.总结 一句话总结: ctrl + f12 1.npm安装js插件? npm install hdjs 2.phpstor ...

  8. Vue后台管理页面总体结构及主要功能设计

    后台管理页面总体结构为:顶部左侧为系统标题,顶部右侧为用户图标及改密.退出菜单.中间左侧为功能菜单,中间右侧为操作区域,可以用el-row配合el-col来实现布局.其中导航菜单可以用el-menu配 ...

  9. java毕业设计医疗药品管理Mybatis+系统+数据库+调试部署

    java毕业设计医疗药品管理Mybatis+系统+数据库+调试部署 java毕业设计医疗药品管理Mybatis+系统+数据库+调试部署 本源码技术栈: 项目架构:B/S架构 开发语言:Java语言 开 ...

最新文章

  1. C++ Primer 5th笔记(chap 17 标准库特殊设施)子表达式subexpression
  2. HTML5播放器:视频分段播放
  3. LeetCode C语言刷题——day2
  4. Entity Framework ---初见
  5. 自学提高:JVM点滴
  6. 页面的加载与渲染顺序
  7. java取得当前日期增加一天或多天
  8. Atitit. Atiposter 发帖机 新特性 poster new feature   v7 q39
  9. java的hashmap排序_java 中HashMap排序
  10. r语言绘制精美pcoa图_[R语言 学习笔记]用R做主坐标分析(PCoA)
  11. 【mcuclub】称重-HX711
  12. 如何使用Kumo Java Word Cloud?
  13. PDF可以转PPT吗?PDF转PPT简单方法推荐
  14. 界面扩大缩小操作按钮_数控机床基本操作,超容易,一次看懂两次学会
  15. 支持向量机及核函数对比
  16. 商务通官方网站服务器版,商务通核心教程
  17. SQL 查询并不是从 SELECT 开始的
  18. [storm]#0_storm部署
  19. IEEE会议模板的作者及单位排版
  20. 全球与中国高档装饰灯具市场深度研究分析报告(2021)

热门文章

  1. 转载 调试器工作原理
  2. mybatis XML 中大于等于小于等于的写法
  3. Excel 集計機能
  4. 面试前端的简历的注意事项
  5. 用JS制作一个简易GPA计算器
  6. 将彩色照片变成黑白照片
  7. 盘点2019年十大泡沫经济事件:今年哪个行业有点衰?
  8. 23.文件特殊权限之SUID权限、SGID权限、Sticky BIT权限和ACL权限
  9. Python统计序列或文件中元素的频度
  10. 锐浪报表(Grid++Report)实现动态图片链接