电商网站搭建（三）

3 后台页面设计

3.1 准备工作

首先为了实现登陆成功跳转到商城界面/后台，因为只有管理员可以上架商品，因此我们先搭建后台，后台搭建好、上传好商品后再搭建商城页面，对以下语句进行修改：

// 修改前
// response.sendRedirect("shoplist.jsp");

// 修改后
if(usrtestok.equals("admin")){response.sendRedirect("shopadmin.jsp");
}
else{response.sendRedirect("shoplist.jsp");
}

此时输入管理员用户名和密码可以进入后台页面。

• 用户名：admin
• 密码：lqcadmin

3.2 初始设计

要求通过表单能添加商品信息，相关信息包括：商品名称、价格、商品信息，相关信息添加到数据库表中，添加成功后在该页面能显示所有已添加商品信息。

首先我们需要创建一张表，该表存储了有关商品的记录，商品图片没有使用文件上传的相关知识，之后的商品图片全部是事先对图片命名为 X.jpg ，其中 X 为商品的序号，然后通过相对路径引用。

创建表如下，并插入一条记录：

use shopping;
create table shopProducts(proid int PRIMARY KEY AUTO_INCREMENT,proname varchar(100) character SET GB2312 NOT NULL,proprice float NOT NULL,stoname varchar(100) character SET GB2312 NOT NULL,proinfo varchar(200) character SET GB2312);insert into shopProducts(proname,proprice,stoname) values('韩国原装进口 拿嘟 不添加盐无调味海苔 儿童零食食品即食海苔盒装','34.60', '中南民族大学管理学院自营店');
select * from shopProducts;

3.3 实现显示商品信息

结合表格和数据库连接，比较简单，这里放上代码。

out.print("<table border=1 style=\"text-align:center;font-size:15px;line-height:24px;width:1200px;\">");
out.print("<tr style=\"font-weight:bold;color:#333333\">");
out.print("<td width=80>"+"商品编号");
out.print("<td width=200>"+"商品名称");
out.print("<td width=100>"+"价格");
out.print("<td width=200>"+"店铺");
out.print("<td width=90>"+"详细信息");
out.print("<td width=90>"+"图片信息");
out.print("</tr>"); Connection con = null;
Statement sql;
ResultSet rs;String url = "jdbc:mysql://localhost:3306/shopping?"+
"useSSL=false&serverTimezone=CST&characterEncoding=utf-8";
String user ="root";
String password = "123456";//加载JDBC-MySQL8.0连接器
try{Class.forName("com.mysql.cj.jdbc.Driver"); 
}
catch(Exception e){out.print("<h1>"+e);
}// 查询结果
try{con = DriverManager.getConnection(url, user, password);sql = con.createStatement();String SQL = "SELECT * FROM shopProducts";	// 查询语句rs = sql.executeQuery(SQL);while(rs.next()) {out.print("<tr style=\"color:#333333\">");out.print("<td>" + rs.getString(1) + "</td>"); out.print("<td>" + rs.getString(2) + "</td>"); out.print("<td>" + rs.getString(3) + "元</td>");out.print("<td>" + rs.getString(4) + "</td>");if(rs.getString(5) == null){out.print("<td>暂无</td>");}else{out.print("<td>" + rs.getString(5) + "</td>");}out.print("<td><a href=\"images/" + rs.getString(1) + ".jpg\" target=\"_blank\">显示图片</a></td>");out.print("</tr>"); }con.close();
}
catch(SQLException e) { out.print("<h1>"+e);
}

显示结果如下：

3.4 实现增删改商品信息

3.4.1 实现增加商品信息

因为仅仅使用 jsp 部分基础内容进行设计，所以这里没有那么巧妙或者完善，三个按钮分别对应三个表单，每个表单中并不是所有项都必填，不需要填写的项之后会通过引入 disabled 属性禁用。

添加表单如下：

<form action="">商品编号：<input type="text" name="proid" />商品名称：<input type="text" name="proname" />价格：<input type="text" name="proprice" />店铺：<input type="text" name="stoname" />详细信息：<input type="text" name="proinfo" /><input type="hidden" name="tp" value="0" /><input type="submit" value="添加" />
</form>

再 Java 程序片中接收值时，所有值虽然都接收，但是只使用其中的一部分结合 SQL 语句实现插入功能，这里开始是想使用结果集进行插入，但是后来因为该表主键自增，使用结果集不是很方便，因此还是使用编写 SQL 语句的方法（时间仓促，希望之后可以优化）。

在设计表单时，创建了一个名为 tp 的隐藏域，该隐藏域用来区别是用来添加还是删除或更新，之后通过 if 语句很好实现，核心代码如下：

if(tpget.equals("0")){if(proinfoget.equals("")){String insertSQL = "insert into shopProducts(proname,proprice,stoname)" + "values('" + pronameget + "','" + propriceget + "','" + stonameget + "');";int ok = sql.executeUpdate(insertSQL);}else{String insertSQL = "insert into shopProducts(proname,proprice,stoname,proinfo)" + "values('" + pronameget + "','" + propriceget + "','" + stonameget + "','" + proinfoget + "');";int ok = sql.executeUpdate(insertSQL);}
}

由于这个也会因为字符乱码导致数据插入不进去，所以在连接数据库之前将转换编码格式：

// 防止字符编码问题导致无法插入数据
pronameget = new String(pronameget.getBytes("ISO-8859-1"), "utf-8");
stonameget = new String(stonameget.getBytes("ISO-8859-1"), "utf-8");
proinfoget = new String(proinfoget.getBytes("ISO-8859-1"), "utf-8");

此时插入数据结果如下：

虽然成功插入数据，但是一旦刷新页面就会再次插入相同的数据，这是因为使用 post 方法提交表单，虽然不显示提交的数据，但其实数据一直被保存，一旦刷新就会将同样的数据再次插入。

这里我想了一个解决办法，当每次插入/删除/更新操作时，重定向到本页面即可。

修改后的代码如下：

if(tpget.equals("0")){if(proinfoget.equals("")){String insertSQL = "insert into shopProducts(proname,proprice,stoname)" + "values('" + pronameget + "','" + propriceget + "','" + stonameget + "');";int ok = sql.executeUpdate(insertSQL);response.sendRedirect("shopadmin.jsp");}else{String insertSQL = "insert into shopProducts(proname,proprice,stoname,proinfo)" + "values('" + pronameget + "','" + propriceget + "','" + stonameget + "','" + proinfoget + "');";int ok = sql.executeUpdate(insertSQL);response.sendRedirect("shopadmin.jsp");}
}

3.4.2 实现删除商品信息

在设计表单时，创建了一个名为 tp 的隐藏域，该隐藏域用来区别是用来添加还是删除或更新，之后通过 else 语句很好实现，核心代码如下：

else if(tpget.equals("1")){String deleteSQL = "delete from shopProducts where proid = '" + proidget + "'";int ok = sql.executeUpdate(deleteSQL);}

3.4.3 实现更新商品信息

在设计表单时，创建了一个名为 tp 的隐藏域，该隐藏域用来区别是用来添加还是删除或更新，之后通过 else 语句很好实现，核心代码如下：

else if(tpget.equals("2")){if(!proidget.equals("")){if(!pronameget.equals("")){String updateSQL = "update shopProducts set proname='" + pronameget + "' where proid='" + proidget + "'";int ok = sql.executeUpdate(updateSQL);	// 更新}if(!propriceget.equals("")){String updateSQL = "update shopProducts set proprice='" + propriceget + "' where proid='" + proidget + "'";int ok = sql.executeUpdate(updateSQL);	// 更新}if(!stonameget.equals("")){String updateSQL = "update shopProducts set stoname='" + stonameget + "' where proid='" + proidget + "'";int ok = sql.executeUpdate(updateSQL);	// 更新}if(!proinfoget.equals("")){String updateSQL = "update shopProducts set proinfo='" + proinfoget + "' where proid='" + proidget + "'";int ok = sql.executeUpdate(updateSQL);	// 更新}}}