0、效果展示
1、概述
购物网站设计给人们带来了方便,成为一种全新的商务模式。因此,不用出门就可以在家购物的新时尚已经到来,构建一个购物网站设计在经济上是完全可行的。
就本系统而言,随着电脑的普及,为用户在网络上进行购物提供有利的条件。而一个购物网站设计可以为用户提供软件条件,这样用户便可以足不出户的买商品了。商家可以从中获得利润,两全其美。
2、搭建环境
本文以实现一个线上电子产品交易网站为目标,从环境搭建到编码实现全过程讲述
我们使用javaweb、J2EE来构建电子产品交易网站,环境使用最新版jdk和tomcat,配合mysql数据库
开发工具使用idea(也可以使用eclipse),数据库管理工具使用Navicat Premium
开发框架使用JavaBean Servlet MVC结构;
没有使用SSH(Struts+Spring+Hibernate)或SSM(Spring+SpringMVC+MyBatis),这两个框架我们在别的项目中再介绍开发过程
在项目中会引入My97DatePicker作为前端日期时间选择工具,使用fckeditor作为富媒体编辑器(也可以使用百度的ueditor)
使用DWR(Direct Web Remoting)用于改善web页面与Java类交互,实现远程服务器端AJAX读取登录数据。
使用JSTL(Java server pages standarded tag library,即JSP标准标签库),此库是由JCP(Java community Proces)所制定的标准规范,它主要提供给Java Web开发人员一个标准通用的标签库,并由Apache的Jakarta小组来维护。开发人员可以利用这些标签取代JSP页面上的Java代码,从而提高程序的可读性,降低程序的维护难度。
3、数据表结构
表2 goods商品表
名称 | 类型 | 长度 | 说明 |
id | int | 4 | 编号 |
name | varchar | 50 | 名称 |
brief | varchar | 500 | 备注 |
price | varchar | 50 | 价格 |
type | varchar | 50 | 类型 |
imgpath | varchar | 100 | 图片 |
price1 | varchar | 50 | 价格 |
sums1 | varchar | 50 | 出售数量 |
pf | varchar | 50 | 评价 |
表3 leaveword 留言表
名称 | 类型 | 长度 | 说明 |
id | int | 4 | 编号 |
users | varchar | 50 | 用户ID |
title | varchar | 200 | 标题 |
content | varchar | 500 | 内容 |
times | varchar | 50 | 日期 |
表5 nutrition 公告表
名称 | 类型 | 长度 | 说明 |
id | int | 4 | 编号 |
name | varchar | 100 | 名称 |
content | varchar | 2000 | 内容 |
4、后端代码示例
package bean;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.*;
import util.*;
public class UserLoginBean {
Connection conn = null;
Statement st = null;
ResultSet rs = null;
ArrayList al = new ArrayList();
public int login(String name,String pwd){
int temp = 0;
conn = DBConn.getConn();
try {
st = conn.createStatement();
rs = st.executeQuery("select * from users where name='"+name+"'");
if(rs.next()){
String id = rs.getString("id");
String tname = rs.getString("name");
String tpwd = rs.getString("pwd");
if(pwd.equals(tpwd)){
temp = 1;
al.add(id);
al.add(tname);
al.add(tpwd);
}else{
temp = 2;
}
}else{
temp = 3;
}
} catch (SQLException e) {
e.printStackTrace();
} finally{
DBConn.close(conn,st,rs);
}
return temp;
}
public ArrayList getArrayLst(){
return al;
}
}
5、前端代码示例
<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>后台登录</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link href="admin/portal/css/login.css" rel="stylesheet" type="text/css"/>
<script language="JavaScript" src="admin/portal/js/jquery.js"></script>
<script src="admin/portal/js/cloud.js" type="text/javascript"></script>
<!--[if lt IE 8]>
<meta http-equiv="refresh" content="0;ie.html" />
<![endif]-->
<script>
if(window.top!==window.self){window.top.location=window.location};
</script>
</head>
<script language="javascript">
$(function () {
$('.loginbox').css({'position': 'absolute', 'left': ($(window).width() - 692) / 2});
$(window).resize(function () {
$('.loginbox').css({'position': 'absolute', 'left': ($(window).width() - 692) / 2});
})
});
</script>
<script language="JavaScript">
function login11()
{
if (document.form1.name.value == "" )
{
alert("请输入用户名!");
document.form1.name.focus();
return false;
}
if (document.form1.pwd.value == "" )
{
alert("请输入密码!");
document.form1.pwd.focus();
return false;
}
}
</script>
<%
String error = (String)request.getAttribute("error");
if(error != null && error.equals("1")){
%>
<script>alert('用户名或密码错误!')</script>
<%
}
%>
<body style="background-color:#1c77ac; background-image:url(portal/images/light.png); background-repeat:no-repeat; background-position:center top; overflow:hidden;">
<div id="mainBody">
<div id="cloud1" class="cloud"></div>
<div id="cloud2" class="cloud"></div>
</div>
<div class="loginbody">
<span class="systemlogo">管理平台</span>
<div class="loginbox">
<form name="form1" action="servlet/AdminLoginServlet" method="post" align="center" onSubmit="return login11()">
<ul>
<li>
<input name="name" style="width:343px;" type="text" class="loginuser" onclick="JavaScript:this.value=''" placeholder="用户名"/>
</li>
<li>
<input name="pwd" style="width:343px;" type="password" class="loginpwd" onclick="JavaScript:this.value=''" placeholder="密码"/>
</li>
<li><input type="submit" class="loginbtn" value="登录"/>
</li>
</ul>
</form>
</div>
</div>
<div class="loginbm">© All Rights Reserved. </div>
</body>
</html>