# mimall

**Repository Path**: shigen/mimall

## Basic Information

- **Project Name**: mimall
- **Description**: Spring + Spring MVC + MyBatis3小米商城项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-04-26
- **Last Updated**: 2022-06-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 项目名

**Spring + Spring MVC + MyBatis3****小米商城项目**

### 成员及分工

| 昵称 | 任务                                                         | 开发工具                                              | 进度      |
| ---- | ------------------------------------------------------------ | ----------------------------------------------------- | --------- |
| gen  | 需求分析、页面数据的来源、后端代码编写、逻辑控制、提供页面数据、页面测试、项目总的进度安排 | navicat、Chrome、sublineText、eclipse、pyCharm、 AJAX | 4.12-4.18 |
| zzx  | 数据库设计、接口的编写和测试                                 | myBatis SQL IDEA                                      | 3.23-4.12 |
| wjp  | 前端页面的编写                                               | HTML5 CSS3 JavaScript jQuery AJAX                     | 4.18-4.23 |

### 技术及开发工具

![](https://gitee.com/shigen/mimall/raw/master/imgs/tools.png)

### 页面功能展示

#### 登录

带有输入数据的验证（jQuery实现）

![](https://gitee.com/shigen/mimall/raw/master/imgs/login.png)

输入合法的数据才会向服务器提交数据

![](https://gitee.com/shigen/mimall/raw/master/imgs/login_1.png)

#### 首页

按照分类展示全部的商品，AJAX动态向后台请求数据，其中图片是依赖于小米商城服务器

![](https://gitee.com/shigen/mimall/raw/master/imgs/goodsList.png)

#### 关于我们

展示我们团队成员的图片以及项目中的职责、性格特点、兴趣爱好等

![](https://gitee.com/shigen/mimall/raw/master/imgs/aboutUs.png)

#### 商品详情页

点击商品列表的版块即可跳转到相应的商品详情页，下图是添加到购物车，使用的是session，添加的方式是通过AJAX向后台递交商品的pid

![](https://gitee.com/shigen/mimall/raw/master/imgs/detail.png)

可以点击喜欢，此时按钮的背景色改变，同时喜欢的人数+1，后台数据表同步+1

![](https://gitee.com/shigen/mimall/raw/master/imgs/deatail_like.png)

进入商品的详情页传递的数据是pid,如果用户自己在地址栏输入pid且在数据库中不存在，跳转到相应的错误页面

![](https://gitee.com/shigen/mimall/raw/master/imgs/donotexist.png)

#### 我的购物车

响应式表格展示数据，下方的合计通过jQuery实现

![](https://gitee.com/shigen/mimall/raw/master/imgs/shoppingCart.png)

删除之后，购物车为空，跳转到相应的提示页面

![](https://gitee.com/shigen/mimall/raw/master/imgs/shoppingCart_empty.png)

#### 我的主页

由于没有找到好的页面设计灵感，只能先粗略的设计一下页面的布局

上部分是用户的信息；下部分是用户登陆的日志：包括ip地址，登陆的时间和时长（都是通过session存储，用户点击注销的时候将信息提交到数据库）

![](https://gitee.com/shigen/mimall/raw/master/imgs/userpage.png)

更新个人信息，同样用到jQuery对输入的数据进行验证；数据都验证成功之后，通过JAX向后台递交一个新的User对象，实现用户信息的更新

![](https://gitee.com/shigen/mimall/raw/master/imgs/updateinfo.png)

#### 注销登录

注销后跳转到首页，跳转之前先将本次的登入系统的时间、时长、IP存到数据库，然后销毁session

![](https://gitee.com/shigen/mimall/raw/master/imgs/loginout.png)

### 项目答辩

![](https://gitee.com/shigen/mimall/raw/master/imgs/幻灯片1.JPG)

![幻灯片2](https://gitee.com/shigen/mimall/raw/master/imgs/幻灯片2.JPG)

![幻灯片3](https://gitee.com/shigen/mimall/raw/master/imgs/幻灯片3.JPG)

![幻灯片4](https://gitee.com/shigen/mimall/raw/master/imgs/幻灯片4.JPG)

![幻灯片5](https://gitee.com/shigen/mimall/raw/master/imgs/幻灯片5.JPG)

![幻灯片6](https://gitee.com/shigen/mimall/raw/master/imgs/幻灯片6.JPG)

![幻灯片7](https://gitee.com/shigen/mimall/raw/master/imgs/幻灯片7.JPG)

![幻灯片8](https://gitee.com/shigen/mimall/raw/master/imgs/幻灯片8.JPG)

![幻灯片9](https://gitee.com/shigen/mimall/raw/master/imgs/幻灯片9.JPG)

![幻灯片10](https://gitee.com/shigen/mimall/raw/master/imgs/幻灯片10.JPG)

![幻灯片11](https://gitee.com/shigen/mimall/raw/master/imgs/幻灯片11.JPG)

![幻灯片12](https://gitee.com/shigen/mimall/raw/master/imgs/幻灯片12.JPG)

![幻灯片13](https://gitee.com/shigen/mimall/raw/master/imgs/幻灯片13.JPG)

![幻灯片14](https://gitee.com/shigen/mimall/raw/master/imgs/幻灯片14.JPG)

![幻灯片15](https://gitee.com/shigen/mimall/raw/master/imgs/幻灯片15.JPG)

![幻灯片16](https://gitee.com/shigen/mimall/raw/master/imgs/幻灯片16.JPG)

![幻灯片17](https://gitee.com/shigen/mimall/raw/master/imgs/幻灯片17.JPG)

![幻灯片18](https://gitee.com/shigen/mimall/raw/master/imgs/幻灯片18.JPG)