`
mywebcode
  • 浏览: 1002363 次
文章分类
社区版块
存档分类
最新评论

电子购物网站设计—1

 
阅读更多


二、开发环境

Windows操作系统下

开发平台:JDK,MyEclipse,tomcat,MicrosoftSQL Server。

编码:MyEclipse软件

美化界面:软Dreamweaver软件

数据库设计:SQL Server 2008软件

一、需求分析

1)系统管理:分三种不同权限的用户:系统管理员、顾客、商品管理员,主要实现系统管理员对商品管理员、顾客的管理,系统管理员可以实现商品管理员和顾客账户的添加、删除、修改等功能。

2)前台页面:可以展示商品,实现商品的简单的按名称搜索。

3)顾客模块:可以实现顾客账号的注册、登录、浏览商品、添加商品到购物车、提交订单、查看购买信息及订单流程。

4)商品管理员模块:可以添加、删除、修改商品信息;可以查看订单、发货。

三、数据库设计

1、系统管理员数据表

2、用户数据表

后面还有4个数据表,以后会在博客其他文章补全

部分文件结构:

配置文件struts.xml代码如下:

代码太多了,只给出一本分

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
 "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
 "http://struts.apache.org/dtds/struts-2.3.dtd">

<struts>
 	<!-- 系统常量定义,定义上传文件字符集编码 -->
	<constant name="struts.i18n.encoding" value="UTF-8"></constant>
	<!-- 系统常量定义,定义上传文件临时存放路径 -->
	<constant name="struts.multipart.saveDir" value="f:\tmp"></constant>
    
	<package name="struts2" namespace="/" extends="struts-default">
	    <!-- 添加商品 -->
	    <action name="goods" class="action.goodsAction">
	        <result name="success">/c_goodsSuccess.jsp</result>
	        <result name="error">/error.jsp</result>
	    </action>
	    <!-- 后台显示商品-->
	   <action name="show" class="action.goodsAction" method="showgoods">
	        <result name="success">/c_showgoods.jsp</result>
	        <result name="error">/error.jsp</result>
	    </action>
	    <!-- 修改商品视图 -->
	    <action name="updateGoodsView" class="action.goodsAction" method="updateGoodsView">
	        <result name="success">/c_updateGoods.jsp</result>
       </action>
       <!-- 修改商品 -->
	    <action name="updateGoods" class="action.goodsAction" method="updateGoods">
	        <result name="success">/c_goodsSuccess.jsp</result>
       </action>
	     <!-- 删除商品 -->
	    <action name="delete" class="action.goodsAction" method="deleteGoods">
	        <result name="success">/c_goodsSuccess.jsp</result>
    
	</package>
</struts>

数据库连接类:

import java.sql.Connection;
import java.sql.DriverManager;
public class JDBC {
	 private String dbDriver="com.microsoft.sqlserver.jdbc.SQLServerDriver";//数据库驱动
	 private String url="jdbc:sqlserver://localhost:1433;"+"databaseName=db_DZSW";
	 public Connection connection=null;
	
	 public JDBC(){
		 try{
			 Class.forName(dbDriver).newInstance();//加载数据库驱动
			 connection=DriverManager.getConnection(url,"cqx","123456");//加载数据库
		 }catch(Exception e){
			 System.out.println("数据库加载失败!");
		 }
	 }
}

上传图片的关键点:

原理:先把图片上传到web容器Tomcat 上的临时文件夹,再获取图片的地址,保存到数据库中,显示图片的时候就取出地址,根据地址和图片的名称显示相应的图片,部分代码如下:


  /////////////执行上传功能///////////////////////////////////
	public String uploadFile() throws FileNotFoundException, IOException {
		try {
			InputStream in = new FileInputStream(file);
			String dir = ServletActionContext.getRequest().getRealPath(UPLOADDIR);
			File uploadFile = new File(dir, this.getFileFileName());
			OutputStream out = new FileOutputStream(uploadFile);
			byte[] buffer = new byte[1024 * 1024];
			int length;
			while ((length = in.read(buffer)) > 0) {
				out.write(buffer, 0, length);
			}

			in.close();
			out.close();
		} catch (FileNotFoundException ex) {
			ex.printStackTrace();
		} catch (IOException ex) {
			ex.printStackTrace();
		}
		return this.fileFileName;
	}

分页效果的关键点:

实现分页的方法很多,但我更倾向与使用Sql语句分页读取数据,而不是全部数据一次性读出在放到List结果集再分页,个人也不推荐这种方法,数据多是不好使用。这里只给出部分代码和SQL语句

		public List<GoodsTable> show(int pageSize, int pageNow){
			List list=new ArrayList();
			try{
				if (pageSize>0 && pageNow>0) {
				ps=connection.prepareStatement(" SELECT TOP ("+pageSize+")*" +
			  	        " FROM GoodsTable"+
			  	        " WHERE id >=(SELECT ISNULL(MAX(id),0) FROM "+
			  	        "(SELECT TOP "+(pageSize*(pageNow-1)+1)+" id FROM GoodsTable ORDER BY id) A)ORDER BY id");
				
				ResultSet rs=ps.executeQuery();
				while(rs.next()){
					   GoodsTable stu=new GoodsTable();
					   stu.setId(rs.getInt("id"));
				       stu.setName(rs.getString("goodsName"));
				       stu.setIntroduce(rs.getString("introduce"));
				       stu.setNowPrice(rs.getFloat("nowPrice"));
				       stu.setImages(rs.getString("images"));
				       stu.setMark(rs.getInt("mark"));
					list.add(stu);					
				}
				list.size();
				}
				return list;
			}catch(Exception e){
				e.printStackTrace();
				list.size();
				return list;
			}
		}//

Jsp页面部分代码:

这个分页效果的使用<url>标签,根据<url>标签的<s:paramname="pageNow"value="pageNow-1">获取相应的值,通过改变相应的数值条用相同的方法。去改变页面的内容,下一页,上一页,首页,尾页的实现方法是一样的。

</div>
  <div style="width:740px;margin-top:520px;margin-left:300px;">				
	<s:url id="url_index"  value="forwordShow.action">
         <s:param name="pageNow" value="1"></s:param>
     </s:url>
     <s:a href="%{url_index}">首页</s:a>
     <s:url id="url_pre"  value="forwordShow.action">
         <s:param name="pageNow" value="pageNow-1"></s:param>
     </s:url>
     <s:a href="%{url_pre}">上一页</s:a>
     <span >第   </span><span style="color:red;"><s:property value="pageNow"/></span><span>  页</span>
     <s:url id="url_next"  value="forwordShow.action">
         <s:param name="pageNow" value="pageNow+1"></s:param>
     </s:url>  
     <s:a href="%{url_next}">下一页</s:a> 
     <s:url id="url_end"  value="forwordShow.action">
         <s:param name="pageNow" value="pageCount"></s:param>
     </s:url>
     <s:a href="%{url_end}">末页</s:a> 
<span>共 <s:property value="pageCount" />页</span>

修改商品类部分代码:

修改数据库的SQL语句update,从JSP页面获取ID的值,根据ID找到该条商品进行重新设置值,指定该条信息要修改的字段,接着调用ps.executeUpdate();更新数据库。代码如下:

	///////修改商品根据id///////////////////////////////////////
		public boolean Updategoods(GoodsTable sp){
			try{
				ps=connection.prepareStatement("update GoodsTable set bigID=?,smallId=?,goodsName=?," +
						"goodsFrom=?,introduce=?, number=?,nowPrice=?,freePrice=?,images=?  where id=?");
			      ps.setFloat(7, sp.getNowPrice());//现价
			      ps.setFloat(8, sp.getFreePrice());//特价
			      ps.setObject(9,sp.getImages().toString());//图片
			      ps.setInt(10,sp.getId());
			      ps.executeUpdate();
			      ps.close();
				System.out.println("id值为:"+sp.getId());	
				return true;
			}catch(Exception e){
				e.printStackTrace();
				return false;
			}
		}//

删除订单类部分代码:

主要是通过Sql语句Delete通过ps数据库的连接类用connection.prepareStatement的方法使用SQL语句根据where设置的条件的

   		//////////////删除订单////////////////////////////////////////////////
		public void deleteOrder(OrderTable order) throws SQLException{
				ps=connection.prepareStatement("delete from OrderTable where id=? ");
				ps.setInt(1,order.getId());
				ps.executeUpdate();
			    ps.close();
		}//

后台显示商品:

改代码是Action类的部分方法,把从Dao层传过来的结果集存放在List集合里面,然后通过Map集,把结果放在Request.put里返回给JSP页面(客户端)

  ///////////后台显示商品//////////////////////////////////////////////////
	public String showgoods() {
		// TODO Auto-generated method stub
		GoodsDao goods=new GoodsDao();
		List<GoodsTable> stu=goods.find();//调用GoodsDao的find()方法
		if(stu!=null){
			Map req=(Map)ActionContext.getContext().get("request");
			req.put("stus",stu);//将SP的内容放到stus中
			return SUCCESS;
		}else
			return ERROR;
	}//

部分jsp页面代码:

  <div class="shoucang">
     <div><a href="cartsee.action" target="_self">购物车</a></div>
     <div><a href="javascript:check();">登录</a><span>|</span></div>
  <div id="daohanglan">
    <ul>
       <li><a href="#">首页</a></li>
       <li><a href="#">衣服</a></li>
       <li><a href="#">电器</a></li>
       <li><a href="#">书籍</a></li>
    </ul>
  </div>
  </div>
  <jsp:include page="a_right.jsp" flush="true"/>
  <div id="loginform" style="display:none;">
        <div style="float:right; margin-right:10px;"><a href="javascript:close1();">关闭</a></div>
    <div id="TabbedPanels1" class="TabbedPanels">
          <ul class="TabbedPanelsTabGroup">
            <li class="TabbedPanelsTab" tabindex="0">用户登录</li>
            <li class="TabbedPanelsTab" tabindex="0">商品管理员登录</li>
            <li class="TabbedPanelsTab" tabindex="0">系统管理员登录</li>
          </ul>
          <div class="TabbedPanelsContentGroup"> 
            <div class="TabbedPanelsContent" style="height:280px;">
           <form action="login.action" method="post" style="margin-top:120px; margin-left:180px;">
         <table>
            <tr>
               <td>用户名:</td>
               <td><input type="text" name="username" size="27"/></td>
            </tr>
            <tr>
               <td>密     码:</td>
               <td><input type="password" name="pwd" size="27"/></td>
            </tr>
            </table>
                    <input type="submit" value="登录" />
                    <input type="reset"  value="重置"/
                   <a href="register.jsp">注册</a>
             </form>
            </div>

六、部分运行结果与功能简述

1、首页效果图;用户界面

该界面相比其他界面就显得友好写,用户可以浏览商品信息,同样也可以把商品放进购物车中,然后去结账。当然用户也可以搜索自己想要的商品。这是一个站内搜索功能,对数据信息量大时对用户有很大的帮助。现在信息量比较小,不是很需要该功能的。同样也可以点击购物车,查看购物车中的商品信息。



2、登录界面(运用CSS+js代码实现这种方式登录,实在Dreamweaver做出来的效果)在移植代码的。

登录界面主要使用了一个弹出式窗口登录,这样有利于界面的简洁。选择不同的登录方式就跳转到相应的页面进行相应操作。




后面我还会在个人博客上持续更新,敬请留意!



分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics