JavaWeb课程设计：用户和商品管理系统_商品目录管理web课程设计-程序员宅基地
设计要求
使用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();
}
}
}
主界面
导航栏与菜单
将MySQL数据库的数据渲染到LayUI数据表格中
数据表格
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();}
效果呈现
需要源码的可以从下面链接获取
智能推荐
vue引入原生高德地图_前端引入原生地图-程序员宅基地
文章浏览阅读556次，点赞2次，收藏3次。由于工作上的需要，今天捣鼓了半天高德地图。如果定制化开发需求不太高的话，可以用vue-amap，这个我就不多说了，详细就看官网 https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install然而我们公司需要英文版的高德，我看vue-amap中好像没有这方面的配置，而且还有一些其他的定制化开发需求，然后就只用原生的高德。其实原生的引入也不复杂，但是有几个坑要填一下。1. index.html注意，引入的高德js一定要放在头部而_前端引入原生地图
ViewGroup重写大法 （一）-程序员宅基地
文章浏览阅读104次。本文介绍ViewGroup重写，我们所熟知的LinearLayout，RelativeLayout，FrameLayout等等，所有的容器类都是ViewGroup的子类，ViewGroup又继承View。我们在熟练应用这些现成的系统布局的时候可能有时候就不能满足我们自己的需求了，这是我们就要自己重写一个容器来实现效果。ViewGroup重写可以达到各种效果，下面写一个简单的重写一个Vi..._viewgroup 重写
Stm32学习笔记，3万字超详细_stm32笔记-程序员宅基地
文章浏览阅读1.8w次，点赞279次，收藏1.5k次。本文章主要记录本人在学习stm32过程中的笔记，也插入了不少的例程代码，方便到时候CV。绝大多数内容为本人手写，小部分来自stm32官方的中文参考手册以及网上其他文章；代码部分大多来自江科大和正点原子的例程，注释是我自己添加；配图来自江科大/正点原子/中文参考手册。笔记内容都是平时自己一点点添加，不知不觉都已经这么长了。其实每一个标题其实都可以发一篇，但是这样搞太琐碎了，所以还是就这样吧。_stm32笔记
CTS(13)---CTS 测试之Media相关测试failed 小结（一）_mediacodec框架 cts-程序员宅基地
文章浏览阅读1.8k次。Android o CTS 测试之Media相关测试failed 小结（一）CTSCTS 即兼容性测试套件，CTS 在桌面设备上运行，并直接在连接的设备或模拟器上执行测试用例。CTS 是一套单元测试，旨在集成到工程师构建设备的日常工作流程（例如通过连续构建系统）中。其目的是尽早发现不兼容性，并确保软件在整个开发过程中保持兼容性。CTS 是一个自动化测试工具，其中包括两个主要软件组件：CTS tra..._mediacodec框架 cts
chosen.js插件使用，回显，动态添加选项-程序员宅基地
文章浏览阅读4.5k次。官网：https://harvesthq.github.io/chosen/实例化$(".chosen-select").chosen({disable_search_threshold: 10});赋值var optValue = $(".chosen-select").val();回显1.设置回显的值$(".chosen-select").val(“opt1”);2.触发cho..._chosen.js
C++ uint8_t数据串如何按位写入_unit8_t 集合 赋值 c++-程序员宅基地
文章浏览阅读1.9k次。撸码不易，网上找不到，索性自己写，且撸且珍惜！void bitsWrite(uint8_t* buff, int pos, int size, uint32_t value){ uint32_t index[] = { 0x80000000, 0x40000000, 0x20000000, 0x10000000, 0x8000000, 0x4000000, 0x2000000, 0x1000000, 0x800000, 0x400000, 0_unit8_t 集合 赋值 c++
随便推点
Javaweb框架 思维导图_javaweb框架图-程序员宅基地
文章浏览阅读748次。javaweb知识点_javaweb框架图
adb的升级与版本更新_adb iptabls怎么升级-程序员宅基地
文章浏览阅读1.1w次，点赞3次，收藏16次。adb是没有自动升级的命令的，如果想要更新adb的版本，我们可以在网上找到自己想要的版本进行更新给大家提供几个版本https://pan.baidu.com/s/1yd0dsmWn5CK08MlyuubR7g&shfl=shareset 提取码: 94z81、下载解压后我们可以找到下面几个文件，并复制2、找到adb安装的文件夹下的platform-tools文件夹，我这里是..._adb iptabls怎么升级
微信苹果版删除所有的聊天记录的图文教程_mac微信怎么删除聊天列表-程序员宅基地
文章浏览阅读3.8k次。很多用户可能都知道怎么在Windows系统上删除微信的聊天记录，那么苹果电脑上的微信软件怎么删除所有的聊天记录呢？下面小编就专门来给大家讲下微信mac版删除所有的聊天记录的图文教程。点击后会弹出提示窗口，点击这里的确认按钮就可以将其清理掉了。在这里选择要清理的数据，然后点击下方右边的清理按钮就行了。在mac上打开微信后，点击左下角的横线图标。然后再点击这里的管理微信聊天数据按钮。打开了设置窗口，点击上方的“通用”。在这里点击下方的前往清理按钮。点击弹出菜单里的“设置”。_mac微信怎么删除聊天列表
【报错笔记】数据类型转换时报错：Request processing failed；nested exception is java.lang.NumberFormatException:..._request processing failed; nested exception is jav-程序员宅基地
文章浏览阅读7.7k次。数据类型转换时报错：Request processing failed;nested exception is java.lang.NumberFormatException:For input String “20151512345”报错原因：数字格式异常，接着后面有 For input string: “201515612343” 提示，这就告诉我们你当前想把 “201515612343” 转换成数字类型时出错了。解决方案：使用2015151612343这个数字太大了，所以直接使用string_request processing failed; nested exception is java.lang.numberformatexcepti
qml 自定义消息框_Qt qml 自定义消息提示框-程序员宅基地
文章浏览阅读387次。版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。本文链接：https://blog.csdn.net/a844651990/article/details/78376767Qt qml 自定义消息提示框QtQuick有提供比较传统的信息提示框MessageDialog，但是实际开发过程并不太能满足我们的需求。下面是根据controls2模块中..._qml 自定义 messagedialog
Redis.conf 默认出厂内容_默认出厂的原始redis.conf文件全部内容-程序员宅基地
文章浏览阅读599次。# Redis configuration file example.## Note that in order to read the configuration file, Redis must be# started with the file path as first argument:## ./redis-server /path/to/redis.conf # Note on units: when memory size is needed, it is pos._默认出厂的原始redis.conf文件全部内容