尚学堂 金尚网上商城 设计分析

BBS中学到的东西：1.分页，2.树状结构的存储，3.树状结构的展现

金尚网上商城：

很多东西是同一种技术在不同业务里的展现，很多程序员做到后来就成了某一个领域的专家

通过这个项目展现jsp+javaBean这种编程模式

一.内容

1.WEB项目一般流程

讲关于设计，关于软件工程方面的知识，实际开发中的东西

2.金尚项目步骤详解

3.开发

二.WEB项目开发的一般流程——总纲

1. 需求确定(需求分析)

弄明白现在干什么

2. 分析与设计(掌握技术之后要掌握的东西)

(1).架构分析与设计

(2).业务逻辑分析

(3).业务逻辑设计

(4).界面设计

3.开发环境搭建

4.开发-测试-开发-测试

5.文档编纂

每一个阶段产生不同的文档，不同的文档由不同的人来写

三．WEB项目开发的一般流程——需求确定

1.需求确定

(1). 通过各种手段确定系统的功能与性能

A.功能：购物、注册、浏览、搜索…

B.性能：可同时支持n个并发访问，而且响应时间不低于m毫秒…

C.手段：

a.头脑风暴（brain storm）

b.会议

c.询问

d.原型 — 界面原型、业务原型…

(2).本阶段是项目开发的最重要阶段

(3).在web项目中，通常界面设计会在本阶段进行

四．WEB项目开发的一般流程—分析与设计之架构分析与设计

1.架构分析与设计

(1).逻辑架构

A.3层架构、n层架构…

B.MVC…

C.Model 1（jsp直接访问数据库） orModel 2（jsp + javabean访问数据库）

D. …

(2).物理架构

A.Web服务器的分布

B.数据库服务器的分布

C.……

(3).技术解决方案的确定

A.Java/.net

B.OpenSource/ 商业

C.……

WEB项目开发的一般流程—分析与设计之业务逻辑分析

1. 根据需求分析业务逻辑

a) 有哪些人会使用本系统

b) 他们会使用本系统做什么

c) 通常他们使用本系统的步骤是什么样的

d) 会有哪些明显的类来支撑本系统的运行

e) 会有哪些不同的提示会反馈给用户

f) ……

2. 本阶段与需求的确定紧密相关，通常在确定需求的时候就会进行相关的分析

WEB项目开发的一般流程—分析与设计之业务逻辑设计

1. 业务逻辑设计

a). 根据需求的分析来确定具体的类

b). 确定类的属性

c). 确定类的接口(方法)

d). 确定类之间的关系

e). 确定用户操作流程在设计上的反应

f). 进行数据库的设计

g).不同的项目步骤可能不尽相同

h).……

WEB项目开发的一般流程—分析与设计之界面设计

1. 界面设计

a) 设计系统的界面风格

i. 颜色、style

b) 设计系统的具体”模拟”界面

i. 能够从头到尾

1. 方面进行需求的确定

2. 方便JSP程序员的开发

3. ……

WEB项目开发的一般流程—开发环境的搭建

1. 开发环境的搭建

a) 开发工具的确定

b) 配置管理工具的确定

c) 测试工具的确定

d) 文件服务器/配置服务器等的确定

e) ……

WEB项目开发的一般流程—开发

1. 开发-测试-开发-测试

a) 按照设计进行开发

i. 迅速开发原型

ii. 进行迭代开发

iii. 提早进行测试

1. 单元测试

2. 黑盒子测试

3. 性能测试

4. 易用性测试

5. ……

金尚网上商城—需求确定

1. 普通用户可以通过系统浏览商品(按类别)

2. 普通用户可以通过系统搜索商品(按类别、价位、日期等)

3. 普通用户可以通过系统下订单(享受市场价)

4. 普通用户可以注册成为系统会员(免费注册)

5. 会员可以浏览和检索商品

6. 会员可以下订单(享受会员价)

7. 会员可以浏览自己下过的订单

8. 会员可以管理自己的信息(自服务系统)

a) 修改密码

b) 修改送货地址

c) 修改联系方式

9. 会员可以分级别

a) 不同级别享受不同等级的优惠

b) 通过购物的金额确定级别

10. 管理员通过后台进行会员管理

a) 会员浏览

b) 会员历史订单浏览

c) 会员删除

d) 指定会员级别

11. 管理员通过后台进行商品分类的管理

a) 浏览、添加、删除、修改

12. 管理员通过后台进行产品管理

a) 新增产品

b) 产品上柜

c) 产品下柜

d) 产品销量浏览

e) 产品搜索

f) 产品删除

g) 产品修改

13. 管理员通过后台进行订单的管理

a) 订单查询

b) 修改订单状态

c) 订单搜索

d) 订单跟踪

e) 订单提醒

金尚网上商城—架构分析与设计

1. 逻辑架构

a) JSP +JavaBean +Database

i. JSP负责表现

ii. JavaBean负责业务逻辑

iii. Database负责持久保持数据

2. 物理架构

a) Web服务器一台

i. 配置

b) DataBase服务器一台

i. 配置

3. 技术解决方案

a) WebServer — Tomcat5.5

b) Database — MySQL5.0

金尚网上商城—业务逻辑分析

1. 会员类

a) 包装系统会员

b) 与订单有一对多的关系

2. 管理员类

a) 包装系统管理员

3. 产品类

a) 包装产品的信息

b) 与订单是多对多的关系

4. 类别类

a) 包装产品的类别

b) 树状结构

c) 与产品是一对多的关系

5. 订单类

a) 包装订单的信息

b) 与产品是多对多的关系

c) 与会员是多对一的关系

6. 购物车类

a) 包装购物车的信息

b) 与产品是多对多的关系

金尚网上商城—业务逻辑设计

1. User

a) properties

i. id

ii. username

iii. password

iv. phone

v. addr

vi. rdate

b) methods

i. getOraders()

ii. save()

iii. change()

iv. delete()

v. staticsearch()

2. Administrator

a) Properties

i. Username

ii.Password

b) methods

i. login()

3. Product

a) Properties

i. id

ii. name

iii. descr

iv. normalPrice

v. memgerPrice

vi. pdate

vii. category

b) methods

i.getCategory()

ii.getSalerCount()

iii. save() ,change(), search()

4. Categroy

a) Properties

i. id

ii. name

iii. descr

iv. pid(parent: Category)

b) methods

i.getProductCounts()

ii. save(),change() 等

5. SalesOrder& SaleItem //订单&订单中的一项

a) Properties

i. id

ii. userid

iii. addr

iv. SalesItem[]

v. Odate

b) methods

i.getTotalPrice()

ii. save(),chage()等

iii.getSalesltems()

6. SalesOrder & SaleItem

a) Properties

i. id

ii. productID

iii. unitPrice

iv. pCount

b) methods

i.getTotalPrice()

ii. save(),change()等

7. ShoppingCart& CartItem

a) Properties

i. userid

ii. CartItem[]

b) methode

i.getTotalPrice()

ii. save(),change()等

iii.getCartItems()

8. ShoppingCart &CartItem

a) Properties

i. productID

ii. unitPrice

iii. pCount

b) methods

i.getTotalPrice()

金尚网上商城—数据库设计

1. User

字段名	字段类型	说明
id	int	主键/自动递增
username	Varchar	用户名
password	varchar	密码
phone	varchar	电话
addr	varchar	地址
rdate	datetime	注册日期

2. Product

id	int	主键/自动递增
name	varchar	产品名
descr	varchar	描述
normalprice	varchar	市场价
memberprice	varchar	会员价
pdate	datetime	上柜日期
categoryID	int	类别ID/引用Categroy表的id

3. Categroy

字段名	字段类型	说明
id	int	主键/自动递增
name	varchar	分类名
descr	varchar	描述
pid	varchar	父id

4. SalesOrder

字段名	字段类型	说明
id	int	主键/自动递增
userid	int	用户id
addr	varchar	送货地址
odate	datetime	下单时间
status	int	订单状态/0à订单未处理1à处理成功2à废单

5. SalesItem

字段名	字段类型	说明
id	int	主键/自动递增
productid	int	产品id
unitprice	varchar	单价
pcount	datetime	数量
orderid	int	订单id/引用salesorder的id

金尚网上商城—界面设计

前台

1. 首页 index.jsp

a) 显示某类商品

b) 根据id显示图片

c) 搜索

d) 注册

e) 登录

f) 自服务

2. 搜索界面 search.jsp

3. 搜索结果 searchresult.jsp

4. 注册

a) 注册页面 register.jsp

b) 注册成功 registerok.jsp

c) 注册失败 registererr.jsp

5. 登陆

a) 登陆页面 login.jsp

b) 登陆成功 loginok.jsp

c) 登陆失败 loginerr.jsp

6. 自服务 selfservice.jsp

a) 修改密码 changepassword.jsp

b) 修改成功 changepasswordeok.jsp

c) 修改失败 changepassworderr.jsp

d) 修改其他信息 changeinfo.jsp

e) 修改其他信息成功 changeinfook.jsp

f) 修改其他信息失败 changeinfoerr.jsp

7. 购物

a) 购物车浏览 cart.jsp

b) 结账 buy.jsp

后台(admin目录下)

1. 登陆页面 login.jsp

2. 首页 index.jsp

a) 用户管理

b) 产品管理

c) 类别管理

d) 订单管理

3. 用户管理

a) 显示用户 userlist.jsp

b) 删除用户 userdelete.jsp

c) 搜索用户 usersearch.jsp

4. 产品管理

a) 产品显示 productlist.jsp

b) 产品添加 productadd.jsp

c) 产品更改 productchange.jsp

d) 产品删除 productdelelte.jsp

e) 产品搜索 productSearch.jsp

5. 类别管理

a) 类别显示 categorylist.jsp

b) 类别添加 categoryadd.jsp

c) 类别删除 categorydeltete.jsp

d) 类别修改 categorychange.jsp

6. 订单管理

a) 订单浏览 salesorderlist.jsp

b) 订单处理 salesorderdeal.jsp

金尚网上商城—开发环境搭建

1. 开发工具

a) eclipse3.2

2. WEB SERVER

a) tomcat5.5

3. DATABASE

a) MySQL

4. SCM

a) Cvs

金尚网上商城—开发

1. 先写用户

2. 再写分类

3. 然后写产品

4. 接下来写购物

5. 最后订单处理

6. 其他功能

金尚网上商城—开发安排

1. V0.1

a) 用户——JavaBean 前台 / 后台

2. V0.2

a) 分类——JavaBean 前台 / 后台

3. V0.3

a) 产品——JavaBean 前台 / 后台

4. V0.4

a) 购物——JavaBean 前台

5. V0.5

a) 订单——JavaBean 前台 / 后台

6. V0.6

a) 其他——JavaBean 前台 / 后台

金尚网上商城——文档编纂

1. 需求描述文档

2. 系统分析与设计

3. 数据库设计

4. 开发接口API docs &源代码注释

5. 用户帮助（前台）

6. 管理员手册（后台）

7. 测试文档

重点掌握

1. 初步了解项目开发流程

a) 理解并表达

b) 熟练运用

2. 理解后台与前台

a) 理解互动

3. 进一步加深对树状结构运用的理解

4. 熟练掌握session的概念和运用

5. 掌握下列技巧

a) 图片的管理

b) 上传组件的运用

开始开发

首先搭建环境

先引入需要的类库，建立数据库表

建立数据库连接的封装类(辅助类)com.bjsxt.shopping.util à DB.java

不用连接池DB写成单例模式，或者不用都不大，这里不用单例模式写这个类

package com.bjsxt.shopping.util; import java.sql.*; publicclass DB { static { try { Class.forName("com.mysql.jdbc.Driver"); } catch (ClassNotFoundException e) { e.printStackTrace(); } } privatestatic Connection getConn() { Connection conn = null; try { conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/mydata?user=root&password=root"); } catch (SQLException e) { e.printStackTrace(); } return conn; } privatestatic Statement getStmt(Connection conn) { Statement stmt = null; try { stmt = conn.createStatement(); } catch (SQLException e) { e.printStackTrace(); } return stmt; } privatestatic PreparedStatement getPStmt(Connection conn, String sql) { PreparedStatement pStmt = null; try { pStmt = conn.prepareStatement(sql); } catch (SQLException e) { e.printStackTrace(); } return pStmt; } privatestatic ResultSet executeQuery(Statement stmt, String sql) { ResultSet rs = null; try { rs = stmt.executeQuery(sql); } catch (SQLException e) { e.printStackTrace(); } return rs; } privatevoid closeConn(Connection conn) { if(conn!=null) { try { conn.close(); } catch (SQLException e) { e.printStackTrace(); } conn = null; } } privatevoid closeStmt(Statement stmt) { if(stmt!=null) { try { stmt.close(); } catch (SQLException e) { e.printStackTrace(); } stmt = null; } } privatevoid closePStmt(Statement pStmt) { if(pStmt != null) { try { pStmt.close(); } catch (SQLException e) { e.printStackTrace(); } pStmt = null; } } privatevoid closeRs(ResultSet rs) { if(rs != null) { try { rs.close(); } catch (SQLException e) { e.printStackTrace(); } rs = null; } } }

关于分层的一个特别重要的原则：不能越层访问！

首先写一个User的一个JavaBean，一般情况下实体类是和数据库表里的字段是一一对应的

User.java

package com.bjsxt.shopping; import java.util.*; publicclassUser { privateintid; private String username; private String password; private String phone; private String addr; private Date rdate; public String getAddr() { returnaddr; } publicvoid setAddr(String addr) { this.addr = addr; } publicint getId() { returnid; } publicvoid setId(int id) { this.id = id; } public String getPassword() { returnpassword; } publicvoid setPassword(String password) { this.password = password; } public String getPhone() { returnphone; } publicvoid setPhone(String phone) { this.phone = phone; } public Date getRdate() { returnrdate; } publicvoid setRdate(Date rdate) { this.rdate = rdate; } public String getUsername() { returnusername; } publicvoid setUsername(String username) { this.username = username; } }

Shopping.sql

--数据库命名全部小写 createdatabase shopping; use shopping; createtableuser ( id int primarykey auto_increment, username varchar(40), password varchar(16), phone varchar(40), addr varchar(255), rdate datetime ); createtable category ( id int primarykey auto_increment, name varchar(255), descr varchar(255), pid int, isleaf int, #0表示leaf 1表示非leaf grade int ); createtable product ( id int primarykey auto_increment, name varchar(255), descr varchar(255), normalprice double, memberprice double, pdate datetime, categoryid int references catetory(id) ); createtable salesorder ( id int primarykey auto_increment, userid int, addr varchar(255), odate datetime, status int ); createtable salesitem ( id int primarykey auto_increment, productid int, unipirce double, pcount int, orderid int );

用户注册页面的名字：register.jsp

创建register.jsp页面

设置页面编码问题：在此页面点右键àPreferencesàEncodingà“Chinese, NationalStantard”

默认是 “ISOLatin-1”

三种中文编码的区别：GB18030 > GBK > GB2312

用原来讲javascript中的表单作为原形：把原来的文件和它的.js文件copy到register.jsp中去

连接服务器浏览一下

之后修改显示格式

1. 首先action改一下action="register.jsp"提交到自身这个页面，如果提交到自身的话这个页面就有连个入口，一个入口是à 点链接链接过来，

还有一个入口是à我们点“提交”把数据提交过去，要区分是链接过来还是提交过来的办法是什么？à多一个hidden字段

提交的页面写完了，请保存到数据库里面去，

<input type="hidden" name="action" value="register"/>

<% request.setCharacterEncoding("GB18030"); String action = request.getParameter("action"); if(action != null&& action.equals("register")) { String username = request.getParameter("username"); String password = request.getParameter("password"); //密码确认应该在后台检查一下 String phone = request.getParameter("phone"); String addr = request.getParameter("addr"); User user = new User(); user.setUsername(username); user.setPassword(password); user.setPhone(phone); user.setAddr(addr); user.setRdate(new Date()); user.save(); %> <center><h1>RegisterOK!! Thank you !</h1></center> <% return; } %>

User.java中加入save()方法

publicvoid save() { Connection conn = DB.getConn(); String sql = "insert into user values(null, ?, ?, ?, ?, ?)"; PreparedStatement pstmt = DB.getPStmt(conn, sql); try { pstmt.setString(1, username); pstmt.setString(2, password); pstmt.setString(3, phone); pstmt.setString(4, addr); pstmt.setTimestamp(5, new Timestamp(rdate.getTime())); pstmt.executeUpdate(); } catch (SQLException e) { e.printStackTrace(); } }

下面考虑后台管理员的操作，后台管理员应该能看到前台登录的操作，前台和后台是互动的，我注册了，你能看见，我删了你，你前台就用不了了

建立一个后台目录admin把后台的文件都放到这个目录里，把后台框(在javascript中学到的后台框架)架引入到里面，把原来首页AdminIndex.html的名字改成index.html，修改用户列表页面。

新建一个userlist.jsp页面用于显示，拿出所有的用户来这样的方法是写在页面里面还是写在业务逻辑类里面

有两种写法一个是写一个UserManager.java类，用来管理User.java类，

第二种写法是直接写在User.java类里面