JavaWeb课程设计：用户和商品管理系统

最新推荐文章于 2024-09-30 14:28:41 发布

2401_86022387

最新推荐文章于 2024-09-30 14:28:41 发布

阅读量703

点赞数 26

文章标签：课程设计 javascript 前端

本文链接：https://blog.csdn.net/2401_86022387/article/details/141434810

版权

}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();

});

三、提交数据库

从注册页面获得参数，并提交数据到数据库。这是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 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();}

最后

这份清华大牛整理的进大厂必备的redis视频、面试题和技术文档

祝大家早日进入大厂，拿到满意的薪资和职级~~~加油！！

感谢大家的支持！！

了解详情https://docs.qq.com/doc/DSmxTbFJ1cmN1R2dB
r.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();}

最后

这份清华大牛整理的进大厂必备的redis视频、面试题和技术文档

祝大家早日进入大厂，拿到满意的薪资和职级~~~加油！！

感谢大家的支持！！

[外链图片转存中…(img-Y9UXEgT5-1724321848986)]

了解详情https://docs.qq.com/doc/DSmxTbFJ1cmN1R2dB

2401_86022387

关注

26
点赞
踩
27

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫