模仿天猫实战【SSM版】——项目起步
前言:现在自己的学习似乎遇到了瓶颈,感觉学习了 SSM 之后有一些迷茫,不知道接下来该往哪里去努力了,我觉得这是个很不好的状态,为了度过这段时期,我准备把天猫模仿下来(给自己找点事做)之后开始去巩固 Java 的基础知识,也准备好暑假去找实习。
第一步:需求分析
首先要确定要实现哪些功能,需要对需求进行完整的分析,才能在编写项目的时候有条不紊,我们的目的很明确:就是模仿天猫前端 + 自己实现后端。并且尽最大努力去降低这个项目的复杂度(毕竟高深的东西不懂)。
前端需求分析
规定:全天猫没有店铺,就只有唯一一家叫做 Tmall 的商家,卖所有的东西。
- 1.数据的显示:
首页数据显示分析:
首先是搜索栏下方的九个商品,需要从数据库中取出销量最高的几个产品,关于标红的关键字,是要满足一定条件的,比如:这一个星期内销量超过多少...
接着是分类导航栏,首先是商品分类右边固定的两个链接【天猫超市】和【天猫国际】,还有紧跟着的八个超链,这个可以设计为一个单表,存储它显示的文字和链接过去的地址,然后是具体的 16 个分类以及轮播:
下面的具体产品展示比较复杂,我们可以自己做一下简化,比如就展示几个产品比较多的固定的几个分类就好了,其他的就直接舍弃:
- 总结: 总之就是需要显示各种数据库中的数据
- 2.登录/注册页
需要有一个登录/注册页,能够完成用户的登录和注册功能,并能提供基础的例如判断空值等功能。
- 3.产品搜索页
左上角的图标我们可以统一简化成 Tmall 的图片,商品图片,我们可以整个大分类使用一张图,主要就是实现排序功能还有搜索功能
- 4.产品展示页
天猫原生的产品展示页有些复杂,我们可以自己简化一下,就不要选这么多东西,都是一口价,
另外下方规格参数和评价都不能省略:
- 5.购物车/购买页面
第二步:表结构设计
根据对于前端的分析,数据库有了一些眉目,为了简化项目的难度,所以我们需要自己想点办法,先来构思一下大概需要一些什么样的表:
我大概就想出来需要用到这些表,我们一个一个来创建它们:
表一:分类表
首先我们需要一个表来存储我们的分类信息,也就是【女装/内衣】、【男装/运动户外】在内的 16 个分类,为了高度一致,这 16 个分类不能多也不能少。
为了简化任务,可以观察出,【热门手机】、【特色手机】分栏下的东西都是【手机/数码/电脑办公】类别里的东西,所以我们直接砍掉,右边的一些图片超链也给直接砍掉,我们规定每一行显示的产品数目就可以了,这样就简单多了。
CREATE TABLE category (
id int(11) NOT NULL AUTO_INCREMENT COMMENT '唯一索引id',
name varchar(255) NOT NULL COMMENT '分类的名字',
PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
表二:商品分类右边的超链表
即在【天猫国际】右边的 8 个超链,我们单独新建一个表来存储超链显示的文字和链接的地址,这样就可以任意的修改其内容:
百度翻译【推荐链接】翻译为【Referral links】,那我们也这么给我们的表命名好了:
CREATE TABLE referal_link (
id int(11) NOT NULL AUTO_INCREMENT COMMENT '唯一索引id',
text varchar(255) NOT NULL COMMENT '超链显示的文字',
link varchar(255) NOT NULL COMMENT '超链的地址',
PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
表三:产品表
每个分类下都要一定的产品,这些产品还有自己的一些属性,所以另外需要属性表,这个表另外创建,我们先来观察一下一个产品表需要一些什么东西:
- 用于展示的 5 张图片
- 产品名称
- 小标题(即名称下面一排标红的小字)
- 价格(就一口价,没别的)
- 销量(别月销量了,能简化就简化一下)
- 累计评价(还需要设计一个评价表)
- 库存
- 属性(需要关联另外的属性表)
CREATE TABLE product (
id int(11) NOT NULL AUTO_INCREMENT COMMENT '唯一索引id',
name varchar(255) NOT NULL COMMENT '产品的名称',
sub_title varchar(255) DEFAULT NULL COMMENT '小标题',
price float DEFAULT NULL COMMENT '价格',
sale int(11) DEFAULT NULL COMMENT '销量',
stock int(11) DEFAULT NULL COMMENT '库存',
category_id int(11) DEFAULT NULL COMMENT '对应的分类id',
PRIMARY KEY (id),
CONSTRAINT fk_product_category FOREIGN KEY (category_id) REFERENCES category (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
- 注意: 其中产品图片,累计评价,属性都作为单独的表存在并让当前表的 id 作为外键
表四:属性表
去掉详细的规格参数划分,其实属性也就是一个名字而已(简化简化简化)。
CREATE TABLE property (
id int(11) NOT NULL AUTO_INCREMENT COMMENT '唯一索引id',
name varchar(255) DEFAULT NULL COMMENT '属性名称',
product_id int(11) NOT NULL COMMENT '对应的产品id',
PRIMARY KEY (id),
CONSTRAINT fk_property_product FOREIGN KEY (product_id) REFERENCES product(id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
- 突然想到的问题:
每一个产品的属性其实是很多的,如果每一个产品都对应很多属性的话,对于天猫这样的数据量来说,应该会让数据库爆炸的吧...- 改进方法:
将属性表关联到 category 表上,因为其实每一个分类下的产品的属性差不多!
修改数据库
根据以上问题,修改一下数据库表之间的关系
并将属性表的外键修改为 category 的主键:
CREATE TABLE property (
id int(11) NOT NULL AUTO_INCREMENT COMMENT '唯一索引id',
name varchar(255) DEFAULT NULL COMMENT '属性名称',
category_id int(11) NOT NULL COMMENT '对应的分类id',
PRIMARY KEY (id),
CONSTRAINT fk_property_category FOREIGN KEY (category_id) REFERENCES category(id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
表五:属性值表
其中就是保存了对应属性的值,并且应该有两个外键,一个指向 Property 表,而另一个则指向 Product 表
CREATE TABLE property_value (
id int(11) NOT NULL AUTO_INCREMENT COMMENT '唯一索引id',
product_id int(11) NOT NULL COMMENT '对应产品id',
properti_id int(11) NOT NULL COMMENT '对应属性id',
value varchar(255) DEFAULT NULL COMMENT '具体的属性值',
PRIMARY KEY (id),
CONSTRAINT fk_property_value_property FOREIGN KEY (properti_id) REFERENCES property (id),
CONSTRAINT fk_property_value_product FOREIGN KEY (product_id) REFERENCES product (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
表六:产品图片表
这个表名义上是保存了产品的图片,其实只是保存了产品图片的位置即图片名称,我们可以规定所有的产品图片都放在一个统一的文件夹下面,然后通过 id 来获取对应名称的图片:
CREATE TABLE product_image (
id int(11) NOT NULL AUTO_INCREMENT COMMENT '唯一索引id',
product_id int(11) DEFAULT NULL COMMENT '对应的产品id',
PRIMARY KEY (id),
CONSTRAINT fk_product_image_product FOREIGN KEY (product_id) REFERENCES product (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
- 注意: 我们通过把产品图片的文件命名为 id.jpg ,然后通过相对路径来获取到产品图片
表七:用户表
用户表很简单,也没有权限之类的东西:
CREATE TABLE user (
id int(11) NOT NULL AUTO_INCREMENT COMMENT '唯一索引id',
name varchar(255) NOT NULL COMMENT '用户名称',
password varchar(255) NOT NULL COMMENT '用户密码',
PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
- 我们或许会在之后把密码弄成 “*********” 这种形式的,但是现在一切为了简单!
表八:评价表
评价表对应了用户和产品两个表,也比较简单,我们为了简单,把上面红色的部分全部砍掉,因为没有商家,所以也不需要回复用户的评价,都砍掉砍掉!
CREATE TABLE review (
id int(11) NOT NULL AUTO_INCREMENT COMMENT '唯一索引id',
content varchar(4000) DEFAULT NULL COMMENT '评价内容',
user_id int(11) NOT NULL COMMENT '对应的用户id',
product_id int(11) NOT NULL COMMENT '对应的产品id',
createDate datetime DEFAULT NULL COMMENT '评价时间',
PRIMARY KEY (id),
CONSTRAINT fk_review_product FOREIGN KEY (product_id) REFERENCES product (id),
CONSTRAINT fk_review_user FOREIGN KEY (user_id) REFERENCES user (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
表九:订单表
由于 Order 是 MySql 的一个关键字,所以我们在订单表的最后添加一个下划线:
CREATE TABLE order_ (
id int(11) NOT NULL AUTO_INCREMENT COMMENT '唯一索引id',
order_code varchar(255) NOT NULL COMMENT '订单号',
address varchar(255) NOT NULL COMMENT '收货地址',
post varchar(255) NOT NULL COMMENT '邮编',
receiver varchar(255) NOT NULL COMMENT '收货人姓名',
mobile varchar(255) NOT NULL COMMENT '手机号码',
user_message varchar(255) NOT NULL COMMENT '用户备注的信息',
create_date datetime NOT NULL COMMENT '订单创建时间',
pay_date datetime DEFAULT NULL COMMENT '订单支付时间',
delivery_date datetime DEFAULT NULL COMMENT '发货日期',
confirm_date datetime DEFAULT NULL COMMENT '确认收货日期',
user_id int(11) DEFAULT NULL COMMENT '对应的用户id',
status varchar(255) NOT NULL COMMENT '订单状态',
PRIMARY KEY (id),
CONSTRAINT fk_order_user FOREIGN KEY (user_id) REFERENCES user (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
表十:订单项表
一个订单里面可能有多个订单项,一个产品也可能对应多个订单项,所以这个表应该有两个外键:
CREATE TABLE order_item (
id int(11) NOT NULL AUTO_INCREMENT COMMENT '唯一索引id',
product_id int(11) NOT NULL COMMENT '对应产品id',
order_id int(11) NOT NULL COMMENT '对应订单id',
number int(11) DEFAULT NULL COMMENT '对应产品购买的数量',
PRIMARY KEY (id) COMMENT '邮编',
CONSTRAINT fk_order_item_product FOREIGN KEY (product_id) REFERENCES product (id),
CONSTRAINT fk_order_item_order FOREIGN KEY (order_id) REFERENCES order_ (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
汇总:
我们在创建表之前,应该创建一个新的数据库,并命名为【tmall_ssm】
DROP DATABASE IF EXISTS tmall_ssm;
CREATE DATABASE tmall_ssm DEFAULT CHARACTER SET utf8;
将这十个表汇个总就是:
DROP DATABASE IF EXISTS tmall_ssm;
CREATE DATABASE tmall_ssm DEFAULT CHARACTER SET utf8;
use tmall_ssm;
CREATE TABLE category (
id int(11) NOT NULL AUTO_INCREMENT COMMENT '唯一索引id',
name varchar(255) NOT NULL COMMENT '分类的名字',
PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
CREATE TABLE referal_link (
id int(11) NOT NULL AUTO_INCREMENT COMMENT '唯一索引id',
text varchar(255) NOT NULL COMMENT '超链显示的文字',
link varchar(255) NOT NULL COMMENT '超链的地址',
PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
CREATE TABLE product (
id int(11) NOT NULL AUTO_INCREMENT COMMENT '唯一索引id',
name varchar(255) NOT NULL COMMENT '产品的名称',
sub_title varchar(255) DEFAULT NULL COMMENT '小标题',
price float DEFAULT NULL COMMENT '价格',
sale int(11) DEFAULT NULL COMMENT '销量',
stock int(11) DEFAULT NULL COMMENT '库存',
category_id int(11) DEFAULT NULL COMMENT '对应的分类id',
PRIMARY KEY (id),
CONSTRAINT fk_product_category FOREIGN KEY (category_id) REFERENCES category (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
CREATE TABLE property (
id int(11) NOT NULL AUTO_INCREMENT COMMENT '唯一索引id',
name varchar(255) DEFAULT NULL COMMENT '属性名称',
category_id int(11) NOT NULL COMMENT '对应的分类id',
PRIMARY KEY (id),
CONSTRAINT fk_property_category FOREIGN KEY (category_id) REFERENCES category(id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
CREATE TABLE property_value (
id int(11) NOT NULL AUTO_INCREMENT COMMENT '唯一索引id',
product_id int(11) NOT NULL COMMENT '对应产品id',
properti_id int(11) NOT NULL COMMENT '对应属性id',
value varchar(255) DEFAULT NULL COMMENT '具体的属性值',
PRIMARY KEY (id),
CONSTRAINT fk_property_value_property FOREIGN KEY (properti_id) REFERENCES property (id),
CONSTRAINT fk_property_value_product FOREIGN KEY (product_id) REFERENCES product (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
CREATE TABLE product_image (
id int(11) NOT NULL AUTO_INCREMENT COMMENT '唯一索引id',
product_id int(11) DEFAULT NULL COMMENT '对应的产品id',
PRIMARY KEY (id),
CONSTRAINT fk_product_image_product FOREIGN KEY (product_id) REFERENCES product (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
CREATE TABLE user (
id int(11) NOT NULL AUTO_INCREMENT COMMENT '唯一索引id',
name varchar(255) NOT NULL COMMENT '用户名称',
password varchar(255) NOT NULL COMMENT '用户密码',
PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
CREATE TABLE review (
id int(11) NOT NULL AUTO_INCREMENT COMMENT '唯一索引id',
content varchar(4000) DEFAULT NULL COMMENT '评价内容',
user_id int(11) NOT NULL COMMENT '对应的用户id',
product_id int(11) NOT NULL COMMENT '对应的产品id',
createDate datetime DEFAULT NULL COMMENT '评价时间',
PRIMARY KEY (id),
CONSTRAINT fk_review_product FOREIGN KEY (product_id) REFERENCES product (id),
CONSTRAINT fk_review_user FOREIGN KEY (user_id) REFERENCES user (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
CREATE TABLE order_ (
id int(11) NOT NULL AUTO_INCREMENT COMMENT '唯一索引id',
order_code varchar(255) NOT NULL COMMENT '订单号',
address varchar(255) NOT NULL COMMENT '收货地址',
post varchar(255) NOT NULL COMMENT '邮编',
receiver varchar(255) NOT NULL COMMENT '收货人姓名',
mobile varchar(255) NOT NULL COMMENT '手机号码',
user_message varchar(255) NOT NULL COMMENT '用户备注的信息',
create_date datetime NOT NULL COMMENT '订单创建时间',
pay_date datetime DEFAULT NULL COMMENT '订单支付时间',
delivery_date datetime DEFAULT NULL COMMENT '发货日期',
confirm_date datetime DEFAULT NULL COMMENT '确认收货日期',
user_id int(11) DEFAULT NULL COMMENT '对应的用户id',
status varchar(255) NOT NULL COMMENT '订单状态',
PRIMARY KEY (id),
CONSTRAINT fk_order_user FOREIGN KEY (user_id) REFERENCES user (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
CREATE TABLE order_item (
id int(11) NOT NULL AUTO_INCREMENT COMMENT '唯一索引id',
product_id int(11) NOT NULL COMMENT '对应产品id',
order_id int(11) NOT NULL COMMENT '对应订单id',
number int(11) DEFAULT NULL COMMENT '对应产品购买的数量',
PRIMARY KEY (id) COMMENT '邮编',
CONSTRAINT fk_order_item_product FOREIGN KEY (product_id) REFERENCES product (id),
CONSTRAINT fk_order_item_order FOREIGN KEY (order_id) REFERENCES order_ (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
直接复制进 MySql 中执行,就能看到我们创建好的十个数据库:
第三步:创建 SSM 开发环境
根据之前我写过的博文:IDEA 整合 SSM 搭建好 SSM 开发环境,这里给出完整的项目结构和 pom.xml 文件:
- 完整的项目结构:
- pom.xml 文件:
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
<modelVersion>4.0.0</modelVersion>
<packaging>war</packaging>
<name>wmyskxz</name>
<groupId>cn.wmyskxz</groupId>
<artifactId>wmyskxz</artifactId>
<version>1.0-SNAPSHOT</version>
<build>
<plugins>
<plugin>
<groupId>org.mortbay.jetty</groupId>
<artifactId>maven-jetty-plugin</artifactId>
<version>6.1.7</version>
<configuration>
<connectors>
<connector implementation="org.mortbay.jetty.nio.SelectChannelConnector">
<port>8888</port>
<maxIdleTime>30000</maxIdleTime>
</connector>
</connectors>
<webAppSourceDirectory>${project.build.directory}/${pom.artifactId}-${pom.version}
</webAppSourceDirectory>
<contextPath>/</contextPath>
</configuration>
</plugin>
</plugins>
</build>
<properties>
<!-- 设置项目编码编码 -->
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
<!-- spring版本号 -->
<spring.version>4.3.5.RELEASE</spring.version>
<!-- mybatis版本号 -->
<mybatis.version>3.4.1</mybatis.version>
</properties>
<dependencies>
<!-- pageHelper -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>5.1.2-beta</version>
</dependency>
<!--jsqlparser-->
<dependency>
<groupId>com.github.jsqlparser</groupId>
<artifactId>jsqlparser</artifactId>
<version>1.0</version>
</dependency>
<!-- jstl标签 -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
<dependency>
<groupId>org.apache.taglibs</groupId>
<artifactId>taglibs-standard-impl</artifactId>
<version>1.2.5</version>
</dependency>
<!-- java ee -->
<dependency>
<groupId>javax</groupId>
<artifactId>javaee-api</artifactId>
<version>7.0</version>
</dependency>
<!-- 单元测试 -->
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.12</version>
</dependency>
<!-- 实现slf4j接口并整合 -->
<dependency>
<groupId>ch.qos.logback</groupId>
<artifactId>logback-classic</artifactId>
<version>1.2.2</version>
</dependency>
<!-- JSON -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<