使用JavaWeb写一个管理系统,可以进行登录注册,对MySQL数据库中的用户和商品信息进行管理。
IDEA、MySQL Workbench、LayUI框架
HTML的form表单。onblur()是输入框失去焦点时执行的函数。
<form id="Form" method="POST" action="register">
<div class="form-item">
<div class="form-title">用户名</div>
<input type="text" name="Name" id="name-input" onblur="checkName()">
</div>
<div id="name-errMsg"></div> <!--用于显示错误信息 -->
<div class="form-item">
<div class="form-title">密码</div>
<input type="password" name="Pwd" id="pwd-input1" onblur="checkPwd1()">
</div>
<div id="pwd-errMsg1"></div>
<div class="form-item">
<div class="form-title">重复密码</div>
<input type="password" name="Pwd2" id="pwd-input2" onblur="checkPwd2()">
</div>
<div id="pwd-errMsg2"></div>
<div class="form-item">
<div class="form-title">昵称</div>
<input type="text" name="NickName" id="nickName-input" onblur="checkEmail()">
</div>
<div id="nickName-div"></div>
<div class="form-item">
<div class="form-title">电话号码</div>
<input type="number" name="Tel" id="tel-input" onblur="checkTel()" >
</div>
<div id="tel-errMsg"></div>
<div class="form-item">
<div class="form-title">邮箱</div>
<input type="text" name="Email" id="email-input" onblur="checkEmail()">
</div>
<div id="email-errMsg"></div>
<div class="form-item">
<div class="form-title">住址</div>
<input type="text" name="Address" id="address-input" onblur="checkEmail()">
</div>
<div id="address-div"></div>
<div id="submit-div">
<div id="submit-left">
</div>
<div id="submit-mid">
<button type="submit" id="Submit">注册</button>
</div>
<div id="submit-right">
<a href="LoginPage.jsp" id="login">已有账号,前往登录</a>
</div>
</div>
</form>
注册格式检查需要检查:
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script>
//定义变量控制是否能提交
//Enable为true表示格式正确 , Empty为false表示不为null或空字符串
var nameEnable = false;
var nameEmpty = true;
var pwdEnable = false;
var pwd1Empty = true;
var pwd2Empty = true;
var telEnable = false;
var telEmpty = true;
var emailEnable = false;
var emailEmpty = true;
//判断字符串是否为null或空字符串 ""
function CheckEmpty(ss){
return ss == null || ss === "";
}
//检查用户名,不能出现特殊字符
function checkName(){
//失去焦点(光标)后执行的事件函数
var inputName = document.getElementById("name-input").value;
var pattern = new RegExp("[` ~!@#$^&*()%=|{}':;',\\[\\].<>《》/?~!@#¥……&*()——|{}【】‘;:”“'。,、?]");
if(!CheckEmpty(inputName)){
nameEmpty = false;
if(pattern.test(inputName)){
//包含特殊字符
document.getElementById("name-errMsg").innerHTML = "用户名格式错误,不能包含特殊字符!"
document.getElementById("name-input").style = "border:2px solid red;"
nameEnable = false;
}else{
document.getElementById("name-errMsg").innerHTML = " "
document.getElementById("name-input").style = "border:0px;"
nameEnable = true;
}
}else{
nameEmpty = true;
}
}
//检查密码,
function checkPwd1(){
var inputPwd_1 = document.getElementById("pwd-input1").value;
var inputPwd_2 = document.getElementById("pwd-input2").value;
if(!CheckEmpty(inputPwd_1) && !CheckEmpty(inputPwd_2)){
pwd1Empty = false;
pwd2Empty = false;
if(inputPwd_1 != inputPwd_2){
document.getElementById("pwd-errMsg2").innerHTML = "两次密码不相同,请检查!";
document.getElementById("pwd-input1").style = "border:2px solid red;"
document.getElementById("pwd-input2").style = "border:2px solid red;"
pwdEnable = false;
}
if(inputPwd_1 == inputPwd_2){
document.getElementById("pwd-errMsg2").innerHTML = " ";
document.getElementById("pwd-input1").style = "border:0px;"
document.getElementById("pwd-input2").style = "border:0px;"
pwdEnable = true;
}
}else if(!CheckEmpty(inputPwd_1) && CheckEmpty(inputPwd_2)){
pwd1Empty = false;
pwd2Empty = true;
}else if(CheckEmpty(inputPwd_1) && !CheckEmpty(inputPwd_2)){
pwd1Empty = true;
pwd2Empty = false;
}else{
pwd1Empty = true;
pwd2Empty = true;
}
}
//检查重复密码,是否相同
function checkPwd2(){
var inputPwd_1 = document.getElementById("pwd-input1").value;
var inputPwd_2 = document.getElementById("pwd-input2").value;
if(!CheckEmpty(inputPwd_1) && !CheckEmpty(inputPwd_2)){
pwd1Empty = false;
pwd2Empty = false;
if(inputPwd_1 != inputPwd_2){
document.getElementById("pwd-errMsg2").innerHTML = "两次密码不相同,请检查!";
document.getElementById("pwd-input1").style = "border:2px solid red;"
document.getElementById("pwd-input2").style = "border:2px solid red;"
pwdEnable = false;
}
if(inputPwd_1 == inputPwd_2){
document.getElementById("pwd-errMsg2").innerHTML = " ";
document.getElementById("pwd-input1").style = "border:0px;"
document.getElementById("pwd-input2").style = "border:0px;"
pwdEnable = true;
}
}else if(!CheckEmpty(inputPwd_1) && CheckEmpty(inputPwd_2)){
pwd1Empty = false;
pwd2Empty = true;
}else if(CheckEmpty(inputPwd_1) && !CheckEmpty(inputPwd_2)){
pwd1Empty = true;
pwd2Empty = false;
}else{
pwd1Empty = true;
pwd2Empty = true;
}
}
//检查电话号码,是否全是数字,是否为十一位
function checkTel(){
var inputTel = document.getElementById("tel-input").value;
var flag = true;
if (!CheckEmpty(inputTel)){
telEmpty = false;
if (!(/^1[3456789]\d{9}$/.test(inputTel))) {
// 格式错误
flag=false;
}
if(!flag){
document.getElementById("tel-errMsg").innerHTML = "手机号格式错误,请检查!"
document.getElementById("tel-input").style = "border:2px solid red;"
}else{
document.getElementById("tel-errMsg").innerHTML = " ";
document.getElementById("tel-input").style = "border:0px;"
}
telEnable = flag;
}else{
telEmpty = true;
}
}
//检查邮箱格式
function checkEmail(){
var inputEmail = document.getElementById("email-input").value;
var flag = true;
var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
if(!CheckEmpty(inputEmail)){
emailEmpty = false;
//调用正则验证test()函数
if(!reg.test(inputEmail)){
flag = false;
}
if(!flag){
document.getElementById("email-errMsg").innerHTML = "邮箱格式不正确,请检查!"
document.getElementById("email-input").style = "border:2px solid red;"
}else{
document.getElementById("email-errMsg").innerHTML = " "
document.getElementById("email-input").style = "border:0px;"
}
emailEnable = flag;
}else{
emailEmpty = true;
}
}
$(document).ready(function () {
$("#name-input").focus();
//全局检查并判断是否可以提交
$("#Submit").click(function () {
if(nameEmpty){
document.getElementById("name-input").style = "border:2px solid red;"
alert("请输入用户名!");
return;
}else if(pwd1Empty){
document.getElementById("pwd-input1").style = "border:2px solid red;"
alert("请输入密码!");
return;
}else if(pwd2Empty){
document.getElementById("pwd-input2").style = "border:2px solid red;"
alert("请再次输入密码!");
return;
}else if(telEmpty){
document.getElementById("tel-input").style = "border:2px solid red;"
alert("请输入电话号码!");
return;
}else if(emailEmpty){
document.getElementById("email-input").style = "border:2px solid red;"
alert("请输入邮箱!");
return;
}else if(!nameEnable){
return;
}else if(!pwdEnable){
return;
}else if(!telEnable){
return;
}else if(!emailEnable){
return;
}
$("#Form").submit();
});
});
</script>
从注册页面获得参数,并提交数据到数据库。这是JavaWeb的基础,就不详细解释了。
HTML的form表单。和注册页面的类似,从数据库查找数据并验证密码。
验证成功,使用Session传递用户User类型变量
验证失败,返回登录界面并保留输入的用户名
public class Login extends HttpServlet {
public void service(HttpServletRequest request, HttpServletResponse response)
throws IOException {
//获取登陆的用户名和密码
String loName = request.getParameter("Name");
String loPwd = request.getParameter("Pwd");
String userName;
String res; //返回的信息,若登陆成功则返回空字符串,若登陆失败返回错误信息
try {
//获取用户账号列表
List<User> userList = User_dataList.get();
//遍历
for (User userItem : userList) {
//用于登录失败后用户名不消失
if (userItem.getName().equals(loName)) {
if(userItem.getPwd().equals(loPwd)){
//匹配成功
//创建Session并携带用户信息的参数loginUser
HttpSession session = request.getSession();
session.setAttribute("loginUser", userItem);
//跳转至个人信息界面,
request.getRequestDispatcher("Main.jsp").forward(request, response);
}else{
//匹配失败,密码错误
userName = userItem.getName();
res = "账号或密码错误,请检查!";
request.setAttribute("res",res);
request.setAttribute("userName",userName);
request.getRequestDispatcher("LoginPage.jsp").forward(request ,response);
}
}
}
//匹配失败,返回错误信息
} catch (Exception e) {
e.printStackTrace();
}
}
}
LayUI数据表格中的删除和修改操作事件对应的js代码为
table.on('tool(test)', function(obj){
//tool 是工具的事件名,test 是 table 原始容器的属性 lay-filter="对应的值"
if(obj.event === 'del'){
//修改操作
//obj为点击的数据对象,包含name,tel等属性
}
else if(obj.event === 'edit'){
//修改操作
}
(1)删除操作
if(obj.event === 'del'){
var delName = obj.data.name;
//在执行obj.del()执行前将要删除的用户名存储 并用于URL参数
//因为不确定执行obj.del()后是否会被释放而导致找不到数据
layer.confirm('删除成功', function(index){
obj.del();
layer.close(index);
});
window.location.href= 'delUser?delName=' + delName;
//window.location.href = 'url' JS跳转页面的方法之一
//delUser为Servlet的url , delName为要删除的用户的用户名
}
(2)修改操作
首先读清楚LayUI官方文档中关于弹窗layer.prompt(option ,yes)的使用
title:弹窗的标题
value:输入框的值,可以设定初始值
form:输入框类型
yes:回调函数function(value , index ,elem){} 获取输入框的value值执行操作
由于修改数据需要修改的字段名和修改的值两个数据,layer.prompt()弹出层又无法设定两个输入框。所以我在第一个弹窗的回调函数中再增加一个弹窗,以获取两个数据。
if(obj.event === 'edit'){
layer.prompt({
//输入字段名的弹窗
formType: 0,
value: '',
title:'请输入修改字段名'
}, function(value, index ,elem){
var field = value; //中文字段名
var fieldName = value;
var oldValue = ''; //原值
//通过输入的中文字段名判断是数据库中的哪个字段,并在obj对象中获取该字段的原值
if(field === '用户名') {
field = 'name'; oldValue = obj.data.name;}
else if(field === '电话'){
field = 'tel'; oldValue = obj.data.tel;}
else if(field === '邮箱'){
field = 'email'; oldValue = obj.data.email;}
else if(field === '昵称'){
field = 'nickName'; oldValue = obj.data.nickName;}
else if(field === '住址'){
field = 'address'; oldValue = obj.data.address;}
//修改字段的值弹窗
layer.prompt({
formType: 0,
value: oldValue, //将默认值设置为原来的值
title: '将'+fieldName+'修改为'
},function (value, index, elem){
window.location.href=
'updateUser?updateField='+field //字段名
+'&updateValue='+value //修改的值
+'&updateId=' +obj.data.id.toString();
// 跳转到Servlet服务器进行修改,数据表中id作为主键,修改数据需要id值
// 这里最将int类型的obj.data.id转换成字符串类型
layer.close(index);
})
console.log(value,index,elem);
layer.close(index);
});
}
1、通过jQuery和JS函数实现:定义一个对象类型的变量menusStatus,表示每个菜单内容是否显示
var menusStatus = {
//初始状态
indexShow : true, //首页
userTableShow : false, //用户表格
page2Show : false,
page3Show : false
}
2、定义一个函数FreshMenusStatus(),根据menusStatus对象各个内容的状态来判断是否需要显示,若有内容增加需要在该函数中多加一组if-else判断。
function FreshMenusStatus(){
//根据menusStatus对象中的值来判断元素是否显示
if(menusStatus.indexShow){
$("#indexPage").show();}
else {
$("#indexPage").hide();}
if(menusStatus.userTableShow){
$("#userTable-div").show();}
else{
$("#userTable-div").hide();}
if(menusStatus.page2Show){
$("#page2").show();}
else {
$("#page2").hide();}
}
3、这里需要再定义一个函数setStatusAllHide()(后面会用到),作用是将menusStatus中的状态(值)全部置为false。
function setStatusAllHide(){
//设置所有元素状态隐藏 for (var key in menusStatus){ menusStatus[key] = false; }}
4、对菜单指定的元素编写点击事件,这里使用jQuery中的click方法。这样就可以实现点击某个菜单并在主体内容中只显示指定的元素。
$("#userTableMenu").click(function (){
setStatusAllHide(); //将状态全部置为false menusStatus.userTableShow = true ; //再将点击的元素对应的状态设置为true FreshMenusStatus(); //刷新状态});
注意:页面加载完成时也别忘了来一个FreshMenusStatus()
window.onload =function (){
//页面加载完成获取状态 FreshMenusStatus();}
需要源码的可以从下面链接获取
文章浏览阅读1.6k次。1. 问题: conda search numpy 以及 conda search --full-name python 失败。失败的现象:Loading channels: failedCondaHTTPError: HTTP 404 NOT FOUND for url <http://pypi.douban.com/simple/noarch/repodata.json>..._loading channels: failed
文章浏览阅读6.5k次,点赞10次,收藏16次。pip install sklearn安装成功后,提示ModuleNotFoundError: No module named 'sklearn'错误解决办法_pip sklearn库安装成功但是报错
文章浏览阅读7.4w次,点赞327次,收藏2.3k次。玩转传感器——DHT11温湿度传感器(STM32版)文章目录玩转传感器——DHT11温湿度传感器(STM32版)前言一、接口说明1 接线图2 电源引脚3 串行接口(单线双向)二、通信过程三、测量分辨率与电气特性四、使用注意事项1 工作与贮存条件2 暴露在化学物质中3 恢复处理4 温度影响5 光线6 配线注意事项五、DHT11驱动程序1 DHT11.c1.1 配置输入输出GPIO1.2 复位DHT111.3 检查DHT11是否正常1.4 DHT11初始化1.5 读取一位数据(返回值0/1)1.6 读取一个_温湿度传感器接线图
文章浏览阅读905次。本说明以NVP6324为例。1、首先在drivers\media\i2c中修改Kconfig和Makefile,如下: 在Kconfig中添加如下:config VIDEO_NVP6324 tristate "NVP6324 AHD sensor support" depends on I2C ---help--- This is a V4L2 sensor-le..._nvp6324 驱动
文章浏览阅读2.7w次,点赞9次,收藏80次。理论请参考博客OpenCV源码的本地路径: %OPENCV%\opencv\sources\modules\imgproc\src\clahe.cppclahe.cpp// ----------------------------------------------------------------------// CLAHEnamespace{ class C_自适应双平台直方图均衡算法代码
文章浏览阅读3.1k次,点赞3次,收藏22次。点击上方“小白学视觉”,选择加"星标"或“置顶”重磅干货,第一时间送达作者丨吃猫的鱼python @CSDN编辑丨3D视觉开发者社区目录content一、什么是计算机视觉二、图片处理基础操作图片处理:读入图像图片处理:显示图像图片处理:图像保存三、图像处理入门基础图像成像原理介绍图像分类四、像素处理操作读取像素修改像素使用python中的numpy修改像素点五、获取图像属性形状像素数目图像类型六..._计算机视觉与图像处理
文章浏览阅读157次。题目描述输入一棵二叉搜索树,将该二叉搜索树转换成一个排序的循环双向链表。要求不能创建任何新的节点,只能调整树中节点指针的指向。为了让您更好地理解问题,以下面的二叉搜索树为例:我们希望将这个二叉搜索树转化为双向循环链表。链表中的每个节点都有一个前驱和后继指针。对于双向循环链表,第一个节点的前驱是最后一个节点,最后一个节点的后继是第一个节点。下图展示了上面的二叉搜索树转化成的链表。“head” 表示指向链表中有最小元素的节点。特别地,我们希望可以就地完成转换操作。当转化完成以后,树中节点的左指针需_leetcode 链表的head是什么js
文章浏览阅读1.5w次,点赞3次,收藏46次。一篇文章让你全面了解TDengine本文将从以下几个方面全面介绍TDengine。TDengine的基本介绍TDengine的发展历程TDengine的优势TDengine的适用场景TDengine的写入存储策略TDengine的特点TDengine的基本介绍一句话了解TDengineTDengine是一个高效的存储、查询、分析时序大数据的平台,专为物联网、车联网、工业互联网、运维监测等优化而设计。你可以像使用关系型数据库MySQL一样来使用它,简单又方便。为什么会有TDengin_tdengine
文章浏览阅读215次。 成为JavaGC专家Part II :如何监控Java垃圾回收机制 本文是成为Java GC专家系列文章的第二篇。在第一篇《深入浅出Java垃圾回收机制》中我们学习了不同GC算法的执行过程,GC是如何工作的,什么是新生代和老年代,你应该了解的JDK7中的5种GC类型,以及这5种类型对于应用性能的影响。 在本文中,我将解释JVM到底是如何执行垃圾回收处理..._成为javagc专家part ii — 如何监控java垃圾回收机制。
文章浏览阅读122次。文章目录python学习导航线一、seleniumpython-selenium二、python基础知识python的聊天室python学习导航线一、seleniumpython-selenium二、python基础知识python的聊天室_python点线导航
文章浏览阅读3.4k次,点赞4次,收藏22次。静态成员静态成员都是用static修饰,它的特点是不论创建多少个对象,程序都只创建一个静态成员。最主要的特点:共享什么是共享呢?例如:统计超市中所有商品数量的总和,商品数量的总和是随着每一个数量的变化而变化的,这是我们就可以用静态成员处理。(代码下面有写)静态成员又分为静态成员变量和静态成员函数。(一)静态成员变量特点:1、所有对象共享一份数据。 2、在编译阶段分配内存。 3、类内声明,类外初始化。#include<io..._静态成员变量
文章浏览阅读879次,点赞21次,收藏20次。1 网页简介:基于HTML+CSS+JavaScript 制作七夕情人节表白网页、生日祝福、七夕告白、 求婚、浪漫爱情3D相册、炫酷代码,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用等任意html编辑软件进行运行及修改编辑等操作)。_html 满屏爱心