JAVA项目:后台管理页面——显示数据库中所有信息+删除和编辑(MySQL)
此DEMO包含以下功能
- 后台管理界面(删除+修改+显示数据库里所有数据)
- 修改编辑界面(表格检验+修改数据库里的值)
后台管理界面
(头像为默认头像,视频暂未上传)
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)相关推荐
- 一套完整java项目 后台+管理+前端
分享一套完整的项目: 一.项目功能 此项目是一套完整的小商场系统,主要包括商场后台系统.前端管理页面,管理后台系统.是不是很完善呀.作者对于项目有着详细的介绍,从技术栈到系统的搭建. 从用户登陆,商品 ...
- java 项目数据库脚本命名_java项目酒店管理(含数据库脚本)
java项目酒店管理(含数据库脚本) java 2020-6-27 下载地址 https://www.codedown123.com/26975.html java项目酒店管理(含数据库脚本) 资源下 ...
- 小程序食堂订餐点餐项目+后台管理前后分离VUE
活动地址:毕业季·进击的技术er 博主介绍:✌在职Java研发工程师.专注于程序设计.源码分享.技术交流.专注于Java技术领域和毕业设计✌ 项目名称 小程序食堂订餐点餐项目+后台管理前后分离VUE ...
- 二基于Django 简单后台管理页面
<1> 整个后台页面布局项目基于python的Django框架进行开发 ①实现用户登录 ②实现用户对自己数据的增删改查 (1)在app cmdb的models.py下创建用户数据表:用户表 ...
- bootstrap搭建后台管理页面
bootstrap搭建后台管理页面 管理页面主体包括4部分,顶部导航栏,左侧导航栏,中间正文页和底部的页脚.其中左侧和顶部使用的是bootstrap的导航和下拉菜单组件,主体页面为了演示方便,使用了i ...
- Django admin后台管理页面的常用设置
Django admin后台管理页面的常用设置 选择列表选项choices # filename: models.pyfrom django.db import models# 例1 int类型:ST ...
- 后盾网lavarel视频项目---2、phpstorm显示类中的方法快捷键
后盾网lavarel视频项目---2.phpstorm显示类中的方法快捷键 一.总结 一句话总结: ctrl + f12 1.npm安装js插件? npm install hdjs 2.phpstor ...
- Vue后台管理页面总体结构及主要功能设计
后台管理页面总体结构为:顶部左侧为系统标题,顶部右侧为用户图标及改密.退出菜单.中间左侧为功能菜单,中间右侧为操作区域,可以用el-row配合el-col来实现布局.其中导航菜单可以用el-menu配 ...
- java毕业设计医疗药品管理Mybatis+系统+数据库+调试部署
java毕业设计医疗药品管理Mybatis+系统+数据库+调试部署 java毕业设计医疗药品管理Mybatis+系统+数据库+调试部署 本源码技术栈: 项目架构:B/S架构 开发语言:Java语言 开 ...
最新文章
- C++ Primer 5th笔记(chap 17 标准库特殊设施)子表达式subexpression
- HTML5播放器:视频分段播放
- LeetCode C语言刷题——day2
- Entity Framework ---初见
- 自学提高:JVM点滴
- 页面的加载与渲染顺序
- java取得当前日期增加一天或多天
- Atitit. Atiposter 发帖机 新特性 poster new feature v7 q39
- java的hashmap排序_java 中HashMap排序
- r语言绘制精美pcoa图_[R语言 学习笔记]用R做主坐标分析(PCoA)
- 【mcuclub】称重-HX711
- 如何使用Kumo Java Word Cloud?
- PDF可以转PPT吗?PDF转PPT简单方法推荐
- 界面扩大缩小操作按钮_数控机床基本操作,超容易,一次看懂两次学会
- 支持向量机及核函数对比
- 商务通官方网站服务器版,商务通核心教程
- SQL 查询并不是从 SELECT 开始的
- [storm]#0_storm部署
- IEEE会议模板的作者及单位排版
- 全球与中国高档装饰灯具市场深度研究分析报告(2021)