javaweb超市商品库存信息管理系统前端具体实现

javaweb超市商品库存信息管理系统前端具体实现一、前期工作1、使用到的工具2、数据库表设计①用户信息表设计②商品信息表设计需要注意的是：如果需要存储的是中文的字符，需要将字符集和排序规则设置为GB2312的，如上图的name一样，而且是每一个需要存储中文的都需要设置3、架包搭建二、代码编写一、前期工作1、使用到的工具代码工具：idea数据库工具：navicat for mysqljdk：1.

计算机渣渣糖

2738人浏览 · 2021-07-11 14:59:30

计算机渣渣糖 · 2021-07-11 14:59:30 发布

javaweb超市商品库存信息管理系统前端具体实现

一、前期工作
二、代码编写

一、前期工作

1、使用到的工具

代码工具：idea
数据库工具：navicat for mysql
jdk：1.8
浏览器：谷歌浏览器

2、数据库表设计

数据库名：test
用户名：root
密码：1234
总共需要两个表：一个用户信息表user（登录注册）、一个商品信息表（fruit）
在这里插入图片描述

①用户信息表设计

在这里插入图片描述

②商品信息表设计

在这里插入图片描述

需要注意的是：如果需要存储的是中文的字符，需要将字符集和排序规则设置为GB2312的，如上图的name一样，而且是每一个需要存储中文的都需要设置

3、架包搭建

需要用到数据库，所以需要用到数据库的架包
在这里插入图片描述

然后点击“ok”就可以了

二、代码编写

代码文件放置位置
在这里插入图片描述

index.jsp(默认首页）

  <body>
    <%
      response.sendRedirect("login.jsp");
    %>

  </body>

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%><html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户登录</title>
<script>
	//判断是登录账号和密码是否为空
	function check() {
		var name = $("#name").val();
		var password = $("#password").val();
		if (name == "" || password == "") {
			alert("账号和密码不能为空! ");
			return false;
		}
	}
</script>
	<link href="css/login.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<h1>超市管理系统</h1>
	<div class="box">
		<!-- 顶部盒子 -->
		<div></div>
		<!-- content盒子 -->
		<div>
			<form action="loginsuccess.jsp" method="post">
				<div id="inputarea">
				<div>
					账号：<input type="text" name="name"  class="input" placeholder="请输入账号" ></input>
				</div>
				<div>
					密码：<input type="password" name="password" placeholder="请输入密码"
						class="input" id="password_input"></input>
				</div>
				</div>
				<div>
					<input type="submit" value="登录" class="loginButton"></input>
				</div>
			</form>
<%--			<form action="registerServlet" method="post">--%>
				<div>
					<a href="register.jsp"><input type="submit" value="注册" class="loginButton" style="margin-top: 10px"></input></a>
				</div>
<%--			</form>--%>
		</div>
	</div>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<base href="<%=basePath%>"> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户注册</title>
<link rel="stylesheet" type="text/css" href="css/register.css">
</head>

<body>
<h1>超市管理系统</h1>

	<div class="box">
		<form action="registeredSucceed.jsp" method="post">
			<div id="inputarea">
				<div>
					&nbsp;&nbsp;账号：<input type="text" name="name"  class="input" placeholder="请输入账号" ></input>
				</div>
				<div>
					&nbsp;&nbsp;密码：<input type="password" name="password" placeholder="请输入密码"
							  class="input" class="password_input"></input>
				</div>
				<div>
					确认密码：<input type="password" name="refill" placeholder="请重新输入密码"
							  class="input" class="password_input"></input>
				</div>
			</div>
			<div>
				<input type="submit" value="注册" class="loginButton"></input>
			</div>
		</form>
	</div>
</body>
<html>

.box {
    margin: 0 auto;
    margin-top: 30px;
    padding: 20px 50px;
    background-color: #ffffff;
    width: 400px;
    height: 300px;
    border-radius: 10px;
    text-align: center;
}

.input{
    border:0;
    padding: 10px 10px;
    border-bottom: 1px solid black;
    background-color: #ffffff;
    color: black;
}

.loginButton {
    border: 1px solid black;
    width: 150px;
    height: 25px;
    color: black;
    margin-top: 30px;
    border-radius: 20px;
    background-color: #a6c1ee;
}

body {
    background-color: #a6c1ee;
    margin: 0;
    padding: 0;
}

#inputarea{
    margin-top: 80px;
}
h1{
    text-align: center;
    margin-top: 150px;
}
#password_input{
    margin-top: 20px;
}

.box {
    margin: 0 auto;
    margin-top: 30px;
    padding: 20px 50px;
    background-color: #ffffff;
    width: 400px;
    height: 300px;
    border-radius: 10px;
    text-align: center;
}

.input{
    border:0;
    padding: 10px 10px;
    border-bottom: 1px solid black;
    background-color: #ffffff;
    color: black;
}

.loginButton {
    border: 1px solid black;
    width: 150px;
    height: 25px;
    color: black;
    margin-top: 30px;
    border-radius: 20px;
    background-color: #a6c1ee;}

body {
    background-color: #a6c1ee;
    margin: 0;
    padding: 0;
}

#inputarea{
    margin-top: 80px;
}
h1{
    text-align: center;
    margin-top: 150px;
}
#password_input{
    margin-top: 20px;
}

loginsuccess.jsp（判断用户是否是合法登录用户）

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@page import="java.sql.*"%>
<%request.setCharacterEncoding("utf-8"); %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>判断登录</title>
</head>
<body>
<%
    Statement stmt =null;
    ResultSet rs = null;
    Connection con = null;
    String name = request.getParameter("name").trim();
    String password = request.getParameter("password").trim();
    try{
        Class.forName("com.mysql.jdbc.Driver");
        con = DriverManager.getConnection("jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=UTF-8"
                , "root", "1234");
        stmt = con.createStatement();
        rs=stmt.executeQuery("select * from user where name='"+name+"'");
        if(rs.next()){
            rs=stmt.executeQuery("select * from user where name='"+name+"' and password='"+password+"'");
            if(rs.next()){
                response.sendRedirect("ShowAllServlet");
            }else{
                out.print("密码输入错误！！！<br>"+"重新<a href=\"login.jsp\">登录</a>");
            }
        }else{
            out.print("<font color=red>"+name+"</font>用户不存在！！！<br>"+"请点击<a href=\"register.jsp\">注册</a>");
        }
    }catch(Exception e){
        out.print(e);
    }finally{
        if(rs!=null)
            rs.close();
        if(stmt!=null)
            stmt.close();
        if(con!=null)
            con.close();
    }
%>

</body>
</html>

registeredsuccessed.jsp（判断注册行为）

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@page import="java.sql.*"%>
<%request.setCharacterEncoding("utf-8"); %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>注册成功页面</title>
</head>
<body>
<%
    Statement stmt =null;
    ResultSet rs = null;
    Connection con = null;
    String name=request.getParameter("name").trim();//去除首尾空格
    String password=request.getParameter("password").trim();
    String refill=request.getParameter("refill").trim();
    try{
        Class.forName("com.mysql.jdbc.Driver");
        con = DriverManager.getConnection("jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=UTF-8", "root", "1234");
        stmt = con.createStatement();
        if(name!=null ){
            rs=stmt.executeQuery("select * from user where name='"+name+"'");

            if(rs.next()){
                out.print("用户已经存在  "+"请<a href=\"registered.jsp\">注册</a>");
            }else{
                if(password.equals(refill)){
                    stmt.executeUpdate("insert into user values('"+name+"','"+ password + "');");
%>
注册成功！！！<br>
三秒钟后自动转到登录页面！！！<br>
如果没有跳转，请点击<a href="login.jsp">这里</a>！！！
<span style="font-size:24px;"><meta http-equiv="refresh" content="3;URL=login.jsp"> </span>
<%
                }else{
                    out.print("密码输入不一致!!!<br>"+"重新<a href=\"registered.jsp\">注册</a>");
                }
            }
        }else {
            out.print("姓名不能为空");
        }
    }catch(Exception e){
        out.print(e);
    }finally{
        if(rs!=null)
            rs.close();
        if(stmt!=null)
            stmt.close();
        if(con!=null)
            con.close();
    }
%>

</body>
</html>

fail.jsp（当数据库操作出现错误时的错误提示界面）

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>操作失败</title>
    <style type="text/css">
        h1 {
            text-align: center;
            vertical-align: center;
            font-size:20px;
        }
    </style>
</head>
<body style="background-color: #a6c1ee;background-repeat: no-repeat;background-size: cover;font-size:80px;font-family:'KaiTi';text-align:center">
    <h1 style="color: red">数据库操作失败</h1>

</body>
</html>

success.jsp（当数据库操作成功时的提示界面）

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>操作成功</title>
</head>
<body style="background-color: #a6c1ee;background-repeat: no-repeat;background-size: cover;font-size:80px;font-family:'KaiTi';text-align:center">
    <h2 style="text-align: center;vertical-align: center;font-size:20px;">数据库操作成功</h2>
</body>
</html>

showall.jsp(登录成功后，显示所有商品信息的主界面)

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <style>
        input{
            height: 30px;
            font-size: 20px;
        }
        li{
            display: inline-block;
        }
    </style>
</head>
<body style="background-color: #a6c1ee;background-repeat: no-repeat;background-size: cover">
    <h1 style="text-align: center;margin-top: 30px">超市管理系统</h1>
    <div style="text-align: center">
        <form action="QueryProductServlet" method="post">
            <input name="keyword">
            <input type="submit" value="搜索">
        </form>
    </div>
    <div style="text-align: center;margin-top: 30px;margin-left: 400px;">
        <c:choose>
            <c:when test="${empty requestScope.list}">
                <p>数据为空</p>
            </c:when>
            <c:otherwise>
                <table border="1" cellpadding="5" cellspacing="0">
                    <tr>
                        <th>商品ID号</th>
                        <th>商品名称</th>
                        <th>商品类别</th>
                        <th>进货价格</th>
                        <th>库存数量</th>
                        <th>供应商</th>
                        <th colspan="3">操作</th>
                    </tr>
                    <c:forEach items="${requestScope.list}" var="product">
                        <tr>
                            <td>${product.id}</td>
                            <td>${product.name}</td>
                            <td>${product.type}</td>
                            <td>${product.price}</td>
                            <td>${product.number}</td>
                            <td>${product.guige}</td>
                            <td>${product.provider}</td>
                            <td><a href="FindProductServlet?id=${product.id}">修改</a></td>
                            <td><a href="DeleteProductServlet?id=${product.id}">删除</a></td>
                        </tr>
                    </c:forEach>
                </table>
            </c:otherwise>
        </c:choose>
    </div>
    <div style="margin-left: 350px;">
        <ul>
            <li><a href="addProduct.jsp"><button style="width: 125px;height: 25px;background-color: white;border: black 1px solid;margin-left: 50px">添加商品</button></a></li>
            <li><a href="ShowAllServlet"><button style="width: 125px;height: 25px;background-color: white;border: black 1px solid;margin-left: 160px;">显示所有商品</button></a></li>
        </ul>
    </div>

</body>
</html>

addproduct.jsp（添加商品界面）

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>添加商品</title>
    <link href="css/add&update.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<h2>添加商品</h2>

<div class="box">
    <form action="AddProductServlet" method="post">
         商品名称：<input name="name" class="input" ><br>
         商品类别：<input name="type" class="input" ><br>
         进货价格：<input name="price"class="input"><br>
         库存数量：<input name="number"class="input"><br>
         库存规格：<input name="guige"class="input"><br>
        供应商编号: <input name="provider"class="input"><br>
        <input type="submit" value="添加" class="hel">
    </form>
</div>
</body>
</html>

updateproduct.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>更新商品信息</title>
    <link href="css/add&update.css" type="text/css" rel="stylesheet"/>
</head>
<body>
    <h2>更新商品信息</h2>
    <div class="box">
    <form action="UpdateProductServlet" method="post">
        <input name="id" value="${product.id}" hidden class="input"><br>
        商品名称：<input name="name" value="${product.name}"class="input" ><br>
        商品类别：<input name="type" value="${product.type}"class="input" ><br>
        进货价格：<input name="price" value="${product.price}" class="input"><br>
        库存数量：<input name="number" value="${product.number}" class="input" ><br>
        商品规格:<input name="guige" value="${product.guige}" class="input" ><br>
        供应商  ：<input name="provider" value="${product.provider}" class="input" ><br>
        <input type="submit" value="提交" class="hel">
    </form>
    </div>
</body>
</html>

add&update.css（新建界面和更新界面的样式）

.hel {
    border: 1px solid black;
    width: 150px;
    height: 25px;
    color: black;
    margin-top: 20px;
    border-radius: 20px;
    background-color: #a6c1ee;
}
.input {
    border:0;
    padding: 10px 10px;
    border-bottom: 1px solid black;
    background-color: #ffffff;
    color: black;
    margin-top: 10px;
    text-align: center;
}

.box {
    margin: 0 auto;
    margin-top: 30px;
    padding: 20px 50px;
    background-color: #ffffff;
    width: 400px;
    height: 350px;
    border-radius: 10px;
    text-align: center;
}
h2{
    margin-top: 100px;
}

body{
    background-color: #a6c1ee;
    background-repeat: no-repeat;
    background-size: cover;
    text-align:center;
}