# WebShop

**Repository Path**: tifacloud/WebShop

## Basic Information

- **Project Name**: WebShop
- **Description**: 燕山大学在线商城课程设计
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-06-24
- **Last Updated**: 2024-02-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 目录

- [数据库设计](#数据库)
- [登录模块](#登录功能)
  - [Ajaix](#ajaix)
  - [验证是否存在](#注册时验证用户名是否存在)
  - [修改密码](#用户修改密码)
- [地址管理](#地址管理模块)
  - [显示地址](#显式用户所有的地址)
  - [删除地址](#删除指定地址)
  - [新增地址](#新增地址)
  - [修改地址](修改地址)
- [商品模块](#商品模块)
  - [子类商品](#子类商品)
  - [热销商品](#热销商品)
  - [搜索商品](#搜索商品)
  - [商品详情](#商品详情)
  - [子图](#子图)
# WebShop

### 介绍

------

本项目为燕山大学课程设计--JavaWeb网上商城。


### 目标：
* 支付页面
* 分页功能，iframe
* 购物车模块
* 商品详情页种类的划分。
* 搜索功能



### 开发指南

------

#### 数据库

------

**用户表 consumer**

|    ID    |   int   | 表的ID |
| :------: | :-----: | :----: |
|   name   | varchar |  姓名  |
| password | varchar |  密码  |
|  phone   | varchar |  电话  |
|   mail   | varchar |  邮箱  |
|   sex    |   int   |  性别  |

**地址表 address**

|    ID     |   int   |  表ID  |
| :-------: | :-----: | :----: |
|   user    | varchar | 用户名 |
|  address  | varchar |  地址  |
|   phone   | varchar |  电话  |
| addressee | varchar | 收货人 |

**商品表 goods**

|      ID      |   int   |  表ID（商品ID）  |
| :----------: | :-----: | :--------------: |
| productName  | varchar |     商品名称     |
|    isHot     | varchar | 是否热销，0否1是 |
|    owner     | varchar |     商家是谁     |
| setAttribute | varchar |     属性集合     |
|   mainPic    | varchar |       主图       |
|    state     |   int   | 上架状态，0下1上 |
|  createTime  | varchar |     创建时间     |
|   category   |   int   |       类别       |

**商品详情表goods_attr	** 

|    ID     |   int   |  表ID  |
| :-------: | :-----: | :----: |
| ProductID |   int   | 商品ID |
| color | varchar | 颜色 |
| size | varchar | 大小 |
| oldPrice  | decimal |  原价  |
| newPrice  | decimal |  现价  |
|   stock   |   int   |  库存  |

**大属性表 admin_attr**

|    ID     |   int   |        表ID        |
| :-------: | :-----: | :----------------: |
| Attribute | varchar | 属性（颜色，尺寸） |

**小属性表 detail_admin_attr**

| ID       | int     | 表ID           |
| -------- | ------- | -------------- |
| AttrID   | int     | 大属性表的ID   |
| AttrName | varchar | 属性名（红色） |

**类别表 category**

|  CID  |   int   |   主ID   |
| :---: | :-----: | :------: |
| Cname | varchar | 类别名称 |
|  pid  |   int   | 父类别ID |

**订单表 order**

|     ID     |   int   |    表ID    |
| :--------: | :-----: | :--------: |
|  orderID   | varchar |   订单ID   |
|  userName  | varchar | 下单用户名 |
| creattime  | varchar |  创建时间  |
| addressee  | varchar |   收件人   |
|  address   | varchar |    地址    |
|   phone    | varchar |    电话    |
| totalprice | decimal |    总价    |
|   state    |   int   |  订单状态  |

**订单单元表 detail_order** 

|       ID       |   int   |   表ID   |
| :------------: | :-----: | :------: |
|    orderID     |   int   | 主订单ID |
|   goodsName    |   int   |  商品名  |
| goodsAttribute | varchar | 商品属性 |
|   onlyPrice    | decimal |   单价   |
|    goodsNum    |   int   |   数量   |
|    sumPrice    | decimal |   总价   |

**收藏表 favourite**

|    ID     |   int   |   表ID   |
| :-------: | :-----: | :------: |
| username  | varchar |  用户名  |
|  goodsID  |   int   | 商品 ID  |
| goods_pic | varchar | 商品主图 |

**图片表 picture**

|     ID      |   int   |       表ID       |
| :---------: | :-----: | :--------------: |
|    path     | varchar |       路径       |
|   goodsID   |   int   |      商品ID      |
|   isMain    |   int   | 是否主图，0否1是 |
| goodsAttrID |   int   |    商品属性ID    |

**购物车表 shopcar**(设计的可能有问题)

|     ID      |   int   |    表ID    |
| :---------: | :-----: | :--------: |
|  userName   | varchar |   用户名   |
|  goodsName  | varchar |   货物名   |
|    nums     |   int   |    数量    |
|     pic     | varchar |  主图路径  |
|    price    | decimal |    单价    |
| goodsAttrID |   int   | 货物属性ID |
|  goodsAttr  | varchar |  货物属性  |

------

### 登录功能

- 注册的表单action为 UserServlet ，注册需要有一个隐藏域。

```html
<input type=hidden,name="method",value="regist" />
```

同理，登录的 value 为 "login",其他不用变。

#### ajaix

后台的实现大多没有转化成支持Ajaix 的格式，但是如果前台的同学需要，后台可以提供支持。没有后台实现不了的东西。

**以用户登录后查看自己的信息为例** ，首先登录成功后跳转到查看信息页。在信息页内有：

```html
<input type="hidden" id="MyName" value="${name}" />
<input id="username" type="button" />
<span id="sapnnew"></span>

```

新建 js 文件

```javascript
$(function () {
    $('#username').click(function () {
        //注意下一句就是向后台传递 method 与 参数 方法。
        $.get(path+'/UserServlet',{method:"getInfo",name:$('#MyName').val()}, function (data) {
           $.each(data,function (i,n) //解析 Json 数组，这个数组里只有一个用户。
            {
               $('#sapnnew').text(n.phone);
           })
        },"json")
    })
})
```

当点击 button 时，span 会显示出 ${name}  对应的个人信息，这段代码中将信息显示在了 span 里面，具体开发中灵活调整。

回调的信息是 json 格式的，***项目的******后台统一返回 json 数组***，前端按照这种方法无需考虑数组的长度。

#### 注册时验证用户名是否存在

该功能需要前端运用 ajaix 进行判断。接口为 UserServlet 的 isHave 方法。需要携带的参数为 name，会返回 json 串，如果 code 为 1 ，说明该用户名已存在；为 2 说明用户名可以使用。

jsp

```html
<input id="username" type="text">
<span id="sapnnew"></span>
```

js

```javascript
$(function () {
    $('#username').change(function () {
        var username = $(this).val();
        $.get(path+'/UserServlet',{method:"isHave",name:username}, function (data) {
            ui = data.message;
            console.log(ui);
           $.each(data,function (i,n) {
               if(n.code==1)
               {
                   $('#sapnnew').text("用户名已存在");
               }else
               {
                   $('#sapnnew').text("可以注册");
               }

           })
        },"json")
    })
})
```

#### 获取用户姓名用户修改密码

- 用户修改密码分为两步走，首先通过邮箱和用户名获得用户是否存在的信息。

```html
<form method="post" action="UserServlet">
    <!--name,value不可更改，更改跟我说-->
    <input type="hidden" name="method" value="justifyEmail">
    <input type="text" name="name">
    <input type="text" name="email">
    <input type="submit" value="查找">
</form>
${emailPass}
```

- 如果账号存在且邮箱也没问题，那么 ${emailPass} 的值为"邮箱通过"，前端可以通过这个是否为空来判断。当为“邮箱通过” 时，还会返回用户的用户名，**使用 ${JustifyName} 接收**。
- 只有在验证通过的情况下，才可以进行密码修改操作。**注意：前端需要保证用户在修改密码时输入的用户名是之前判断时的用户名。**

```html
<form method="post" action="UserServlet">
    <!--name,value不可更改，更改跟我说-->
    <input type="hidden" name="method" value="changePassword">
    <input type="hidden" name="name" value="${JustifyName}">
    <input type="password" name="password">
    <input type="submit" value="查找">
</form>
```

### 地址管理模块

- 注意：本模块需要在用户登录状态下才能进行测试！

- 本模块所有功能需要用 ajaix 形式。

- action 全部为 AddressServlet

  #### 显式用户所有的地址

```javascript
 $.get(path+'/AddressServlet',{method:"show"}, function (data) {
           $.each(data,function (i,n)
            {
               $('#sapnnew').text(n.address);
           })
        },"json")
```

#### 删除指定地址

```
method = delete
ID = 删除的ID
```

#### 新增地址

```
method = insert
address= 地址
phone = 电话
addressee = 收件人
```

#### 修改地址

```
method = modify
ID = 修改的ID
address= 地址
phone = 电话
addressee = 收件人
```

### 商品模块

​	**如果没有特殊说明，返回的结果都是 request**

- #### 子类商品

  需要向后台传入种类名称。

  ```html
  <a href="${pageContext.request.contextPath}/GoodsServlet?method=subclass&categoryname=手机">测试链接</a><br/>
  ```

  ​	**头文件，下同**

  ```javascript
  <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  ```

  

  ​	**接收方式**

  ```javascript
  <c:forEach items="${SubProduct}" var="p">
      <ul>
          <li>${p.productName}</li>  //其余的属性可在数据库命名中找到。
      </ul>
  
  </c:forEach>
  ```
    
  

- #### 热销商品

  直接请求后台即可。

  ```html
  <a href="${pageContext.request.contextPath}/GoodsServlet?method=ishot">测试热销产品</a><br>
  ```


  ​	**接收代码**

  ```javascript
  <c:forEach items="${hotgoods}" var="p">
      <ul>
          <li>${p.productName}</li>
      </ul>
  
  </c:forEach>
  ```

- #### 搜索商品
    注意，搜索商品需要进行分页显示。每页的默认数量需要前端进行传输，同时还需要传输这是第几页。
    **href方式**使用
    ````html
    <a href="http://localhost:8080/WebShop/GoodsServlet?method=search&&ProductName=林&&perpage=5&&page=1">测试连接</a>
    ````
  ProductName 为搜索的文字，perpage 为每页显示的数量，page为这是第几页。
    后台会返回**goods** ，接收名为goods，具体的属性看数据库。
 - #### 商品详情
    当想进入商品详情界面时，需要注意要将商品(goods)的ID传到后台。例如
    ````html
    http://localhost:8080/WebShop/GoodsServlet?method=DetailProduct&ProductID=4&PID=3
     ````
     - method 方法为 DetailProduct
    
    - ProductID 为商品(goods)的ID
    
    - PID 为商品(goods)中的category **（我们修改了后台的实现，现在不需要传入这个PID了）**
    
    上面的这些ID都可以在商品信息中通过${}找到。
    
    商品父类返回值为father，对应数据库中的category
    
    商品详情返回值为goods_attr，对应goods_attr
    
    单个商品返回值为product，对应数据库中的goods（可以在这里面找到商品的名称）
    
    返回值使用举例
    ````html
           <c:forEach items="${goods_attr}" var="p">
               <span class="color-btn color-btn-biege">${p.size}</span>
            
                单个的子图 ${p.path}
           </c:forEach>
    ````    
    **商品的属性值需要大家共同思考,看有无更好的办法。**
    
    **商品的属性值需要大家共同思考,看有无更好的办法。**
    
    **商品的属性值需要大家共同思考,看有无更好的办法。**
    
 - #### 子图
 
    我们修改了goods的属性字段，无需动用数据库。
    
    思路 ：在每一个goods中，都存有一个List，里面有这个商品的所有子图信息。
    
    ````html
    <c:forEach items="${SubProduct}" var="p">
       <c:forEach items="${p.PicList}" var="m">
           每个子图是${m.path}<br/> 
       </c:forEach>
 
    </c:forEach>
    ```` 
    同理，在每一个商品的详细属性中，都有对应的图片，尽管数据库中没有，你也可以直接使用
    ````html
         <c:forEach items="${goods_attr}" var="p">
              <span class="color-btn color-btn-biege">${p.size}</span>
                    
                单个的子图 ${p.path}
            </c:forEach>
    ````