（一）购物网站需求分析
（二）界面设计
一、系统分析与设计
i系统描述
ii角色
普通用户和系统管理员
iii用例识别
iv模块设计
需求分析–>用例图（uml）
系统架构分析
数据库设计
网站总体设计
（二）界面设计
div+css
tavle+css
两种方式混合布局
1.界面
2.数据库（由界面功能->表）用户表和商品表
go
create database testdb
use testdb
--普通用户表users
create table users(
userId bigint primary key identity,--用户id
username varchar(30) not null unique,--用户名
truename varchar(30) not null,--真实姓名
passwd varchar(30) not null,--密码
email varchar(40) not null,--邮箱
phone varchar(20) not null,--手机号
address varchar(30) not null,--收获地址
postcode char(6) not null,--邮编
grade int default 1)--用户等级
--管理员表admin
)
--商品表
create table goods(
goodsId bigint primary key identity,--商品编号
goodsName varchar(40),--商品名称
goodsIntro varchar(500),--介绍
goodsPrice float,--价格
goodsNum int,--库存
publisher varchar(40),--出版社
photo varchar(40),--商品照片
type varchar(10),--商品种类
)
select *from goods
insert into goods values('《西游记》','讲述了唐僧师徒四人西天取经的故事',58,33,'
中央电视台','01.jpg','大陆电视剧')
insert into goods values('《王者荣耀》','讲述了十个人游戏玩家的故事',58,33,'腾讯
','02.jpg','国产游戏')
insert into goods values('《炉石传说》','讲述了炉石传说',99,33,'乐视','03.jpg','
大陆电视剧')
insert into goods values('《肖申克的旧书》','讲述了肖申克二十年挖洞越狱的励志故
事',58,33,'好莱坞','04.jpg','美国电影')
select *from users
insert into users values('YaLee','亚历','yali','yali@qq.com','153755','七星关中
学','655223',2)
insert into users values('sunce','孙策','sunce','sunce@qq.com','153755','琅琊路
中学','655223',2)
建立web工程
写界面的办法，先死后活
使用dreamweaver中建立html，再移植到web工程中，使用table+css布局
index.jsp
<%@ page language="java" import="java.util.*" 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">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</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 rel="stylesheet" type="text/css" href="mycss/Untitled-3.css">
</head>
<body>
<table width="80%" border="0.5" align="center">
<tr>
<td height="117" colspan="2" align="center">
<jsp:include flush="true" page="head.jsp"></jsp:include>
</td>
</tr>
<tr>
<td width="21%" height="198">
<jsp:include flush="true" page="left.jsp"></jsp:include></td>
</td>
<td width="74%"><jsp:include flush="true"
page="right.jsp"></jsp:include></td></td>
</tr>
<tr>
<td height="121" colspan="2" align="center">
<jsp:include flush="true" page="tail.jsp"></jsp:include></td>
</tr>
</table>
</body>
</html>
head.jsp
<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName
()+":"+request.getServerPort()+path+"/";
%>
<table width="100%" border="0.5">
<tr>
<td height="10" colspan="3" bgcolor="#FF9999"></td>
</tr>
<tr>
<td width="26%" align="center"><img src="images/logo5.jpg" width="183"
height="53" align="middle" /></td>
<td width="40%" align="center" valign="middle"><img src="images/logo22.jpg"
width="367" height="85" align="middle" /></td>
<td width="13%" align="center" valign="middle" bordercolor="#FFFFFF"><p><img
src="images/logo1.jpg" width="30" height="29" align="top" />【我的账号】</p>
<p><img src="images/logo12.jpg" width="32" height="28" />【我的购物车】
</p></td>
</tr>
<tr>
<td height="10" colspan="3" bgcolor="#FF99FF"></td>
</tr>
<tr>
<td colspan="3"><table width="100%" border="0.5" align="center">
<tr>
<td width="15%" align="center" class="navi">首页</td>
<td width="13%" align="center"> </td>
<td width="13%" align="center" class="navi">香港电影</td>
<td width="13%" align="center"> </td>
<td width="13%" align="center" class="navi">大陆电影</td>
<td width="10%" align="center"> </td>
<td width="11%" align="center" class="navi">关于我们</td>
<td width="12%" align="center"> </td>
</tr>
</table></td>
</tr>
</table>
tail.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName
()+":"+request.getServerPort()+path+"/";
%>
<table width="100%" border="0" align="center">
<tr>
<td align="center" bgcolor="#FF6699" class="abc">合作伙伴：搜狐 网易 腾讯 新
浪</td>
</tr>
<tr>
<td align="center" class="abc">地址：湖北省十堰市 客户热线：400-820-
8820</td>
</tr>
<tr>
<td align="center" class="abc">邮编：100000 客服邮箱：
fashionshopping@sina.com</td>
</tr>
<tr>
<td align="center" class="abc">Copyright 天马星空科技有限公司</td>
</tr>
</table>
left.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName
()+":"+request.getServerPort()+path+"/";
%>
<table width="100%" border="0.5" align="center">
<tr>
<td align="center" valign="middle"><table width="100%" border="0.5">
<tr>
<td align="center"><img src="images/9.jpg" width="276" height="50"
/></td>
</tr>
<tr>
<td align="center">滚动的图片</script></td>
</tr>
</table></td>
</tr>
<tr>
<td valign="middle" bgcolor="#FF66FF"> </td>
</tr>
<tr>
<td valign="middle"><table width="100%" border="0.5">
<tr>
<td colspan="3" align="center"><img src="images/logo23.jpg" width="190"
height="75" /></td>
</tr>
<tr>
<td align="center" class="abc">销量榜</td>
<td align="center" class="abc">商品名称</td>
<td align="center" class="abc">点击次数</td>
</tr>
<tr>
<td align="center" class="abc">1</td>
<td align="center" class="abc"><a href="head.html">倚天屠龙记</a></td>
<td align="center" class="abc">55</td>
</tr>
<tr>
<td align="center" class="abc">2</td>
<td align="center" class="abc">西游记</td>
<td align="center" class="abc">11</td>
</tr>
<tr>
<td align="center" class="abc">3</td>
<td align="center" class="abc">笑傲江湖</td>
<td align="center" class="abc">5</td>
</tr>
<tr>
<td align="center" class="abc">4</td>
<td align="center" class="abc">西厢记</td>
<td align="center" class="abc">4</td>
</tr>
<tr>
<td align="center" class="abc">5</td>
<td align="center" class="abc">红楼梦</td>
<td align="center" class="abc">3</td>
</tr>
<tr>
<td align="center" class="abc">6</td>
<td align="center" class="abc">水浒传</td>
<td align="center" class="abc">2</td>
</tr>
<tr>
<td align="center" class="abc">7</td>
<td align="center" class="abc">射雕英雄传</td>
<td align="center" class="abc">1</td>
</tr>
</table></td>
</tr>
</table>
right.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName
()+":"+request.getServerPort()+path+"/";
%>
<table width="80%" border="0.5" align="center">
<tr valign="middle">
<td colspan="3" align="center" class="abc"><img src="images/9.jpg"
width="203" height="47" /></td>
</tr>
<tr>
<td width="32%" align="center" valign="middle" class="abc"><p><img
src="images/10.jpg" width="100" height="100" /></p>
<p>描述信息</p></td>
<td width="30%" align="center" class="abc"><p><img src="images/15.jpg"
width="100" height="100" /></p>
<p>描述信息</p></td>
<td width="38%" align="center" class="abc"><p><img src="images/21.jpg"
width="100" height="100" /></p>
<p>描述信息</p></td>
</tr>
<tr>
<td align="center" valign="middle" class="abc"><img src="images/20.jpg"
width="100" height="100" /></td>
<td align="center" class="abc"><img src="images/23.jpg" width="100"
height="100" /> </td>
<td align="center" class="abc"><img src="images/logo20.jpg" width="100"
height="100" /></td>
</tr>
<tr>
<td align="center" valign="middle" class="abc"><img src="images/19.jpg"
width="100" height="100" /></td>
<td align="center" class="abc"><img src="images/22.jpg" width="100"
height="100" /></td>
<td align="center" class="abc"><img src="images/11.jpg" width="100"
height="100" /></td>
</tr>
</table>
运行结果：
扫一扫
978
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
